@shipfox/react-ui 0.0.1

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type {StorybookConfigVite} from '@storybook/builder-vite';
+import type {StorybookConfig} from '@storybook/react-vite';
+
+const config: StorybookConfig & StorybookConfigVite = {
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['storybook-addon-pseudo-states'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        viteConfigPath: 'vitest.config.ts',
+      },
+    },
+  },
+};
+
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,48 @@
+import '../index.css';
+import type {Decorator, Preview} from '@storybook/react';
+import {ThemeProvider} from '../src/components/theme-provider';
+
+const withTheme: Decorator = (Story, context) => {
+  return <ThemeProvider defaultTheme={context.globals.theme}>{Story()}</ThemeProvider>;
+};
+
+const preview: Preview = {
+  decorators: [withTheme],
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'system',
+      toolbar: {
+        icon: 'sun',
+        items: [
+          {
+            value: 'light',
+            icon: 'sun',
+            title: 'Light',
+          },
+          {
+            value: 'dark',
+            icon: 'moon',
+            title: 'Dark',
+          },
+          {
+            value: 'system',
+            icon: 'info',
+            title: 'System',
+          },
+        ],
+        showName: true,
+      },
+    },
+  },
+};
+
+export default preview;

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+ WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+
+> @shipfox/react-ui@0.0.1 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> swc
+
+Successfully compiled: 43 files with swc (174.16ms)

package/.turbo/turbo-check.log

@@ -0,0 +1,6 @@
+ WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+
+> @shipfox/react-ui@0.0.1 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> biome --fix
+
+Checked 59 files in 269ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -0,0 +1,5 @@
+ WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
+
+> @shipfox/react-ui@0.0.1 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> tsc-emit
+

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @shipfox/react-ui
+
+## 0.0.1
+
+### Patch Changes
+
+- 9bd640b: Modify repository structure

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shipfox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/colors.stories.conts.d.ts

@@ -0,0 +1,33 @@
+export declare const primitiveColors: {
+    readonly neutral: {
+        readonly variants: readonly ["bg-neutral-0", "bg-neutral-50", "bg-neutral-100", "bg-neutral-200", "bg-neutral-300", "bg-neutral-400", "bg-neutral-500", "bg-neutral-600", "bg-neutral-700", "bg-neutral-800", "bg-neutral-900", "bg-neutral-950", "bg-neutral-1000"];
+    };
+    readonly purple: {
+        readonly variants: readonly ["bg-purple-50", "bg-purple-100", "bg-purple-200", "bg-purple-300", "bg-purple-400", "bg-purple-500", "bg-purple-600", "bg-purple-700", "bg-purple-800", "bg-purple-900", "bg-purple-950"];
+    };
+    readonly blue: {
+        readonly variants: readonly ["bg-blue-50", "bg-blue-100", "bg-blue-200", "bg-blue-300", "bg-blue-400", "bg-blue-500", "bg-blue-600", "bg-blue-700", "bg-blue-800", "bg-blue-900", "bg-blue-950"];
+    };
+    readonly green: {
+        readonly variants: readonly ["bg-green-50", "bg-green-100", "bg-green-200", "bg-green-300", "bg-green-400", "bg-green-500", "bg-green-600", "bg-green-700", "bg-green-800", "bg-green-900", "bg-green-950"];
+    };
+    readonly primary: {
+        readonly variants: readonly ["bg-primary-50", "bg-primary-100", "bg-primary-200", "bg-primary-300", "bg-primary-400", "bg-primary-500", "bg-primary-600", "bg-primary-700", "bg-primary-800", "bg-primary-900", "bg-primary-950"];
+    };
+    readonly red: {
+        readonly variants: readonly ["bg-red-50", "bg-red-100", "bg-red-200", "bg-red-300", "bg-red-400", "bg-red-500", "bg-red-600", "bg-red-700", "bg-red-800", "bg-red-900", "bg-red-950"];
+    };
+    readonly orange: {
+        readonly variants: readonly ["bg-orange-50", "bg-orange-100", "bg-orange-200", "bg-orange-300", "bg-orange-400", "bg-orange-500", "bg-orange-600", "bg-orange-700", "bg-orange-800", "bg-orange-900", "bg-orange-950"];
+    };
+    readonly accent: {
+        readonly variants: readonly ["bg-accent-purple", "bg-accent-indigo", "bg-accent-mint", "bg-accent-green", "bg-accent-teal", "bg-accent-brown", "bg-accent-blue", "bg-accent-orange", "bg-accent-yellow", "bg-accent-pink", "bg-accent-gray", "bg-accent-cyan", "bg-accent-red"];
+    };
+    readonly 'alpha-white': {
+        readonly variants: readonly ["bg-alpha-white-0", "bg-alpha-white-2", "bg-alpha-white-4", "bg-alpha-white-6", "bg-alpha-white-8", "bg-alpha-white-10", "bg-alpha-white-12", "bg-alpha-white-16", "bg-alpha-white-24", "bg-alpha-white-40", "bg-alpha-white-56", "bg-alpha-white-64", "bg-alpha-white-72", "bg-alpha-white-80", "bg-alpha-white-88"];
+    };
+    readonly 'alpha-black': {
+        readonly variants: readonly ["bg-alpha-black-0", "bg-alpha-black-2", "bg-alpha-black-4", "bg-alpha-black-6", "bg-alpha-black-8", "bg-alpha-black-10", "bg-alpha-black-12", "bg-alpha-black-16", "bg-alpha-black-24", "bg-alpha-black-40", "bg-alpha-black-56", "bg-alpha-black-64", "bg-alpha-black-72", "bg-alpha-black-80", "bg-alpha-black-88"];
+    };
+};
+//# sourceMappingURL=colors.stories.conts.d.ts.map

