@shipfox/react-ui 0.4.0 → 0.5.0

package/.storybook/main.ts

@@ -1,17 +1,27 @@
-import type {StorybookConfigVite} from '@storybook/builder-vite';
+import {resolve} from 'node:path';
 import type {StorybookConfig} from '@storybook/react-vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
 
-const config: StorybookConfig & StorybookConfigVite = {
+const config: StorybookConfig = {
   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',
-      },
-    },
+  addons: ['storybook-addon-pseudo-states', '@storybook/addon-vitest'],
+  viteFinal: (config) => {
+    config.plugins = config.plugins ?? [];
+
+    config.plugins.push(react(), tailwindcss());
+
+    config.resolve = config.resolve ?? {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      components: resolve(__dirname, '../src/components'),
+      hooks: resolve(__dirname, '../src/hooks'),
+      utils: resolve(__dirname, '../src/utils'),
+      state: resolve(__dirname, '../src/state'),
+    };
+
+    return config;
   },
 };
 

package/.storybook/vitest.setup.ts

@@ -0,0 +1,4 @@
+import {setProjectAnnotations} from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+setProjectAnnotations([projectAnnotations]);

package/.turbo/turbo-build.log

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

package/.turbo/turbo-check.log

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

package/.turbo/turbo-type.log

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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @shipfox/react-ui
 
+## 0.5.0
+
+### Minor Changes
+
+- ec0b437: Add Button Link and Icon Button components
+- 7b73bd6: Integrate Argos CI
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -16,6 +16,45 @@ npm install @shipfox/react-ui
 
 ## Storybook
 
-The storybook is [publicly accessible online](react-ui.shipfox.vercel.app).
+The storybook is [publicly accessible online](https://react-ui.shipfox.vercel.app).
 
 You can also launch it locally by running `pnpm storybook` from within this package's directory.
+
+## Visual Testing with Argos
+
+This library uses [Argos](https://argos-ci.com/) for automated visual regression testing. Argos captures screenshots of all Storybook stories and compares them across pull requests to detect unintended visual changes.
+
+### How it works
+
+1. On every pull request, GitHub Actions builds Storybook and uploads screenshots to Argos
+2. Argos compares the screenshots with the baseline from the main branch
+3. If visual differences are detected, they are highlighted in the Argos dashboard
+4. Reviewers can approve or reject changes directly from the PR
+
+### Running Argos locally
+
+To upload screenshots to Argos from your local machine:
+
+```bash
+# Build Storybook
+pnpm storybook:build
+
+# Upload to Argos (requires ARGOS_TOKEN environment variable)
+pnpm argos
+```
+
+### Configuration
+
+Argos configuration is located in `argos.config.ts`. You can customize:
+
+- Screenshot capture settings
+- Ignored patterns
+- Comparison threshold
+- Reference branch
+
+### Setting up Argos
+
+1. Create an account on [Argos](https://argos-ci.com/)
+2. Connect your GitHub repository
+3. Add the `ARGOS_TOKEN` secret to your GitHub repository settings
+4. Argos will automatically run on all pull requests

package/argos.config.ts

@@ -0,0 +1,33 @@
+const config = {
+  // Upload Storybook build output
+  buildDir: 'storybook-static',
+
+  // Project token (can also be set via ARGOS_TOKEN env var)
+  // token: process.env.ARGOS_TOKEN,
+
+  // Repository information (optional, auto-detected from git)
+  // repository: 'shipfox/tooling',
+
+  // Branch information (optional, auto-detected from git)
+  // branch: process.env.GITHUB_REF_NAME,
+
+  // Commit information (optional, auto-detected from git)
+  // commit: process.env.GITHUB_SHA,
+
+  // Parallel upload settings for faster uploads
+  parallel: {
+    total: -1, // Auto-detect based on available resources
+    nonce: process.env.GITHUB_RUN_ID || Date.now().toString(),
+  },
+
+  // Ignore certain screenshots or patterns
+  // ignore: ['**/private/**'],
+
+  // Reference branch for comparisons (usually main)
+  reference: 'main',
+
+  // Threshold for visual changes (0 = any change, 1 = no changes)
+  threshold: 0,
+};
+
+export default config;

package/dist/components/button/button-link.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export declare const buttonLinkVariants: (props?: ({
+    variant?: "base" | "muted" | "interactive" | "subtle" | null | undefined;
+    size?: "xs" | "sm" | "md" | "xl" | null | undefined;
+    underline?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function ButtonLink({ className, variant, size, underline, asChild, children, iconLeft, iconRight, ...props }: ComponentProps<'a'> & VariantProps<typeof buttonLinkVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-link.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;8EA8B9B,CAAC;AASF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAW,EACX,SAAS,EACT,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,GACpB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,2CAeF"}

package/dist/components/button/button-link.js

@@ -0,0 +1,63 @@
+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 { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const buttonLinkVariants = cva('inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium', {
+    variants: {
+        variant: {
+            base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+            interactive: 'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',
+            muted: 'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+            subtle: 'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled'
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            xl: 'text-xl'
+        },
+        underline: {
+            true: 'underline decoration-solid [text-underline-position:from-font]',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'sm',
+        underline: false
+    }
+});
+const iconSizeMap = {
+    xs: 14,
+    sm: 14,
+    md: 16,
+    xl: 20
+};
+export function ButtonLink({ className, variant, size = 'sm', underline, asChild = false, children, iconLeft, iconRight, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    const iconSize = iconSizeMap[size];
+    return /*#__PURE__*/ _jsxs(Comp, {
+        "data-slot": "button-link",
+        className: cn(buttonLinkVariants({
+            variant,
+            size,
+            underline,
+            className
+        })),
+        ...props,
+        children: [
+            iconLeft && /*#__PURE__*/ _jsx(Icon, {
+                name: iconLeft,
+                size: iconSize
+            }),
+            children,
+            iconRight && /*#__PURE__*/ _jsx(Icon, {
+                name: iconRight,
+                size: iconSize
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=button-link.js.map

package/dist/components/button/button-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button-link.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonLinkVariants = cva(\n  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',\n  {\n    variants: {\n      variant: {\n        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        interactive:\n          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',\n        muted:\n          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n        subtle:\n          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        xs: 'text-xs',\n        sm: 'text-sm',\n        md: 'text-md',\n        xl: 'text-xl',\n      },\n      underline: {\n        true: 'underline decoration-solid [text-underline-position:from-font]',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'base',\n      size: 'sm',\n      underline: false,\n    },\n  },\n);\n\nconst iconSizeMap = {\n  xs: 14,\n  sm: 14,\n  md: 16,\n  xl: 20,\n} as const;\n\nexport function ButtonLink({\n  className,\n  variant,\n  size = 'sm',\n  underline,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'a'> &\n  VariantProps<typeof buttonLinkVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'a';\n  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];\n\n  return (\n    <Comp\n      data-slot=\"button-link\"\n      className={cn(buttonLinkVariants({variant, size, underline, className}))}\n      {...props}\n    >\n      {iconLeft && <Icon name={iconLeft} size={iconSize} />}\n      {children}\n      {iconRight && <Icon name={iconRight} size={iconSize} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonLinkVariants","variants","variant","base","interactive","muted","subtle","size","xs","sm","md","xl","underline","true","false","defaultVariants","iconSizeMap","ButtonLink","className","asChild","children","iconLeft","iconRight","props","Comp","iconSize","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,2IACA;IACEI,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,aACE;YACFC,OACE;YACFC,QACE;QACJ;QACAC,MAAM;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,WAAW;YACTC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTK,MAAM;QACNK,WAAW;IACb;AACF,GACA;AAEF,MAAMI,cAAc;IAClBR,IAAI;IACJC,IAAI;IACJC,IAAI;IACJC,IAAI;AACN;AAEA,OAAO,SAASM,WAAW,EACzBC,SAAS,EACThB,OAAO,EACPK,OAAO,IAAI,EACXK,SAAS,EACTO,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUvB,OAAO;IAC9B,MAAM6B,WAAWT,WAAW,CAACT,KAAiC;IAE9D,qBACE,MAACiB;QACCE,aAAU;QACVR,WAAWnB,GAAGC,mBAAmB;YAACE;YAASK;YAAMK;YAAWM;QAAS;QACpE,GAAGK,KAAK;;YAERF,0BAAY,KAACvB;gBAAK6B,MAAMN;gBAAUd,MAAMkB;;YACxCL;YACAE,2BAAa,KAACxB;gBAAK6B,MAAML;gBAAWf,MAAMkB;;;;AAGjD"}

package/dist/components/button/button-link.stories.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonLink } from './button-link.js';
+const meta = {
+    title: 'Components/Button/ButtonLink',
+    component: ButtonLink,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: [
+                'base',
+                'interactive',
+                'muted',
+                'subtle'
+            ]
+        },
+        size: {
+            control: 'select',
+            options: [
+                'xs',
+                'sm',
+                'md',
+                'xl'
+            ]
+        },
+        underline: {
+            control: 'boolean'
+        },
+        asChild: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        children: 'Label',
+        variant: 'base',
+        size: 'sm',
+        underline: false,
+        href: '#'
+    }
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex gap-16 items-center",
+            children: [
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "base",
+                    children: "Base"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "interactive",
+                    children: "Interactive"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "muted",
+                    children: "Muted"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "subtle",
+                    children: "Subtle"
+                })
+            ]
+        })
+};
+export const WithUnderline = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex gap-16 items-center",
+            children: [
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "base",
+                    underline: true,
+                    children: "Base"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "interactive",
+                    underline: true,
+                    children: "Interactive"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "muted",
+                    underline: true,
+                    children: "Muted"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    variant: "subtle",
+                    underline: true,
+                    children: "Subtle"
+                })
+            ]
+        })
+};
+export const WithIcons = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex gap-16 items-center",
+            children: [
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    iconLeft: "addLine",
+                    children: "Icon Left"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    iconRight: "chevronRight",
+                    children: "Icon Right"
+                }),
+                /*#__PURE__*/ _jsx(ButtonLink, {
+                    ...args,
+                    iconLeft: "addLine",
+                    iconRight: "chevronRight",
+                    children: "Both Icons"
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=button-link.stories.js.map

package/dist/components/button/button-link.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button-link.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {ButtonLink} from './button-link';\n\nconst meta = {\n  title: 'Components/Button/ButtonLink',\n  component: ButtonLink,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['base', 'interactive', 'muted', 'subtle'],\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'xl'],\n    },\n    underline: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Label',\n    variant: 'base',\n    size: 'sm',\n    underline: false,\n    href: '#',\n  },\n} satisfies Meta<typeof ButtonLink>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex gap-16 items-center\">\n      <ButtonLink {...args} variant=\"base\">\n        Base\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"interactive\">\n        Interactive\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"muted\">\n        Muted\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"subtle\">\n        Subtle\n      </ButtonLink>\n    </div>\n  ),\n};\n\nexport const WithUnderline: Story = {\n  render: (args) => (\n    <div className=\"flex gap-16 items-center\">\n      <ButtonLink {...args} variant=\"base\" underline>\n        Base\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"interactive\" underline>\n        Interactive\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"muted\" underline>\n        Muted\n      </ButtonLink>\n      <ButtonLink {...args} variant=\"subtle\" underline>\n        Subtle\n      </ButtonLink>\n    </div>\n  ),\n};\n\nexport const WithIcons: Story = {\n  render: (args) => (\n    <div className=\"flex gap-16 items-center\">\n      <ButtonLink {...args} iconLeft=\"addLine\">\n        Icon Left\n      </ButtonLink>\n      <ButtonLink {...args} iconRight=\"chevronRight\">\n        Icon Right\n      </ButtonLink>\n      <ButtonLink {...args} iconLeft=\"addLine\" iconRight=\"chevronRight\">\n        Both Icons\n      </ButtonLink>\n    </div>\n  ),\n};\n"],"names":["ButtonLink","meta","title","component","tags","argTypes","variant","control","options","size","underline","asChild","args","children","href","Default","Variants","render","div","className","WithUnderline","WithIcons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,UAAU,QAAO,gBAAgB;AAEzC,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWH;IACXI,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAQ;gBAAe;gBAAS;aAAS;QACrD;QACAC,MAAM;YACJF,SAAS;YACTC,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;QACnC;QACAE,WAAW;YAACH,SAAS;QAAS;QAC9BI,SAAS;YAACJ,SAAS;QAAS;IAC9B;IACAK,MAAM;QACJC,UAAU;QACVP,SAAS;QACTG,MAAM;QACNC,WAAW;QACXI,MAAM;IACR;AACF;AAEA,eAAeb,KAAK;AAGpB,OAAO,MAAMc,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACL,qBACP,MAACM;YAAIC,WAAU;;8BACb,KAACnB;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;8BAAO;;8BAGrC,KAACN;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;8BAAc;;8BAG5C,KAACN;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;8BAAQ;;8BAGtC,KAACN;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;8BAAS;;;;AAK7C,EAAE;AAEF,OAAO,MAAMc,gBAAuB;IAClCH,QAAQ,CAACL,qBACP,MAACM;YAAIC,WAAU;;8BACb,KAACnB;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;oBAAOI,SAAS;8BAAC;;8BAG/C,KAACV;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;oBAAcI,SAAS;8BAAC;;8BAGtD,KAACV;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;oBAAQI,SAAS;8BAAC;;8BAGhD,KAACV;oBAAY,GAAGY,IAAI;oBAAEN,SAAQ;oBAASI,SAAS;8BAAC;;;;AAKvD,EAAE;AAEF,OAAO,MAAMW,YAAmB;IAC9BJ,QAAQ,CAACL,qBACP,MAACM;YAAIC,WAAU;;8BACb,KAACnB;oBAAY,GAAGY,IAAI;oBAAEU,UAAS;8BAAU;;8BAGzC,KAACtB;oBAAY,GAAGY,IAAI;oBAAEW,WAAU;8BAAe;;8BAG/C,KAACvB;oBAAY,GAAGY,IAAI;oBAAEU,UAAS;oBAAUC,WAAU;8BAAe;;;;AAKxE,EAAE"}

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

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import { type IconName } from '../../components/icon';
 import type { ComponentProps } from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "transparent" | "primary" | "secondary" | "danger" | "transparentMuted" | null | undefined;
+    variant?: "transparent" | "success" | "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> & {

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,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"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EAgC1B,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/button.js

@@ -9,16 +9,17 @@ export const buttonVariants = cva('rounded-6 inline-flex items-center justify-ce
             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',
+            success: 'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-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'
+            '2xs': 'h-20 px-6 text-xs gap-4',
+            xs: 'h-24 px-6 text-xs gap-4',
+            sm: 'h-28 px-8 text-sm gap-6',
+            md: 'h-32 px-10 text-md gap-8',
+            lg: 'h-36 px-12 text-lg gap-8',
+            xl: 'h-40 px-12 text-xl gap-10'
         }
     },
     defaultVariants: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\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","Icon","cn","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;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,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,WAAWjB,GAAGC,eAAe;YAACE;YAASM;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACrB;gBAAK0B,MAAML;;YACxBD;YACAE,2BAAa,KAACtB;gBAAK0B,MAAMJ;;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\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        success:\n          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-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': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-6 text-xs gap-4',\n        sm: 'h-28 px-8 text-sm gap-6',\n        md: 'h-32 px-10 text-md gap-8',\n        lg: 'h-36 px-12 text-lg gap-8',\n        xl: 'h-40 px-12 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","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","success","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;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,SACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfb,SAAS;QACTO,MAAM;IACR;AACF,GACA;AAEF,OAAO,SAASO,OAAO,EACrBC,SAAS,EACTf,OAAO,EACPO,IAAI,EACJS,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUtB,OAAO;IAE9B,qBACE,MAAC2B;QAAKC,aAAU;QAASP,WAAWlB,GAAGC,eAAe;YAACE;YAASO;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACtB;gBAAK2B,MAAML;;YACxBD;YACAE,2BAAa,KAACvB;gBAAK2B,MAAMJ;;;;AAGhC"}

package/dist/components/button/button.stories.js

@@ -5,6 +5,7 @@ const variantOptions = [
     'primary',
     'secondary',
     'danger',
+    'success',
     'transparent',
     'transparentMuted'
 ];
@@ -61,9 +62,6 @@ export const Variants = {
                                     /*#__PURE__*/ _jsx("th", {
                                         children: "Hover"
                                     }),
-                                    /*#__PURE__*/ _jsx("th", {
-                                        children: "Active"
-                                    }),
                                     /*#__PURE__*/ _jsx("th", {
                                         children: "Focus"
                                     }),
@@ -100,15 +98,6 @@ export const Variants = {
                                                 children: "Click me"
                                             })
                                         }),
-                                        /*#__PURE__*/ _jsx("td", {
-                                            children: /*#__PURE__*/ _jsx(Button, {
-                                                ...args,
-                                                variant: variant,
-                                                className: "active",
-                                                size: size,
-                                                children: "Click me"
-                                            })
-                                        }),
                                         /*#__PURE__*/ _jsx("td", {
                                             children: /*#__PURE__*/ _jsx(Button, {
                                                 ...args,
@@ -137,7 +126,6 @@ export const Variants = {
 Variants.parameters = {
     pseudo: {
         hover: '.hover',
-        active: '.active',
         focusVisible: '.focus'
     }
 };

package/dist/components/button/button.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Active</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"active\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    active: '.active',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","active","focusVisible","Icons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJC,UAAU;QACVN,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMY,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZjB,YAAYkB,GAAG,CAAC,CAACT,qBAChB,MAACU;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAIb;;kDACL,KAACa;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACExB,eAAemB,GAAG,CAAC,CAACZ,wBACnB,MAACe;;sDACC,KAACG;sDACC,cAAA,KAAC3B;gDAAKS,SAAQ;gDAAQW,WAAU;0DAC7BX;;;sDAGL,KAACkB;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAASR,MAAMA;0DAAM;;;sDAIrE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASmB,QAAQ;gDAAChB,MAAMA;0DAAM;;;;mCA3BpDH;;;mBAbHG;;AAmDpB,EAAE;AAEFK,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,QAAQ;QACRC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1BhB,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,UAAS;kCAAS;;;8BAItC,KAAChB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEsB,WAAU;kCAAY;;;8BAI1C,KAACjB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE"}
+{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'success',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","focusVisible","Icons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJC,UAAU;QACVN,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMY,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZjB,YAAYkB,GAAG,CAAC,CAACT,qBAChB,MAACU;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAIb;;kDACL,KAACa;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACExB,eAAemB,GAAG,CAAC,CAACZ,wBACnB,MAACe;;sDACC,KAACG;sDACC,cAAA,KAAC3B;gDAAKS,SAAQ;gDAAQW,WAAU;0DAC7BX;;;sDAGL,KAACkB;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASmB,QAAQ;gDAAChB,MAAMA;0DAAM;;;;mCAtBpDH;;;mBAZHG;;AA6CpB,EAAE;AAEFK,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bf,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;kCAAS;;;8BAItC,KAACf;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,WAAU;kCAAY;;;8BAI1C,KAAChB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEoB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE"}

package/dist/components/button/icon-button.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,kBAAkB;;;;;8EAkC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAe,EACf,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,2CAYF"}

package/dist/components/button/icon-button.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const iconButtonVariants = cva('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-tag-neutral-icon 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',
+            transparent: 'bg-background-button-transparent-default text-tag-neutral-icon 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': 'w-20 h-20 text-xs',
+            xs: 'w-24 h-24 text-xs',
+            sm: 'w-28 h-28 text-sm',
+            md: 'w-32 h-32 text-md',
+            lg: 'w-36 h-36 text-lg',
+            xl: 'w-40 h-40 text-xl'
+        },
+        radius: {
+            rounded: 'rounded-6',
+            full: 'rounded-full'
+        },
+        muted: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        radius: 'rounded',
+        muted: false
+    }
+});
+export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "icon-button",
+        className: cn(iconButtonVariants({
+            variant,
+            size,
+            radius,
+            muted
+        }), className),
+        ...props,
+        children: icon ? /*#__PURE__*/ _jsx(Icon, {
+            name: icon
+        }) : children
+    });
+}
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  '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-tag-neutral-icon 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        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon 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': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} /> : children}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","IconButton","className","asChild","children","icon","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,OAAO,SAASI,WAAW,EACzBC,SAAS,EACTjB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLM,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAKF;IACD,MAAMC,OAAOJ,UAAUxB,OAAO;IAE9B,qBACE,KAAC4B;QACCC,aAAU;QACVN,WAAWpB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIK;QACjE,GAAGI,KAAK;kBAERD,qBAAO,KAACxB;YAAK4B,MAAMJ;aAAWD;;AAGrC"}