@a-type/ui 1.5.0 → 1.5.1

package/dist/cjs/components/avatar/Avatar.js

@@ -22,13 +22,13 @@ const index_js_1 = require("../icon/index.js");
 function Avatar(_a) {
     var { className, popIn = true, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
     const empty = !name && !imageSrc;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:h-24px layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
             'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray2)', className) }, rest, { children: [!empty && (0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc }), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
 }
 function AvatarContent({ name, imageSrc, }) {
     if (imageSrc) {
-        return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover rounded-lg", referrerPolicy: "no-referrer", crossOrigin: "anonymous", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture` }));
+        return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", crossOrigin: "anonymous", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture` }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "color-black items-center justify-center flex text-sm font-bold rounded-lg", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "color-black items-center justify-center flex text-sm font-bold", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
 }
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAYA,wBAwBC;;AApCD,gDAA8B;AAE9B,+CAAwC;AAUxC,SAAgB,MAAM,CAAC,EAMT;QANS,EACtB,SAAS,EACT,KAAK,GAAG,IAAI,EACZ,QAAQ,EACR,IAAI,OAES,EADV,IAAI,cALe,0CAMtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,2DACW,KAAK,EACf,SAAS,EAAE,IAAA,cAAU,EACpB,yJAAyJ,EACzJ,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,0CAA0C,EACnD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,uBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC3D,KAAK,IAAI,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,GAIR;IACA,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,gCACC,SAAS,EAAC,uCAAuC,EACjD,cAAc,EAAC,aAAa,EAC5B,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,GACzC,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,gCAAK,SAAS,EAAC,2EAA2E,YACxF,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAYA,wBAwBC;;AApCD,gDAA8B;AAE9B,+CAAwC;AAUxC,SAAgB,MAAM,CAAC,EAMT;QANS,EACtB,SAAS,EACT,KAAK,GAAG,IAAI,EACZ,QAAQ,EACR,IAAI,OAES,EADV,IAAI,cALe,0CAMtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,2DACW,KAAK,EACf,SAAS,EAAE,IAAA,cAAU,EACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,0CAA0C,EACnD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,uBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC3D,KAAK,IAAI,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,GAIR;IACA,IAAI,QAAQ,EAAE,CAAC;QACd,OAAO,CACN,gCACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,GACzC,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,gCAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}

package/dist/cjs/components/box/Box.d.ts

@@ -4,20 +4,26 @@ import { SlotDivProps } from '../utility/SlotDiv.js';
 export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';
 export type BoxJustification = 'center' | 'start' | 'stretch' | 'between' | 'around' | 'end';
 export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BoxResponsive<T> = T | {
+    sm?: T;
+    md?: T;
+    lg?: T;
+};
 export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
     className?: string;
-    direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
-    d?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+    direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
+    d?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
     items?: BoxAlignment;
     justify?: BoxJustification;
-    align?: `${BoxAlignment} ${BoxJustification}`;
-    gap?: BoxSpacingSize;
-    wrap?: boolean;
-    p?: BoxSpacingSize;
+    layout?: `${BoxAlignment} ${BoxJustification}`;
+    gap?: BoxSpacingSize | boolean;
+    wrap?: BoxResponsive<boolean>;
+    p?: BoxResponsive<BoxSpacingSize | boolean>;
     container?: boolean;
     surface?: boolean | 'primary' | 'secondary';
     theme?: ThemeName;
     border?: boolean;
+    full?: boolean | 'width' | 'height';
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Box({ className, items: itemsSolo, justify: justifySolo, align, gap, wrap, p, d, direction, container, style: userStyle, surface, theme, border, ref, ...rest }: BoxProps): import("react/jsx-runtime.js").JSX.Element;
+export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, d, direction, container, style: userStyle, surface, theme, border, full, ref, ...rest }: BoxProps): import("react/jsx-runtime.js").JSX.Element;

package/dist/cjs/components/box/Box.js

@@ -20,21 +20,39 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 const SlotDiv_js_1 = require("../utility/SlotDiv.js");
+function isResponsive(value) {
+    return typeof value === 'object';
+}
 function Box(_a) {
-    var { className, items: itemsSolo, justify: justifySolo, align, gap = 'md', wrap, p = 'none', d = 'row', direction = d, container, style: userStyle, surface, theme, border, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "align", "gap", "wrap", "p", "d", "direction", "container", "style", "surface", "theme", "border", "ref"]);
+    var { className, items: itemsSolo, justify: justifySolo, layout: align, gap = 'none', wrap, p = 'none', d = 'row', direction = d, container, style: userStyle, surface, theme, border, full, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "d", "direction", "container", "style", "surface", "theme", "border", "full", "ref"]);
     const { spacingScale } = (0, react_1.useContext)(BoxContext);
     const style = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, userStyle), { '--spacing-scale': spacingScale })), [userStyle, spacingScale]);
     const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : align === null || align === void 0 ? void 0 : align.split(' ')[0];
     const justify = justifySolo !== null && justifySolo !== void 0 ? justifySolo : align === null || align === void 0 ? void 0 : align.split(' ')[1];
