@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
54 lines (53 loc) • 2.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactTooltip = require("@radix-ui/react-tooltip");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const TooltipSchema = _zod.z.object({
children: _zod.z.any(),
content: _zod.z.any(),
className: _zod.z.string().optional(),
side: _zod.z.enum(['top', 'right', 'bottom', 'left']).optional(),
align: _zod.z.enum(['start', 'center', 'end']).optional()
});
const Tooltip = ({
children,
content,
className,
side = 'top',
align = 'center',
...props
}) => {
try {
TooltipSchema.parse({
children,
content,
className,
side,
align
});
} catch (error) {
console.error('Tooltip validation error:', error);
return null;
}
return /*#__PURE__*/_react.default.createElement(_reactTooltip.Provider, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.Root, {
delayDuration: 200
}, /*#__PURE__*/_react.default.createElement(_reactTooltip.Trigger, {
asChild: true
}, /*#__PURE__*/_react.default.createElement("div", {
className: "inline-flex items-center gap-1"
}, children)), /*#__PURE__*/_react.default.createElement(_reactTooltip.Portal, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.Content, _extends({
side: side,
align: align,
className: (0, _tailwindMerge.twMerge)('z-50 rounded-md bg-gray-900 px-4 py-2 text-sm text-white shadow-md', 'animate-in fade-in-0 zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
}, props), content, /*#__PURE__*/_react.default.createElement(_reactTooltip.Arrow, {
className: "fill-gray-900"
})))));
};
var _default = exports.default = Tooltip;