@nlabs/gothamui 1.8.0

package/lib/components/Button/Button.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { useTranslation } from '../../i18n/index.js';
+import { getBackgroundClasses, getBorderClasses, getTextClasses } from '../../utils/colorUtils.js';
+import { renderWithAsChild } from '../ComponentUtils/renderWithAsChild.js';
+const getNormalizedVariant = (variant)=>{
+    if (variant === 'contained') return 'solid';
+    if (variant === 'outlined') return 'outline';
+    return variant;
+};
+export const Button = ({ as, asChild = false, backgroundColor, children, className, color = 'primary', disabled, hasNotification = false, hasShadow = false, icon, isLoading = false, label = '', labelColor, onClick = ()=>{}, ref, rounded = 0, size = 'md', style, type = 'button', variant = 'solid', ...props })=>{
+    const { t } = useTranslation();
+    const normalizedVariant = getNormalizedVariant(variant);
+    const resolvedBackgroundColor = backgroundColor ?? (normalizedVariant === 'solid' ? color : 'transparent');
+    const resolvedLabelColor = labelColor ?? (normalizedVariant === 'solid' ? 'white' : color);
+    const resolvedBorderColor = normalizedVariant === 'outline' ? resolvedLabelColor : resolvedBackgroundColor;
+    const classes = [
+        'disabled:pointer-events-none',
+        'disabled:opacity-50'
+    ];
+    if (variant) {
+        classes.push(...[
+            'cursor-pointer',
+            'flex',
+            'focus-visible:outline',
+            'focus-visible:outline-2',
+            'focus-visible:outline-offset-2',
+            'focus-visible:outline-secondary',
+            'items-center',
+            'justify-center',
+            'leading-6',
+            'relative',
+            'transition-colors',
+            'duration-300',
+            'ease-out'
+        ]);
+        switch(normalizedVariant){
+            case 'outline':
+                classes.push(getBackgroundClasses(resolvedBackgroundColor, {
+                    hasFocus: true,
+                    hasHover: resolvedBackgroundColor !== 'transparent'
+                }), 'border-1', 'font-semibold', getBorderClasses(resolvedBorderColor, {
+                    hasFocus: true,
+                    hasHover: true
+                }), getTextClasses(resolvedLabelColor, {
+                    hasFocus: true,
+                    hasHover: true
+                }));
+                break;
+            case 'text':
+                classes.push(getBackgroundClasses(resolvedBackgroundColor, {
+                    hasFocus: true,
+                    hasHover: resolvedBackgroundColor !== 'transparent'
+                }), 'font-semibold', getTextClasses(resolvedLabelColor, {
+                    hasFocus: true,
+                    hasHover: true
+                }));
+                break;
+            case 'solid':
+            default:
+                classes.push(getBackgroundClasses(resolvedBackgroundColor, {
+                    hasFocus: true,
+                    hasHover: true
+                }), getBorderClasses(resolvedBackgroundColor, {
+                    hasFocus: true,
+                    hasHover: true
+                }), 'font-medium', getTextClasses(resolvedLabelColor, {
+                    hasFocus: true,
+                    hasHover: resolvedLabelColor !== 'white'
+                }));
+                break;
+        }
+        if (hasShadow && variant !== 'text') {
+            classes.push('shadow-[0_0_12px_rgba(0,0,0,0.12)] dark:shadow-[0_0_12px_rgba(0,0,0,0.28)]');
+        }
+        switch(size){
+            case 'sm':
+                classes.push('px-4', 'py-0.5', 'text-sm');
+                break;
+            case 'lg':
+                classes.push('px-8', 'py-4', 'text-lg');
+                break;
+            case 'md':
+            default:
+                classes.push('px-6', 'py-2', 'text-md');
+        }
+    }
+    let buttonNotification = null;
+    if (hasNotification) {
+        buttonNotification = /*#__PURE__*/ _jsxs("span", {
+            className: "absolute top-0 right-0 -mt-1 -mr-1 flex size-3",
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: "relative inline-flex size-3 rounded-full bg-sky-500"
+                })
+            ]
+        });
+    }
+    const buttonContent = asChild ? children : /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            buttonNotification,
+            /*#__PURE__*/ _jsxs("span", {
+                className: cn('inline-flex items-center justify-center gap-2', isLoading && 'opacity-0'),
+                children: [
+                    icon,
+                    children ? children : t(label)
+                ]
+            }),
+            isLoading ? /*#__PURE__*/ _jsxs("svg", {
+                "aria-hidden": "true",
+                className: "absolute left-1/2 top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 animate-spin",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("circle", {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        className: "opacity-75",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                        fill: "currentColor"
+                    })
+                ]
+            }) : null
+        ]
+    });
+    return renderWithAsChild({
+        as: as ?? 'button',
+        asChild,
+        children: buttonContent,
+        className: cn(...classes, className),
+        'data-testid': `button-${label || children}`,
+        disabled: isLoading || disabled,
+        onClick,
+        ref,
+        style: {
+            ...style,
+            borderRadius: rounded
+        },
+        type,
+        ...props
+    }, {
+        'data-slot': 'button',
+        'data-variant': variant
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5cbmltcG9ydCB7dXNlVHJhbnNsYXRpb259IGZyb20gJy4uLy4uL2kxOG4vaW5kZXguanMnO1xuaW1wb3J0IHtnZXRCYWNrZ3JvdW5kQ2xhc3NlcywgZ2V0Qm9yZGVyQ2xhc3NlcywgZ2V0VGV4dENsYXNzZXN9IGZyb20gJy4uLy4uL3V0aWxzL2NvbG9yVXRpbHMuanMnO1xuaW1wb3J0IHtyZW5kZXJXaXRoQXNDaGlsZH0gZnJvbSAnLi4vQ29tcG9uZW50VXRpbHMvcmVuZGVyV2l0aEFzQ2hpbGQuanMnO1xuXG5pbXBvcnQgdHlwZSB7QnV0dG9uSFRNTEF0dHJpYnV0ZXMsIENTU1Byb3BlcnRpZXMsIEVsZW1lbnRUeXBlLCBSZWFjdE5vZGUsIFJlZn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUge0dvdGhhbUNvbG9yfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcbmltcG9ydCB0eXBlIHtHb3RoYW1TaXplfSBmcm9tICcuLi8uLi91dGlscy9zaXplVXRpbHMuanMnO1xuXG5leHBvcnQgdHlwZSBCdXR0b25UeXBlID0gJ2J1dHRvbicgfCAncmVzZXQnIHwgJ3N1Ym1pdCc7XG5leHBvcnQgdHlwZSBCdXR0b25WYXJpYW50ID0gJ3RleHQnIHwgJ3NvbGlkJyB8ICdvdXRsaW5lJyB8ICdjb250YWluZWQnIHwgJ291dGxpbmVkJztcblxuZXhwb3J0IGludGVyZmFjZSBCdXR0b25Qcm9wcyBleHRlbmRzIE9taXQ8QnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+LCAnY2hpbGRyZW4nIHwgJ2NvbG9yJyB8ICdvbkNsaWNrJyB8ICd0eXBlJz4ge1xuICByZWFkb25seSBhcz86IEVsZW1lbnRUeXBlO1xuICByZWFkb25seSBhc0NoaWxkPzogYm9vbGVhbjtcbiAgcmVhZG9ubHkgYmFja2dyb3VuZENvbG9yPzogR290aGFtQ29sb3I7XG4gIHJlYWRvbmx5IGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICByZWFkb25seSBjb2xvcj86IEdvdGhhbUNvbG9yO1xuICByZWFkb25seSBoYXNOb3RpZmljYXRpb24/OiBib29sZWFuO1xuICByZWFkb25seSBoYXNTaGFkb3c/OiBib29sZWFuO1xuICByZWFkb25seSBpY29uPzogUmVhY3ROb2RlO1xuICByZWFkb25seSBpc0xvYWRpbmc/OiBib29sZWFuO1xuICByZWFkb25seSBsYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgbGFiZWxDb2xvcj86IEdvdGhhbUNvbG9yO1xuICByZWFkb25seSBvbkNsaWNrPzogKGV2ZW50PzogdW5rbm93bikgPT4gdm9pZDtcbiAgcmVhZG9ubHkgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PjtcbiAgcmVhZG9ubHkgcm91bmRlZD86IG51bWJlcjtcbiAgcmVhZG9ubHkgc2l6ZT86IEdvdGhhbVNpemU7XG4gIHJlYWRvbmx5IHR5cGU/OiBCdXR0b25UeXBlO1xuICByZWFkb25seSB2YXJpYW50PzogQnV0dG9uVmFyaWFudDtcbn1cblxuY29uc3QgZ2V0Tm9ybWFsaXplZFZhcmlhbnQgPSAodmFyaWFudDogQnV0dG9uVmFyaWFudCk6ICd0ZXh0JyB8ICdzb2xpZCcgfCAnb3V0bGluZScgPT4ge1xuICBpZih2YXJpYW50ID09PSAnY29udGFpbmVkJykgcmV0dXJuICdzb2xpZCc7XG4gIGlmKHZhcmlhbnQgPT09ICdvdXRsaW5lZCcpIHJldHVybiAnb3V0bGluZSc7XG5cbiAgcmV0dXJuIHZhcmlhbnQ7XG59O1xuXG5leHBvcnQgY29uc3QgQnV0dG9uID0gKHtcbiAgYXMsXG4gIGFzQ2hpbGQgPSBmYWxzZSxcbiAgYmFja2dyb3VuZENvbG9yLFxuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgZGlzYWJsZWQsXG4gIGhhc05vdGlmaWNhdGlvbiA9IGZhbHNlLFxuICBoYXNTaGFkb3cgPSBmYWxzZSxcbiAgaWNvbixcbiAgaXNMb2FkaW5nID0gZmFsc2UsXG4gIGxhYmVsID0gJycsXG4gIGxhYmVsQ29sb3IsXG4gIG9uQ2xpY2sgPSAoKSA9PiB7fSxcbiAgcmVmLFxuICByb3VuZGVkID0gMCxcbiAgc2l6ZSA9ICdtZCcsXG4gIHN0eWxlLFxuICB0eXBlID0gJ2J1dHRvbicsXG4gIHZhcmlhbnQgPSAnc29saWQnLFxuICAuLi5wcm9wc1xufTogQnV0dG9uUHJvcHMpID0+IHtcbiAgY29uc3Qge3R9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3Qgbm9ybWFsaXplZFZhcmlhbnQgPSBnZXROb3JtYWxpemVkVmFyaWFudCh2YXJpYW50KTtcbiAgY29uc3QgcmVzb2x2ZWRCYWNrZ3JvdW5kQ29sb3IgPSBiYWNrZ3JvdW5kQ29sb3IgPz8gKG5vcm1hbGl6ZWRWYXJpYW50ID09PSAnc29saWQnID8gY29sb3IgOiAndHJhbnNwYXJlbnQnKTtcbiAgY29uc3QgcmVzb2x2ZWRMYWJlbENvbG9yID0gbGFiZWxDb2xvciA/PyAobm9ybWFsaXplZFZhcmlhbnQgPT09ICdzb2xpZCcgPyAnd2hpdGUnIDogY29sb3IpO1xuICBjb25zdCByZXNvbHZlZEJvcmRlckNvbG9yID0gbm9ybWFsaXplZFZhcmlhbnQgPT09ICdvdXRsaW5lJyA/IHJlc29sdmVkTGFiZWxDb2xvciA6IHJlc29sdmVkQmFja2dyb3VuZENvbG9yO1xuICBjb25zdCBjbGFzc2VzOiBzdHJpbmdbXSA9IFtcbiAgICAnZGlzYWJsZWQ6cG9pbnRlci1ldmVudHMtbm9uZScsXG4gICAgJ2Rpc2FibGVkOm9wYWNpdHktNTAnXG4gIF07XG5cbiAgaWYodmFyaWFudCkge1xuICAgIGNsYXNzZXMucHVzaCguLi5bXG4gICAgICAnY3Vyc29yLXBvaW50ZXInLFxuICAgICAgJ2ZsZXgnLFxuICAgICAgJ2ZvY3VzLXZpc2libGU6b3V0bGluZScsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lLTInLFxuICAgICAgJ2ZvY3VzLXZpc2libGU6b3V0bGluZS1vZmZzZXQtMicsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lLXNlY29uZGFyeScsXG4gICAgICAnaXRlbXMtY2VudGVyJyxcbiAgICAgICdqdXN0aWZ5LWNlbnRlcicsXG4gICAgICAnbGVhZGluZy02JyxcbiAgICAgICdyZWxhdGl2ZScsXG4gICAgICAndHJhbnNpdGlvbi1jb2xvcnMnLFxuICAgICAgJ2R1cmF0aW9uLTMwMCcsXG4gICAgICAnZWFzZS1vdXQnXG4gICAgXSk7XG5cbiAgICBzd2l0Y2gobm9ybWFsaXplZFZhcmlhbnQpIHtcbiAgICAgIGNhc2UgJ291dGxpbmUnOlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgZ2V0QmFja2dyb3VuZENsYXNzZXMocmVzb2x2ZWRCYWNrZ3JvdW5kQ29sb3IsIHtoYXNGb2N1czogdHJ1ZSwgaGFzSG92ZXI6IHJlc29sdmVkQmFja2dyb3VuZENvbG9yICE9PSAndHJhbnNwYXJlbnQnfSksXG4gICAgICAgICAgJ2JvcmRlci0xJyxcbiAgICAgICAgICAnZm9udC1zZW1pYm9sZCcsXG4gICAgICAgICAgZ2V0Qm9yZGVyQ2xhc3NlcyhyZXNvbHZlZEJvcmRlckNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSksXG4gICAgICAgICAgZ2V0VGV4dENsYXNzZXMocmVzb2x2ZWRMYWJlbENvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICd0ZXh0JzpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgIGdldEJhY2tncm91bmRDbGFzc2VzKHJlc29sdmVkQmFja2dyb3VuZENvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiByZXNvbHZlZEJhY2tncm91bmRDb2xvciAhPT0gJ3RyYW5zcGFyZW50J30pLFxuICAgICAgICAgICdmb250LXNlbWlib2xkJyxcbiAgICAgICAgICBnZXRUZXh0Q2xhc3NlcyhyZXNvbHZlZExhYmVsQ29sb3IsIHtoYXNGb2N1czogdHJ1ZSwgaGFzSG92ZXI6IHRydWV9KVxuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3NvbGlkJzpcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGNsYXNzZXMucHVzaChcbiAgICAgICAgICBnZXRCYWNrZ3JvdW5kQ2xhc3NlcyhyZXNvbHZlZEJhY2tncm91bmRDb2xvciwge2hhc0ZvY3VzOiB0cnVlLCBoYXNIb3ZlcjogdHJ1ZX0pLFxuICAgICAgICAgIGdldEJvcmRlckNsYXNzZXMocmVzb2x2ZWRCYWNrZ3JvdW5kQ29sb3IsIHtoYXNGb2N1czogdHJ1ZSwgaGFzSG92ZXI6IHRydWV9KSxcbiAgICAgICAgICAnZm9udC1tZWRpdW0nLFxuICAgICAgICAgIGdldFRleHRDbGFzc2VzKHJlc29sdmVkTGFiZWxDb2xvciwge2hhc0ZvY3VzOiB0cnVlLCBoYXNIb3ZlcjogcmVzb2x2ZWRMYWJlbENvbG9yICE9PSAnd2hpdGUnfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuXG4gICAgaWYoaGFzU2hhZG93ICYmIHZhcmlhbnQgIT09ICd0ZXh0Jykge1xuICAgICAgY2xhc3Nlcy5wdXNoKCdzaGFkb3ctWzBfMF8xMnB4X3JnYmEoMCwwLDAsMC4xMildIGRhcms6c2hhZG93LVswXzBfMTJweF9yZ2JhKDAsMCwwLDAuMjgpXScpO1xuICAgIH1cblxuICAgIHN3aXRjaChzaXplKSB7XG4gICAgICBjYXNlICdzbSc6XG4gICAgICAgIGNsYXNzZXMucHVzaChcbiAgICAgICAgICAncHgtNCcsXG4gICAgICAgICAgJ3B5LTAuNScsXG4gICAgICAgICAgJ3RleHQtc20nXG4gICAgICAgICk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnbGcnOlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTgnLFxuICAgICAgICAgICdweS00JyxcbiAgICAgICAgICAndGV4dC1sZydcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdtZCc6XG4gICAgICBkZWZhdWx0OlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTYnLFxuICAgICAgICAgICdweS0yJyxcbiAgICAgICAgICAndGV4dC1tZCdcbiAgICAgICAgKTtcbiAgICB9XG4gIH1cblxuICBsZXQgYnV0dG9uTm90aWZpY2F0aW9uOiBSZWFjdE5vZGUgfCBudWxsID0gbnVsbDtcblxuICBpZihoYXNOb3RpZmljYXRpb24pIHtcbiAgICBidXR0b25Ob3RpZmljYXRpb24gPSAoXG4gICAgICA8c3BhbiBjbGFzc05hbWU9XCJhYnNvbHV0ZSB0b3AtMCByaWdodC0wIC1tdC0xIC1tci0xIGZsZXggc2l6ZS0zXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImFic29sdXRlIGlubGluZS1mbGV4IGgtZnVsbCB3LWZ1bGwgYW5pbWF0ZS1waW5nIHJvdW5kZWQtZnVsbCBiZy1za3ktNDAwIG9wYWNpdHktNzVcIj48L3NwYW4+XG4gICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cInJlbGF0aXZlIGlubGluZS1mbGV4IHNpemUtMyByb3VuZGVkLWZ1bGwgYmctc2t5LTUwMFwiPjwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cbiAgICApO1xuICB9XG5cbiAgY29uc3QgYnV0dG9uQ29udGVudCA9IGFzQ2hpbGQgPyBjaGlsZHJlbiA6IChcbiAgICA8PlxuICAgICAge2J1dHRvbk5vdGlmaWNhdGlvbn1cbiAgICAgIDxzcGFuIGNsYXNzTmFtZT17Y24oJ2lubGluZS1mbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMicsIGlzTG9hZGluZyAmJiAnb3BhY2l0eS0wJyl9PlxuICAgICAgICB7aWNvbn1cbiAgICAgICAge2NoaWxkcmVuID8gY2hpbGRyZW4gOiB0KGxhYmVsKX1cbiAgICAgIDwvc3Bhbj5cbiAgICAgIHtpc0xvYWRpbmcgPyAoXG4gICAgICAgIDxzdmdcbiAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICAgIGNsYXNzTmFtZT1cImFic29sdXRlIGxlZnQtMS8yIHRvcC0xLzIgc2l6ZS01IC10cmFuc2xhdGUteC0xLzIgLXRyYW5zbGF0ZS15LTEvMiBhbmltYXRlLXNwaW5cIlxuICAgICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgICB2aWV3Qm94PVwiMCAwIDI0IDI0XCJcbiAgICAgICAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxjaXJjbGUgY2xhc3NOYW1lPVwib3BhY2l0eS0yNVwiIGN4PVwiMTJcIiBjeT1cIjEyXCIgcj1cIjEwXCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlV2lkdGg9XCI0XCI+PC9jaXJjbGU+XG4gICAgICAgICAgPHBhdGggY2xhc3NOYW1lPVwib3BhY2l0eS03NVwiIGQ9XCJNNCAxMmE4IDggMCAwMTgtOFYwQzUuMzczIDAgMCA1LjM3MyAwIDEyaDR6bTIgNS4yOTFBNy45NjIgNy45NjIgMCAwMTQgMTJIMGMwIDMuMDQyIDEuMTM1IDUuODI0IDMgNy45MzhsMy0yLjY0N3pcIiBmaWxsPVwiY3VycmVudENvbG9yXCI+PC9wYXRoPlxuICAgICAgICA8L3N2Zz5cbiAgICAgICkgOiBudWxsfVxuICAgIDwvPlxuICApO1xuXG4gIHJldHVybiByZW5kZXJXaXRoQXNDaGlsZChcbiAgICB7XG4gICAgICBhczogYXMgPz8gJ2J1dHRvbicsXG4gICAgICBhc0NoaWxkLFxuICAgICAgY2hpbGRyZW46IGJ1dHRvbkNvbnRlbnQsXG4gICAgICBjbGFzc05hbWU6IGNuKC4uLmNsYXNzZXMsIGNsYXNzTmFtZSksXG4gICAgICAnZGF0YS10ZXN0aWQnOiBgYnV0dG9uLSR7bGFiZWwgfHwgY2hpbGRyZW59YCxcbiAgICAgIGRpc2FibGVkOiBpc0xvYWRpbmcgfHwgZGlzYWJsZWQsXG4gICAgICBvbkNsaWNrLFxuICAgICAgcmVmLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgLi4uc3R5bGUsXG4gICAgICAgIGJvcmRlclJhZGl1czogcm91bmRlZFxuICAgICAgfSBhcyBDU1NQcm9wZXJ0aWVzLFxuICAgICAgdHlwZSxcbiAgICAgIC4uLnByb3BzXG4gICAgfSBhcyBuZXZlcixcbiAgICB7XG4gICAgICAnZGF0YS1zbG90JzogJ2J1dHRvbicsXG4gICAgICAnZGF0YS12YXJpYW50JzogdmFyaWFudFxuICAgIH1cbiAgKTtcbn07XG4iXSwibmFtZXMiOlsiY24iLCJ1c2VUcmFuc2xhdGlvbiIsImdldEJhY2tncm91bmRDbGFzc2VzIiwiZ2V0Qm9yZGVyQ2xhc3NlcyIsImdldFRleHRDbGFzc2VzIiwicmVuZGVyV2l0aEFzQ2hpbGQiLCJnZXROb3JtYWxpemVkVmFyaWFudCIsInZhcmlhbnQiLCJCdXR0b24iLCJhcyIsImFzQ2hpbGQiLCJiYWNrZ3JvdW5kQ29sb3IiLCJjaGlsZHJlbiIsImNsYXNzTmFtZSIsImNvbG9yIiwiZGlzYWJsZWQiLCJoYXNOb3RpZmljYXRpb24iLCJoYXNTaGFkb3ciLCJpY29uIiwiaXNMb2FkaW5nIiwibGFiZWwiLCJsYWJlbENvbG9yIiwib25DbGljayIsInJlZiIsInJvdW5kZWQiLCJzaXplIiwic3R5bGUiLCJ0eXBlIiwicHJvcHMiLCJ0Iiwibm9ybWFsaXplZFZhcmlhbnQiLCJyZXNvbHZlZEJhY2tncm91bmRDb2xvciIsInJlc29sdmVkTGFiZWxDb2xvciIsInJlc29sdmVkQm9yZGVyQ29sb3IiLCJjbGFzc2VzIiwicHVzaCIsImhhc0ZvY3VzIiwiaGFzSG92ZXIiLCJidXR0b25Ob3RpZmljYXRpb24iLCJzcGFuIiwiYnV0dG9uQ29udGVudCIsInN2ZyIsImFyaWEtaGlkZGVuIiwiZmlsbCIsInZpZXdCb3giLCJ4bWxucyIsImNpcmNsZSIsImN4IiwiY3kiLCJyIiwic3Ryb2tlIiwic3Ryb2tlV2lkdGgiLCJwYXRoIiwiZCIsImJvcmRl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

package/lib/components/Button/Button.stories.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import { i18n } from '../../i18n/index.js';
+import { gothamColors } from '../../utils/colorUtils.js';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { Button as ButtonComponent } from './Button.js';
+const meta = {
+    argTypes: {
+        color: {
+            control: 'select',
+            options: gothamColors
+        },
+        backgroundColor: {
+            control: 'select',
+            options: [
+                ...gothamColors,
+                'transparent'
+            ]
+        },
+        hasShadow: {
+            control: 'boolean'
+        },
+        isLoading: {
+            control: 'boolean'
+        },
+        labelColor: {
+            control: 'select',
+            options: gothamColors
+        },
+        rounded: {
+            control: {
+                max: 32,
+                min: 0,
+                step: 1,
+                type: 'number'
+            }
+        },
+        size: {
+            control: 'select',
+            options: [
+                'sm',
+                'md',
+                'lg'
+            ]
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'solid',
+                'outline',
+                'text',
+                'contained',
+                'outlined'
+            ]
+        }
+    },
+    component: ButtonComponent,
+    decorators: [
+        (Story)=>{
+            // Initialize i18n for Storybook
+            const storyI18n = i18n.createInstance();
+            storyI18n.use(initReactI18next).init({
+                fallbackLng: 'en',
+                interpolation: {
+                    escapeValue: false
+                },
+                lng: 'en',
+                resources: {
+                    en: {
+                        translation: {
+                            Button: 'Button'
+                        }
+                    }
+                }
+            });
+            return /*#__PURE__*/ _jsx(I18nextProvider, {
+                i18n: storyI18n,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "p-4",
+                    children: /*#__PURE__*/ _jsx(Story, {})
+                })
+            });
+        }
+    ],
+    parameters: {
+        backgrounds: {
+            default: 'light',
+            values: [
+                {
+                    name: 'light',
+                    value: '#ffffff'
+                },
+                {
+                    name: 'dark',
+                    value: '#1a1a1a'
+                }
+            ]
+        },
+        layout: 'centered'
+    },
+    title: 'Components/Button'
+};
+export default meta;
+export const Button = {
+    args: {
+        color: 'secondary',
+        disabled: false,
+        hasShadow: false,
+        isLoading: false,
+        label: 'Button',
+        rounded: 0,
+        size: 'md',
+        variant: 'solid'
+    },
+    play: interactWithCanvas
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24uc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7STE4bmV4dFByb3ZpZGVyLCBpbml0UmVhY3RJMThuZXh0fSBmcm9tICdyZWFjdC1pMThuZXh0JztcblxuaW1wb3J0IHtpMThufSBmcm9tICcuLi8uLi9pMThuL2luZGV4LmpzJztcbmltcG9ydCB7Z290aGFtQ29sb3JzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcbmltcG9ydCB7aW50ZXJhY3RXaXRoQ2FudmFzfSBmcm9tICcuLi8uLi91dGlscy9zdG9yeUludGVyYWN0aW9ucy5qcyc7XG5pbXBvcnQge0J1dHRvbiBhcyBCdXR0b25Db21wb25lbnR9IGZyb20gJy4vQnV0dG9uLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cbmNvbnN0IG1ldGE6IE1ldGE8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgY29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgb3B0aW9uczogWy4uLmdvdGhhbUNvbG9ycywgJ3RyYW5zcGFyZW50J11cbiAgICB9LFxuICAgIGhhc1NoYWRvdzoge1xuICAgICAgY29udHJvbDogJ2Jvb2xlYW4nXG4gICAgfSxcbiAgICBpc0xvYWRpbmc6IHtcbiAgICAgIGNvbnRyb2w6ICdib29sZWFuJ1xuICAgIH0sXG4gICAgbGFiZWxDb2xvcjoge1xuICAgICAgY29udHJvbDogJ3NlbGVjdCcsXG4gICAgICBvcHRpb25zOiBnb3RoYW1Db2xvcnNcbiAgICB9LFxuICAgIHJvdW5kZWQ6IHtcbiAgICAgIGNvbnRyb2w6IHtcbiAgICAgICAgbWF4OiAzMixcbiAgICAgICAgbWluOiAwLFxuICAgICAgICBzdGVwOiAxLFxuICAgICAgICB0eXBlOiAnbnVtYmVyJ1xuICAgICAgfVxuICAgIH0sXG4gICAgc2l6ZToge1xuICAgICAgY29udHJvbDogJ3NlbGVjdCcsXG4gICAgICBvcHRpb25zOiBbJ3NtJywgJ21kJywgJ2xnJ11cbiAgICB9LFxuICAgIHZhcmlhbnQ6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgb3B0aW9uczogWydzb2xpZCcsICdvdXRsaW5lJywgJ3RleHQnLCAnY29udGFpbmVkJywgJ291dGxpbmVkJ11cbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudDogQnV0dG9uQ29tcG9uZW50LFxuICBkZWNvcmF0b3JzOiBbXG4gICAgKFN0b3J5KSA9PiB7XG4gICAgICAvLyBJbml0aWFsaXplIGkxOG4gZm9yIFN0b3J5Ym9va1xuICAgICAgY29uc3Qgc3RvcnlJMThuID0gaTE4bi5jcmVhdGVJbnN0YW5jZSgpO1xuICAgICAgc3RvcnlJMThuXG4gICAgICAgIC51c2UoaW5pdFJlYWN0STE4bmV4dClcbiAgICAgICAgLmluaXQoe1xuICAgICAgICAgIGZhbGxiYWNrTG5nOiAnZW4nLFxuICAgICAgICAgIGludGVycG9sYXRpb246IHtcbiAgICAgICAgICAgIGVzY2FwZVZhbHVlOiBmYWxzZVxuICAgICAgICAgIH0sXG4gICAgICAgICAgbG5nOiAnZW4nLFxuICAgICAgICAgIHJlc291cmNlczoge1xuICAgICAgICAgICAgZW46IHtcbiAgICAgICAgICAgICAgdHJhbnNsYXRpb246IHtcbiAgICAgICAgICAgICAgICBCdXR0b246ICdCdXR0b24nXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8STE4bmV4dFByb3ZpZGVyIGkxOG49e3N0b3J5STE4bn0+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJwLTRcIj5cbiAgICAgICAgICAgIDxTdG9yeSAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0kxOG5leHRQcm92aWRlcj5cbiAgICAgICk7XG4gICAgfVxuICBdLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgYmFja2dyb3VuZHM6IHtcbiAgICAgIGRlZmF1bHQ6ICdsaWdodCcsXG4gICAgICB2YWx1ZXM6IFtcbiAgICAgICAge25hbWU6ICdsaWdodCcsIHZhbHVlOiAnI2ZmZmZmZid9LFxuICAgICAgICB7bmFtZTogJ2RhcmsnLCB2YWx1ZTogJyMxYTFhMWEnfVxuICAgICAgXVxuICAgIH0sXG4gICAgbGF5b3V0OiAnY2VudGVyZWQnXG4gIH0sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9CdXR0b24nXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbmV4cG9ydCBjb25zdCBCdXR0b246IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgIGRpc2FibGVkOiBmYWxzZSxcbiAgICBoYXNTaGFkb3c6IGZhbHNlLFxuICAgIGlzTG9hZGluZzogZmFsc2UsXG4gICAgbGFiZWw6ICdCdXR0b24nLFxuICAgIHJvdW5kZWQ6IDAsXG4gICAgc2l6ZTogJ21kJyxcbiAgICB2YXJpYW50OiAnc29saWQnXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhc1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCIsIkkxOG5leHRQcm92aWRlciIsImluaXRSZWFjdEkxOG5leHQiLCJpMThuIiwiZ290aGFtQ29sb3JzIiwiaW50ZXJhY3RXaXRoQ2FudmFzIiwiQnV0dG9uIiwiQnV0dG9uQ29tcG9uZW50IiwibWV0YSIsImFyZ1R5cGVzIiwiY29sb3IiLCJjb250cm9sIiwib3B0aW9ucyIsImJhY2tncm91bmRDb2xvciIsImhhc1NoYWRvdyIsImlzTG9hZGluZyIsImxhYmVsQ29sb3IiLCJyb3VuZGVkIiwibWF4IiwibWluIiwic3RlcCIsInR5cGUiLCJzaXplIiwidmFyaWFudCIsImNvbXBvbmVudCIsImRlY29yYXRvcnMiLCJTdG9yeSIsInN0b3J5STE4biIsImNyZWF0ZUluc3RhbmNlIiwidXNlIiwiaW5pdCIsImZhbGxiYWNrTG5nIiwiaW50ZXJwb2xhdGlvbiIsImVzY2FwZVZhbHVlIiwibG5nIiwicmVzb3VyY2VzIiwiZW4iLCJ0cmFuc2xhdGlvbiIsImRpdiIsImNsYXNzTmFtZSIsInBhcmFtZXRlcnMiLCJiYWNrZ3JvdW5kcyIsImRlZmF1bHQiLCJ2YWx1ZXMiLCJuYW1lIiwidmFsdWUiLCJsYXlvdXQiLCJ0aXRsZSIsImFyZ3MiLCJkaXNhYmxlZCIsImxhYmVsIiwicGxheSJdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU9BLFdBQVcsUUFBUTtBQUMxQixTQUFRQyxlQUFlLEVBQUVDLGdCQUFnQixRQUFPLGdCQUFnQjtBQUVoRSxTQUFRQyxJQUFJLFFBQU8sc0JBQXNCO0FBQ3pDLFNBQVFDLFlBQVksUUFBTyw0QkFBNEI7QUFDdkQsU0FBUUMsa0JBQWtCLFFBQU8sbUNBQW1DO0FBQ3BFLFNBQVFDLFVBQVVDLGVBQWUsUUFBTyxjQUFjO0FBSXRELE1BQU1DLE9BQXFDO0lBQ3pDQyxVQUFVO1FBQ1JDLE9BQU87WUFDTEMsU0FBUztZQUNUQyxTQUFTUjtRQUNYO1FBQ0FTLGlCQUFpQjtZQUNmRixTQUFTO1lBQ1RDLFNBQVM7bUJBQUlSO2dCQUFjO2FBQWM7UUFDM0M7UUFDQVUsV0FBVztZQUNUSCxTQUFTO1FBQ1g7UUFDQUksV0FBVztZQUNUSixTQUFTO1FBQ1g7UUFDQUssWUFBWTtZQUNWTCxTQUFTO1lBQ1RDLFNBQVNSO1FBQ1g7UUFDQWEsU0FBUztZQUNQTixTQUFTO2dCQUNQTyxLQUFLO2dCQUNMQyxLQUFLO2dCQUNMQyxNQUFNO2dCQUNOQyxNQUFNO1lBQ1I7UUFDRjtRQUNBQyxNQUFNO1lBQ0pYLFNBQVM7WUFDVEMsU0FBUztnQkFBQztnQkFBTTtnQkFBTTthQUFLO1FBQzdCO1FBQ0FXLFNBQVM7WUFDUFosU0FBUztZQUNUQyxTQUFTO2dCQUFDO2dCQUFTO2dCQUFXO2dCQUFRO2dCQUFhO2FBQVc7UUFDaEU7SUFDRjtJQUNBWSxXQUFXakI7SUFDWGtCLFlBQVk7UUFDVixDQUFDQztZQUNDLGdDQUFnQztZQUNoQyxNQUFNQyxZQUFZeEIsS0FBS3lCLGNBQWM7WUFDckNELFVBQ0dFLEdBQUcsQ0FBQzNCLGtCQUNKNEIsSUFBSSxDQUFDO2dCQUNKQyxhQUFhO2dCQUNiQyxlQUFlO29CQUNiQyxhQUFhO2dCQUNmO2dCQUNBQyxLQUFLO2dCQUNMQyxXQUFXO29CQUNUQyxJQUFJO3dCQUNGQyxhQUFhOzRCQUNYL0IsUUFBUTt3QkFDVjtvQkFDRjtnQkFDRjtZQUNGO1lBRUYscUJBQ0UsS0FBQ0w7Z0JBQWdCRSxNQUFNd0I7MEJBQ3JCLGNBQUEsS0FBQ1c7b0JBQUlDLFdBQVU7OEJBQ2IsY0FBQSxLQUFDYjs7O1FBSVQ7S0FDRDtJQUNEYyxZQUFZO1FBQ1ZDLGFBQWE7WUFDWEMsU0FBUztZQUNUQyxRQUFRO2dCQUNOO29CQUFDQyxNQUFNO29CQUFTQyxPQUFPO2dCQUFTO2dCQUNoQztvQkFBQ0QsTUFBTTtvQkFBUUMsT0FBTztnQkFBUzthQUNoQztRQUNIO1FBQ0FDLFFBQVE7SUFDVjtJQUNBQyxPQUFPO0FBQ1Q7QUFFQSxlQUFldkMsS0FBSztBQUlwQixPQUFPLE1BQU1GLFNBQWdCO0lBQzNCMEMsTUFBTTtRQUNKdEMsT0FBTztRQUNQdUMsVUFBVTtRQUNWbkMsV0FBVztRQUNYQyxXQUFXO1FBQ1htQyxPQUFPO1FBQ1BqQyxTQUFTO1FBQ1RLLE1BQU07UUFDTkMsU0FBUztJQUNYO0lBQ0E0QixNQUFNOUM7QUFDUixFQUFFIn0=

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export declare const Card: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardTitle: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardDescription: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardAction: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardContent: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const CardFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;

package/lib/components/Card/Card.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+export const Card = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-sm', className),
+        "data-slot": "card",
+        ...props
+    });
+export const CardHeader = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className),
+        "data-slot": "card-header",
+        ...props
+    });
+export const CardTitle = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('leading-none font-semibold', className),
+        "data-slot": "card-title",
+        ...props
+    });
+export const CardDescription = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('text-sm text-muted-foreground', className),
+        "data-slot": "card-description",
+        ...props
+    });
+export const CardAction = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className),
+        "data-slot": "card-action",
+        ...props
+    });
+export const CardContent = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('px-6', className),
+        "data-slot": "card-content",
+        ...props
+    });
+export const CardFooter = ({ className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('flex items-center px-6 [.border-t]:pt-6', className),
+        "data-slot": "card-footer",
+        ...props
+    });
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtjbn0gZnJvbSAnQG5sYWJzL3V0aWxzJztcblxuaW1wb3J0IHR5cGUge0hUTUxBdHRyaWJ1dGVzfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBDYXJkID0gKHtjbGFzc05hbWUsIC4uLnByb3BzfTogSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxkaXZcbiAgICBjbGFzc05hbWU9e2NuKCdmbGV4IGZsZXgtY29sIGdhcC02IHJvdW5kZWQteGwgYm9yZGVyIGJvcmRlci1ib3JkZXIgYmctY2FyZCBweS02IHRleHQtY2FyZC1mb3JlZ3JvdW5kIHNoYWRvdy1zbScsIGNsYXNzTmFtZSl9XG4gICAgZGF0YS1zbG90PVwiY2FyZFwiXG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IENhcmRIZWFkZXIgPSAoe2NsYXNzTmFtZSwgLi4ucHJvcHN9OiBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPGRpdlxuICAgIGNsYXNzTmFtZT17Y24oJ0Bjb250YWluZXIvY2FyZC1oZWFkZXIgZ3JpZCBhdXRvLXJvd3MtbWluIGdyaWQtcm93cy1bYXV0b19hdXRvXSBpdGVtcy1zdGFydCBnYXAtMiBweC02IGhhcy1kYXRhLVtzbG90PWNhcmQtYWN0aW9uXTpncmlkLWNvbHMtWzFmcl9hdXRvXSBbLmJvcmRlci1iXTpwYi02JywgY2xhc3NOYW1lKX1cbiAgICBkYXRhLXNsb3Q9XCJjYXJkLWhlYWRlclwiXG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IENhcmRUaXRsZSA9ICh7Y2xhc3NOYW1lLCAuLi5wcm9wc306IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8ZGl2XG4gICAgY2xhc3NOYW1lPXtjbignbGVhZGluZy1ub25lIGZvbnQtc2VtaWJvbGQnLCBjbGFzc05hbWUpfVxuICAgIGRhdGEtc2xvdD1cImNhcmQtdGl0bGVcIlxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG5cbmV4cG9ydCBjb25zdCBDYXJkRGVzY3JpcHRpb24gPSAoe2NsYXNzTmFtZSwgLi4ucHJvcHN9OiBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPGRpdlxuICAgIGNsYXNzTmFtZT17Y24oJ3RleHQtc20gdGV4dC1tdXRlZC1mb3JlZ3JvdW5kJywgY2xhc3NOYW1lKX1cbiAgICBkYXRhLXNsb3Q9XCJjYXJkLWRlc2NyaXB0aW9uXCJcbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5leHBvcnQgY29uc3QgQ2FyZEFjdGlvbiA9ICh7Y2xhc3NOYW1lLCAuLi5wcm9wc306IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8ZGl2XG4gICAgY2xhc3NOYW1lPXtjbignY29sLXN0YXJ0LTIgcm93LXNwYW4tMiByb3ctc3RhcnQtMSBzZWxmLXN0YXJ0IGp1c3RpZnktc2VsZi1lbmQnLCBjbGFzc05hbWUpfVxuICAgIGRhdGEtc2xvdD1cImNhcmQtYWN0aW9uXCJcbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5leHBvcnQgY29uc3QgQ2FyZENvbnRlbnQgPSAoe2NsYXNzTmFtZSwgLi4ucHJvcHN9OiBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPGRpdlxuICAgIGNsYXNzTmFtZT17Y24oJ3B4LTYnLCBjbGFzc05hbWUpfVxuICAgIGRhdGEtc2xvdD1cImNhcmQtY29udGVudFwiXG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGNvbnN0IENhcmRGb290ZXIgPSAoe2NsYXNzTmFtZSwgLi4ucHJvcHN9OiBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pID0+IChcbiAgPGRpdlxuICAgIGNsYXNzTmFtZT17Y24oJ2ZsZXggaXRlbXMtY2VudGVyIHB4LTYgWy5ib3JkZXItdF06cHQtNicsIGNsYXNzTmFtZSl9XG4gICAgZGF0YS1zbG90PVwiY2FyZC1mb290ZXJcIlxuICAgIHsuLi5wcm9wc31cbiAgLz5cbik7XG4iXSwibmFtZXMiOlsiY24iLCJDYXJkIiwiY2xhc3NOYW1lIiwicHJvcHMiLCJkaXYiLCJkYXRhLXNsb3QiLCJDYXJkSGVhZGVyIiwiQ2FyZFRpdGxlIiwiQ2FyZERlc2NyaXB0aW9uIiwiQ2FyZEFjdGlvbiIsIkNhcmRDb250ZW50IiwiQ2FyZEZvb3RlciJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBSWhDLE9BQU8sTUFBTUMsT0FBTyxDQUFDLEVBQUNDLFNBQVMsRUFBRSxHQUFHQyxPQUFzQyxpQkFDeEUsS0FBQ0M7UUFDQ0YsV0FBV0YsR0FBRyxtR0FBbUdFO1FBQ2pIRyxhQUFVO1FBQ1QsR0FBR0YsS0FBSztPQUVYO0FBRUYsT0FBTyxNQUFNRyxhQUFhLENBQUMsRUFBQ0osU0FBUyxFQUFFLEdBQUdDLE9BQXNDLGlCQUM5RSxLQUFDQztRQUNDRixXQUFXRixHQUFHLDRKQUE0SkU7UUFDMUtHLGFBQVU7UUFDVCxHQUFHRixLQUFLO09BRVg7QUFFRixPQUFPLE1BQU1JLFlBQVksQ0FBQyxFQUFDTCxTQUFTLEVBQUUsR0FBR0MsT0FBc0MsaUJBQzdFLEtBQUNDO1FBQ0NGLFdBQVdGLEdBQUcsOEJBQThCRTtRQUM1Q0csYUFBVTtRQUNULEdBQUdGLEtBQUs7T0FFWDtBQUVGLE9BQU8sTUFBTUssa0JBQWtCLENBQUMsRUFBQ04sU0FBUyxFQUFFLEdBQUdDLE9BQXNDLGlCQUNuRixLQUFDQztRQUNDRixXQUFXRixHQUFHLGlDQUFpQ0U7UUFDL0NHLGFBQVU7UUFDVCxHQUFHRixLQUFLO09BRVg7QUFFRixPQUFPLE1BQU1NLGFBQWEsQ0FBQyxFQUFDUCxTQUFTLEVBQUUsR0FBR0MsT0FBc0MsaUJBQzlFLEtBQUNDO1FBQ0NGLFdBQVdGLEdBQUcsa0VBQWtFRTtRQUNoRkcsYUFBVTtRQUNULEdBQUdGLEtBQUs7T0FFWDtBQUVGLE9BQU8sTUFBTU8sY0FBYyxDQUFDLEVBQUNSLFNBQVMsRUFBRSxHQUFHQyxPQUFzQyxpQkFDL0UsS0FBQ0M7UUFDQ0YsV0FBV0YsR0FBRyxRQUFRRTtRQUN0QkcsYUFBVTtRQUNULEdBQUdGLEtBQUs7T0FFWDtBQUVGLE9BQU8sTUFBTVEsYUFBYSxDQUFDLEVBQUNULFNBQVMsRUFBRSxHQUFHQyxPQUFzQyxpQkFDOUUsS0FBQ0M7UUFDQ0YsV0FBV0YsR0FBRywyQ0FBMkNFO1FBQ3pERyxhQUFVO1FBQ1QsR0FBR0YsS0FBSztPQUVYIn0=

