@a-type/ui 0.1.16 → 0.1.17

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

@@ -0,0 +1,18 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { StoryObj } from '@storybook/react';
+import { CardRoot } from './Card.js';
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardRoot>;
+export declare const Default: Story;

package/dist/cjs/components/card/Card.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card_js_1 = require("./Card.js");
+const button_js_1 = require("../button.js");
+const icon_js_1 = require("../icon.js");
+const meta = {
+    title: 'Card',
+    component: Card_js_1.CardRoot,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) }), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+};
+//# sourceMappingURL=Card.stories.js.map

package/dist/cjs/components/card/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAMmB;AACnB,4CAAsC;AACtC,wCAAkC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,kBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,wBAAC,kBAAQ,eACR,uBAAC,kBAAQ,cACR,uBAAC,mBAAS,6BAAuB,GACvB,EACX,uBAAC,oBAAU,cACV,wBAAC,qBAAW,eACX,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}

package/dist/cjs/components/relativeTime/RelativeTime.js

@@ -6,16 +6,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const date_fns_1 = require("date-fns");
 const utils_1 = require("@a-type/utils");
+function formatDistanceToNow(date) {
+    const now = Date.now();
+    if (Math.abs(date.getTime() - now) < 1000) {
+        return 'just now';
+    }
+    return ((0, date_fns_1.formatDistanceToNowStrict)(date) +
+        (date.getTime() < now ? ' ago' : ' from now'));
+}
 function RelativeTime({ value, abbreviate }) {
     const asDate = (0, react_1.useMemo)(() => new Date(value), [value]);
     const [time, setTime] = (0, react_1.useState)(() => abbreviate
-        ? (0, utils_1.shortenTimeUnits)((0, date_fns_1.formatDistanceToNowStrict)(asDate))
-        : (0, date_fns_1.formatDistanceToNowStrict)(asDate));
+        ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
+        : formatDistanceToNow(asDate));
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {
             setTime(abbreviate
-                ? (0, utils_1.shortenTimeUnits)((0, date_fns_1.formatDistanceToNowStrict)(asDate))
-                : (0, date_fns_1.formatDistanceToNowStrict)(asDate));
+                ? (0, utils_1.shortenTimeUnits)(formatDistanceToNow(asDate))
+                : formatDistanceToNow(asDate));
         }, 60 * 1000);
         return () => clearInterval(interval);
     }, [asDate, abbreviate]);

package/dist/cjs/components/relativeTime/RelativeTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAqD;AACrD,uCAAqD;AACrD,yCAAiD;AAOjD,SAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACnE,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACpC,UAAU;QACR,CAAC,CAAC,IAAA,wBAAgB,EAAC,IAAA,oCAAyB,EAAC,MAAM,CAAC,CAAC;QACrD,CAAC,CAAC,IAAA,oCAAyB,EAAC,MAAM,CAAC,CACtC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CACL,UAAU;gBACR,CAAC,CAAC,IAAA,wBAAgB,EAAC,IAAA,oCAAyB,EAAC,MAAM,CAAC,CAAC;gBACrD,CAAC,CAAC,IAAA,oCAAyB,EAAC,MAAM,CAAC,CACtC,CAAC;QACJ,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QACd,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,2DAAG,IAAI,GAAI,CAAC;AACrB,CAAC;AApBD,oCAoBC"}
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAqD;AACrD,uCAAqD;AACrD,yCAAiD;AAOjD,SAAS,mBAAmB,CAAC,IAAU;IACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE;QAC1C,OAAO,UAAU,CAAC;KAClB;IACD,OAAO,CACN,IAAA,oCAAyB,EAAC,IAAI,CAAC;QAC/B,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAC7C,CAAC;AACH,CAAC;AAED,SAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,IAAA,wBAAgB,EAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;gBAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;QACH,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QACd,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,2DAAG,IAAI,GAAI,CAAC;AACpB,CAAC;AApBD,oCAoBC"}

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

