@shipfox/react-ui 0.3.0 → 0.4.0

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,284 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {Button} from '../button';
+import {Tooltip, TooltipContent, type TooltipContentProps, TooltipTrigger} from './tooltip';
+
+type TooltipStoryArgs = {
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  variant?: TooltipContentProps['variant'];
+  size?: TooltipContentProps['size'];
+  side?: TooltipContentProps['side'];
+  align?: TooltipContentProps['align'];
+  sideOffset?: TooltipContentProps['sideOffset'];
+  animated?: TooltipContentProps['animated'];
+};
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: {control: 'boolean'},
+    delayDuration: {control: 'number'},
+    variant: {
+      control: 'select',
+      options: ['default', 'inverted', 'muted'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    sideOffset: {control: 'number'},
+    animated: {control: 'boolean'},
+  },
+  args: {
+    defaultOpen: false,
+    delayDuration: 0,
+    variant: 'default',
+    size: 'md',
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    animated: true,
+  },
+} satisfies Meta<TooltipStoryArgs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultOpen: false,
+  },
+
+  render: (args: TooltipStoryArgs) => {
+    const {defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated} = args;
+    return (
+      <div className="flex items-center justify-center p-64">
+        <Tooltip defaultOpen={defaultOpen} delayDuration={delayDuration}>
+          <TooltipTrigger asChild>
+            <Button>Hover me</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            variant={variant}
+            size={size}
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            animated={animated}
+          >
+            Tooltip Text
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex flex-col gap-64 p-64">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        TYPES
+      </Code>
+      <div className="flex flex-col gap-32">
+        {/* Text Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Text
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">Tooltip Text</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>Tooltip Text</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Shortcut Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Shortcut
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Graph Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Graph
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted" className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Breadcrumbs Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Breadcrumbs
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/tooltip/tooltip.tsx

@@ -1,10 +1,35 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {motion, type Transition} from 'framer-motion';
+import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
 
+const tooltipContentVariants = cva(
+  'rounded-8 px-8 py-4 text-xs font-medium leading-20 z-50 w-fit text-balance shadow-tooltip',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background-components-base text-foreground-neutral-base',
+        inverted: 'bg-background-button-inverted-default text-foreground-contrast-primary',
+        muted: 'bg-background-neutral-subtle text-foreground-neutral-muted',
+      },
+      size: {
+        sm: 'px-6 py-2 text-xs',
+        md: 'px-8 py-4 text-xs',
+        lg: 'px-10 py-6 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
@@ -14,7 +39,7 @@ function TooltipProvider({
   );
 }
 
-function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({...props}: ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -22,25 +47,61 @@ function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>)
   );
 }
 
-function TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({...props}: ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 17,
+};
+
+type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants> & {
+    animated?: boolean;
+    transition?: Transition;
+  };
+
 function TooltipContent({
   className,
-  sideOffset = 0,
+  sideOffset = 8,
   children,
+  variant,
+  size,
+  animated = true,
+  transition = defaultTransition,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipContentProps) {
+  if (animated) {
+    return (
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          data-slot="tooltip-content"
+          sideOffset={sideOffset}
+          asChild
+          {...props}
+        >
+          <motion.div
+            className={cn(tooltipContentVariants({variant, size, className}))}
+            initial={{opacity: 0, scale: 0.95}}
+            animate={{opacity: 1, scale: 1}}
+            exit={{opacity: 0, scale: 0.95}}
+            transition={transition}
+          >
+            {children}
+          </motion.div>
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    );
+  }
+
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
-        className={cn(
-          'rounded-8 bg-background-components-base text-foreground-neutral-base px-8 py-4 text-xs font-medium leading-20 shadow-button-neutral animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md text-balance',
-          className,
-        )}
+        className={cn(tooltipContentVariants({variant, size, className}))}
         {...props}
       >
         {children}
@@ -49,4 +110,12 @@ function TooltipContent({
   );
 }
 
-export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  tooltipContentVariants,
+  defaultTransition,
+};
+export type {TooltipContentProps};

package/src/hooks/index.ts

@@ -1,2 +1,5 @@
 export * from './useCopyToClipboard';
+export * from './useResolvedTheme';
+export * from './useShikiHighlight';
+export * from './useShikiStyleInjection';
 export * from './useTheme';

package/src/hooks/useResolvedTheme.ts

@@ -0,0 +1,34 @@
+import {useSyncExternalStore} from 'react';
+import {useTheme} from './useTheme';
+
+export function useResolvedTheme(): 'light' | 'dark' {
+  const {theme} = useTheme();
+
+  const systemTheme = useSyncExternalStore<'light' | 'dark'>(
+    (callback) => {
+      if (typeof window === 'undefined' || theme !== 'system') {
+        return () => {
+          // No-op unsubscribe
+        };
+      }
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      mql.addEventListener('change', callback);
+      return () => {
+        mql.removeEventListener('change', callback);
+      };
+    },
+    (): 'light' | 'dark' =>
+      typeof window !== 'undefined' && theme === 'system'
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : 'light',
+    (): 'light' | 'dark' => 'light', // Server snapshot
+  );
+
+  if (theme === 'system') {
+    return systemTheme;
+  }
+  // TypeScript should narrow theme to 'light' | 'dark' here
+  return theme as 'light' | 'dark';
+}

package/src/hooks/useShikiHighlight.ts

@@ -0,0 +1,140 @@
+import {useEffect, useState} from 'react';
+
+type ShikiThemes = {
+  light: string;
+  dark: string;
+};
+
+type UseShikiHighlightOptions = {
+  code: string;
+  lang: string;
+  themes: ShikiThemes;
+  resolvedTheme: 'light' | 'dark';
+  syntaxHighlighting: boolean;
+};
+
+export function useShikiHighlight({
+  code,
+  lang,
+  themes,
+  resolvedTheme,
+  syntaxHighlighting,
+}: UseShikiHighlightOptions): {highlightedCode: string; isLoading: boolean} {
+  const [highlightedCode, setHighlightedCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
+
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    let cancelled = false;
+
+    const loadHighlightedCode = async () => {
+      try {
+        const {codeToHtml} = await import('shiki');
+
+        const html = await codeToHtml(code, {
+          lang,
+          themes: {
+            light: themes.light,
+            dark: themes.dark,
+          },
+          defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+        });
+
+        if (!cancelled) {
+          setHighlightedCode(html);
+          setIsLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadHighlightedCode();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang, themes.light, themes.dark, resolvedTheme, syntaxHighlighting]);
+
+  return {highlightedCode, isLoading};
+}
+
+type UseShikiHighlightMultipleOptions = {
+  codes: Record<string, string>;
+  lang: string;
+  themes: ShikiThemes;
+  resolvedTheme: 'light' | 'dark';
+  syntaxHighlighting: boolean;
+};
+
+export function useShikiHighlightMultiple({
+  codes,
+  lang,
+  themes,
+  resolvedTheme,
+  syntaxHighlighting,
+}: UseShikiHighlightMultipleOptions): {
+  highlightedCodes: Record<string, string>;
+  isLoading: boolean;
+} {
+  const [highlightedCodes, setHighlightedCodes] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
+
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    let cancelled = false;
+
+    const loadHighlightedCode = async () => {
+      try {
+        const {codeToHtml} = await import('shiki');
+        const newHighlightedCodes: Record<string, string> = {};
+
+        for (const [command, val] of Object.entries(codes)) {
+          if (cancelled) {
+            return;
+          }
+
+          const highlighted = await codeToHtml(val, {
+            lang,
+            themes: {
+              light: themes.light,
+              dark: themes.dark,
+            },
+            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+          });
+
+          newHighlightedCodes[command] = highlighted;
+        }
+
+        if (!cancelled) {
+          setHighlightedCodes(newHighlightedCodes);
+          setIsLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadHighlightedCode();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedTheme, lang, themes.light, themes.dark, codes, syntaxHighlighting]);
+
+  return {highlightedCodes, isLoading};
+}

package/src/hooks/useShikiStyleInjection.ts

@@ -0,0 +1,34 @@
+import {useEffect} from 'react';
+
+export function useShikiStyleInjection(syntaxHighlighting: boolean): void {
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      return;
+    }
+
+    const styleId = 'shiki-override-styles';
+    if (document.getElementById(styleId)) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .shiki-override pre,
+      .shiki-override code,
+      .shiki-override pre *,
+      .shiki-override code * {
+        background: transparent !important;
+        font-family: "Commit Mono", monospace !important;
+      }
+    `;
+    document.head.appendChild(style);
+
+    return () => {
+      const existingStyle = document.getElementById(styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+    };
+  }, [syntaxHighlighting]);
+}

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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"}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa;;;8EAexB,CAAC;AAEH,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7F,wBAAgB,KAAK,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAmB3E"}

package/dist/components/input.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      base: 'bg-background-field-base',\n      component: 'bg-background-field-component',\n    },\n    size: {\n      base: 'py-6',\n      small: 'py-4',\n    },\n  },\n  defaultVariants: {\n    variant: 'base',\n    size: 'base',\n  },\n});\n\ntype InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;\n\nexport function Input({className, type, variant, size, ...props}: InputProps) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none',\n        'hover:bg-background-field-hover',\n        'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted',\n        'file:text-foreground-neutral-base file:inline-flex file:font-medium',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',\n        'focus-visible:shadow-border-interactive-with-active',\n        'aria-invalid:shadow-border-error',\n        inputVariants({variant, size}),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["cva","cn","inputVariants","variants","variant","base","component","size","small","defaultVariants","Input","className","type","props","input","data-slot"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBF,IAAI,IAAI;IACnCG,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,WAAW;QACb;QACAC,MAAM;YACJF,MAAM;YACNG,OAAO;QACT;IACF;IACAC,iBAAiB;QACfL,SAAS;QACTG,MAAM;IACR;AACF,GAAG;AAIH,OAAO,SAASG,MAAM,EAACC,SAAS,EAAEC,IAAI,EAAER,OAAO,EAAEG,IAAI,EAAE,GAAGM,OAAkB;IAC1E,qBACE,KAACC;QACCF,MAAMA;QACNG,aAAU;QACVJ,WAAWV,GACT,yLACA,mCACA,6FACA,uEACA,mKACA,uDACA,oCACAC,cAAc;YAACE;YAASG;QAAI,IAC5BI;QAED,GAAGE,KAAK;;AAGf"}