package/lib/components/Card/Card.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { Button } from '../Button/Button.js';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './Card.js';
+const meta = {
+    argTypes: {
+        className: {
+            control: 'text'
+        }
+    },
+    component: Card,
+    parameters: {
+        layout: 'centered'
+    },
+    title: 'Components/Card'
+};
+export default meta;
+export const Default = {
+    args: {
+        className: 'w-96'
+    },
+    play: interactWithCanvas,
+    render: (args)=>/*#__PURE__*/ _jsxs(Card, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CardHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CardTitle, {
+                            children: "Release checklist"
+                        }),
+                        /*#__PURE__*/ _jsx(CardDescription, {
+                            children: "Review package health before publishing."
+                        }),
+                        /*#__PURE__*/ _jsx(CardAction, {
+                            children: /*#__PURE__*/ _jsx(BadgeLabel, {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CardContent, {
+                    children: /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm text-muted-foreground",
+                        children: "Stories, controls, and interaction coverage are ready for verification."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(CardFooter, {
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        label: "Review",
+                        size: "sm"
+                    })
+                })
+            ]
+        })
+};
+const BadgeLabel = ()=>/*#__PURE__*/ _jsx("span", {
+        className: "rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary",
+        children: "Ready"
+    });
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtpbnRlcmFjdFdpdGhDYW52YXN9IGZyb20gJy4uLy4uL3V0aWxzL3N0b3J5SW50ZXJhY3Rpb25zLmpzJztcbmltcG9ydCB7QnV0dG9ufSBmcm9tICcuLi9CdXR0b24vQnV0dG9uLmpzJztcbmltcG9ydCB7Q2FyZCwgQ2FyZEFjdGlvbiwgQ2FyZENvbnRlbnQsIENhcmREZXNjcmlwdGlvbiwgQ2FyZEZvb3RlciwgQ2FyZEhlYWRlciwgQ2FyZFRpdGxlfSBmcm9tICcuL0NhcmQuanMnO1xuXG5pbXBvcnQgdHlwZSB7TWV0YSwgU3RvcnlPYmp9IGZyb20gJ0BubGFicy9sZXgvc3Rvcnlib29rJztcblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgQ2FyZD4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgY2xhc3NOYW1lOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudDogQ2FyZCxcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0aXRsZTogJ0NvbXBvbmVudHMvQ2FyZCdcbn07XG5cbmV4cG9ydCBkZWZhdWx0IG1ldGE7XG5cbnR5cGUgU3RvcnkgPSBTdG9yeU9iajx0eXBlb2YgQ2FyZD47XG5cbmV4cG9ydCBjb25zdCBEZWZhdWx0OiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGNsYXNzTmFtZTogJ3ctOTYnXG4gIH0sXG4gIHBsYXk6IGludGVyYWN0V2l0aENhbnZhcyxcbiAgcmVuZGVyOiAoYXJncykgPT4gKFxuICAgIDxDYXJkIHsuLi5hcmdzfT5cbiAgICAgIDxDYXJkSGVhZGVyPlxuICAgICAgICA8Q2FyZFRpdGxlPlJlbGVhc2UgY2hlY2tsaXN0PC9DYXJkVGl0bGU+XG4gICAgICAgIDxDYXJkRGVzY3JpcHRpb24+UmV2aWV3IHBhY2thZ2UgaGVhbHRoIGJlZm9yZSBwdWJsaXNoaW5nLjwvQ2FyZERlc2NyaXB0aW9uPlxuICAgICAgICA8Q2FyZEFjdGlvbj5cbiAgICAgICAgICA8QmFkZ2VMYWJlbCAvPlxuICAgICAgICA8L0NhcmRBY3Rpb24+XG4gICAgICA8L0NhcmRIZWFkZXI+XG4gICAgICA8Q2FyZENvbnRlbnQ+XG4gICAgICAgIDxwIGNsYXNzTmFtZT1cInRleHQtc20gdGV4dC1tdXRlZC1mb3JlZ3JvdW5kXCI+U3RvcmllcywgY29udHJvbHMsIGFuZCBpbnRlcmFjdGlvbiBjb3ZlcmFnZSBhcmUgcmVhZHkgZm9yIHZlcmlmaWNhdGlvbi48L3A+XG4gICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgPENhcmRGb290ZXI+XG4gICAgICAgIDxCdXR0b24gbGFiZWw9XCJSZXZpZXdcIiBzaXplPVwic21cIiAvPlxuICAgICAgPC9DYXJkRm9vdGVyPlxuICAgIDwvQ2FyZD5cbiAgKVxufTtcblxuY29uc3QgQmFkZ2VMYWJlbCA9ICgpID0+IChcbiAgPHNwYW4gY2xhc3NOYW1lPVwicm91bmRlZC1mdWxsIGJnLXByaW1hcnkvMTAgcHgtMiBweS0xIHRleHQteHMgZm9udC1tZWRpdW0gdGV4dC1wcmltYXJ5XCI+UmVhZHk8L3NwYW4+XG4pO1xuIl0sIm5hbWVzIjpbIlJlYWN0IiwiaW50ZXJhY3RXaXRoQ2FudmFzIiwiQnV0dG9uIiwiQ2FyZCIsIkNhcmRBY3Rpb24iLCJDYXJkQ29udGVudCIsIkNhcmREZXNjcmlwdGlvbiIsIkNhcmRGb290ZXIiLCJDYXJkSGVhZGVyIiwiQ2FyZFRpdGxlIiwibWV0YSIsImFyZ1R5cGVzIiwiY2xhc3NOYW1lIiwiY29udHJvbCIsImNvbXBvbmVudCIsInBhcmFtZXRlcnMiLCJsYXlvdXQiLCJ0aXRsZSIsIkRlZmF1bHQiLCJhcmdzIiwicGxheSIsInJlbmRlciIsIkJhZGdlTGFiZWwiLCJwIiwibGFiZWwiLCJzaXplIiwic3BhbiJdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU9BLFdBQVcsUUFBUTtBQUMxQixTQUFRQyxrQkFBa0IsUUFBTyxtQ0FBbUM7QUFDcEUsU0FBUUMsTUFBTSxRQUFPLHNCQUFzQjtBQUMzQyxTQUFRQyxJQUFJLEVBQUVDLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxlQUFlLEVBQUVDLFVBQVUsRUFBRUMsVUFBVSxFQUFFQyxTQUFTLFFBQU8sWUFBWTtBQUk1RyxNQUFNQyxPQUEwQjtJQUM5QkMsVUFBVTtRQUNSQyxXQUFXO1lBQ1RDLFNBQVM7UUFDWDtJQUNGO0lBQ0FDLFdBQVdYO0lBQ1hZLFlBQVk7UUFDVkMsUUFBUTtJQUNWO0lBQ0FDLE9BQU87QUFDVDtBQUVBLGVBQWVQLEtBQUs7QUFJcEIsT0FBTyxNQUFNUSxVQUFpQjtJQUM1QkMsTUFBTTtRQUNKUCxXQUFXO0lBQ2I7SUFDQVEsTUFBTW5CO0lBQ05vQixRQUFRLENBQUNGLHFCQUNQLE1BQUNoQjtZQUFNLEdBQUdnQixJQUFJOzs4QkFDWixNQUFDWDs7c0NBQ0MsS0FBQ0M7c0NBQVU7O3NDQUNYLEtBQUNIO3NDQUFnQjs7c0NBQ2pCLEtBQUNGO3NDQUNDLGNBQUEsS0FBQ2tCOzs7OzhCQUdMLEtBQUNqQjs4QkFDQyxjQUFBLEtBQUNrQjt3QkFBRVgsV0FBVTtrQ0FBZ0M7Ozs4QkFFL0MsS0FBQ0w7OEJBQ0MsY0FBQSxLQUFDTDt3QkFBT3NCLE9BQU07d0JBQVNDLE1BQUs7Ozs7O0FBSXBDLEVBQUU7QUFFRixNQUFNSCxhQUFhLGtCQUNqQixLQUFDSTtRQUFLZCxXQUFVO2tCQUF3RSJ9