-    const main = ((0, jsx_runtime_1.jsx)(SlotDiv_js_1.SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: (0, clsx_1.default)('flex', {
+    const main = ((0, jsx_runtime_1.jsx)(SlotDiv_js_1.SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: (0, clsx_1.default)('layer-components:flex layer-components:relative', {
             'layer-components:flex-row': direction === 'row',
             'layer-components:flex-col': direction === 'col',
             'layer-components:flex-row-reverse': direction === 'row-reverse',
             'layer-components:flex-col-reverse': direction === 'col-reverse',
+            'layer-components:sm:flex-row': isResponsive(direction) && direction.sm === 'row',
+            'layer-components:sm:flex-col': isResponsive(direction) && direction.sm === 'col',
+            'layer-components:sm:flex-row-reverse': isResponsive(direction) && direction.sm === 'row-reverse',
+            'layer-components:sm:flex-col-reverse': isResponsive(direction) && direction.sm === 'col-reverse',
+            'layer-components:md:flex-row': isResponsive(direction) && direction.md === 'row',
+            'layer-components:md:flex-col': isResponsive(direction) && direction.md === 'col',
+            'layer-components:md:flex-row-reverse': isResponsive(direction) && direction.md === 'row-reverse',
+            'layer-components:md:flex-col-reverse': isResponsive(direction) && direction.md === 'col-reverse',
+            'layer-components:lg:flex-row': isResponsive(direction) && direction.lg === 'row',
+            'layer-components:lg:flex-col': isResponsive(direction) && direction.lg === 'col',
+            'layer-components:lg:flex-row-reverse': isResponsive(direction) && direction.lg === 'row-reverse',
+            'layer-components:lg:flex-col-reverse': isResponsive(direction) && direction.lg === 'col-reverse',
             'layer-components:flex-wrap': wrap,
+            'layer-components:sm:flex-wrap': isResponsive(wrap) && wrap.sm,
+            'layer-components:md:flex-wrap': isResponsive(wrap) && wrap.md,
+            'layer-components:lg:flex-wrap': isResponsive(wrap) && wrap.lg,
             'layer-components:gap-xs': gap === 'xs',
             'layer-components:gap-sm': gap === 'sm',
-            'layer-components:gap-md': gap === 'md',
+            'layer-components:gap-md': gap === 'md' || gap === true,
             'layer-components:gap-lg': gap === 'lg',
             'layer-components:gap-xl': gap === 'xl',
             'layer-components:items-center': items === 'center',
@@ -49,14 +67,31 @@ function Box(_a) {
             'layer-components:justify-around': justify === 'around',
             'layer-components:p-xs': p === 'xs',
             'layer-components:p-sm': p === 'sm',
-            'layer-components:p-md': p === 'md',
+            'layer-components:p-md': p === 'md' || p === true,
             'layer-components:p-lg': p === 'lg',
             'layer-components:p-xl': p === 'xl',
+            'layer-components:sm:p-xs': isResponsive(p) && p.sm === 'xs',
+            'layer-components:sm:p-sm': isResponsive(p) && p.sm === 'sm',
+            'layer-components:sm:p-md': isResponsive(p) && p.sm === 'md',
+            'layer-components:sm:p-lg': isResponsive(p) && p.sm === 'lg',
+            'layer-components:sm:p-xl': isResponsive(p) && p.sm === 'xl',
+            'layer-components:md:p-xs': isResponsive(p) && p.md === 'xs',
+            'layer-components:md:p-sm': isResponsive(p) && p.md === 'sm',
+            'layer-components:md:p-md': isResponsive(p) && p.md === 'md',
+            'layer-components:md:p-lg': isResponsive(p) && p.md === 'lg',
+            'layer-components:md:p-xl': isResponsive(p) && p.md === 'xl',
+            'layer-components:lg:p-xs': isResponsive(p) && p.lg === 'xs',
+            'layer-components:lg:p-sm': isResponsive(p) && p.lg === 'sm',
+            'layer-components:lg:p-md': isResponsive(p) && p.lg === 'md',
+            'layer-components:lg:p-lg': isResponsive(p) && p.lg === 'lg',
+            'layer-components:lg:p-xl': isResponsive(p) && p.lg === 'xl',
             'layer-components:rounded-lg': !!surface,
             'layer-components:bg-white layer-components:border-black': surface === true,
             'layer-components:bg-primary-wash layer-components:border-primary-dark': surface === 'primary',
             'layer-components:bg-secondary-wash layer-components:border-secondary-dark': surface === 'secondary',
             'layer-components:border layer-components:border-solid layer-components:rounded-lg': border,
+            'layer-components:w-full': full === true || full === 'width',
+            'layer-components:h-full': full === true || full === 'height',
         }, theme && `theme-${theme}`, className) })));
     if (container) {
         return ((0, jsx_runtime_1.jsx)(BoxContext.Provider, { value: { spacingScale: spacingScale * SPACING_SCALE_NESTING_FACTOR }, children: main }));

package/dist/cjs/components/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/box/Box.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/box/Box.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/box/Box.stories.d.ts

@@ -15,6 +15,9 @@ declare const meta: {
     };
     args: {
         children: import("react/jsx-runtime.js").JSX.Element;
+        p: "md";
+        gap: "md";
+        border: true;
     };
     parameters: {
         controls: {

package/dist/cjs/components/box/Box.stories.js

@@ -20,6 +20,9 @@ const meta = {
     },
     args: {
         children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "accent", children: "Accent" }), (0, jsx_runtime_1.jsx)(Button_js_1.Button, { children: "Default" })] })),
+        p: 'md',
+        gap: 'md',
+        border: true,
     },
     parameters: {
         controls: { expanded: true },

package/dist/cjs/components/box/Box.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":";;;;AACA,mDAA6C;AAC7C,qCAA+B;AAE/B,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,YAAG;IACd,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,KAAK;SACnB;QACD,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,KAAK;SACnB;KACD;IACD,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,6DACC,uBAAC,kBAAM,IAAC,KAAK,EAAC,SAAS,wBAAiB,EACxC,uBAAC,kBAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,uBAAC,kBAAM,0BAAiB,IACtB,CACH;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0B,CAAC;AAE7B,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC;AAEpB,QAAA,gBAAgB,GAAU;IACtC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,YAAG,oBAAK,IAAI,IAAE,SAAS,QAAC,SAAS,EAAC,KAAK,aACvC,wBAAC,YAAG,oBAAK,IAAI,IAAE,SAAS,mBACvB,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,EACN,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,KACD,EACN,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,KACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":";;;;AACA,mDAA6C;AAC7C,qCAA+B;AAE/B,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,YAAG;IACd,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,KAAK;SACnB;QACD,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,KAAK;SACnB;KACD;IACD,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,6DACC,uBAAC,kBAAM,IAAC,KAAK,EAAC,SAAS,wBAAiB,EACxC,uBAAC,kBAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,uBAAC,kBAAM,0BAAiB,IACtB,CACH;QACD,CAAC,EAAE,IAAI;QACP,GAAG,EAAE,IAAI;QACT,MAAM,EAAE,IAAI;KACZ;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0B,CAAC;AAE7B,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC;AAEpB,QAAA,gBAAgB,GAAU;IACtC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,YAAG,oBAAK,IAAI,IAAE,SAAS,QAAC,SAAS,EAAC,KAAK,aACvC,wBAAC,YAAG,oBAAK,IAAI,IAAE,SAAS,mBACvB,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,EACN,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,KACD,EACN,wBAAC,YAAG,oBAAK,IAAI,eACZ,uBAAC,kBAAM,yBAAgB,EACvB,uBAAC,kBAAM,yBAAgB,KAClB,KACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/cjs/components/button/classes.d.ts

@@ -5,3 +5,14 @@ export declare function getButtonClassName({ color, size, toggleable, align, }:
     toggleable?: boolean;
     align?: ButtonProps['align'];
 }): string;
