@a-type/ui 1.5.0 → 1.5.1

package/dist/esm/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").JSX.Element;
 export declare const Card: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>> & {

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

@@ -15,8 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames, { clsx } from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
-const StyledContent = 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 = classNames('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 = 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 = classNames('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 = withClassName(DropdownMenuPrimitive.Item, itemClassName);
 const StyledItem = (_a) => {
     var { ref: forwardedRef, className, color } = _a, props = __rest(_a, ["ref", "className", "color"]);

package/dist/esm/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,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AACvE,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,aAAa,GAAG,aAAa,CAClC,qBAAqB,CAAC,OAAO,EAC7B,iEAAiE,EACjE,iFAAiF,EACjF,0DAA0D,EAC1D,6DAA6D,EAC7D,gFAAgF,EAChF,sCAAsC,EACtC,uBAAuB,CACvB,CAAC;AACF,MAAM,aAAa,GAAG,UAAU,CAC/B,4IAA4I,EAC5I,uEAAuE,EACvE,uDAAuD,EACvD,qCAAqC,CACrC,CAAC;AACF,MAAM,cAAc,GAAG,aAAa,CAAC,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,KAAC,cAAc,oBACV,KAAK,IACT,SAAS,EAAE,IAAI,CACd,KAAK,KAAK,aAAa;YACtB,8FAA8F,EAC/F,SAAS,CACT,EACD,GAAG,EAAE,YAAY,IAChB,CACF,CAAC;AACH,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,aAAa,CACvC,qBAAqB,CAAC,YAAY,EAClC,aAAa,CACb,CAAC;AACF,MAAM,eAAe,GAAG,aAAa,CACpC,qBAAqB,CAAC,SAAS,EAC/B,aAAa,CACb,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,qBAAqB,CAAC,KAAK,EAC3B,oDAAoD,CACpD,CAAC;AAEF,MAAM,eAAe,GAAG,aAAa,CACpC,qBAAqB,CAAC,SAAS,EAC/B,sBAAsB,CACtB,CAAC;AAEF,MAAM,mBAAmB,GAAG,aAAa,CACxC,qBAAqB,CAAC,aAAa,EACnC,gEAAgE,CAChE,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAChC,qBAAqB,CAAC,KAAK,EAC3B,kCAAkC,CAClC,CAAC;AAEF,MAAM,aAAa,GAAG,aAAa,CAClC,qBAAqB,CAAC,OAAO,EAC7B,aAAa,CACb,CAAC;AAEF,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAElD,UAAU;AACV,MAAM,CAAC,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC;AACjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAC3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,kBAAkB,CAAC;AAC3D,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,UAAU,CAAC;AACvE,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,CAAC;AACrD,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAC7D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAC7C,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,CAAC;AACrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAMnC,EAAE,EAAE;QAN+B,EACnC,QAAQ,EACR,UAAU,OAIV,EAHG,KAAK,cAH2B,0BAInC,CADQ;IAIR,OAAO,CACN,KAAC,YAAY,IAAC,UAAU,EAAE,UAAU,YACnC,MAAC,aAAa,oBAAK,KAAK,eACvB,cAAK,SAAS,EAAC,4BAA4B,YAAE,QAAQ,GAAO,EAC5D,KAAC,WAAW,KAAG,KACA,GACF,CACf,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAEzE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC3D,OAAO,EAAE,mBAAmB;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,yBAAyB;CACxC,CAAC,CAAC"}
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/dropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/esm/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").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").JSX.Element;
     Content: import("react").FunctionComponent<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/esm/components/tabs/tabs.js

@@ -1,9 +1,30 @@
 // @unocss-include
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 export const TabsList = withClassName(TabsPrimitive.List, 'flex flex-row flex-wrap py-2 px-2 items-start gap-2');
-export const TabsTrigger = 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');
+export const TabsTriggerBase = 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)]',
+};
+export const TabsTrigger = (_a) => {
+    var { className, color = 'primary' } = _a, props = __rest(_a, ["className", "color"]);
+    return (_jsx(TabsTriggerBase, Object.assign({ className: clsx(colorClasses[color], `btn-color-${color}`, className) }, props)));
+};
 export const TabsContent = withClassName(TabsPrimitive.Content, '');
 export const Tabs = Object.assign(TabsRoot, {
     List: TabsList,

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,aAAa,CAAC,IAAI,EAClB,qDAAqD,CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,aAAa,CAAC,OAAO,EACrB,yQAAyQ,EACzQ,uQAAuQ,CACvQ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACpB,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,aAAa,CAAC,IAAI,EAClB,qDAAqD,CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,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;AAOF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAIT,EAAE,EAAE;QAJK,EAC3B,SAAS,EACT,KAAK,GAAG,SAAS,OAEC,EADf,KAAK,cAHmB,sBAI3B,CADQ;IACe,OAAA,CACvB,KAAC,eAAe,kBACf,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,EAAE,EAAE,SAAS,CAAC,IACjE,KAAK,EACR,CACF,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACpB,CAAC,CAAC"}

package/dist/esm/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/esm/components/tabs/tabs.stories.js

@@ -1,19 +1,24 @@
 // @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TabsRoot, TabsList, TabsContent, TabsTrigger } from './tabs.js';
 import { useState } from 'react';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './tabs.js';
 const meta = {
     title: 'Tabs',
-    argTypes: {},
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'primary'],
+        },
+    },
     parameters: {
         controls: { expanded: true },
     },
 };
 export default meta;
 export const Default = {
-    render: () => {
+    render: (args) => {
         const [value, setValue] = useState('tab1');
-        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2 (long)" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { children: "Tab 1 content" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { children: "Tab 2 content" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { children: "Tab 3 content" }) })] }));
+        return (_jsxs(TabsRoot, { value: value, onValueChange: setValue, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", color: args.color, children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", color: args.color, children: "Tab 2 (long)" }), _jsx(TabsTrigger, { value: "tab3", color: args.color, children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { children: "Tab 1 content" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { children: "Tab 2 content" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { children: "Tab 3 content" }) })] }));
     },
 };
 //# sourceMappingURL=tabs.stories.js.map