package/lib/components/CategoryGrid/CategoryGrid.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CategoryItem {
+    readonly description?: ReactNode;
+    readonly href?: string;
+    readonly id?: string | number;
+    readonly imageAlt: string;
+    readonly imageSrc: string;
+    readonly name: ReactNode;
+}
+export interface CategoryGridProps extends HTMLAttributes<HTMLDivElement> {
+    readonly categories: CategoryItem[];
+}
+declare const CategoryGridComponent: ({ categories, className, ...props }: CategoryGridProps) => import("react").JSX.Element;
+export declare const CategoryGrid: import("react").MemoExoticComponent<typeof CategoryGridComponent>;
+export {};

package/lib/components/CategoryGrid/CategoryGrid.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { memo } from 'react';
+const CategoryGridComponent = ({ categories, className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        className: cn('grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3', className),
+        "data-slot": "category-grid",
+        ...props,
+        children: categories.map((category)=>{
+            const Element = category.href ? 'a' : 'article';
+            return /*#__PURE__*/ _jsxs(Element, {
+                className: "group relative block overflow-hidden rounded-lg bg-muted dark:bg-muted-dark",
+                href: category.href,
+                children: [
+                    /*#__PURE__*/ _jsx("img", {
+                        alt: category.imageAlt,
+                        className: "aspect-3/2 w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                        src: category.imageSrc
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "absolute inset-0 bg-linear-to-t from-black/70 via-black/15 to-transparent"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "absolute inset-x-0 bottom-0 p-5",
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                className: "text-lg font-semibold text-white",
+                                children: category.name
+                            }),
+                            category.description ? /*#__PURE__*/ _jsx("p", {
+                                className: "mt-1 text-sm text-white/80",
+                                children: category.description
+                            }) : null
+                        ]
+                    })
+                ]
+            }, category.id ?? String(category.name));
+        })
+    });
+export const CategoryGrid = /*#__PURE__*/ memo(CategoryGridComponent);
+CategoryGrid.displayName = 'CategoryGrid';
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NhdGVnb3J5R3JpZC9DYXRlZ29yeUdyaWQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5pbXBvcnQge21lbW99IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHR5cGUge0hUTUxBdHRyaWJ1dGVzLCBSZWFjdE5vZGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBDYXRlZ29yeUl0ZW0ge1xuICByZWFkb25seSBkZXNjcmlwdGlvbj86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgaHJlZj86IHN0cmluZztcbiAgcmVhZG9ubHkgaWQ/OiBzdHJpbmcgfCBudW1iZXI7XG4gIHJlYWRvbmx5IGltYWdlQWx0OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGltYWdlU3JjOiBzdHJpbmc7XG4gIHJlYWRvbmx5IG5hbWU6IFJlYWN0Tm9kZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBDYXRlZ29yeUdyaWRQcm9wcyBleHRlbmRzIEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiB7XG4gIHJlYWRvbmx5IGNhdGVnb3JpZXM6IENhdGVnb3J5SXRlbVtdO1xufVxuXG5jb25zdCBDYXRlZ29yeUdyaWRDb21wb25lbnQgPSAoe1xuICBjYXRlZ29yaWVzLFxuICBjbGFzc05hbWUsXG4gIC4uLnByb3BzXG59OiBDYXRlZ29yeUdyaWRQcm9wcykgPT4gKFxuICA8ZGl2IGNsYXNzTmFtZT17Y24oJ2dyaWQgZ3JpZC1jb2xzLTEgZ2FwLTYgc206Z3JpZC1jb2xzLTIgbGc6Z3JpZC1jb2xzLTMnLCBjbGFzc05hbWUpfSBkYXRhLXNsb3Q9XCJjYXRlZ29yeS1ncmlkXCIgey4uLnByb3BzfT5cbiAgICB7Y2F0ZWdvcmllcy5tYXAoKGNhdGVnb3J5KSA9PiB7XG4gICAgICBjb25zdCBFbGVtZW50ID0gY2F0ZWdvcnkuaHJlZiA/ICdhJyA6ICdhcnRpY2xlJztcblxuICAgICAgcmV0dXJuIChcbiAgICAgICAgPEVsZW1lbnRcbiAgICAgICAgICBjbGFzc05hbWU9XCJncm91cCByZWxhdGl2ZSBibG9jayBvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1sZyBiZy1tdXRlZCBkYXJrOmJnLW11dGVkLWRhcmtcIlxuICAgICAgICAgIGhyZWY9e2NhdGVnb3J5LmhyZWYgYXMgbmV2ZXJ9XG4gICAgICAgICAga2V5PXtjYXRlZ29yeS5pZCA/PyBTdHJpbmcoY2F0ZWdvcnkubmFtZSl9XG4gICAgICAgID5cbiAgICAgICAgICA8aW1nXG4gICAgICAgICAgICBhbHQ9e2NhdGVnb3J5LmltYWdlQWx0fVxuICAgICAgICAgICAgY2xhc3NOYW1lPVwiYXNwZWN0LTMvMiB3LWZ1bGwgb2JqZWN0LWNvdmVyIHRyYW5zaXRpb24tdHJhbnNmb3JtIGR1cmF0aW9uLTMwMCBncm91cC1ob3ZlcjpzY2FsZS0xMDVcIlxuICAgICAgICAgICAgc3JjPXtjYXRlZ29yeS5pbWFnZVNyY31cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYWJzb2x1dGUgaW5zZXQtMCBiZy1saW5lYXItdG8tdCBmcm9tLWJsYWNrLzcwIHZpYS1ibGFjay8xNSB0by10cmFuc3BhcmVudFwiIC8+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhYnNvbHV0ZSBpbnNldC14LTAgYm90dG9tLTAgcC01XCI+XG4gICAgICAgICAgICA8aDMgY2xhc3NOYW1lPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtd2hpdGVcIj57Y2F0ZWdvcnkubmFtZX08L2gzPlxuICAgICAgICAgICAge2NhdGVnb3J5LmRlc2NyaXB0aW9uID8gPHAgY2xhc3NOYW1lPVwibXQtMSB0ZXh0LXNtIHRleHQtd2hpdGUvODBcIj57Y2F0ZWdvcnkuZGVzY3JpcHRpb259PC9wPiA6IG51bGx9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRWxlbWVudD5cbiAgICAgICk7XG4gICAgfSl9XG4gIDwvZGl2PlxuKTtcblxuZXhwb3J0IGNvbnN0IENhdGVnb3J5R3JpZCA9IG1lbW8oQ2F0ZWdvcnlHcmlkQ29tcG9uZW50KTtcbkNhdGVnb3J5R3JpZC5kaXNwbGF5TmFtZSA9ICdDYXRlZ29yeUdyaWQnO1xuIl0sIm5hbWVzIjpbImNuIiwibWVtbyIsIkNhdGVnb3J5R3JpZENvbXBvbmVudCIsImNhdGVnb3JpZXMiLCJjbGFzc05hbWUiLCJwcm9wcyIsImRpdiIsImRhdGEtc2xvdCIsIm1hcCIsImNhdGVnb3J5IiwiRWxlbWVudCIsImhyZWYiLCJpbWciLCJhbHQiLCJpbWFnZUFsdCIsInNyYyIsImltYWdlU3JjIiwiaDMiLCJuYW1lIiwiZGVzY3JpcHRpb24iLCJwIiwiaWQiLCJTdHJpbmciLCJDYXRlZ29yeUdyaWQiLCJkaXNwbGF5TmFtZSJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBQ2hDLFNBQVFDLElBQUksUUFBTyxRQUFRO0FBaUIzQixNQUFNQyx3QkFBd0IsQ0FBQyxFQUM3QkMsVUFBVSxFQUNWQyxTQUFTLEVBQ1QsR0FBR0MsT0FDZSxpQkFDbEIsS0FBQ0M7UUFBSUYsV0FBV0osR0FBRyx3REFBd0RJO1FBQVlHLGFBQVU7UUFBaUIsR0FBR0YsS0FBSztrQkFDdkhGLFdBQVdLLEdBQUcsQ0FBQyxDQUFDQztZQUNmLE1BQU1DLFVBQVVELFNBQVNFLElBQUksR0FBRyxNQUFNO1lBRXRDLHFCQUNFLE1BQUNEO2dCQUNDTixXQUFVO2dCQUNWTyxNQUFNRixTQUFTRSxJQUFJOztrQ0FHbkIsS0FBQ0M7d0JBQ0NDLEtBQUtKLFNBQVNLLFFBQVE7d0JBQ3RCVixXQUFVO3dCQUNWVyxLQUFLTixTQUFTTyxRQUFROztrQ0FFeEIsS0FBQ1Y7d0JBQUlGLFdBQVU7O2tDQUNmLE1BQUNFO3dCQUFJRixXQUFVOzswQ0FDYixLQUFDYTtnQ0FBR2IsV0FBVTswQ0FBb0NLLFNBQVNTLElBQUk7OzRCQUM5RFQsU0FBU1UsV0FBVyxpQkFBRyxLQUFDQztnQ0FBRWhCLFdBQVU7MENBQThCSyxTQUFTVSxXQUFXO2lDQUFROzs7O2VBVjVGVixTQUFTWSxFQUFFLElBQUlDLE9BQU9iLFNBQVNTLElBQUk7UUFjOUM7O0FBSUosT0FBTyxNQUFNSyw2QkFBZXRCLEtBQUtDLHVCQUF1QjtBQUN4RHFCLGFBQWFDLFdBQVcsR0FBRyJ9