package/dist/colors.stories.conts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.stories.conts.d.ts","sourceRoot":"","sources":["../src/colors.stories.conts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKlB,CAAC"}

package/dist/colors.stories.conts.js

@@ -0,0 +1,166 @@
+export const primitiveColors = {
+    neutral: {
+        variants: [
+            'bg-neutral-0',
+            'bg-neutral-50',
+            'bg-neutral-100',
+            'bg-neutral-200',
+            'bg-neutral-300',
+            'bg-neutral-400',
+            'bg-neutral-500',
+            'bg-neutral-600',
+            'bg-neutral-700',
+            'bg-neutral-800',
+            'bg-neutral-900',
+            'bg-neutral-950',
+            'bg-neutral-1000'
+        ]
+    },
+    purple: {
+        variants: [
+            'bg-purple-50',
+            'bg-purple-100',
+            'bg-purple-200',
+            'bg-purple-300',
+            'bg-purple-400',
+            'bg-purple-500',
+            'bg-purple-600',
+            'bg-purple-700',
+            'bg-purple-800',
+            'bg-purple-900',
+            'bg-purple-950'
+        ]
+    },
+    blue: {
+        variants: [
+            'bg-blue-50',
+            'bg-blue-100',
+            'bg-blue-200',
+            'bg-blue-300',
+            'bg-blue-400',
+            'bg-blue-500',
+            'bg-blue-600',
+            'bg-blue-700',
+            'bg-blue-800',
+            'bg-blue-900',
+            'bg-blue-950'
+        ]
+    },
+    green: {
+        variants: [
+            'bg-green-50',
+            'bg-green-100',
+            'bg-green-200',
+            'bg-green-300',
+            'bg-green-400',
+            'bg-green-500',
+            'bg-green-600',
+            'bg-green-700',
+            'bg-green-800',
+            'bg-green-900',
+            'bg-green-950'
+        ]
+    },
+    primary: {
+        variants: [
+            'bg-primary-50',
+            'bg-primary-100',
+            'bg-primary-200',
+            'bg-primary-300',
+            'bg-primary-400',
+            'bg-primary-500',
+            'bg-primary-600',
+            'bg-primary-700',
+            'bg-primary-800',
+            'bg-primary-900',
+            'bg-primary-950'
+        ]
+    },
+    red: {
+        variants: [
+            'bg-red-50',
+            'bg-red-100',
+            'bg-red-200',
+            'bg-red-300',
+            'bg-red-400',
+            'bg-red-500',
+            'bg-red-600',
+            'bg-red-700',
+            'bg-red-800',
+            'bg-red-900',
+            'bg-red-950'
+        ]
+    },
+    orange: {
+        variants: [
+            'bg-orange-50',
+            'bg-orange-100',
+            'bg-orange-200',
+            'bg-orange-300',
+            'bg-orange-400',
+            'bg-orange-500',
+            'bg-orange-600',
+            'bg-orange-700',
+            'bg-orange-800',
+            'bg-orange-900',
+            'bg-orange-950'
+        ]
+    },
+    accent: {
+        variants: [
+            'bg-accent-purple',
+            'bg-accent-indigo',
+            'bg-accent-mint',
+            'bg-accent-green',
+            'bg-accent-teal',
+            'bg-accent-brown',
+            'bg-accent-blue',
+            'bg-accent-orange',
+            'bg-accent-yellow',
+            'bg-accent-pink',
+            'bg-accent-gray',
+            'bg-accent-cyan',
+            'bg-accent-red'
+        ]
+    },
+    'alpha-white': {
+        variants: [
+            'bg-alpha-white-0',
+            'bg-alpha-white-2',
+            'bg-alpha-white-4',
+            'bg-alpha-white-6',
+            'bg-alpha-white-8',
+            'bg-alpha-white-10',
+            'bg-alpha-white-12',
+            'bg-alpha-white-16',
+            'bg-alpha-white-24',
+            'bg-alpha-white-40',
+            'bg-alpha-white-56',
+            'bg-alpha-white-64',
+            'bg-alpha-white-72',
+            'bg-alpha-white-80',
+            'bg-alpha-white-88'
+        ]
+    },
+    'alpha-black': {
+        variants: [
+            'bg-alpha-black-0',
+            'bg-alpha-black-2',
+            'bg-alpha-black-4',
+            'bg-alpha-black-6',
+            'bg-alpha-black-8',
+            'bg-alpha-black-10',
+            'bg-alpha-black-12',
+            'bg-alpha-black-16',
+            'bg-alpha-black-24',
+            'bg-alpha-black-40',
+            'bg-alpha-black-56',
+            'bg-alpha-black-64',
+            'bg-alpha-black-72',
+            'bg-alpha-black-80',
+            'bg-alpha-black-88'
+        ]
+    }
+};
+
+//# sourceMappingURL=colors.stories.conts.js.map