package/dist/esm/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,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;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,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,MAAC,QAAQ,eACR,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,EAC7C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,6BAA2B,EACpD,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,sBAAoB,IACnC,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,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,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;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,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3C,OAAO,CACN,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,aAC9C,MAAC,QAAQ,eACR,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,6BAE7B,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,sBAE7B,IACJ,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,YACxB,0CAAwB,GACX,IACJ,CACX,CAAC;IACH,CAAC;CACe,CAAC"}

package/dist/esm/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/esm/hooks/index.js

@@ -1,12 +1,13 @@
 // @unocss-include
+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';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/esm/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/esm/hooks/withProps.js

@@ -0,0 +1,8 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+export const withProps = (Component, extras) => {
+    return (props) => {
+        return _jsx(Component, Object.assign({}, props, extras));
+    };
+};
+//# sourceMappingURL=withProps.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "files": [
     "/dist",

package/src/components/avatar/Avatar.tsx

@@ -22,7 +22,7 @@ export function Avatar({
 		<div
 			data-pop={popIn}
 			className={classNames(
-				'layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px h-24px select-none relative bg-white flex-shrink-0)',
+				'layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px aspect-1 select-none relative bg-white flex-shrink-0)',
 				popIn &&
 					'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
 				empty && 'layer-components(border-dashed bg-gray2)',
@@ -46,7 +46,7 @@ function AvatarContent({
 	if (imageSrc) {
 		return (
 			<img
-				className="w-full h-full object-cover rounded-lg"
+				className="w-full h-full object-cover"
 				referrerPolicy="no-referrer"
 				crossOrigin="anonymous"
 				src={imageSrc}
@@ -55,7 +55,7 @@ function AvatarContent({
 		);
 	}
 	return (
-		<div className="color-black items-center justify-center flex text-sm font-bold rounded-lg">
+		<div className="color-black items-center justify-center flex text-sm font-bold">
 			{name?.charAt(0) || '?'}
 		</div>
 	);

package/src/components/box/Box.stories.tsx

@@ -23,6 +23,9 @@ const meta = {
 				<Button>Default</Button>
 			</>
 		),
+		p: 'md',
+		gap: 'md',
+		border: true,
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/components/box/Box.tsx

@@ -12,21 +12,35 @@ export type BoxJustification =
 	| 'around'
 	| 'end';
 export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BoxResponsive<T> =
+	| T
+	| {
+			sm?: T;
+			md?: T;
+			lg?: T;
+	  };
+
+function isResponsive<T>(
+	value: BoxResponsive<T>,
+): value is { sm?: T; md?: T; lg?: T } {
+	return typeof value === 'object';
+}
 
 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>;
 }
 
@@ -34,8 +48,8 @@ export function Box({
 	className,
 	items: itemsSolo,
 	justify: justifySolo,
-	align,
-	gap = 'md',
+	layout: align,
+	gap = 'none',
 	wrap,
 	p = 'none',
 	d = 'row',
@@ -45,6 +59,7 @@ export function Box({
 	surface,
 	theme,
 	border,
+	full,
 	ref,
 	...rest
 }: BoxProps) {
@@ -67,16 +82,43 @@ export function Box({
 			{...rest}
 			style={style}
 			className={clsx(
-				'flex',
+				'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',
@@ -91,9 +133,24 @@ export function Box({
 					'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 border-black)': surface === true,
 					'layer-components:(bg-primary-wash border-primary-dark)':
@@ -101,6 +158,8 @@ export function Box({
 					'layer-components:(bg-secondary-wash border-secondary-dark)':
 						surface === 'secondary',
 					'layer-components:(border border-solid rounded-lg)': border,
+					'layer-components:w-full': full === true || full === 'width',
+					'layer-components:h-full': full === true || full === 'height',
 				},
 				theme && `theme-${theme}`,
 				className,

package/src/components/button/classes.tsx

@@ -45,6 +45,7 @@ const colors = {
 	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,
 	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-none shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
 };
+export const buttonColorClasses = colors;
 
 const sizes = {
 	default: '',

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 const StyledContent = withClassName(
 	DropdownMenuPrimitive.Content,
-	'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default',
+	'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',
@@ -15,7 +15,7 @@ const StyledContent = withClassName(
 	'will-change-transform',
 );
 const itemClassName = classNames(
-	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer)',
+	'layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)',
 	'layer-components:[&[data-disabled]]:(color-gray9 pointer-events-none)',
 	'layer-components:focus-visible:(bg-gray2 color-gray9)',
 	'layer-components:focus:outline-none',

package/src/components/tabs/tabs.stories.tsx

@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { TabsRoot, TabsList, TabsContent, TabsTrigger } from './tabs.js';
 import { useState } from 'react';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './tabs.js';
 
 const meta = {
 	title: 'Tabs',
-	argTypes: {},
+	argTypes: {
+		color: {
+			control: 'select',
+			options: ['default', 'primary'],
+		},
+	},
 	parameters: {
 		controls: { expanded: true },
 	},
@@ -12,17 +17,23 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<Meta>;
 
 export const Default: Story = {
-	render: () => {
+	render: (args) => {
 		const [value, setValue] = useState('tab1');
 		return (
 			<TabsRoot value={value} onValueChange={setValue}>
 				<TabsList>
-					<TabsTrigger value="tab1">Tab 1</TabsTrigger>
-					<TabsTrigger value="tab2">Tab 2 (long)</TabsTrigger>
-					<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+					<TabsTrigger value="tab1" color={args.color}>
+						Tab 1
+					</TabsTrigger>
+					<TabsTrigger value="tab2" color={args.color}>
+						Tab 2 (long)
+					</TabsTrigger>
+					<TabsTrigger value="tab3" color={args.color}>
+						Tab 3
+					</TabsTrigger>
 				</TabsList>
 				<TabsContent value="tab1">
 					<div>Tab 1 content</div>

package/src/components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
@@ -8,10 +9,35 @@ export const TabsList = withClassName(
 	'flex flex-row flex-wrap py-2 px-2 items-start gap-2',
 );
 
-export const TabsTrigger = withClassName(
+export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border border font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans flex-shrink-0)',
-	'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
+	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-8 border-gray-8 transition-colors cursor-pointer select-none font-sans flex-shrink-0 shadow-sm)',
+	'layer-components:hover:bg-[var(--hover)]',
+	'layer-components:focus-visible:(focus-ring focus-ring-[var(--focus)] outline-off)',
+	'[&[data-state=active]]:(font-semibold bg-[var(--focus,var(--hover))] text-black cursor-default hover:bg-[var(--hover)] relative z-1)',
+);
+
+const colorClasses = {
+	default:
+		'layer-variants:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-gray-4)] [--active:var(--color-gray-4)])',
+	primary:
+		'layer-variants:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)])',
+};
+
+export interface TabsTriggerProps
+	extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
+	color?: 'default' | 'primary';
+}
+
+export const TabsTrigger = ({
+	className,
+	color = 'primary',
+	...props
+}: TabsTriggerProps) => (
+	<TabsTriggerBase
+		className={clsx(colorClasses[color], `btn-color-${color}`, className)}
+		{...props}
+	/>
 );
 
 export const TabsContent = withClassName(TabsPrimitive.Content, '');

package/src/hooks/index.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/src/hooks/withProps.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const withProps = <T extends {}, Extras extends {}>(
+	Component: React.ComponentType<T & Extras>,
+	extras: Extras,
+) => {
+	return (props: T & Extras) => {
+		return <Component {...props} {...extras} />;
+	};
+};