@shipfox/react-ui 0.3.0 → 0.5.0

package/dist/hooks/useResolvedTheme.d.ts

@@ -0,0 +1,2 @@
+export declare function useResolvedTheme(): 'light' | 'dark';
+//# sourceMappingURL=useResolvedTheme.d.ts.map

package/dist/hooks/useResolvedTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useResolvedTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,IAAI,OAAO,GAAG,MAAM,CA8BnD"}

package/dist/hooks/useResolvedTheme.js

@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from 'react';
+import { useTheme } from './useTheme.js';
+export function useResolvedTheme() {
+    const { theme } = useTheme();
+    const systemTheme = useSyncExternalStore((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);
+        };
+    }, ()=>typeof window !== 'undefined' && theme === 'system' ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : 'light', ()=>'light');
+    if (theme === 'system') {
+        return systemTheme;
+    }
+    // TypeScript should narrow theme to 'light' | 'dark' here
+    return theme;
+}
+
+//# sourceMappingURL=useResolvedTheme.js.map

package/dist/hooks/useResolvedTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useResolvedTheme.ts"],"sourcesContent":["import {useSyncExternalStore} from 'react';\nimport {useTheme} from './useTheme';\n\nexport function useResolvedTheme(): 'light' | 'dark' {\n  const {theme} = useTheme();\n\n  const systemTheme = useSyncExternalStore<'light' | 'dark'>(\n    (callback) => {\n      if (typeof window === 'undefined' || theme !== 'system') {\n        return () => {\n          // No-op unsubscribe\n        };\n      }\n      const mql = window.matchMedia('(prefers-color-scheme: dark)');\n      mql.addEventListener('change', callback);\n      return () => {\n        mql.removeEventListener('change', callback);\n      };\n    },\n    (): 'light' | 'dark' =>\n      typeof window !== 'undefined' && theme === 'system'\n        ? window.matchMedia('(prefers-color-scheme: dark)').matches\n          ? 'dark'\n          : 'light'\n        : 'light',\n    (): 'light' | 'dark' => 'light', // Server snapshot\n  );\n\n  if (theme === 'system') {\n    return systemTheme;\n  }\n  // TypeScript should narrow theme to 'light' | 'dark' here\n  return theme as 'light' | 'dark';\n}\n"],"names":["useSyncExternalStore","useTheme","useResolvedTheme","theme","systemTheme","callback","window","mql","matchMedia","addEventListener","removeEventListener","matches"],"mappings":"AAAA,SAAQA,oBAAoB,QAAO,QAAQ;AAC3C,SAAQC,QAAQ,QAAO,aAAa;AAEpC,OAAO,SAASC;IACd,MAAM,EAACC,KAAK,EAAC,GAAGF;IAEhB,MAAMG,cAAcJ,qBAClB,CAACK;QACC,IAAI,OAAOC,WAAW,eAAeH,UAAU,UAAU;YACvD,OAAO;YACL,oBAAoB;YACtB;QACF;QACA,MAAMI,MAAMD,OAAOE,UAAU,CAAC;QAC9BD,IAAIE,gBAAgB,CAAC,UAAUJ;QAC/B,OAAO;YACLE,IAAIG,mBAAmB,CAAC,UAAUL;QACpC;IACF,GACA,IACE,OAAOC,WAAW,eAAeH,UAAU,WACvCG,OAAOE,UAAU,CAAC,gCAAgCG,OAAO,GACvD,SACA,UACF,SACN,IAAwB;IAG1B,IAAIR,UAAU,UAAU;QACtB,OAAOC;IACT;IACA,0DAA0D;IAC1D,OAAOD;AACT"}

package/dist/hooks/useShikiHighlight.d.ts

@@ -0,0 +1,28 @@
+type ShikiThemes = {
+    light: string;
+    dark: string;
+};
+type UseShikiHighlightOptions = {
+    code: string;
+    lang: string;
+    themes: ShikiThemes;
+    resolvedTheme: 'light' | 'dark';
+    syntaxHighlighting: boolean;
+};
+export declare function useShikiHighlight({ code, lang, themes, resolvedTheme, syntaxHighlighting, }: UseShikiHighlightOptions): {
+    highlightedCode: string;
+    isLoading: boolean;
+};
+type UseShikiHighlightMultipleOptions = {
+    codes: Record<string, string>;
+    lang: string;
+    themes: ShikiThemes;
+    resolvedTheme: 'light' | 'dark';
+    syntaxHighlighting: boolean;
+};
+export declare function useShikiHighlightMultiple({ codes, lang, themes, resolvedTheme, syntaxHighlighting, }: UseShikiHighlightMultipleOptions): {
+    highlightedCodes: Record<string, string>;
+    isLoading: boolean;
+};
+export {};
+//# sourceMappingURL=useShikiHighlight.d.ts.map

package/dist/hooks/useShikiHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShikiHighlight.d.ts","sourceRoot":"","sources":["../../src/hooks/useShikiHighlight.ts"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,kBAAkB,GACnB,EAAE,wBAAwB,GAAG;IAAC,eAAe,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CA6C1E;AAED,KAAK,gCAAgC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;IACpB,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,kBAAkB,GACnB,EAAE,gCAAgC,GAAG;IACpC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;CACpB,CAsDA"}

package/dist/hooks/useShikiHighlight.js

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+export function useShikiHighlight({ code, lang, themes, resolvedTheme, syntaxHighlighting }) {
+    const [highlightedCode, setHighlightedCode] = useState('');
+    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
+    };
+}
+export function useShikiHighlightMultiple({ codes, lang, themes, resolvedTheme, syntaxHighlighting }) {
+    const [highlightedCodes, setHighlightedCodes] = useState({});
+    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 = {};
+                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
+    };
+}
+
+//# sourceMappingURL=useShikiHighlight.js.map

package/dist/hooks/useShikiHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useShikiHighlight.ts"],"sourcesContent":["import {useEffect, useState} from 'react';\n\ntype ShikiThemes = {\n  light: string;\n  dark: string;\n};\n\ntype UseShikiHighlightOptions = {\n  code: string;\n  lang: string;\n  themes: ShikiThemes;\n  resolvedTheme: 'light' | 'dark';\n  syntaxHighlighting: boolean;\n};\n\nexport function useShikiHighlight({\n  code,\n  lang,\n  themes,\n  resolvedTheme,\n  syntaxHighlighting,\n}: UseShikiHighlightOptions): {highlightedCode: string; isLoading: boolean} {\n  const [highlightedCode, setHighlightedCode] = useState<string>('');\n  const [isLoading, setIsLoading] = useState(syntaxHighlighting);\n\n  useEffect(() => {\n    if (!syntaxHighlighting) {\n      setIsLoading(false);\n      return;\n    }\n\n    setIsLoading(true);\n    let cancelled = false;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const {codeToHtml} = await import('shiki');\n\n        const html = await codeToHtml(code, {\n          lang,\n          themes: {\n            light: themes.light,\n            dark: themes.dark,\n          },\n          defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',\n        });\n\n        if (!cancelled) {\n          setHighlightedCode(html);\n          setIsLoading(false);\n        }\n      } catch {\n        if (!cancelled) {\n          setIsLoading(false);\n        }\n      }\n    };\n\n    loadHighlightedCode();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, lang, themes.light, themes.dark, resolvedTheme, syntaxHighlighting]);\n\n  return {highlightedCode, isLoading};\n}\n\ntype UseShikiHighlightMultipleOptions = {\n  codes: Record<string, string>;\n  lang: string;\n  themes: ShikiThemes;\n  resolvedTheme: 'light' | 'dark';\n  syntaxHighlighting: boolean;\n};\n\nexport function useShikiHighlightMultiple({\n  codes,\n  lang,\n  themes,\n  resolvedTheme,\n  syntaxHighlighting,\n}: UseShikiHighlightMultipleOptions): {\n  highlightedCodes: Record<string, string>;\n  isLoading: boolean;\n} {\n  const [highlightedCodes, setHighlightedCodes] = useState<Record<string, string>>({});\n  const [isLoading, setIsLoading] = useState(syntaxHighlighting);\n\n  useEffect(() => {\n    if (!syntaxHighlighting) {\n      setIsLoading(false);\n      return;\n    }\n\n    setIsLoading(true);\n    let cancelled = false;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const {codeToHtml} = await import('shiki');\n        const newHighlightedCodes: Record<string, string> = {};\n\n        for (const [command, val] of Object.entries(codes)) {\n          if (cancelled) {\n            return;\n          }\n\n          const highlighted = await codeToHtml(val, {\n            lang,\n            themes: {\n              light: themes.light,\n              dark: themes.dark,\n            },\n            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',\n          });\n\n          newHighlightedCodes[command] = highlighted;\n        }\n\n        if (!cancelled) {\n          setHighlightedCodes(newHighlightedCodes);\n          setIsLoading(false);\n        }\n      } catch {\n        if (!cancelled) {\n          setIsLoading(false);\n        }\n      }\n    };\n\n    loadHighlightedCode();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [resolvedTheme, lang, themes.light, themes.dark, codes, syntaxHighlighting]);\n\n  return {highlightedCodes, isLoading};\n}\n"],"names":["useEffect","useState","useShikiHighlight","code","lang","themes","resolvedTheme","syntaxHighlighting","highlightedCode","setHighlightedCode","isLoading","setIsLoading","cancelled","loadHighlightedCode","codeToHtml","html","light","dark","defaultColor","useShikiHighlightMultiple","codes","highlightedCodes","setHighlightedCodes","newHighlightedCodes","command","val","Object","entries","highlighted"],"mappings":"AAAA,SAAQA,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,SAASC,kBAAkB,EAChCC,IAAI,EACJC,IAAI,EACJC,MAAM,EACNC,aAAa,EACbC,kBAAkB,EACO;IACzB,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGR,SAAiB;IAC/D,MAAM,CAACS,WAAWC,aAAa,GAAGV,SAASM;IAE3CP,UAAU;QACR,IAAI,CAACO,oBAAoB;YACvBI,aAAa;YACb;QACF;QAEAA,aAAa;QACb,IAAIC,YAAY;QAEhB,MAAMC,sBAAsB;YAC1B,IAAI;gBACF,MAAM,EAACC,UAAU,EAAC,GAAG,MAAM,MAAM,CAAC;gBAElC,MAAMC,OAAO,MAAMD,WAAWX,MAAM;oBAClCC;oBACAC,QAAQ;wBACNW,OAAOX,OAAOW,KAAK;wBACnBC,MAAMZ,OAAOY,IAAI;oBACnB;oBACAC,cAAcZ,kBAAkB,SAAS,SAAS;gBACpD;gBAEA,IAAI,CAACM,WAAW;oBACdH,mBAAmBM;oBACnBJ,aAAa;gBACf;YACF,EAAE,OAAM;gBACN,IAAI,CAACC,WAAW;oBACdD,aAAa;gBACf;YACF;QACF;QAEAE;QAEA,OAAO;YACLD,YAAY;QACd;IACF,GAAG;QAACT;QAAMC;QAAMC,OAAOW,KAAK;QAAEX,OAAOY,IAAI;QAAEX;QAAeC;KAAmB;IAE7E,OAAO;QAACC;QAAiBE;IAAS;AACpC;AAUA,OAAO,SAASS,0BAA0B,EACxCC,KAAK,EACLhB,IAAI,EACJC,MAAM,EACNC,aAAa,EACbC,kBAAkB,EACe;IAIjC,MAAM,CAACc,kBAAkBC,oBAAoB,GAAGrB,SAAiC,CAAC;IAClF,MAAM,CAACS,WAAWC,aAAa,GAAGV,SAASM;IAE3CP,UAAU;QACR,IAAI,CAACO,oBAAoB;YACvBI,aAAa;YACb;QACF;QAEAA,aAAa;QACb,IAAIC,YAAY;QAEhB,MAAMC,sBAAsB;YAC1B,IAAI;gBACF,MAAM,EAACC,UAAU,EAAC,GAAG,MAAM,MAAM,CAAC;gBAClC,MAAMS,sBAA8C,CAAC;gBAErD,KAAK,MAAM,CAACC,SAASC,IAAI,IAAIC,OAAOC,OAAO,CAACP,OAAQ;oBAClD,IAAIR,WAAW;wBACb;oBACF;oBAEA,MAAMgB,cAAc,MAAMd,WAAWW,KAAK;wBACxCrB;wBACAC,QAAQ;4BACNW,OAAOX,OAAOW,KAAK;4BACnBC,MAAMZ,OAAOY,IAAI;wBACnB;wBACAC,cAAcZ,kBAAkB,SAAS,SAAS;oBACpD;oBAEAiB,mBAAmB,CAACC,QAAQ,GAAGI;gBACjC;gBAEA,IAAI,CAAChB,WAAW;oBACdU,oBAAoBC;oBACpBZ,aAAa;gBACf;YACF,EAAE,OAAM;gBACN,IAAI,CAACC,WAAW;oBACdD,aAAa;gBACf;YACF;QACF;QAEAE;QAEA,OAAO;YACLD,YAAY;QACd;IACF,GAAG;QAACN;QAAeF;QAAMC,OAAOW,KAAK;QAAEX,OAAOY,IAAI;QAAEG;QAAOb;KAAmB;IAE9E,OAAO;QAACc;QAAkBX;IAAS;AACrC"}

package/dist/hooks/useShikiStyleInjection.d.ts

@@ -0,0 +1,2 @@
+export declare function useShikiStyleInjection(syntaxHighlighting: boolean): void;
+//# sourceMappingURL=useShikiStyleInjection.d.ts.map

package/dist/hooks/useShikiStyleInjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShikiStyleInjection.d.ts","sourceRoot":"","sources":["../../src/hooks/useShikiStyleInjection.ts"],"names":[],"mappings":"AAEA,wBAAgB,sBAAsB,CAAC,kBAAkB,EAAE,OAAO,GAAG,IAAI,CA+BxE"}

package/dist/hooks/useShikiStyleInjection.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+export function useShikiStyleInjection(syntaxHighlighting) {
+    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
+    ]);
+}
+
+//# sourceMappingURL=useShikiStyleInjection.js.map

package/dist/hooks/useShikiStyleInjection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useShikiStyleInjection.ts"],"sourcesContent":["import {useEffect} from 'react';\n\nexport function useShikiStyleInjection(syntaxHighlighting: boolean): void {\n  useEffect(() => {\n    if (!syntaxHighlighting) {\n      return;\n    }\n\n    const styleId = 'shiki-override-styles';\n    if (document.getElementById(styleId)) {\n      return;\n    }\n\n    const style = document.createElement('style');\n    style.id = styleId;\n    style.textContent = `\n      .shiki-override pre,\n      .shiki-override code,\n      .shiki-override pre *,\n      .shiki-override code * {\n        background: transparent !important;\n        font-family: \"Commit Mono\", monospace !important;\n      }\n    `;\n    document.head.appendChild(style);\n\n    return () => {\n      const existingStyle = document.getElementById(styleId);\n      if (existingStyle) {\n        existingStyle.remove();\n      }\n    };\n  }, [syntaxHighlighting]);\n}\n"],"names":["useEffect","useShikiStyleInjection","syntaxHighlighting","styleId","document","getElementById","style","createElement","id","textContent","head","appendChild","existingStyle","remove"],"mappings":"AAAA,SAAQA,SAAS,QAAO,QAAQ;AAEhC,OAAO,SAASC,uBAAuBC,kBAA2B;IAChEF,UAAU;QACR,IAAI,CAACE,oBAAoB;YACvB;QACF;QAEA,MAAMC,UAAU;QAChB,IAAIC,SAASC,cAAc,CAACF,UAAU;YACpC;QACF;QAEA,MAAMG,QAAQF,SAASG,aAAa,CAAC;QACrCD,MAAME,EAAE,GAAGL;QACXG,MAAMG,WAAW,GAAG,CAAC;;;;;;;;IAQrB,CAAC;QACDL,SAASM,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACL,MAAMM,gBAAgBR,SAASC,cAAc,CAACF;YAC9C,IAAIS,eAAe;gBACjBA,cAAcC,MAAM;YACtB;QACF;IACF,GAAG;QAACX;KAAmB;AACzB"}

