@shipfox/react-ui 0.3.0 → 0.4.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/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);
 
@@ -267,7 +268,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,9 +308,8 @@
     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
@@ -321,6 +321,41 @@
   --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);
+
+  /* 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 {
@@ -466,9 +501,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 +513,45 @@
   --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);
+
+  /* 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 {
@@ -802,6 +875,25 @@
   --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);
+
+  /* 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.4.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"
   },
@@ -56,7 +59,7 @@
     "storybook-addon-pseudo-states": "^9.1.8",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
-    "@shipfox/biome": "1.3.0",
+    "@shipfox/biome": "1.3.1",
     "@shipfox/swc": "1.2.1",
     "@shipfox/ts-config": "1.3.5",
     "@shipfox/typescript": "1.1.2",