@@ -27,7 +27,7 @@ exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.TabsRoot
 const Tabs = __importStar(require("@radix-ui/react-tabs"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 exports.TabsRoot = (0, withClassName_js_1.withClassName)(Tabs.Root, '');
-exports.TabsList = (0, withClassName_js_1.withClassName)(Tabs.List, 'flex flex-row gap-2 py-3 px-2 justify-center');
-exports.TabsTrigger = (0, withClassName_js_1.withClassName)(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 rounded-lg bg-wash text-md font-bold min-w-100px border border-solid border-gray2 hover:bg-gray2 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-light border-primary-light)');
+exports.TabsList = (0, withClassName_js_1.withClassName)(Tabs.List, 'flex flex-row py-2 px-2 justify-center');
+exports.TabsTrigger = (0, withClassName_js_1.withClassName)(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md font-bold min-w-100px border border-solid border-gray-4', 'hover:bg-gray-3 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-wash border-primary hover:bg-primary-wash relative z-1)', 'first:rounded-l-full last:rounded-r-full');
 exports.TabsContent = (0, withClassName_js_1.withClassName)(Tabs.Content, '');
 //# sourceMappingURL=tabs.js.map

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,2DAA6C;AAC7C,mEAA6D;AAEhD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAExC,QAAA,QAAQ,GAAG,IAAA,gCAAa,EACpC,IAAI,CAAC,IAAI,EACT,8CAA8C,CAC9C,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EACvC,IAAI,CAAC,OAAO,EACZ,gRAAgR,CAChR,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA6C;AAC7C,mEAA6D;AAEhD,QAAA,QAAQ,GAAG,IAAA,gCAAa,EAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAExC,QAAA,QAAQ,GAAG,IAAA,gCAAa,EACpC,IAAI,CAAC,IAAI,EACT,wCAAwC,CACxC,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EACvC,IAAI,CAAC,OAAO,EACZ,+IAA+I,EAC/I,qJAAqJ,EACrJ,0CAA0C,CAC1C,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,gCAAa,EAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC"}

package/dist/esm/components/card/Card.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { StoryObj } from '@storybook/react';
+import { CardRoot } from './Card.js';
+declare const meta: {
+    title: string;
+    component: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardRoot>;
+export declare const Default: Story;

package/dist/esm/components/card/Card.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardActions, CardFooter, CardMain, CardRoot, CardTitle, } from './Card.js';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+const meta = {
+    title: 'Card',
+    component: CardRoot,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: "Card Title" }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+};
+//# sourceMappingURL=Card.stories.js.map

package/dist/esm/components/card/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,GACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,MAAC,QAAQ,eACR,KAAC,QAAQ,cACR,KAAC,SAAS,6BAAuB,GACvB,EACX,KAAC,UAAU,cACV,MAAC,WAAW,eACX,KAAC,MAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,KAAC,MAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}

package/dist/esm/components/relativeTime/RelativeTime.js

@@ -3,16 +3,24 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState, useMemo } from 'react';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { shortenTimeUnits } from '@a-type/utils';
+function formatDistanceToNow(date) {
+    const now = Date.now();
+    if (Math.abs(date.getTime() - now) < 1000) {
+        return 'just now';
+    }
+    return (formatDistanceToNowStrict(date) +
+        (date.getTime() < now ? ' ago' : ' from now'));
+}
 export function RelativeTime({ value, abbreviate }) {
     const asDate = useMemo(() => new Date(value), [value]);
     const [time, setTime] = useState(() => abbreviate
-        ? shortenTimeUnits(formatDistanceToNowStrict(asDate))
-        : formatDistanceToNowStrict(asDate));
+        ? shortenTimeUnits(formatDistanceToNow(asDate))
+        : formatDistanceToNow(asDate));
     useEffect(() => {
         const interval = setInterval(() => {
             setTime(abbreviate
-                ? shortenTimeUnits(formatDistanceToNowStrict(asDate))
-                : formatDistanceToNowStrict(asDate));
+                ? shortenTimeUnits(formatDistanceToNow(asDate))
+                : formatDistanceToNow(asDate));
         }, 60 * 1000);
         return () => clearInterval(interval);
     }, [asDate, abbreviate]);