package/lib/components/CategoryGrid/CategoryGrid.stories.js

@@ -0,0 +1,35 @@
+import { CategoryGrid } from './CategoryGrid.js';
+const meta = {
+    component: CategoryGrid,
+    parameters: {
+        layout: 'padded'
+    },
+    title: 'Ecommerce/CategoryGrid'
+};
+export default meta;
+export const ImageBackgrounds = {
+    args: {
+        categories: [
+            {
+                href: '#',
+                imageAlt: 'Desk accessories arranged on a tabletop.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg',
+                name: 'Desk and office'
+            },
+            {
+                href: '#',
+                imageAlt: 'Organized productivity products.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg',
+                name: 'Self-improvement'
+            },
+            {
+                href: '#',
+                imageAlt: 'Travel products in warm light.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-03.jpg',
+                name: 'Travel'
+            }
+        ]
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NhdGVnb3J5R3JpZC9DYXRlZ29yeUdyaWQuc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDYXRlZ29yeUdyaWR9IGZyb20gJy4vQ2F0ZWdvcnlHcmlkLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cbmNvbnN0IG1ldGE6IE1ldGE8dHlwZW9mIENhdGVnb3J5R3JpZD4gPSB7XG4gIGNvbXBvbmVudDogQ2F0ZWdvcnlHcmlkLFxuICBwYXJhbWV0ZXJzOiB7XG4gICAgbGF5b3V0OiAncGFkZGVkJ1xuICB9LFxuICB0aXRsZTogJ0Vjb21tZXJjZS9DYXRlZ29yeUdyaWQnXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xuXG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIENhdGVnb3J5R3JpZD47XG5cbmV4cG9ydCBjb25zdCBJbWFnZUJhY2tncm91bmRzOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGNhdGVnb3JpZXM6IFtcbiAgICAgIHtcbiAgICAgICAgaHJlZjogJyMnLFxuICAgICAgICBpbWFnZUFsdDogJ0Rlc2sgYWNjZXNzb3JpZXMgYXJyYW5nZWQgb24gYSB0YWJsZXRvcC4nLFxuICAgICAgICBpbWFnZVNyYzogJ2h0dHBzOi8vdGFpbHdpbmRjc3MuY29tL3BsdXMtYXNzZXRzL2ltZy9lY29tbWVyY2UtaW1hZ2VzL2hvbWUtcGFnZS0wMi1lZGl0aW9uLTAxLmpwZycsXG4gICAgICAgIG5hbWU6ICdEZXNrIGFuZCBvZmZpY2UnXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBocmVmOiAnIycsXG4gICAgICAgIGltYWdlQWx0OiAnT3JnYW5pemVkIHByb2R1Y3Rpdml0eSBwcm9kdWN0cy4nLFxuICAgICAgICBpbWFnZVNyYzogJ2h0dHBzOi8vdGFpbHdpbmRjc3MuY29tL3BsdXMtYXNzZXRzL2ltZy9lY29tbWVyY2UtaW1hZ2VzL2hvbWUtcGFnZS0wMi1lZGl0aW9uLTAyLmpwZycsXG4gICAgICAgIG5hbWU6ICdTZWxmLWltcHJvdmVtZW50J1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaHJlZjogJyMnLFxuICAgICAgICBpbWFnZUFsdDogJ1RyYXZlbCBwcm9kdWN0cyBpbiB3YXJtIGxpZ2h0LicsXG4gICAgICAgIGltYWdlU3JjOiAnaHR0cHM6Ly90YWlsd2luZGNzcy5jb20vcGx1cy1hc3NldHMvaW1nL2Vjb21tZXJjZS1pbWFnZXMvaG9tZS1wYWdlLTAyLWVkaXRpb24tMDMuanBnJyxcbiAgICAgICAgbmFtZTogJ1RyYXZlbCdcbiAgICAgIH1cbiAgICBdXG4gIH1cbn07XG4iXSwibmFtZXMiOlsiQ2F0ZWdvcnlHcmlkIiwibWV0YSIsImNvbXBvbmVudCIsInBhcmFtZXRlcnMiLCJsYXlvdXQiLCJ0aXRsZSIsIkltYWdlQmFja2dyb3VuZHMiLCJhcmdzIiwiY2F0ZWdvcmllcyIsImhyZWYiLCJpbWFnZUFsdCIsImltYWdlU3JjIiwibmFtZSJdLCJtYXBwaW5ncyI6IkFBQUEsU0FBUUEsWUFBWSxRQUFPLG9CQUFvQjtBQUkvQyxNQUFNQyxPQUFrQztJQUN0Q0MsV0FBV0Y7SUFDWEcsWUFBWTtRQUNWQyxRQUFRO0lBQ1Y7SUFDQUMsT0FBTztBQUNUO0FBRUEsZUFBZUosS0FBSztBQUlwQixPQUFPLE1BQU1LLG1CQUEwQjtJQUNyQ0MsTUFBTTtRQUNKQyxZQUFZO1lBQ1Y7Z0JBQ0VDLE1BQU07Z0JBQ05DLFVBQVU7Z0JBQ1ZDLFVBQVU7Z0JBQ1ZDLE1BQU07WUFDUjtZQUNBO2dCQUNFSCxNQUFNO2dCQUNOQyxVQUFVO2dCQUNWQyxVQUFVO2dCQUNWQyxNQUFNO1lBQ1I7WUFDQTtnQkFDRUgsTUFBTTtnQkFDTkMsVUFBVTtnQkFDVkMsVUFBVTtnQkFDVkMsTUFBTTtZQUNSO1NBQ0Q7SUFDSDtBQUNGLEVBQUUifQ==

package/lib/components/Chat/AudioMessage/AudioMessage.css

@@ -0,0 +1 @@
+.rce-mbox-audio{padding-bottom:10px;max-width:300px}audio:focus{outline:none}

package/lib/components/Chat/AudioMessage/AudioMessage.d.ts

@@ -0,0 +1,3 @@
+import { IAudioMessageProps } from '../type';
+import type { FC } from 'react';
+export declare const AudioMessage: FC<IAudioMessageProps>;

package/lib/components/Chat/AudioMessage/AudioMessage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AudioMessage = (props)=>{
+    const { controlsList } = props.data;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: 'rce-mbox-audio',
+        style: props.customStyle,
+        children: [
+            /*#__PURE__*/ _jsxs("audio", {
+                ...props.audioProps,
+                controls: true,
+                controlsList: controlsList ? controlsList : 'nodownload',
+                children: [
+                    /*#__PURE__*/ _jsx("source", {
+                        src: props.data.audioURL,
+                        type: props.data.audioType || 'audio/mp3'
+                    }),
+                    "Your browser does not support the audio element."
+                ]
+            }),
+            props.text && /*#__PURE__*/ _jsx("div", {
+                className: "rce-mbox-text",
+                children: props.text
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NoYXQvQXVkaW9NZXNzYWdlL0F1ZGlvTWVzc2FnZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJQXVkaW9NZXNzYWdlUHJvcHN9IGZyb20gJy4uL3R5cGUnO1xuXG5pbXBvcnQgdHlwZSB7RkN9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IEF1ZGlvTWVzc2FnZTogRkM8SUF1ZGlvTWVzc2FnZVByb3BzPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7Y29udHJvbHNMaXN0fSA9IHByb3BzLmRhdGE7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17J3JjZS1tYm94LWF1ZGlvJ30gc3R5bGU9e3Byb3BzLmN1c3RvbVN0eWxlfT5cbiAgICAgIDxhdWRpbyB7Li4ucHJvcHMuYXVkaW9Qcm9wc30gY29udHJvbHMgY29udHJvbHNMaXN0PXtjb250cm9sc0xpc3QgPyBjb250cm9sc0xpc3QgOiAnbm9kb3dubG9hZCd9PlxuICAgICAgICA8c291cmNlIHNyYz17cHJvcHMuZGF0YS5hdWRpb1VSTH0gdHlwZT17cHJvcHMuZGF0YS5hdWRpb1R5cGUgfHwgJ2F1ZGlvL21wMyd9IC8+XG4gICAgICAgIFlvdXIgYnJvd3NlciBkb2VzIG5vdCBzdXBwb3J0IHRoZSBhdWRpbyBlbGVtZW50LlxuICAgICAgPC9hdWRpbz5cbiAgICAgIHtwcm9wcy50ZXh0ICYmIDxkaXYgY2xhc3NOYW1lPSdyY2UtbWJveC10ZXh0Jz57cHJvcHMudGV4dH08L2Rpdj59XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbIkF1ZGlvTWVzc2FnZSIsInByb3BzIiwiY29udHJvbHNMaXN0IiwiZGF0YSIsImRpdiIsImNsYXNzTmFtZSIsInN0eWxlIiwiY3VzdG9tU3R5bGUiLCJhdWRpbyIsImF1ZGlvUHJvcHMiLCJjb250cm9scyIsInNvdXJjZSIsInNyYyIsImF1ZGlvVVJMIiwidHlwZSIsImF1ZGlvVHlwZSIsInRleHQiXSwibWFwcGluZ3MiOiI7QUFJQSxPQUFPLE1BQU1BLGVBQXVDLENBQUNDO0lBQ25ELE1BQU0sRUFBQ0MsWUFBWSxFQUFDLEdBQUdELE1BQU1FLElBQUk7SUFFakMscUJBQ0UsTUFBQ0M7UUFBSUMsV0FBVztRQUFrQkMsT0FBT0wsTUFBTU0sV0FBVzs7MEJBQ3hELE1BQUNDO2dCQUFPLEdBQUdQLE1BQU1RLFVBQVU7Z0JBQUVDLFFBQVE7Z0JBQUNSLGNBQWNBLGVBQWVBLGVBQWU7O2tDQUNoRixLQUFDUzt3QkFBT0MsS0FBS1gsTUFBTUUsSUFBSSxDQUFDVSxRQUFRO3dCQUFFQyxNQUFNYixNQUFNRSxJQUFJLENBQUNZLFNBQVMsSUFBSTs7b0JBQWU7OztZQUdoRmQsTUFBTWUsSUFBSSxrQkFBSSxLQUFDWjtnQkFBSUMsV0FBVTswQkFBaUJKLE1BQU1lLElBQUk7Ozs7QUFHL0QsRUFBRSJ9

package/lib/components/Chat/Avatar/Avatar.css

@@ -0,0 +1 @@
+.rce-avatar-container{overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rce-avatar-container .rce-avatar{width:100%;height:100%}.rce-avatar-container.flexible .rce-avatar{height:auto!important;width:100%!important;border-radius:unset!important;overflow:unset!important}.rce-avatar-container.default{width:25px;height:25px}.rce-avatar-container.rounded{border-radius:5px}.rce-avatar-container.circle{border-radius:100%}.rce-avatar-container.xsmall{width:30px;height:30px}.rce-avatar-container.small{width:35px;height:35px}.rce-avatar-container.medium{width:40px;height:40px}.rce-avatar-container.large{width:45px;height:45px}.rce-avatar-container.xlarge{width:55px;height:55px}@-webkit-keyframes avatarLazy{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes avatarLazy{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.rce-avatar-lazy{-webkit-animation:avatarLazy 2s ease-in-out infinite normal;animation:avatarLazy 2s ease-in-out infinite normal}.rce-avatar-container.rce-citem-avatar-encircle-status{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.rce-avatar-letter{margin-top:5px;font-size:20px;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rce-avatar-letter-background{height:35px;width:35px;border-radius:20px}

package/lib/components/Chat/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { IAvatarProps } from '../type';
+import type { FC } from 'react';
+export declare const Avatar: FC<IAvatarProps>;