+export declare const buttonColorClasses: {
+    primary: string;
+    accent: string;
+    default: string;
+    ghost: string;
+    destructive: string;
+    ghostDestructive: string;
+    ghostAccent: string;
+    contrast: string;
+    unstyled: string;
+};

package/dist/cjs/components/button/classes.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonColorClasses = void 0;
 exports.getButtonClassName = getButtonClassName;
 const clsx_1 = __importDefault(require("clsx"));
 function getButtonClassName({ color, size, toggleable, align, }) {
@@ -24,6 +25,7 @@ const colors = {
     contrast: `layer-variants:[&.btn-color-contrast]:[--bg:var(--color-black)] layer-variants:[&.btn-color-contrast]:[--hover:var(--color-gray-7)] layer-variants:[&.btn-color-contrast]:[--focus:var(--color-gray-7)] layer-variants:[&.btn-color-contrast]:[--active:var(--color-gray-6)] layer-variants:[&.btn-color-contrast]:color-white layer-variants:[&.btn-color-contrast]:border-black`,
     unstyled: `layer-variants:bg-transparent layer-variants:hover:bg-transparent layer-variants:focus:bg-transparent layer-variants:active:bg-transparent layer-variants:color-inherit layer-variants:border-none layer-variants:shadow-none layer-variants:hover:shadow-none layer-variants:focus:shadow-none layer-variants:active:shadow-none layer-variants:p-0 layer-variants:items-start layer-variants:font-inherit layer-variants:font-normal layer-variants:rounded-none layer-variants:text-size-inherit layer-variants:transition-none`,
 };
+exports.buttonColorClasses = colors;
 const sizes = {
     default: '',
     small: 'layer-variants:[&.size-small]:px-4 layer-variants:[&.size-small]:py-1 layer-variants:[&.size-small]:text-sm layer-variants:[&.size-small]:rounded-md',

package/dist/cjs/components/button/classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"classes.js","sourceRoot":"","sources":["../../../../src/components/button/classes.tsx"],"names":[],"mappings":";;;;;AAGA,gDA+BC;AAlCD,gDAA8B;AAG9B,SAAgB,kBAAkB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,GAML;IACA,OAAO,IAAA,cAAU,EAChB,+TAA+T,EAC/T,uEAAuE,EACvE,oCAAoC,EACpC,sFAAsF,EACtF,iFAAiF,EACjF,0EAA0E,EAC1E,qFAAqF,EACrF,0FAA0F,EAC1F,MAAM,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,CAAC,EAC1B,aAAa,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EAAE,EACjC,KAAK,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,EACxB,QAAQ,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EAAE,EAC3B,UAAU,IAAI,YAAY,EAC1B,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC;IACtB,oBAAoB;IACpB,KAAK,KAAK,OAAO;QAChB,UAAU;QACV,sDAAsD,CACvD,CAAC;AACH,CAAC;AAED,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,8PAA8P;IACvQ,MAAM,EAAE,8QAA8Q;IACtR,OAAO,EAAE,iMAAiM;IAC1M,KAAK,EAAE,kLAAkL;IACzL,WAAW,EAAE,yRAAyR;IACtS,gBAAgB,EAAE,oOAAoO;IACtP,WAAW,EAAE,mNAAmN;IAChO,QAAQ,EAAE,uLAAuL;IACjM,QAAQ,EAAE,kSAAkS;CAC5S,CAAC;AAEF,MAAM,KAAK,GAAG;IACb,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,8DAA8D;IACrE,IAAI,EAAE,0DAA0D;IAChE,YAAY,EACX,sEAAsE;CACvE,CAAC;AAEF,MAAM,YAAY,GACjB,6FAA6F,CAAC;AAE/F,MAAM,MAAM,GAAG;IACd,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,GAAG,EAAE,UAAU;CACf,CAAC"}
+{"version":3,"file":"classes.js","sourceRoot":"","sources":["../../../../src/components/button/classes.tsx"],"names":[],"mappings":";;;;;;AAGA,gDA+BC;AAlCD,gDAA8B;AAG9B,SAAgB,kBAAkB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,GAML;IACA,OAAO,IAAA,cAAU,EAChB,+TAA+T,EAC/T,uEAAuE,EACvE,oCAAoC,EACpC,sFAAsF,EACtF,iFAAiF,EACjF,0EAA0E,EAC1E,qFAAqF,EACrF,0FAA0F,EAC1F,MAAM,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,CAAC,EAC1B,aAAa,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,EAAE,EACjC,KAAK,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,EACxB,QAAQ,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EAAE,EAC3B,UAAU,IAAI,YAAY,EAC1B,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC;IACtB,oBAAoB;IACpB,KAAK,KAAK,OAAO;QAChB,UAAU;QACV,sDAAsD,CACvD,CAAC;AACH,CAAC;AAED,MAAM,MAAM,GAAG;IACd,OAAO,EAAE,8PAA8P;IACvQ,MAAM,EAAE,8QAA8Q;IACtR,OAAO,EAAE,iMAAiM;IAC1M,KAAK,EAAE,kLAAkL;IACzL,WAAW,EAAE,yRAAyR;IACtS,gBAAgB,EAAE,oOAAoO;IACtP,WAAW,EAAE,mNAAmN;IAChO,QAAQ,EAAE,uLAAuL;IACjM,QAAQ,EAAE,kSAAkS;CAC5S,CAAC;AACW,QAAA,kBAAkB,GAAG,MAAM,CAAC;AAEzC,MAAM,KAAK,GAAG;IACb,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,8DAA8D;IACrE,IAAI,EAAE,0DAA0D;IAChE,YAAY,EACX,sEAAsE;CACvE,CAAC;AAEF,MAAM,YAAY,GACjB,6FAA6F,CAAC;AAE/F,MAAM,MAAM,GAAG;IACd,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,GAAG,EAAE,UAAU;CACf,CAAC"}

package/dist/cjs/components/card/Card.d.ts

@@ -24,8 +24,8 @@ export declare const CardFooter: import("react").FunctionComponent<import("react
 export declare const CardActions: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const CardMenu: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const cardGridColumns: {
-    default: (size: number) => 1 | 3 | 2;
-    small: (size: number) => 1 | 4 | 3 | 2;
+    default: (size: number) => 2 | 1 | 3;
+    small: (size: number) => 2 | 1 | 4 | 3;
 };
 export declare const CardGrid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime.js").JSX.Element;
 export declare const Card: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>> & {

package/dist/cjs/components/dropdownMenu/DropdownMenu.js

@@ -51,8 +51,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
 const clsx_1 = __importStar(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
-const StyledContent = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Content, 'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default', 'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:max-h-[var(--radix-dropdown-menu-content-available-height)]', 'important:motion-reduce:animate-none', 'will-change-transform');
-const itemClassName = (0, clsx_1.default)('layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:rounded-sm layer-components:flex layer-components:items-center layer-components:pr-4 layer-components:pl-8 layer-components:py-3 layer-components:relative layer-components:text-left layer-components:select-none layer-components:cursor-pointer', 'layer-components:[&[data-disabled]]:color-gray9 layer-components:[&[data-disabled]]:pointer-events-none', 'layer-components:focus-visible:bg-gray2 layer-components:focus-visible:color-gray9', 'layer-components:focus:outline-none');
+const StyledContent = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Content, 'min-w-220px bg-white z-menu shadow-lg rounded-lg border-default', 'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'layer-components:max-h-[var(--radix-dropdown-menu-content-available-height)]', 'important:motion-reduce:animate-none', 'will-change-transform');
+const itemClassName = (0, clsx_1.default)('layer-components:text-md layer-components:leading-4 layer-components:color-black layer-components:flex layer-components:items-center layer-components:pr-4 layer-components:pl-8 layer-components:py-2 layer-components:relative layer-components:text-left layer-components:select-none layer-components:cursor-pointer', 'layer-components:[&[data-disabled]]:color-gray9 layer-components:[&[data-disabled]]:pointer-events-none', 'layer-components:focus-visible:bg-gray2 layer-components:focus-visible:color-gray9', 'layer-components:focus:outline-none');
 const StyledItemBase = (0, withClassName_js_1.withClassName)(DropdownMenuPrimitive.Item, itemClassName);
 const StyledItem = (_a) => {
     var { ref: forwardedRef, className, color } = _a, props = __rest(_a, ["ref", "className", "color"]);

package/dist/cjs/components/dropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/dropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,qFAAuE;AACvE,6CAAwC;AAExC,mEAA6D;AAE7D,MAAM,aAAa,GAAG,IAAA,gCAAa,EAClC,qBAAqB,CAAC,OAAO,EAC7B,iEAAiE,EACjE,iFAAiF,EACjF,0DAA0D,EAC1D,6DAA6D,EAC7D,gFAAgF,EAChF,sCAAsC,EACtC,uBAAuB,CACvB,CAAC;AACF,MAAM,aAAa,GAAG,IAAA,cAAU,EAC/B,4IAA4I,EAC5I,uEAAuE,EACvE,uDAAuD,EACvD,qCAAqC,CACrC,CAAC;AACF,MAAM,cAAc,GAAG,IAAA,gCAAa,EAAC,qBAAqB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;AAMhF,MAAM,UAAU,GAAG,CAAC,EAKI,EAAE,EAAE;QALR,EACnB,GAAG,EAAE,YAAY,EACjB,SAAS,EACT,KAAK,OAEkB,EADpB,KAAK,cAJW,6BAKnB,CADQ;IAER,OAAO,CACN,uBAAC,cAAc,oBACV,KAAK,IACT,SAAS,EAAE,IAAA,WAAI,EACd,KAAK,KAAK,aAAa;YACtB,8FAA8F,EAC/F,SAAS,CACT,EACD,GAAG,EAAE,YAAY,IAChB,CACF,CAAC;AACH,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,IAAA,gCAAa,EACvC,qBAAqB,CAAC,YAAY,EAClC,aAAa,CACb,CAAC;AACF,MAAM,eAAe,GAAG,IAAA,gCAAa,EACpC,qBAAqB,CAAC,SAAS,EAC/B,aAAa,CACb,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,qBAAqB,CAAC,KAAK,EAC3B,oDAAoD,CACpD,CAAC;AAEF,MAAM,eAAe,GAAG,IAAA,gCAAa,EACpC,qBAAqB,CAAC,SAAS,EAC/B,sBAAsB,CACtB,CAAC;AAEF,MAAM,mBAAmB,GAAG,IAAA,gCAAa,EACxC,qBAAqB,CAAC,aAAa,EACnC,gEAAgE,CAChE,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,qBAAqB,CAAC,KAAK,EAC3B,kCAAkC,CAClC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,gCAAa,EAClC,qBAAqB,CAAC,OAAO,EAC7B,aAAa,CACb,CAAC;AAEF,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAElD,UAAU;AACG,QAAA,gBAAgB,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAC9C,QAAA,mBAAmB,GAAG,aAAa,CAAC;AACpC,QAAA,gBAAgB,GAAG,UAAU,CAAC;AAC9B,QAAA,wBAAwB,GAAG,kBAAkB,CAAC;AAC9C,QAAA,sBAAsB,GAAG,qBAAqB,CAAC,UAAU,CAAC;AAC1D,QAAA,qBAAqB,GAAG,eAAe,CAAC;AACxC,QAAA,yBAAyB,GAAG,mBAAmB,CAAC;AAChD,QAAA,iBAAiB,GAAG,WAAW,CAAC;AAChC,QAAA,qBAAqB,GAAG,eAAe,CAAC;AACxC,QAAA,iBAAiB,GAAG,WAAW,CAAC;AAEtC,MAAM,mBAAmB,GAAG,CAAC,EAMnC,EAAE,EAAE;QAN+B,EACnC,QAAQ,EACR,UAAU,OAIV,EAHG,KAAK,cAH2B,0BAInC,CADQ;IAIR,OAAO,CACN,uBAAC,YAAY,IAAC,UAAU,EAAE,UAAU,YACnC,wBAAC,aAAa,oBAAK,KAAK,eACvB,gCAAK,SAAS,EAAC,4BAA4B,YAAE,QAAQ,GAAO,EAC5D,uBAAC,WAAW,KAAG,KACA,GACF,CACf,CAAC;AACH,CAAC,CAAC;AAfW,QAAA,mBAAmB,uBAe9B;AAEW,QAAA,yBAAyB,GAAG,IAAA,gCAAa,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAE5D,QAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAgB,EAAE;IAC3D,OAAO,EAAE,2BAAmB;IAC5B,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,UAAU;IAChB,YAAY,EAAE,kBAAkB;IAChC,UAAU,EAAE,qBAAqB,CAAC,UAAU;IAC5C,SAAS,EAAE,eAAe;IAC1B,aAAa,EAAE,mBAAmB;IAClC,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,eAAe;IAC1B,KAAK,EAAE,WAAW;IAClB,aAAa,EAAE,iCAAyB;CACxC,CAAC,CAAC"}
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/dropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/tabs/tabs.d.ts

@@ -1,10 +1,14 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare const TabsRoot: import("react").FunctionComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TabsList: import("react").FunctionComponent<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: import("react").FunctionComponent<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsTriggerBase: import("react").FunctionComponent<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface TabsTriggerProps extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
+    color?: 'default' | 'primary';
+}
+export declare const TabsTrigger: ({ className, color, ...props }: TabsTriggerProps) => import("react/jsx-runtime.js").JSX.Element;
 export declare const TabsContent: import("react").FunctionComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Tabs: import("react").FunctionComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
     List: import("react").FunctionComponent<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").FunctionComponent<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: ({ className, color, ...props }: TabsTriggerProps) => import("react/jsx-runtime.js").JSX.Element;
     Content: import("react").FunctionComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/cjs/components/tabs/tabs.js

@@ -33,13 +33,38 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.TabsRoot = void 0;
+exports.Tabs = exports.TabsContent = exports.TabsTrigger = exports.TabsTriggerBase = exports.TabsList = exports.TabsRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const TabsPrimitive = __importStar(require("@radix-ui/react-tabs"));
+const clsx_1 = __importDefault(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.TabsRoot = (0, withClassName_js_1.withClassName)(TabsPrimitive.Root, '');
 exports.TabsList = (0, withClassName_js_1.withClassName)(TabsPrimitive.List, 'flex flex-row flex-wrap py-2 px-2 items-start gap-2');
-exports.TabsTrigger = (0, withClassName_js_1.withClassName)(TabsPrimitive.Trigger, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-center layer-components:gap-2 layer-components:color-black layer-components:py-1 layer-components:px-5 layer-components:bg-wash layer-components:text-md layer-components:min-w-100px layer-components:rounded-lg layer-components:border layer-components:border layer-components:font-semibold layer-components:text-gray-7 layer-components:border-gray-7 layer-components:border-solid layer-components:transition-colors layer-components:cursor-pointer layer-components:select-none layer-components:font-sans layer-components:flex-shrink-0', 'hover:bg-primary-light focus-visible:focus-ring focus-visible:focus-ring-primary-dark focus-visible:outline-off focus-visible:bg-primary-light focus-visible:border-primary-dark [&[data-state=active]]:font-semibold [&[data-state=active]]:bg-primary-light [&[data-state=active]]:border-primary-light [&[data-state=active]]:text-black [&[data-state=active]]:cursor-default [&[data-state=active]]:hover:bg-primary-light [&[data-state=active]]:relative [&[data-state=active]]:z-1');
+exports.TabsTriggerBase = (0, withClassName_js_1.withClassName)(TabsPrimitive.Trigger, 'layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-center layer-components:gap-2 layer-components:color-black layer-components:py-1 layer-components:px-5 layer-components:bg-wash layer-components:text-md layer-components:min-w-100px layer-components:rounded-lg layer-components:border-default layer-components:font-semibold layer-components:text-gray-8 layer-components:border-gray-8 layer-components:transition-colors layer-components:cursor-pointer layer-components:select-none layer-components:font-sans layer-components:flex-shrink-0 layer-components:shadow-sm', 'layer-components:hover:bg-[var(--hover)]', 'layer-components:focus-visible:focus-ring layer-components:focus-visible:focus-ring-[var(--focus)] layer-components:focus-visible:outline-off', '[&[data-state=active]]:font-semibold [&[data-state=active]]:bg-[var(--focus,var(--hover))] [&[data-state=active]]:text-black [&[data-state=active]]:cursor-default [&[data-state=active]]:hover:bg-[var(--hover)] [&[data-state=active]]:relative [&[data-state=active]]:z-1');
+const colorClasses = {
+    default: 'layer-variants:[--bg:var(--color-white)] layer-variants:[--hover:var(--color-gray-3)] layer-variants:[--focus:var(--color-gray-4)] layer-variants:[--active:var(--color-gray-4)]',
+    primary: 'layer-variants:[--bg:var(--color-primary-light)] layer-variants:[--hover:var(--color-primary)] layer-variants:[--focus:var(--color-primary)] layer-variants:[--active:var(--color-primary)]',
+};
+const TabsTrigger = (_a) => {
+    var { className, color = 'primary' } = _a, props = __rest(_a, ["className", "color"]);
+    return ((0, jsx_runtime_1.jsx)(exports.TabsTriggerBase, Object.assign({ className: (0, clsx_1.default)(colorClasses[color], `btn-color-${color}`, className) }, props)));
+};
+exports.TabsTrigger = TabsTrigger;
 exports.TabsContent = (0, withClassName_js_1.withClassName)(TabsPrimitive.Content, '');
 exports.Tabs = Object.assign(exports.TabsRoot, {
     List: exports.TabsList,

package/dist/cjs/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oEAAsD;AACtD,mEAA6D;AAEhD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAEjD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EACpC,aAAa,CAAC,IAAI,EAClB,qDAAqD,CACrD,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EACvC,aAAa,CAAC,OAAO,EACrB,yQAAyQ,EACzQ,uQAAuQ,CACvQ,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EAAC,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEvD,QAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAQ,EAAE;IAC3C,IAAI,EAAE,gBAAQ;IACd,OAAO,EAAE,mBAAW;IACpB,OAAO,EAAE,mBAAW;CACpB,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oEAAsD;AACtD,gDAAwB;AACxB,mEAA6D;AAEhD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAEjD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EACpC,aAAa,CAAC,IAAI,EAClB,qDAAqD,CACrD,CAAC;AAEW,QAAA,eAAe,GAAG,IAAA,gCAAa,EAC3C,aAAa,CAAC,OAAO,EACrB,uQAAuQ,EACvQ,0CAA0C,EAC1C,mFAAmF,EACnF,sIAAsI,CACtI,CAAC;AAEF,MAAM,YAAY,GAAG;IACpB,OAAO,EACN,uIAAuI;IACxI,OAAO,EACN,kJAAkJ;CACnJ,CAAC;AAOK,MAAM,WAAW,GAAG,CAAC,EAIT,EAAE,EAAE;QAJK,EAC3B,SAAS,EACT,KAAK,GAAG,SAAS,OAEC,EADf,KAAK,cAHmB,sBAI3B,CADQ;IACe,OAAA,CACvB,uBAAC,uBAAe,kBACf,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,EAAE,EAAE,SAAS,CAAC,IACjE,KAAK,EACR,CACF,CAAA;CAAA,CAAC;AATW,QAAA,WAAW,eAStB;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EAAC,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEvD,QAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAQ,EAAE;IAC3C,IAAI,EAAE,gBAAQ;IACd,OAAO,EAAE,mBAAW;IACpB,OAAO,EAAE,mBAAW;CACpB,CAAC,CAAC"}

package/dist/cjs/components/tabs/tabs.stories.d.ts

@@ -1,7 +1,12 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    argTypes: {};
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+        };
+    };
     parameters: {
         controls: {
             expanded: boolean;
@@ -9,5 +14,5 @@ declare const meta: {
     };
 };
 export default meta;
-type Story = StoryObj;
+type Story = StoryObj<Meta>;
 export declare const Default: Story;

package/dist/cjs/components/tabs/tabs.stories.js

@@ -3,20 +3,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tabs_js_1 = require("./tabs.js");
 const react_1 = require("react");
+const tabs_js_1 = require("./tabs.js");
 const meta = {
     title: 'Tabs',
-    argTypes: {},
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'primary'],
+        },
+    },
     parameters: {
         controls: { expanded: true },
     },
 };
 exports.default = meta;
 exports.Default = {
-    render: () => {
+    render: (args) => {
         const [value, setValue] = (0, react_1.useState)('tab1');
-        return ((0, jsx_runtime_1.jsxs)(tabs_js_1.TabsRoot, { value: value, onValueChange: setValue, children: [(0, jsx_runtime_1.jsxs)(tabs_js_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab1", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab2", children: "Tab 2 (long)" }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab3", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab1", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab2", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab3", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 3 content" }) })] }));
+        return ((0, jsx_runtime_1.jsxs)(tabs_js_1.TabsRoot, { value: value, onValueChange: setValue, children: [(0, jsx_runtime_1.jsxs)(tabs_js_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab1", color: args.color, children: "Tab 1" }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab2", color: args.color, children: "Tab 2 (long)" }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsTrigger, { value: "tab3", color: args.color, children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab1", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab2", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(tabs_js_1.TabsContent, { value: "tab3", children: (0, jsx_runtime_1.jsx)("div", { children: "Tab 3 content" }) })] }));
     },
 };
 //# sourceMappingURL=tabs.stories.js.map

package/dist/cjs/components/tabs/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAAyE;AACzE,iCAAiC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,wBAAC,kBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,wBAAC,kBAAQ,eACR,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,EAC7C,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,6BAA2B,EACpD,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,IACnC,EACX,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,IACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,uCAAyE;AAEzE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;SAC/B;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,wBAAC,kBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,wBAAC,kBAAQ,eACR,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,6BAE7B,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,IACJ,EACX,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,YACxB,4DAAwB,GACX,IACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}

package/dist/cjs/hooks/index.d.ts

@@ -1,10 +1,11 @@
+export * from './useAnimationFrame.js';
+export * from './useLongPress.js';
 export * from './useMergedRef.js';
+export * from './useOnUnmount.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';
+export * from './useTitleBarColor.js';
 export * from './useToggle.js';
 export * from './useVisualViewportOffset.js';
-export * from './useOnUnmount.js';
 export * from './withClassName.js';
-export * from './useAnimationFrame.js';
-export * from './useLongPress.js';
-export * from './useTitleBarColor.js';
+export * from './withProps.js';

package/dist/cjs/hooks/index.js

@@ -15,14 +15,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAnimationFrame.js"), exports);
+__exportStar(require("./useLongPress.js"), exports);
 __exportStar(require("./useMergedRef.js"), exports);
+__exportStar(require("./useOnUnmount.js"), exports);
 __exportStar(require("./useSize.js"), exports);
 __exportStar(require("./useStableCallback.js"), exports);
+__exportStar(require("./useTitleBarColor.js"), exports);
 __exportStar(require("./useToggle.js"), exports);
 __exportStar(require("./useVisualViewportOffset.js"), exports);
-__exportStar(require("./useOnUnmount.js"), exports);
 __exportStar(require("./withClassName.js"), exports);
-__exportStar(require("./useAnimationFrame.js"), exports);
-__exportStar(require("./useLongPress.js"), exports);
-__exportStar(require("./useTitleBarColor.js"), exports);
+__exportStar(require("./withProps.js"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,+CAA6B;AAC7B,yDAAuC;AACvC,iDAA+B;AAC/B,+DAA6C;AAC7C,oDAAkC;AAClC,qDAAmC;AACnC,yDAAuC;AACvC,oDAAkC;AAClC,wDAAsC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAAuC;AACvC,oDAAkC;AAClC,oDAAkC;AAClC,oDAAkC;AAClC,+CAA6B;AAC7B,yDAAuC;AACvC,wDAAsC;AACtC,iDAA+B;AAC/B,+DAA6C;AAC7C,qDAAmC;AACnC,iDAA+B"}

package/dist/cjs/hooks/withProps.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const withProps: <T extends {}, Extras extends {}>(Component: React.ComponentType<T & Extras>, extras: Extras) => (props: T & Extras) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/hooks/withProps.js

@@ -0,0 +1,12 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const withProps = (Component, extras) => {
+    return (props) => {
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, extras));
+    };
+};
+exports.withProps = withProps;
+//# sourceMappingURL=withProps.js.map

package/dist/cjs/hooks/withProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withProps.js","sourceRoot":"","sources":["../../../src/hooks/withProps.tsx"],"names":[],"mappings":";;;;AAEO,MAAM,SAAS,GAAG,CACxB,SAA0C,EAC1C,MAAc,EACb,EAAE;IACH,OAAO,CAAC,KAAiB,EAAE,EAAE;QAC5B,OAAO,uBAAC,SAAS,oBAAK,KAAK,EAAM,MAAM,EAAI,CAAC;IAC7C,CAAC,CAAC;AACH,CAAC,CAAC;AAPW,QAAA,SAAS,aAOpB"}