package/dist/esm/components/relativeTime/RelativeTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOjD,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACnE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACpC,UAAU;QACR,CAAC,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACrD,CAAC,CAAC,yBAAyB,CAAC,MAAM,CAAC,CACtC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CACL,UAAU;gBACR,CAAC,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;gBACrD,CAAC,CAAC,yBAAyB,CAAC,MAAM,CAAC,CACtC,CAAC;QACJ,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QACd,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,4BAAG,IAAI,GAAI,CAAC;AACrB,CAAC"}
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOjD,SAAS,mBAAmB,CAAC,IAAU;IACtC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE;QAC1C,OAAO,UAAU,CAAC;KAClB;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAC7C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAqB;IACpE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;gBAC/C,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAC9B,CAAC;QACH,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QACd,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}

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

@@ -1,7 +1,7 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import { withClassName } from '../../hooks/withClassName.js';
 export const TabsRoot = withClassName(Tabs.Root, '');
-export const TabsList = withClassName(Tabs.List, 'flex flex-row gap-2 py-3 px-2 justify-center');
-export const TabsTrigger = withClassName(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 rounded-lg bg-wash text-md font-bold min-w-100px border border-solid border-gray2 hover:bg-gray2 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-light border-primary-light)');
+export const TabsList = withClassName(Tabs.List, 'flex flex-row py-2 px-2 justify-center');
+export const TabsTrigger = withClassName(Tabs.Trigger, 'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md font-bold min-w-100px border border-solid border-gray-4', 'hover:bg-gray-3 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-wash border-primary hover:bg-primary-wash relative z-1)', 'first:rounded-l-full last:rounded-r-full');
 export const TabsContent = withClassName(Tabs.Content, '');
 //# sourceMappingURL=tabs.js.map

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,IAAI,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,IAAI,CAAC,IAAI,EACT,8CAA8C,CAC9C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,IAAI,CAAC,OAAO,EACZ,gRAAgR,CAChR,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,IAAI,CAAC,IAAI,EACT,wCAAwC,CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,IAAI,CAAC,OAAO,EACZ,+IAA+I,EAC/I,qJAAqJ,EACrJ,0CAA0C,CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "files": [
     "/dist"
@@ -47,6 +47,7 @@
     "@radix-ui/react-toast": "^1.0.0",
     "@radix-ui/react-toggle-group": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.0",
+    "@react-spring/web": "^9.7.3",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-document": "^2.0.3",
     "@tiptap/extension-paragraph": "^2.0.3",
@@ -66,16 +67,25 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.0",
+    "@storybook/addon-essentials": "7.6.3",
+    "@storybook/addon-interactions": "7.6.3",
+    "@storybook/addon-links": "7.6.3",
+    "@storybook/addon-onboarding": "1.0.9",
+    "@storybook/blocks": "7.6.3",
+    "@storybook/react": "7.6.3",
+    "@storybook/react-vite": "7.6.3",
+    "@storybook/test": "7.6.3",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@unocss/core": "^0.54.0",
     "@unocss/transformer-variant-group": "^0.54.0",
     "axios": "^1.5.0",
-    "dotenv": "^16.3.1",
     "change-case": "^4.1.2",
+    "dotenv": "^16.3.1",
     "fs-extra": "^11.1.1",
     "prettier": "^3.0.3",
+    "storybook": "7.6.3",
     "typescript": "^5.0.2",
     "unocss": "^0.54.0"
   },
@@ -84,6 +94,8 @@
     "ci:version": "pnpm changeset version",
     "ci:publish": "pnpm changeset publish --access=public",
     "prepublish": "pnpm run build",
-    "icons": "node ./scripts/generateIcons.js"
+    "icons": "node ./scripts/generateIcons.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }