@particle-network/ui-react 0.3.2 → 0.4.0-beta.1

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -0,0 +1,149 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
+import { useDisclosure } from "@heroui/use-disclosure";
+import { ThemeSwitchIcon } from "@particle-network/icons/web";
+import { useI18n } from "../../hooks/index.js";
+import { Flex, HStack, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXDivider } from "../UXDivider/index.js";
+import { UXInput } from "../UXInput/index.js";
+import { UXSpinner } from "../UXSpinner/index.js";
+import { themeData } from "./theme-data.js";
+import { ThemeItem } from "./theme-item.js";
+import { useTheme } from "./use-theme.js";
+const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
+    const i18n = useI18n();
+    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus, fontLoadError } = useTheme();
+    const handleOpenChange = (_isOpen)=>{
+        onOpenChange?.(_isOpen);
+        if (!_isOpen) {
+            setSelectedTheme(savedTheme);
+            setSelectedFontLink(savedFontLink);
+        }
+    };
+    const handleApplyTheme = ()=>{
+        setSavedTheme(selectedTheme);
+        setSavedFontLink(selectedFontLink);
+        onClose?.();
+    };
+    const handleReset = ()=>{
+        setSelectedTheme(savedTheme);
+        setSelectedFontLink(savedFontLink);
+    };
+    return /*#__PURE__*/ jsx(Drawer, {
+        isOpen: isOpen,
+        backdrop: "transparent",
+        onOpenChange: handleOpenChange,
+        ...props,
+        children: /*#__PURE__*/ jsxs(DrawerContent, {
+            children: [
+                /*#__PURE__*/ jsx(DrawerHeader, {
+                    className: "flex flex-col gap-1",
+                    children: i18n.theme.title
+                }),
+                /*#__PURE__*/ jsxs(DrawerBody, {
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            wrap: true,
+                            justify: "between",
+                            className: "gap-y-5",
+                            children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                                    isSelected: selectedTheme.id === theme.id,
+                                    onClick: ()=>setSelectedTheme(theme),
+                                    ...theme
+                                }, theme.id))
+                        }),
+                        /*#__PURE__*/ jsx(UXDivider, {
+                            className: "my-lg"
+                        }),
+                        /*#__PURE__*/ jsxs(VStack, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ jsx(Text, {
+                                    body1Bold: true,
+                                    children: i18n.theme.font.title
+                                }),
+                                /*#__PURE__*/ jsx(UXInput, {
+                                    isClearable: true,
+                                    startContent: 'loading' === fontLoadStatus && /*#__PURE__*/ jsx(UXSpinner, {
+                                        size: 18
+                                    }),
+                                    isInvalid: 'error' === fontLoadStatus,
+                                    className: "w-full",
+                                    placeholder: i18n.theme.font.placeholder,
+                                    value: selectedFontLink,
+                                    description: /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
+                                                body3Bold: true,
+                                                color: "success",
+                                                children: [
+                                                    i18n.theme.font.success,
+                                                    fontName
+                                                ]
+                                            }),
+                                            'error' === fontLoadStatus && fontLoadError && /*#__PURE__*/ jsx(Text, {
+                                                body3Bold: true,
+                                                color: "danger",
+                                                children: fontLoadError
+                                            })
+                                        ]
+                                    }),
+                                    onValueChange: setSelectedFontLink
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(DrawerFooter, {
+                    className: "mb-8",
+                    children: /*#__PURE__*/ jsxs(HStack, {
+                        fullWidth: true,
+                        gap: "lg",
+                        children: [
+                            /*#__PURE__*/ jsx(UXButton, {
+                                fullWidth: true,
+                                size: "lg",
+                                onPress: handleReset,
+                                children: i18n.theme.reset
+                            }),
+                            /*#__PURE__*/ jsx(UXButton, {
+                                fullWidth: true,
+                                isDisabled: 'error' === fontLoadStatus,
+                                size: "lg",
+                                color: "primary",
+                                onPress: handleApplyTheme,
+                                children: i18n.theme.apply
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const UXThemeSwitch = ({ children })=>{
+    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+    const renderChildren = ()=>{
+        if (children) return children(onOpen);
+        return /*#__PURE__*/ jsx(UXButton, {
+            isIconOnly: true,
+            variant: "light",
+            onPress: onOpen,
+            children: /*#__PURE__*/ jsx(ThemeSwitchIcon, {})
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            renderChildren(),
+            /*#__PURE__*/ jsx(UXThemeSwitchDrawer, {
+                isOpen: isOpen,
+                onClose: onClose,
+                onOpenChange: onOpenChange
+            })
+        ]
+    });
+};
+export { UXThemeSwitch, UXThemeSwitchDrawer };

package/dist/components/UXThemeSwitch/use-color-scheme.d.ts

@@ -0,0 +1 @@
+export declare const useColorScheme: () => "dark" | "light";

package/dist/components/UXThemeSwitch/use-color-scheme.js

@@ -0,0 +1,6 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useColorScheme = ()=>{
+    const { selectedTheme } = useThemeStore();
+    return selectedTheme.colorScheme;
+};
+export { useColorScheme };

package/dist/components/UXThemeSwitch/use-quote-color.d.ts

@@ -0,0 +1,6 @@
+export declare const useQuoteColor: () => {
+    bullish: string;
+    bearish: string;
+    upColor: string;
+    downColor: string;
+};

package/dist/components/UXThemeSwitch/use-quote-color.js

@@ -0,0 +1,12 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useQuoteColor = ()=>{
+    const { selectedTheme } = useThemeStore();
+    const { bullish, bearish } = selectedTheme.colorVariables;
+    return {
+        bullish,
+        bearish,
+        upColor: bullish,
+        downColor: bearish
+    };
+};
+export { useQuoteColor };

package/dist/components/UXThemeSwitch/use-theme-color.d.ts

@@ -0,0 +1,19 @@
+export declare const useThemeColor: () => {
+    foreground: string;
+    secondary: string;
+    tertiary: string;
+    primary: string;
+    success: string;
+    danger: string;
+    alert: string;
+    warning: string;
+    gold: string;
+    background: string;
+    'background-200': string;
+    'background-300': string;
+    'background-400': string;
+    overlay: string;
+    divider: string;
+    bullish: string;
+    bearish: string;
+};

package/dist/components/UXThemeSwitch/use-theme-color.js

@@ -0,0 +1,6 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useThemeColor = ()=>{
+    const { selectedTheme } = useThemeStore();
+    return selectedTheme.colorVariables;
+};
+export { useThemeColor };

package/dist/components/UXThemeSwitch/use-theme-store.d.ts

@@ -0,0 +1,56 @@
+import { type ThemeItemType } from './theme-data';
+export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
+interface State {
+    /**
+     * 临时选中的 theme（用于预览）
+     */
+    selectedTheme: ThemeItemType;
+    /**
+     * 保存的主题
+     */
+    savedTheme: ThemeItemType;
+    /**
+     * 临时输入的字体链接（用于预览）
+     */
+    selectedFontLink: string;
+    /**
+     * 保存的字体链接
+     */
+    savedFontLink: string;
+    /**
+     * 应用的字体名称
+     */
+    fontName: string;
+    /**
+     * 字体加载状态
+     */
+    fontLoadStatus: FontLoadStatus;
+    /**
+     * 字体加载错误信息
+     */
+    fontLoadError: string | null;
+}
+interface Actions {
+    setSelectedTheme: (theme: ThemeItemType) => void;
+    setSavedTheme: (theme: ThemeItemType) => void;
+    setSelectedFontLink: (link: string) => void;
+    setSavedFontLink: (link: string) => void;
+    setFontLoadStatus: (status: FontLoadStatus) => void;
+    setFontLoadError: (error: string | null) => void;
+    setFontName: (name: string) => void;
+}
+type ThemeStore = State & Actions;
+export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeStore>, "setState" | "persist"> & {
+    setState(partial: ThemeStore | Partial<ThemeStore> | ((state: ThemeStore) => ThemeStore | Partial<ThemeStore>), replace?: false | undefined): unknown;
+    setState(state: ThemeStore | ((state: ThemeStore) => ThemeStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeStore, unknown, unknown>>;
+    };
+}>;
+export {};

package/dist/components/UXThemeSwitch/use-theme-store.js

@@ -0,0 +1,44 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { themeData } from "./theme-data.js";
+const useThemeStore = create()(persist((set)=>({
+        selectedTheme: themeData["0"],
+        savedTheme: themeData["0"],
+        selectedFontLink: '',
+        savedFontLink: '',
+        fontName: '',
+        fontLoadStatus: 'idle',
+        fontLoadError: null,
+        setSelectedTheme: (theme)=>set({
+                selectedTheme: theme
+            }),
+        setSavedTheme: (theme)=>set({
+                savedTheme: theme
+            }),
+        setSelectedFontLink: (link)=>set({
+                selectedFontLink: link
+            }),
+        setSavedFontLink: (link)=>set({
+                savedFontLink: link
+            }),
+        setFontLoadStatus: (status)=>set({
+                fontLoadStatus: status
+            }),
+        setFontLoadError: (error)=>set({
+                fontLoadError: error
+            }),
+        setFontName: (name)=>set({
+                fontName: name
+            })
+    }), {
+    name: 'ux-theme',
+    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
+    partialize: (state)=>({
+            selectedTheme: state.selectedTheme,
+            savedTheme: state.savedTheme,
+            fontName: state.fontName,
+            selectedFontLink: state.selectedFontLink,
+            savedFontLink: state.savedFontLink
+        })
+}));
+export { useThemeStore };

package/dist/components/UXThemeSwitch/use-theme.d.ts

@@ -0,0 +1,18 @@
+import { type ThemeItemType } from './theme-data';
+import { type FontLoadStatus } from './use-theme-store';
+/**
+ * UX 主题管理 Hook
+ */
+export declare const useTheme: () => {
+    selectedTheme: ThemeItemType;
+    setSelectedTheme: (theme: ThemeItemType) => void;
+    savedTheme: ThemeItemType;
+    setSavedTheme: (theme: ThemeItemType) => void;
+    selectedFontLink: string;
+    setSelectedFontLink: (link: string) => void;
+    savedFontLink: string;
+    setSavedFontLink: (link: string) => void;
+    fontLoadStatus: FontLoadStatus;
+    fontLoadError: string | null;
+    fontName: string;
+};

package/dist/components/UXThemeSwitch/use-theme.js

@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import { useDebounceFn } from "ahooks";
+import { themeKeys } from "./theme-data.js";
+import { useThemeStore } from "./use-theme-store.js";
+const DEFAULT_FONT_FAMILY = 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';
+const applyTheme = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    root.setAttribute('data-theme', theme.colorScheme);
+    root.setAttribute('data-prefers-color', theme.colorScheme);
+    themeKeys.forEach((key)=>{
+        root.classList.remove(key);
+    });
+    root.classList.add(theme.id);
+};
+const extractFontFamilyFromLink = (link)=>{
+    if (!link) return null;
+    try {
+        const url = new URL(link);
+        const familyParam = url.searchParams.get('family');
+        if (!familyParam) return null;
+        const fontName = familyParam.split(':')[0].replace(/\+/g, ' ');
+        return fontName;
+    } catch  {
+        return null;
+    }
+};
+const loadGoogleFont = (link, options)=>{
+    const { setFontLoadStatus, setFontLoadError, setFontName } = options;
+    if ('undefined' == typeof window) return;
+    const existingLink = document.getElementById('ux-google-font-link');
+    if (existingLink) existingLink.remove();
+    if (!link?.trim()) {
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+        setFontLoadStatus('idle');
+        setFontLoadError(null);
+        setFontName('');
+        return;
+    }
+    setFontLoadStatus('loading');
+    setFontLoadError(null);
+    const linkElement = document.createElement('link');
+    linkElement.id = 'ux-google-font-link';
+    linkElement.rel = 'stylesheet';
+    linkElement.href = link;
+    linkElement.onload = ()=>{
+        setFontLoadStatus('success');
+        setFontLoadError(null);
+        const fontFamily = extractFontFamilyFromLink(link);
+        if (fontFamily) {
+            document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
+            document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
+            setFontName(fontFamily);
+        }
+    };
+    linkElement.onerror = ()=>{
+        const errorMessage = '字体加载失败，请检查链接是否正确';
+        setFontLoadStatus('error');
+        setFontLoadError(errorMessage);
+        setFontName('');
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+    };
+    document.head.appendChild(linkElement);
+};
+const useTheme = ()=>{
+    const selectedTheme = useThemeStore((state)=>state.selectedTheme);
+    const savedTheme = useThemeStore((state)=>state.savedTheme);
+    const selectedFontLink = useThemeStore((state)=>state.selectedFontLink);
+    const savedFontLink = useThemeStore((state)=>state.savedFontLink);
+    const fontName = useThemeStore((state)=>state.fontName);
+    const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
+    const fontLoadError = useThemeStore((state)=>state.fontLoadError);
+    const storeSetSelectedTheme = useThemeStore((state)=>state.setSelectedTheme);
+    const storeSetSavedTheme = useThemeStore((state)=>state.setSavedTheme);
+    const storeSetSelectedFontLink = useThemeStore((state)=>state.setSelectedFontLink);
+    const storeSetSavedFontLink = useThemeStore((state)=>state.setSavedFontLink);
+    const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
+    const storeSetFontLoadError = useThemeStore((state)=>state.setFontLoadError);
+    const storeSetFontName = useThemeStore((state)=>state.setFontName);
+    const { run: debouncedLoadGoogleFont } = useDebounceFn((link)=>loadGoogleFont(link, {
+            setFontLoadStatus: storeSetFontLoadStatus,
+            setFontLoadError: storeSetFontLoadError,
+            setFontName: storeSetFontName
+        }), {
+        wait: 500
+    });
+    useEffect(()=>{
+        applyTheme(savedTheme);
+        debouncedLoadGoogleFont(savedFontLink);
+    }, [
+        savedTheme,
+        savedFontLink
+    ]);
+    const setSelectedTheme = (theme)=>{
+        storeSetSelectedTheme(theme);
+        applyTheme(theme);
+    };
+    const setSavedTheme = (theme)=>{
+        storeSetSavedTheme(theme);
+        applyTheme(theme);
+    };
+    const setSelectedFontLink = (link)=>{
+        storeSetSelectedFontLink(link);
+        debouncedLoadGoogleFont(link);
+    };
+    const setSavedFontLink = (link)=>{
+        storeSetSavedFontLink(link);
+        debouncedLoadGoogleFont(link);
+    };
+    return {
+        selectedTheme,
+        setSelectedTheme,
+        savedTheme,
+        setSavedTheme,
+        selectedFontLink,
+        setSelectedFontLink,
+        savedFontLink,
+        setSavedFontLink,
+        fontLoadStatus,
+        fontLoadError,
+        fontName
+    };
+};
+export { useTheme };

package/dist/components/index.d.ts

@@ -24,5 +24,6 @@ export * from './UXSwitch';
 export * from './UXTable';
 export * from './UXTabs';
 export * from './UXTextarea';
+export * from './UXThemeSwitch';
 export * from './UXToast';
 export * from './UXTooltip';

package/dist/components/index.js

@@ -24,5 +24,6 @@ export * from "./UXSwitch/index.js";
 export * from "./UXTable/index.js";
 export * from "./UXTabs/index.js";
 export * from "./UXTextarea/index.js";
+export * from "./UXThemeSwitch/index.js";
 export * from "./UXToast/index.js";
 export * from "./UXTooltip/index.js";

package/dist/hooks/useI18n.d.ts

@@ -8,4 +8,16 @@ export declare const useI18n: () => {
         error: string;
         address: string;
     };
+    theme: {
+        title: string;
+        reset: string;
+        apply: string;
+        font: {
+            title: string;
+            placeholder: string;
+            loading: string;
+            success: string;
+            error: string;
+        };
+    };
 };

package/dist/hooks/useI18n.js

@@ -8,6 +8,18 @@ const en = {
         success: 'Copied successfully!',
         error: 'Copy failed: ',
         address: 'Address copied: '
+    },
+    theme: {
+        title: 'Theme',
+        reset: 'Reset',
+        apply: 'Apply Theme',
+        font: {
+            title: 'Custom Font',
+            placeholder: 'Enter Google Fonts URL or custom font URL',
+            loading: 'Loading font...',
+            success: 'Font loaded: ',
+            error: 'Failed to load font'
+        }
     }
 };
 const zh = {
@@ -19,6 +31,18 @@ const zh = {
         success: '复制成功！',
         error: '复制失败：',
         address: '地址已复制：'
+    },
+    theme: {
+        title: '主题',
+        reset: '重置',
+        apply: '应用主题',
+        font: {
+            title: '自定义字体',
+            placeholder: '输入 Google Fonts 或自定义字体链接',
+            loading: '正在加载字体...',
+            success: '字体加载成功：',
+            error: '字体加载失败'
+        }
     }
 };
 const useI18n = ()=>{

package/dist/utils/input-classes.d.ts

@@ -263,38 +263,6 @@ export declare const inputClasses: {
         labelPlacement?: undefined;
         radius?: undefined;
         isMultiline?: undefined;
-    } | {
-        isInvalid: boolean;
-        variant: string;
-        class: {
-            inputWrapper: string[];
-            label?: undefined;
-            input?: undefined;
-            innerWrapper?: undefined;
-            stepperButton?: undefined;
-        };
-        size?: undefined;
-        color?: undefined;
-        labelPlacement?: undefined;
-        radius?: undefined;
-        disableAnimation?: undefined;
-        isMultiline?: undefined;
-    } | {
-        isInvalid: boolean;
-        variant: string;
-        class: {
-            inputWrapper: string;
-            label?: undefined;
-            input?: undefined;
-            innerWrapper?: undefined;
-            stepperButton?: undefined;
-        };
-        size?: undefined;
-        color?: undefined;
-        labelPlacement?: undefined;
-        radius?: undefined;
-        disableAnimation?: undefined;
-        isMultiline?: undefined;
     } | {
         labelPlacement: string;
         size: string;

package/dist/utils/input-classes.js

@@ -1,7 +1,7 @@
 const inputClasses = {
     defaultVariants: {
         variant: 'flat',
-        color: 'primary',
+        color: 'default',
         size: 'md',
         fullWidth: true,
         labelPlacement: 'outside',
@@ -75,19 +75,19 @@ const inputClasses = {
         size: {
             sm: {
                 label: 'text-tiny text-foreground-300',
-                inputWrapper: 'text-tiny h-6 min-h-6 px-2 rounded-small',
+                inputWrapper: 'text-tiny h-6 min-h-6 px-2.5 rounded-small',
                 input: 'text-tiny',
                 clearButton: 'text-medium'
             },
             md: {
                 label: 'text-tiny text-foreground-300',
-                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small',
+                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small px-2.5',
                 input: 'text-tiny',
                 clearButton: 'text-large'
             },
             lg: {
                 label: 'text-small text-foreground-300',
-                inputWrapper: 'text-small h-11 min-h-11 rounded-medium',
+                inputWrapper: 'text-small h-11 min-h-11 rounded-medium px-2.5',
                 input: 'text-small',
                 clearButton: 'text-large'
             }
@@ -141,7 +141,7 @@ const inputClasses = {
         },
         isInvalid: {
             true: {
-                inputWrapper: 'group-data-[focus=true]:border-danger caret-danger',
+                inputWrapper: 'border border-danger caret-danger !bg-background group-data-[focus=true]:!bg-background group-data-[hover=true]:!bg-background',
                 label: 'text-danger',
                 input: 'placeholder:text-danger text-danger'
             }
@@ -389,24 +389,6 @@ const inputClasses = {
                 inputWrapper: 'transition-colors motion-reduce:transition-none'
             }
         },
-        {
-            isInvalid: true,
-            variant: 'flat',
-            class: {
-                inputWrapper: [
-                    '!bg-danger-50',
-                    'data-[hover=true]:!bg-danger-100',
-                    'group-data-[focus=true]:!bg-danger-50'
-                ]
-            }
-        },
-        {
-            isInvalid: true,
-            variant: 'bordered',
-            class: {
-                inputWrapper: '!border-danger group-data-[focus=true]:!border-danger'
-            }
-        },
         {
             labelPlacement: 'inside',
             size: 'sm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.2",
+  "version": "0.4.0-beta.1",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -49,8 +49,9 @@
   "dependencies": {
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
-    "@particle-network/ui-shared": "0.2.0",
-    "@particle-network/icons": "0.3.1"
+    "zustand": "^5.0.8",
+    "@particle-network/icons": "0.4.0-beta.0",
+    "@particle-network/ui-shared": "0.3.0-beta.0"
   },
   "scripts": {
     "build": "rslib build",