package/dist/colors.stories.conts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.stories.conts.ts"],"sourcesContent":["export const primitiveColors = {\n  neutral: {\n    variants: [\n      'bg-neutral-0',\n      'bg-neutral-50',\n      'bg-neutral-100',\n      'bg-neutral-200',\n      'bg-neutral-300',\n      'bg-neutral-400',\n      'bg-neutral-500',\n      'bg-neutral-600',\n      'bg-neutral-700',\n      'bg-neutral-800',\n      'bg-neutral-900',\n      'bg-neutral-950',\n      'bg-neutral-1000',\n    ],\n  },\n  purple: {\n    variants: [\n      'bg-purple-50',\n      'bg-purple-100',\n      'bg-purple-200',\n      'bg-purple-300',\n      'bg-purple-400',\n      'bg-purple-500',\n      'bg-purple-600',\n      'bg-purple-700',\n      'bg-purple-800',\n      'bg-purple-900',\n      'bg-purple-950',\n    ],\n  },\n  blue: {\n    variants: [\n      'bg-blue-50',\n      'bg-blue-100',\n      'bg-blue-200',\n      'bg-blue-300',\n      'bg-blue-400',\n      'bg-blue-500',\n      'bg-blue-600',\n      'bg-blue-700',\n      'bg-blue-800',\n      'bg-blue-900',\n      'bg-blue-950',\n    ],\n  },\n  green: {\n    variants: [\n      'bg-green-50',\n      'bg-green-100',\n      'bg-green-200',\n      'bg-green-300',\n      'bg-green-400',\n      'bg-green-500',\n      'bg-green-600',\n      'bg-green-700',\n      'bg-green-800',\n      'bg-green-900',\n      'bg-green-950',\n    ],\n  },\n  primary: {\n    variants: [\n      'bg-primary-50',\n      'bg-primary-100',\n      'bg-primary-200',\n      'bg-primary-300',\n      'bg-primary-400',\n      'bg-primary-500',\n      'bg-primary-600',\n      'bg-primary-700',\n      'bg-primary-800',\n      'bg-primary-900',\n      'bg-primary-950',\n    ],\n  },\n  red: {\n    variants: [\n      'bg-red-50',\n      'bg-red-100',\n      'bg-red-200',\n      'bg-red-300',\n      'bg-red-400',\n      'bg-red-500',\n      'bg-red-600',\n      'bg-red-700',\n      'bg-red-800',\n      'bg-red-900',\n      'bg-red-950',\n    ],\n  },\n  orange: {\n    variants: [\n      'bg-orange-50',\n      'bg-orange-100',\n      'bg-orange-200',\n      'bg-orange-300',\n      'bg-orange-400',\n      'bg-orange-500',\n      'bg-orange-600',\n      'bg-orange-700',\n      'bg-orange-800',\n      'bg-orange-900',\n      'bg-orange-950',\n    ],\n  },\n  accent: {\n    variants: [\n      'bg-accent-purple',\n      'bg-accent-indigo',\n      'bg-accent-mint',\n      'bg-accent-green',\n      'bg-accent-teal',\n      'bg-accent-brown',\n      'bg-accent-blue',\n      'bg-accent-orange',\n      'bg-accent-yellow',\n      'bg-accent-pink',\n      'bg-accent-gray',\n      'bg-accent-cyan',\n      'bg-accent-red',\n    ],\n  },\n  'alpha-white': {\n    variants: [\n      'bg-alpha-white-0',\n      'bg-alpha-white-2',\n      'bg-alpha-white-4',\n      'bg-alpha-white-6',\n      'bg-alpha-white-8',\n      'bg-alpha-white-10',\n      'bg-alpha-white-12',\n      'bg-alpha-white-16',\n      'bg-alpha-white-24',\n      'bg-alpha-white-40',\n      'bg-alpha-white-56',\n      'bg-alpha-white-64',\n      'bg-alpha-white-72',\n      'bg-alpha-white-80',\n      'bg-alpha-white-88',\n    ],\n  },\n  'alpha-black': {\n    variants: [\n      'bg-alpha-black-0',\n      'bg-alpha-black-2',\n      'bg-alpha-black-4',\n      'bg-alpha-black-6',\n      'bg-alpha-black-8',\n      'bg-alpha-black-10',\n      'bg-alpha-black-12',\n      'bg-alpha-black-16',\n      'bg-alpha-black-24',\n      'bg-alpha-black-40',\n      'bg-alpha-black-56',\n      'bg-alpha-black-64',\n      'bg-alpha-black-72',\n      'bg-alpha-black-80',\n      'bg-alpha-black-88',\n    ],\n  },\n} as const;\n"],"names":["primitiveColors","neutral","variants","purple","blue","green","primary","red","orange","accent"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB;IAC7BC,SAAS;QACPC,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAC,QAAQ;QACND,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAE,MAAM;QACJF,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAG,OAAO;QACLH,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAI,SAAS;QACPJ,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAK,KAAK;QACHL,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAM,QAAQ;QACNN,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACAO,QAAQ;QACNP,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACA,eAAe;QACbA,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;IACA,eAAe;QACbA,UAAU;YACR;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD;IACH;AACF,EAAW"}

