@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.
133 lines (131 loc) • 5.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _zod = require("zod");
var _tailwindMerge = require("tailwind-merge");
var _reactSlot = require("@radix-ui/react-slot");
var _react2 = require("@phosphor-icons/react");
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 CardSchema = _zod.z.object({
children: _zod.z.any(),
className: _zod.z.string().optional(),
variant: _zod.z.enum(['default', 'news', 'service', 'creative']).optional(),
size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
bordered: _zod.z.boolean().optional(),
glow: _zod.z.boolean().optional(),
asChild: _zod.z.boolean().optional(),
noRadius: _zod.z.boolean().optional()
});
const StackSchema = _zod.z.object({
children: _zod.z.any(),
className: _zod.z.string().optional(),
direction: _zod.z.enum(['horizontal', 'vertical', 'matrix']).optional(),
collapsed: _zod.z.boolean().optional(),
gap: _zod.z.number().optional(),
columns: _zod.z.number().optional()
});
const styles = {
base: 'transition-all duration-300 ease-in-out',
bordered: 'border border-primary-300 overflow-hidden',
glow: 'hover:shadow-xl hover:shadow-primary-500/30',
sizes: {
sm: {
padding: 'p-4',
gap: 'space-y-5',
icon: 'w-7 h-7',
title: 'text-h6',
rounded: 'rounded-lg'
},
base: {
padding: 'p-6',
gap: 'space-y-6',
icon: 'w-10 h-10',
title: 'text-h5',
rounded: 'rounded-xl'
},
lg: {
padding: 'p-7',
gap: 'space-y-7',
icon: 'w-14 h-14',
title: 'text-h4',
rounded: 'rounded-2xl'
}
},
variants: {
default: '',
news: 'group',
service: 'hover:bg-primary-50',
creative: 'relative after:absolute after:inset-0 after:w-full after:h-full after:bg-gradient-to-t after:from-primary-700 overflow-hidden'
}
};
const CardLink = /*#__PURE__*/_react.default.forwardRef(({
href,
children,
className,
...props
}, ref) => /*#__PURE__*/_react.default.createElement("a", _extends({
ref: ref,
href: href,
className: (0, _tailwindMerge.twMerge)('inline-flex items-center text-primary-600 hover:text-primary-800 font-medium', className)
}, props), children, /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
weight: "bold",
className: "ml-2 w-5 h-5 rtl:-scale-x-100"
})));
CardLink.displayName = 'CardLink';
const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
children,
className,
variant = 'default',
size = 'base',
bordered = false,
glow = false,
asChild = false,
noRadius = false,
...rest
} = CardSchema.parse(props);
const Comp = asChild ? _reactSlot.Slot : 'div';
const cardClasses = (0, _tailwindMerge.twMerge)(styles.base, !noRadius && styles.sizes[size].rounded, styles.variants[variant], bordered && styles.bordered, glow && styles.glow, variant !== 'creative' && styles.sizes[size].padding, variant !== 'news' && styles.sizes[size].gap, className);
return /*#__PURE__*/_react.default.createElement(Comp, _extends({
ref: ref,
className: cardClasses
}, rest), children);
});
Card.displayName = 'Card';
const Stack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
children,
className,
direction = 'horizontal',
collapsed = false,
gap = 4,
columns = 3,
...rest
} = StackSchema.parse(props);
const stackClasses = (0, _tailwindMerge.twMerge)('grid', direction === 'horizontal' && 'grid-flow-col auto-cols-fr', direction === 'vertical' && 'grid-flow-row', direction === 'matrix' && `grid-cols-${columns}`, !collapsed && `gap-${gap}`, className);
return /*#__PURE__*/_react.default.createElement("div", _extends({
ref: ref,
className: stackClasses
}, rest), _react.default.Children.map(children, (child, index) => {
if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
const isFirst = index === 0;
const isLast = index === _react.default.Children.count(children) - 1;
const isFirstRow = direction === 'matrix' && index < columns;
const isLastRow = direction === 'matrix' && index >= _react.default.Children.count(children) - columns;
const isFirstCol = direction === 'matrix' && index % columns === 0;
const isLastCol = direction === 'matrix' && (index + 1) % columns === 0;
return /*#__PURE__*/_react.default.cloneElement(child, {
className: (0, _tailwindMerge.twMerge)(child.props.className, collapsed && '-ml-[1px] -mt-[1px] rtl:-mr-[1px] rtl:-mb-[1px]', collapsed && 'rounded-none', collapsed && direction === 'horizontal' && [isFirst && 'rounded-l-xl ml-0 rtl:rounded-r-xl rtl:rounded-l-none', isLast && 'rounded-r-xl rtl:rounded-l-xl rtl:rounded-r-none'], collapsed && direction === 'vertical' && [isFirst && 'rounded-t-xl mt-0', isLast && 'rounded-b-xl'], collapsed && direction === 'matrix' && [isFirstRow && isFirstCol && 'rounded-tl-xl mt-0 ml-0', isFirstRow && isLastCol && 'rounded-tr-xl mt-0', isLastRow && isFirstCol && 'rounded-bl-xl ml-0', isLastRow && isLastCol && 'rounded-br-xl']),
bordered: true
});
}));
});
Stack.displayName = 'Stack';
// Export subcomponents
Card.Link = CardLink;
Card.Stack = Stack;
var _default = exports.default = Card;