@shipfox/react-ui 0.3.0 → 0.5.0

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/src/onboarding/sign-in.stories.tsx

@@ -0,0 +1,73 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Avatar} from 'components/avatar';
+import {Button} from 'components/button';
+import {Header, Text} from 'components/typography';
+
+const meta = {
+  title: 'Onboarding/Signin',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async (ctx) => {
+    await argosScreenshot(ctx, 'example-screenshot');
+  },
+  render: () => {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background-subtle-base">
+        {/* Background illustration - simplified decorative element */}
+        <div className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]">
+          <div
+            className="h-[332px] w-[800px] opacity-20"
+            style={{
+              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,
+              backgroundSize: '24px 24px',
+              backgroundPosition: '-80px 31px',
+            }}
+          />
+        </div>
+
+        {/* Main content */}
+        <div className="relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24">
+          {/* Logo and title section */}
+          <div className="flex flex-col items-center gap-16">
+            <Avatar content="logo" size="xl" radius="rounded" logoName="shipfox" />
+            <div className="flex min-w-[128px] flex-col items-center gap-4 text-center">
+              <Header
+                variant="h1"
+                className="text-[28px] font-medium leading-[44px] text-foreground-neutral-base"
+              >
+                Connect to Shipfox
+              </Header>
+              <Text
+                size="sm"
+                className="text-sm font-normal leading-[24px] text-foreground-neutral-subtle"
+              >
+                Log in to access Shipfox.
+              </Text>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex w-full flex-col gap-20">
+            <Button variant="primary" size="md" iconLeft="google" className="w-full">
+              Continue with Google
+            </Button>
+            <Button variant="primary" size="md" iconLeft="microsoft" className="w-full">
+              Continue with Microsoft
+            </Button>
+            <Button variant="transparent" size="md" className="w-full">
+              Connect with Enterprise SSO
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/vitest.config.ts

@@ -1,6 +1,14 @@
+import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {argosVitestPlugin} from '@argos-ci/storybook/vitest-plugin';
 import {defineConfig} from '@shipfox/vitest';
+import {storybookTest} from '@storybook/addon-vitest/vitest-plugin';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
+import {playwright} from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig(
@@ -8,9 +16,28 @@ export default defineConfig(
     plugins: [react(), tailwindcss()],
     css: {},
     test: {
-      environment: 'jsdom',
-      setupFiles: ['./test/setup.ts'],
-      globalSetup: './test/global.ts',
+      projects: [
+        {
+          extends: true,
+          plugins: [
+            storybookTest({configDir: path.join(dirname, '.storybook')}),
+            argosVitestPlugin({
+              uploadToArgos: !!process.env.CI,
+              token: process.env.ARGOS_TOKEN,
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            browser: {
+              enabled: true,
+              headless: true,
+              provider: playwright(),
+              instances: [{browser: 'chromium'}],
+            },
+            setupFiles: ['.storybook/vitest.setup.ts'],
+          },
+        },
+      ],
     },
   },
   import.meta.url,

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"}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/input.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Input} from './input';\n\nconst typeOptions = [\n  'text',\n  'email',\n  'password',\n  'number',\n  'search',\n  'url',\n  'tel',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n  'color',\n  'file',\n] as const;\n\nconst meta = {\n  title: 'Components/Input',\n  component: Input,\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: 'select',\n      options: typeOptions,\n    },\n    placeholder: {control: 'text'},\n    disabled: {control: 'boolean'},\n    'aria-invalid': {control: 'boolean'},\n  },\n  args: {\n    type: 'text',\n    placeholder: 'Type something…',\n    disabled: false,\n    'aria-invalid': false,\n  },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nconst variants = ['base', 'component'] as const;\nconst sizes = ['base', 'small'] as const;\n\nexport const States: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {variants.map((variant) =>\n        sizes.map((size) => (\n          <div key={variant + size} className=\"flex flex-col gap-16\">\n            <Header variant=\"h3\">\n              {variant} {size}\n            </Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Default\n              </Code>\n\n              <Input {...args} variant={variant} size={size} />\n            </div>\n\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Hover\n              </Code>\n\n              <Input {...args} className=\"hover\" variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Active\n              </Code>\n\n              <Input\n                {...args}\n                className=\"active\"\n                defaultValue=\"The quick brown fox jumps over the lazy dog\"\n                variant={variant}\n                size={size}\n              />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n\n              <Input {...args} className=\"focus\" variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled\n              </Code>\n\n              <Input {...args} disabled variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Invalid\n              </Code>\n\n              <Input {...args} aria-invalid variant={variant} size={size} />\n            </div>\n          </div>\n        )),\n      )}\n    </div>\n  ),\n};\n\nStates.parameters = {\n  pseudo: {\n    hover: '.hover',\n    active: '.active',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Types: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {typeOptions.map((t) => (\n        <div key={t} className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            {t}\n          </Code>\n          <Input {...args} type={t} />\n        </div>\n      ))}\n    </div>\n  ),\n};\n"],"names":["Code","Header","Input","typeOptions","meta","title","component","tags","argTypes","type","control","options","placeholder","disabled","args","Default","variants","sizes","States","render","div","className","map","variant","size","defaultValue","aria-invalid","parameters","pseudo","hover","active","focusVisible","Types","t"],"mappings":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,KAAK,QAAO,UAAU;AAE9B,MAAMC,cAAc;IAClB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;IACXK,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,MAAM;YACJC,SAAS;YACTC,SAASR;QACX;QACAS,aAAa;YAACF,SAAS;QAAM;QAC7BG,UAAU;YAACH,SAAS;QAAS;QAC7B,gBAAgB;YAACA,SAAS;QAAS;IACrC;IACAI,MAAM;QACJL,MAAM;QACNG,aAAa;QACbC,UAAU;QACV,gBAAgB;IAClB;AACF;AAEA,eAAeT,KAAK;AAIpB,OAAO,MAAMW,UAAiB,CAAC,EAAE;AAEjC,MAAMC,WAAW;IAAC;IAAQ;CAAY;AACtC,MAAMC,QAAQ;IAAC;IAAQ;CAAQ;AAE/B,OAAO,MAAMC,SAAgB;IAC3BC,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZL,SAASM,GAAG,CAAC,CAACC,UACbN,MAAMK,GAAG,CAAC,CAACE,qBACT,MAACJ;wBAAyBC,WAAU;;0CAClC,MAACpB;gCAAOsB,SAAQ;;oCACbA;oCAAQ;oCAAEC;;;0CAEb,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAES,SAASA;wCAASC,MAAMA;;;;0CAG3C,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCACE,GAAGY,IAAI;wCACRO,WAAU;wCACVI,cAAa;wCACbF,SAASA;wCACTC,MAAMA;;;;0CAGV,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAED,QAAQ;wCAACU,SAASA;wCAASC,MAAMA;;;;0CAEpD,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEY,cAAY;wCAACH,SAASA;wCAASC,MAAMA;;;;;uBAnDhDD,UAAUC;;AA0D9B,EAAE;AAEFN,OAAOS,UAAU,GAAG;IAClBC,QAAQ;QACNC,OAAO;QACPC,QAAQ;QACRC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bb,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACW,kBAChB,MAACb;oBAAYC,WAAU;;sCACrB,KAACrB;4BAAKuB,SAAQ;4BAAQF,WAAU;sCAC7BY;;sCAEH,KAAC/B;4BAAO,GAAGY,IAAI;4BAAEL,MAAMwB;;;mBAJfA;;AASlB,EAAE"}

package/dist/components/theme-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAC,KAAK,KAAK,EAAuB,MAAM,aAAa,CAAC;AAE7D,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAA4B,EAC5B,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAmCpB"}

package/dist/components/theme-provider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/theme-provider.tsx"],"sourcesContent":["import {type ReactNode, useEffect, useState} from 'react';\nimport {type Theme, ThemeProviderContext} from 'state/theme';\n\ntype ThemeProviderProps = {\n  children: ReactNode;\n  defaultTheme?: Theme;\n  storageKey?: string;\n};\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'shipfox-theme',\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(\n    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,\n  );\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    root.classList.remove('light', 'dark');\n\n    if (theme === 'system') {\n      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light';\n\n      root.classList.add(systemTheme);\n      return;\n    }\n\n    root.classList.add(theme);\n  }, [theme]);\n\n  const value = {\n    theme,\n    setTheme: (theme: Theme) => {\n      localStorage.setItem(storageKey, theme);\n      setTheme(theme);\n    },\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n"],"names":["useEffect","useState","ThemeProviderContext","ThemeProvider","children","defaultTheme","storageKey","props","theme","setTheme","localStorage","getItem","root","window","document","documentElement","classList","remove","systemTheme","matchMedia","matches","add","value","setItem","Provider"],"mappings":";AAAA,SAAwBA,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAC1D,SAAoBC,oBAAoB,QAAO,cAAc;AAQ7D,OAAO,SAASC,cAAc,EAC5BC,QAAQ,EACRC,eAAe,QAAQ,EACvBC,aAAa,eAAe,EAC5B,GAAGC,OACgB;IACnB,MAAM,CAACC,OAAOC,SAAS,GAAGR,SACxB,IAAM,AAACS,aAAaC,OAAO,CAACL,eAAyBD;IAGvDL,UAAU;QACR,MAAMY,OAAOC,OAAOC,QAAQ,CAACC,eAAe;QAE5CH,KAAKI,SAAS,CAACC,MAAM,CAAC,SAAS;QAE/B,IAAIT,UAAU,UAAU;YACtB,MAAMU,cAAcL,OAAOM,UAAU,CAAC,gCAAgCC,OAAO,GACzE,SACA;YAEJR,KAAKI,SAAS,CAACK,GAAG,CAACH;YACnB;QACF;QAEAN,KAAKI,SAAS,CAACK,GAAG,CAACb;IACrB,GAAG;QAACA;KAAM;IAEV,MAAMc,QAAQ;QACZd;QACAC,UAAU,CAACD;YACTE,aAAaa,OAAO,CAACjB,YAAYE;YACjCC,SAASD;QACX;IACF;IAEA,qBACE,KAACN,qBAAqBsB,QAAQ;QAAE,GAAGjB,KAAK;QAAEe,OAAOA;kBAC9ClB;;AAGP"}