package/dist/colors.stories.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from './components/typography/index.js';
+import { cn } from './utils/cn.js';
+import { primitiveColors } from './colors.stories.conts.js';
+const meta = {
+    title: 'Assets/Colors'
+};
+export default meta;
+function ColorItem({ variant }) {
+    const value = variant.split('-').pop();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col items-center gap-1",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn('h-24 w-full rounded-6 border border-border', variant)
+            }),
+            /*#__PURE__*/ _jsx(Code, {
+                variant: "label",
+                className: "text-foreground-neutral-subtle",
+                children: value
+            })
+        ]
+    });
+}
+function ColorPalette({ title, rootKey, variants }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "grid grid-cols-16 gap-8",
+        children: [
+            /*#__PURE__*/ _jsx(Code, {
+                variant: "label",
+                className: "text-foreground-neutral-subtle",
+                children: title
+            }),
+            variants.map((variant)=>/*#__PURE__*/ _jsx(ColorItem, {
+                    variant: variant,
+                    color: rootKey
+                }, variant))
+        ]
+    });
+}
+export const Palette = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-16",
+            children: /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx(Header, {
+                        variant: "h2",
+                        children: "Primitive Colors"
+                    }),
+                    Object.entries(primitiveColors).map(([color, variants])=>/*#__PURE__*/ _jsx(ColorPalette, {
+                            title: color.replace('-', ' '),
+                            rootKey: color,
+                            variants: variants.variants
+                        }, color))
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=colors.stories.js.map