package/dist/onboarding/sign-in.stories.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { Avatar } from '../components/avatar/index.js';
+import { Button } from '../components/button/index.js';
+import { Header, Text } from '../components/typography/index.js';
+const meta = {
+    title: 'Onboarding/Signin',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const Default = {
+    play: async (ctx)=>{
+        await argosScreenshot(ctx, 'example-screenshot');
+    },
+    render: ()=>{
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex min-h-screen items-center justify-center bg-background-subtle-base",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]",
+                    children: /*#__PURE__*/ _jsx("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'
+                        }
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col items-center gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Avatar, {
+                                    content: "logo",
+                                    size: "xl",
+                                    radius: "rounded",
+                                    logoName: "shipfox"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex min-w-[128px] flex-col items-center gap-4 text-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Header, {
+                                            variant: "h1",
+                                            className: "text-[28px] font-medium leading-[44px] text-foreground-neutral-base",
+                                            children: "Connect to Shipfox"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            size: "sm",
+                                            className: "text-sm font-normal leading-[24px] text-foreground-neutral-subtle",
+                                            children: "Log in to access Shipfox."
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex w-full flex-col gap-20",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    iconLeft: "google",
+                                    className: "w-full",
+                                    children: "Continue with Google"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    iconLeft: "microsoft",
+                                    className: "w-full",
+                                    children: "Continue with Microsoft"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "md",
+                                    className: "w-full",
+                                    children: "Connect with Enterprise SSO"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=sign-in.stories.js.map

package/dist/onboarding/sign-in.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/onboarding/sign-in.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Avatar} from 'components/avatar';\nimport {Button} from 'components/button';\nimport {Header, Text} from 'components/typography';\n\nconst meta = {\n  title: 'Onboarding/Signin',\n  parameters: {\n    layout: 'fullscreen',\n  },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    await argosScreenshot(ctx, 'example-screenshot');\n  },\n  render: () => {\n    return (\n      <div className=\"flex min-h-screen items-center justify-center bg-background-subtle-base\">\n        {/* Background illustration - simplified decorative element */}\n        <div className=\"pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]\">\n          <div\n            className=\"h-[332px] w-[800px] opacity-20\"\n            style={{\n              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,\n              backgroundSize: '24px 24px',\n              backgroundPosition: '-80px 31px',\n            }}\n          />\n        </div>\n\n        {/* Main content */}\n        <div className=\"relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24\">\n          {/* Logo and title section */}\n          <div className=\"flex flex-col items-center gap-16\">\n            <Avatar content=\"logo\" size=\"xl\" radius=\"rounded\" logoName=\"shipfox\" />\n            <div className=\"flex min-w-[128px] flex-col items-center gap-4 text-center\">\n              <Header\n                variant=\"h1\"\n                className=\"text-[28px] font-medium leading-[44px] text-foreground-neutral-base\"\n              >\n                Connect to Shipfox\n              </Header>\n              <Text\n                size=\"sm\"\n                className=\"text-sm font-normal leading-[24px] text-foreground-neutral-subtle\"\n              >\n                Log in to access Shipfox.\n              </Text>\n            </div>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex w-full flex-col gap-20\">\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"google\" className=\"w-full\">\n              Continue with Google\n            </Button>\n            <Button variant=\"primary\" size=\"md\" iconLeft=\"microsoft\" className=\"w-full\">\n              Continue with Microsoft\n            </Button>\n            <Button variant=\"transparent\" size=\"md\" className=\"w-full\">\n              Connect with Enterprise SSO\n            </Button>\n          </div>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","Avatar","Button","Header","Text","meta","title","parameters","layout","Default","play","ctx","render","div","className","style","backgroundImage","backgroundSize","backgroundPosition","content","size","radius","logoName","variant","iconLeft"],"mappings":";AAAA,SAAQA,eAAe,QAAO,6BAA6B;AAE3D,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,QAAO,oBAAoB;AACzC,SAAQC,MAAM,EAAEC,IAAI,QAAO,wBAAwB;AAEnD,MAAMC,OAAO;IACXC,OAAO;IACPC,YAAY;QACVC,QAAQ;IACV;AACF;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,UAAiB;IAC5BC,MAAM,OAAOC;QACX,MAAMX,gBAAgBW,KAAK;IAC7B;IACAC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BAEb,KAACD;oBAAIC,WAAU;8BACb,cAAA,KAACD;wBACCC,WAAU;wBACVC,OAAO;4BACLC,iBAAiB,CAAC,mEAAmE,CAAC;4BACtFC,gBAAgB;4BAChBC,oBAAoB;wBACtB;;;8BAKJ,MAACL;oBAAIC,WAAU;;sCAEb,MAACD;4BAAIC,WAAU;;8CACb,KAACb;oCAAOkB,SAAQ;oCAAOC,MAAK;oCAAKC,QAAO;oCAAUC,UAAS;;8CAC3D,MAACT;oCAAIC,WAAU;;sDACb,KAACX;4CACCoB,SAAQ;4CACRT,WAAU;sDACX;;sDAGD,KAACV;4CACCgB,MAAK;4CACLN,WAAU;sDACX;;;;;;sCAOL,MAACD;4BAAIC,WAAU;;8CACb,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAASV,WAAU;8CAAS;;8CAGzE,KAACZ;oCAAOqB,SAAQ;oCAAUH,MAAK;oCAAKI,UAAS;oCAAYV,WAAU;8CAAS;;8CAG5E,KAACZ;oCAAOqB,SAAQ;oCAAcH,MAAK;oCAAKN,WAAU;8CAAS;;;;;;;;IAOrE;AACF,EAAE"}

package/index.css

@@ -4,9 +4,10 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@theme {
+/* Commented because it breaks default Tailwind theme with breakpoints */
+/* @theme {
   --\*: initial;
-}
+} */
 
 @custom-variant hover (&:hover);
 
@@ -197,14 +198,17 @@
   --background-button-transparent-default: var(--color-alpha-white-0);
   --background-button-neutral-hover: var(--color-neutral-100);
   --background-button-danger-hover: var(--color-red-700);
+  --background-button-success-hover: var(--color-green-700);
   --background-button-neutral-pressed: var(--color-neutral-200);
   --background-button-neutral-default: var(--color-neutral-0);
-  --background-button-transparent-hover: var(--color-alpha-white-6);
+  --background-button-transparent-hover: var(--color-alpha-black-6);
   --background-button-inverted-pressed: var(--color-neutral-600);
-  --background-button-transparent-pressed: var(--color-alpha-white-10);
+  --background-button-transparent-pressed: var(--color-alpha-black-10);
   --background-button-danger-pressed: var(--color-red-800);
+  --background-button-success-pressed: var(--color-green-800);
   --background-button-inverted-hover: var(--color-neutral-700);
   --background-button-danger-default: var(--color-red-600);
+  --background-button-success-default: var(--color-green-600);
   --background-button-inverted-default: var(--color-neutral-800);
 
   /* Accent Background */
@@ -267,7 +271,7 @@
   --tag-error-icon: var(--color-red-500);
   --tag-error-text: var(--color-red-800);
   --tag-warning-icon: var(--color-orange-400);
-  --tag-warning-text: var(--color-orange-200);
+  --tag-warning-text: var(--color-orange-800);
   --tag-success-bg: var(--color-green-100);
   --tag-success-border: var(--color-green-200);
   --tag-success-text: var(--color-green-800);
@@ -307,12 +311,11 @@
     var(--color-neutral-600), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
     var(--color-primary-500);
   --shadow-button-neutral:
-    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
-    var(--color-neutral-800), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
-    var(--color-alpha-black-24);
+    0 0 0 1px var(--color-alpha-black-8), 0 2px 4px 0 var(--color-alpha-black-8), 0 4px 8px 0
+    var(--color-alpha-black-8);
   --shadow-button-neutral-focus:
     0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
-    var(--color-neutral-800), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-alpha-black-8), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
     var(--color-primary-500);
   --shadow-button-danger:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
@@ -321,6 +324,49 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px var(--color-primary-500);
+  --shadow-button-success:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-success-focus:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-primary-500);
+
+  /* Checkbox */
+  /* Checkbox - Unchecked States */
+  --checkbox-unchecked-bg: var(--background-components-base);
+  --checkbox-unchecked-bg-hover: var(--background-components-hover);
+  --checkbox-unchecked-border: var(--color-alpha-black-8);
+  --checkbox-unchecked-shadow:
+    0px 1px 2px 0px var(--color-alpha-black-12), 0px 0px 0px 1px var(--color-alpha-black-8);
+  --checkbox-unchecked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px
+    var(--color-neutral-0), 0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Checked States */
+  --checkbox-checked-bg: var(--foreground-highlight-interactive);
+  --checkbox-checked-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-checked-border: rgba(255, 75, 0, 0.69);
+  --checkbox-checked-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-checked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px
+    var(--color-neutral-0), 0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Indeterminate States */
+  --checkbox-indeterminate-bg: var(--foreground-highlight-interactive);
+  --checkbox-indeterminate-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-indeterminate-border: rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-focus-shadow:
+    0px 0px 0px 1px var(--color-neutral-0), 0px 0px 0px 3px rgba(255, 75, 0, 0.6);
+  --shadow-tooltip:
+    0 0 0 1px var(--color-alpha-black-8), 0 2px 4px 0 var(--color-alpha-black-8), 0 4px 8px 0
+    var(--color-alpha-black-8);
+  --shadow-separator-inset:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
 }
 
 .dark {
@@ -357,14 +403,17 @@
   --background-button-transparent-default: var(--color-alpha-white-0);
   --background-button-neutral-hover: var(--color-alpha-white-8);
   --background-button-danger-hover: var(--color-red-700);
+  --background-button-success-hover: var(--color-green-700);
   --background-button-neutral-pressed: var(--color-alpha-white-12);
   --background-button-neutral-default: var(--color-alpha-white-4);
   --background-button-transparent-hover: var(--color-alpha-white-8);
   --background-button-inverted-pressed: var(--color-neutral-400);
   --background-button-transparent-pressed: var(--color-alpha-white-12);
   --background-button-danger-pressed: var(--color-red-600);
+  --background-button-success-pressed: var(--color-green-600);
   --background-button-inverted-hover: var(--color-neutral-500);
   --background-button-danger-default: var(--color-red-800);
+  --background-button-success-default: var(--color-green-800);
   --background-button-inverted-default: var(--color-neutral-600);
 
   /* Accent Background */
@@ -466,9 +515,8 @@
     0 -1px 0 0 var(--color-alpha-white-12), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-neutral-600), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
   --shadow-button-neutral:
-    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
-    var(--color-neutral-800), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
-    var(--color-alpha-black-24);
+    0 -1px 0 0 var(--color-alpha-white-4), 0 2px 4px 0 var(--color-alpha-black-40), 0 0 0 1px
+    var(--color-alpha-white-10), 0 4px 8px 0 var(--color-alpha-black-40);
   --shadow-button-neutral-focus:
     0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
     var(--color-neutral-800), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
@@ -479,6 +527,52 @@
   --shadow-button-danger-focus:
     0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
     var(--color-red-700), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
+  --shadow-button-success:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-success-focus:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-green-700), 0 0 0 2px var(--color-neutral-950), 0 0 0 4px var(--color-primary-500);
+
+  /* Checkbox */
+  /* Checkbox - Unchecked States */
+  --checkbox-unchecked-bg: var(--background-components-base);
+  --checkbox-unchecked-bg-hover: var(--background-components-hover);
+  --checkbox-unchecked-border: var(--color-alpha-white-10);
+  --checkbox-unchecked-shadow:
+    0px 1px 2px 0px var(--color-alpha-black-12), 0px 0px 0px 1px var(--color-alpha-white-10);
+  --checkbox-unchecked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px var(
+      --color-alpha-black-80
+    ),
+    0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Checked States */
+  --checkbox-checked-bg: var(--foreground-highlight-interactive);
+  --checkbox-checked-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-checked-border: rgba(255, 75, 0, 0.69);
+  --checkbox-checked-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-checked-focus-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px #ff4b00, 0px 0px 0px 2px var(
+      --color-alpha-black-80
+    ),
+    0px 0px 0px 4px rgba(255, 75, 0, 0.6);
+
+  /* Checkbox - Indeterminate States */
+  --checkbox-indeterminate-bg: var(--foreground-highlight-interactive);
+  --checkbox-indeterminate-bg-hover: var(--foreground-highlight-interactive-hover);
+  --checkbox-indeterminate-border: rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-shadow:
+    0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(255, 75, 0, 0.69);
+  --checkbox-indeterminate-focus-shadow:
+    0px 0px 0px 1px var(--color-alpha-black-80), 0px 0px 0px 3px rgba(255, 75, 0, 0.6);
+  --shadow-tooltip:
+    0 -1px 0 0 var(--color-alpha-white-4), 0 2px 4px 0 var(--color-alpha-black-40), 0 0 0 1px
+    var(--color-alpha-white-10), 0 4px 8px 0 var(--color-alpha-black-40);
+  --shadow-separator-inset:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
 }
 
 @theme inline {
@@ -654,14 +748,17 @@
   --color-background-button-transparent-default: var(--background-button-transparent-default);
   --color-background-button-neutral-hover: var(--background-button-neutral-hover);
   --color-background-button-danger-hover: var(--background-button-danger-hover);
+  --color-background-button-success-hover: var(--background-button-success-hover);
   --color-background-button-neutral-pressed: var(--background-button-neutral-pressed);
   --color-background-button-neutral-default: var(--background-button-neutral-default);
   --color-background-button-transparent-hover: var(--background-button-transparent-hover);
   --color-background-button-inverted-pressed: var(--background-button-inverted-pressed);
   --color-background-button-transparent-pressed: var(--background-button-transparent-pressed);
   --color-background-button-danger-pressed: var(--background-button-danger-pressed);
+  --color-background-button-success-pressed: var(--background-button-success-pressed);
   --color-background-button-inverted-hover: var(--background-button-inverted-hover);
   --color-background-button-danger-default: var(--background-button-danger-default);
+  --color-background-button-success-default: var(--background-button-success-default);
   --color-background-button-inverted-default: var(--background-button-inverted-default);
 
   /* Theme tokens - accent background */
@@ -802,6 +899,27 @@
   --shadow-button-neutral-focus: var(--shadow-button-neutral-focus);
   --shadow-button-danger: var(--shadow-button-danger);
   --shadow-button-danger-focus: var(--shadow-button-danger-focus);
+  --shadow-button-success: var(--shadow-button-success);
+  --shadow-button-success-focus: var(--shadow-button-success-focus);
+
+  /* Checkbox */
+  --color-checkbox-unchecked-bg: var(--checkbox-unchecked-bg);
+  --color-checkbox-unchecked-bg-hover: var(--checkbox-unchecked-bg-hover);
+  --color-checkbox-unchecked-border: var(--checkbox-unchecked-border);
+  --shadow-checkbox-unchecked: var(--checkbox-unchecked-shadow);
+  --shadow-checkbox-unchecked-focus: var(--checkbox-unchecked-focus-shadow);
+  --color-checkbox-checked-bg: var(--checkbox-checked-bg);
+  --color-checkbox-checked-bg-hover: var(--checkbox-checked-bg-hover);
+  --color-checkbox-checked-border: var(--checkbox-checked-border);
+  --shadow-checkbox-checked: var(--checkbox-checked-shadow);
+  --shadow-checkbox-checked-focus: var(--checkbox-checked-focus-shadow);
+  --color-checkbox-indeterminate-bg: var(--checkbox-indeterminate-bg);
+  --color-checkbox-indeterminate-bg-hover: var(--checkbox-indeterminate-bg-hover);
+  --color-checkbox-indeterminate-border: var(--checkbox-indeterminate-border);
+  --shadow-checkbox-indeterminate: var(--checkbox-indeterminate-shadow);
+  --shadow-checkbox-indeterminate-focus: var(--checkbox-indeterminate-focus-shadow);
+  --shadow-tooltip: var(--shadow-tooltip);
+  --shadow-separator-inset: var(--shadow-separator-inset);
 }
 
 @layer base {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,12 +22,15 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@remixicon/react": "^4.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.541.0",
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.553.0",
     "react-day-picker": "^9.5.1",
     "recharts": "^3.1.0",
+    "shiki": "^3.15.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.2.0"
   },
@@ -40,6 +43,9 @@
     "react-hook-form": "^7.52.1"
   },
   "devDependencies": {
+    "@argos-ci/cli": "^3.2.1",
+    "@argos-ci/storybook": "^5.2.1",
+    "@storybook/addon-vitest": "^9.1.16",
     "@storybook/builder-vite": "^9.1.8",
     "@storybook/react": "^9.1.8",
     "@storybook/react-vite": "^9.1.8",
@@ -56,7 +62,11 @@
     "storybook-addon-pseudo-states": "^9.1.8",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
-    "@shipfox/biome": "1.3.0",
+    "vitest": "^4.0.8",
+    "playwright": "^1.56.1",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
+    "@shipfox/biome": "1.3.1",
     "@shipfox/swc": "1.2.1",
     "@shipfox/ts-config": "1.3.5",
     "@shipfox/typescript": "1.1.2",
@@ -68,6 +78,7 @@
     "check": "biome-check",
     "storybook": "storybook dev",
     "storybook:build": "storybook build -o storybook-static",
+    "argos": "argos upload --build-name react-ui storybook-static",
     "test": "vitest-run",
     "type": "tsc-emit"
   }