@shipfox/react-ui 0.2.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/dist/utils/avatar.d.ts

@@ -0,0 +1,3 @@
+export declare const getPlaceholderImageUrl: (name?: string) => string;
+export declare const getInitial: (name?: string) => string;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/utils/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/utils/avatar.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,KAAG,MAStD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAK1C,CAAC"}

package/dist/utils/avatar.js

@@ -0,0 +1,32 @@
+const hashString = (str)=>{
+    let hash = 0;
+    for(let i = 0; i < str.length; i++){
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+};
+export const getPlaceholderImageUrl = (name)=>{
+    const backgroundColors = [
+        'BFDFFF',
+        'BFEAFF',
+        'CFBFFF',
+        'FFBFC3',
+        'FFEABF',
+        'E3E6EA',
+        'EAEAEA'
+    ];
+    const seed = name?.trim() || 'avatar';
+    const colorIndex = hashString(seed) % backgroundColors.length;
+    const backgroundColor = backgroundColors[colorIndex];
+    return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;
+};
+export const getInitial = (name)=>{
+    if (name) {
+        return name.trim()[0]?.toUpperCase() ?? 'L';
+    }
+    return 'L';
+};
+
+//# sourceMappingURL=avatar.js.map

package/dist/utils/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/avatar.ts"],"sourcesContent":["const hashString = (str: string): number => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    const char = str.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash = hash & hash;\n  }\n  return Math.abs(hash);\n};\n\nexport const getPlaceholderImageUrl = (name?: string): string => {\n  const backgroundColors = ['BFDFFF', 'BFEAFF', 'CFBFFF', 'FFBFC3', 'FFEABF', 'E3E6EA', 'EAEAEA'];\n\n  const seed = name?.trim() || 'avatar';\n\n  const colorIndex = hashString(seed) % backgroundColors.length;\n  const backgroundColor = backgroundColors[colorIndex];\n\n  return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;\n};\n\nexport const getInitial = (name?: string): string => {\n  if (name) {\n    return name.trim()[0]?.toUpperCase() ?? 'L';\n  }\n  return 'L';\n};\n"],"names":["hashString","str","hash","i","length","char","charCodeAt","Math","abs","getPlaceholderImageUrl","name","backgroundColors","seed","trim","colorIndex","backgroundColor","encodeURIComponent","getInitial","toUpperCase"],"mappings":"AAAA,MAAMA,aAAa,CAACC;IAClB,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIF,IAAIG,MAAM,EAAED,IAAK;QACnC,MAAME,OAAOJ,IAAIK,UAAU,CAACH;QAC5BD,OAAO,AAACA,CAAAA,QAAQ,CAAA,IAAKA,OAAOG;QAC5BH,OAAOA,OAAOA;IAChB;IACA,OAAOK,KAAKC,GAAG,CAACN;AAClB;AAEA,OAAO,MAAMO,yBAAyB,CAACC;IACrC,MAAMC,mBAAmB;QAAC;QAAU;QAAU;QAAU;QAAU;QAAU;QAAU;KAAS;IAE/F,MAAMC,OAAOF,MAAMG,UAAU;IAE7B,MAAMC,aAAad,WAAWY,QAAQD,iBAAiBP,MAAM;IAC7D,MAAMW,kBAAkBJ,gBAAgB,CAACG,WAAW;IAEpD,OAAO,CAAC,uDAAuD,EAAEC,gBAAgB,MAAM,EAAEC,mBAAmBJ,OAAO;AACrH,EAAE;AAEF,OAAO,MAAMK,aAAa,CAACP;IACzB,IAAIA,MAAM;QACR,OAAOA,KAAKG,IAAI,EAAE,CAAC,EAAE,EAAEK,iBAAiB;IAC1C;IACA,OAAO;AACT,EAAE"}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './avatar';
 export * from './clipboard';
 export * from './cn';
 export * from './date';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './avatar.js';
 export * from './clipboard.js';
 export * from './cn.js';
 export * from './date.js';

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './clipboard';\nexport * from './cn';\nexport * from './date';\nexport * from './format';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,WAAW"}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './avatar';\nexport * from './clipboard';\nexport * from './cn';\nexport * from './date';\nexport * from './format';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,WAAW"}

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);
@@ -290,6 +291,71 @@
   /* Alpha */
   --alpha-250: var(--color-alpha-black-10);
   --alpha-400: var(--color-alpha-black-24);
+
+  /* Shadow */
+  --shadow-border-base:
+    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);
+  --shadow-border-interactive-with-active: 0 0 0 1px #ff8b16, 0 0 0 4px rgba(255, 49, 0, 0.25);
+  --shadow-border-error: 0 0 0 1px #ff1f5a, 0 0 0 3px rgba(246, 0, 67, 0.25);
+  --shadow-button-inverted:
+    0 -1px 0 0 var(--color-alpha-white-12), 0 0 0 1px var(--color-alpha-white-10), 0 0 0 1px
+    var(--color-neutral-600), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-inverted-focus:
+    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-alpha-white-88), 0 0 0 4px
+    var(--color-primary-500);
+  --shadow-button-neutral:
+    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-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
+    var(--color-red-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --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 {
@@ -307,7 +373,7 @@
   --background-highlight-base: var(--color-primary-950);
   --background-neutral-hover: var(--color-neutral-800);
   --background-neutral-overlay: var(--color-neutral-800);
-  --background-components-base: var(--color-neutral-900);
+  --background-components-base: var(--color-neutral-800);
   --background-field-component: var(--color-neutral-900);
   --background-switch-off-hover: var(--color-neutral-600);
   --background-field-component-hover: var(--color-neutral-800);
@@ -435,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);
@@ -448,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 {
@@ -771,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.2.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.2.2",
+    "@shipfox/biome": "1.3.1",
     "@shipfox/swc": "1.2.1",
     "@shipfox/ts-config": "1.3.5",
     "@shipfox/typescript": "1.1.2",
@@ -65,7 +68,7 @@
   },
   "scripts": {
     "build": "swc",
-    "check": "biome",
+    "check": "biome-check",
     "storybook": "storybook dev",
     "storybook:build": "storybook build -o storybook-static",
     "test": "vitest-run",