package/dist/colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {cn} from 'utils/cn';\nimport {primitiveColors} from './colors.stories.conts';\n\nconst meta: Meta = {\n  title: 'Assets/Colors',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\ninterface ColorItemProps {\n  color: string;\n  variant: string;\n}\n\nfunction ColorItem({variant}: ColorItemProps) {\n  const value = variant.split('-').pop();\n  return (\n    <div className=\"flex flex-col items-center gap-1\">\n      <div className={cn('h-24 w-full rounded-6 border border-border', variant)} />\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        {value}\n      </Code>\n    </div>\n  );\n}\n\ninterface ColorPaletteProps {\n  title: string;\n  rootKey: string;\n  variants: readonly string[];\n}\n\nfunction ColorPalette({title, rootKey, variants}: ColorPaletteProps) {\n  return (\n    <div className=\"grid grid-cols-16 gap-8\">\n      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n        {title}\n      </Code>\n      {variants.map((variant) => (\n        <ColorItem key={variant} variant={variant} color={rootKey} />\n      ))}\n    </div>\n  );\n}\n\nexport const Palette: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-16\">\n      <section className=\"flex flex-col gap-8\">\n        <Header variant=\"h2\">Primitive Colors</Header>\n\n        {Object.entries(primitiveColors).map(([color, variants]) => (\n          <ColorPalette\n            key={color}\n            title={color.replace('-', ' ')}\n            rootKey={color}\n            variants={variants.variants as readonly string[]}\n          />\n        ))}\n      </section>\n    </div>\n  ),\n};\n"],"names":["Code","Header","cn","primitiveColors","meta","title","ColorItem","variant","value","split","pop","div","className","ColorPalette","rootKey","variants","map","color","Palette","render","section","Object","entries","replace"],"mappings":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,eAAe,QAAO,yBAAyB;AAEvD,MAAMC,OAAa;IACjBC,OAAO;AACT;AACA,eAAeD,KAAK;AASpB,SAASE,UAAU,EAACC,OAAO,EAAiB;IAC1C,MAAMC,QAAQD,QAAQE,KAAK,CAAC,KAAKC,GAAG;IACpC,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACD;gBAAIC,WAAWV,GAAG,8CAA8CK;;0BACjE,KAACP;gBAAKO,SAAQ;gBAAQK,WAAU;0BAC7BJ;;;;AAIT;AAQA,SAASK,aAAa,EAACR,KAAK,EAAES,OAAO,EAAEC,QAAQ,EAAoB;IACjE,qBACE,MAACJ;QAAIC,WAAU;;0BACb,KAACZ;gBAAKO,SAAQ;gBAAQK,WAAU;0BAC7BP;;YAEFU,SAASC,GAAG,CAAC,CAACT,wBACb,KAACD;oBAAwBC,SAASA;oBAASU,OAAOH;mBAAlCP;;;AAIxB;AAEA,OAAO,MAAMW,UAAiB;IAC5BC,QAAQ,kBACN,KAACR;YAAIC,WAAU;sBACb,cAAA,MAACQ;gBAAQR,WAAU;;kCACjB,KAACX;wBAAOM,SAAQ;kCAAK;;oBAEpBc,OAAOC,OAAO,CAACnB,iBAAiBa,GAAG,CAAC,CAAC,CAACC,OAAOF,SAAS,iBACrD,KAACF;4BAECR,OAAOY,MAAMM,OAAO,CAAC,KAAK;4BAC1BT,SAASG;4BACTF,UAAUA,SAASA,QAAQ;2BAHtBE;;;;AASjB,EAAE"}

package/dist/components/button.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import { type IconName } from './icon/icon';
+export declare const buttonVariants: (props?: ({
+    variant?: "transparent" | "primary" | "secondary" | "danger" | "transparentMuted" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function Button({ className, variant, size, asChild, children, iconLeft, iconRight, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,cAAc;;;8EA8B1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,2CAUF"}

package/dist/components/button.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../utils/cn.js';
+import { Icon } from './icon/icon.js';
+export const buttonVariants = cva('rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+    variants: {
+        variant: {
+            primary: 'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+            secondary: 'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
+            danger: 'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+            transparent: 'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
+            transparentMuted: 'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled'
+        },
+        size: {
+            '2xs': 'px-6 text-xs gap-4',
+            xs: 'px-6 py-2 text-xs gap-4',
+            sm: 'px-8 py-4 text-sm gap-6',
+            md: 'px-10 py-6 text-md gap-8',
+            lg: 'px-12 py-8 text-lg gap-8',
+            xl: 'px-12 py-10 text-xl gap-10'
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md'
+    }
+});
+export function Button({ className, variant, size, asChild = false, children, iconLeft, iconRight, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ _jsxs(Comp, {
+        "data-slot": "button",
+        className: cn(buttonVariants({
+            variant,
+            size,
+            className
+        })),
+        ...props,
+        children: [
+            iconLeft && /*#__PURE__*/ _jsx(Icon, {
+                name: iconLeft
+            }),
+            children,
+            iconRight && /*#__PURE__*/ _jsx(Icon, {
+                name: iconRight
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon, type IconName} from './icon/icon';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'px-6 text-xs gap-4',\n        xs: 'px-6 py-2 text-xs gap-4',\n        sm: 'px-8 py-4 text-sm gap-6',\n        md: 'px-10 py-6 text-md gap-8',\n        lg: 'px-12 py-8 text-lg gap-8',\n        xl: 'px-12 py-10 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp data-slot=\"button\" className={cn(buttonVariants({variant, size, className}))} {...props}>\n      {iconLeft && <Icon name={iconLeft} />}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","cn","Icon","buttonVariants","variants","variant","primary","secondary","danger","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","Button","className","asChild","children","iconLeft","iconRight","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,IAAI,QAAsB,cAAc;AAEhD,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfZ,SAAS;QACTM,MAAM;IACR;AACF,GACA;AAEF,OAAO,SAASO,OAAO,EACrBC,SAAS,EACTd,OAAO,EACPM,IAAI,EACJS,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUrB,OAAO;IAE9B,qBACE,MAAC0B;QAAKC,aAAU;QAASP,WAAWlB,GAAGE,eAAe;YAACE;YAASM;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACpB;gBAAKyB,MAAML;;YACxBD;YACAE,2BAAa,KAACrB;gBAAKyB,MAAMJ;;;;AAGhC"}