@tomo-inc/tomo-ui 0.0.10 → 0.0.12

package/README.md

@@ -0,0 +1,217 @@
+# @tomo-inc/tomo-ui
+
+Tomo UI is a React-based design system built on top of **HeroUI** and **Tailwind CSS v4**.  
+It provides:
+
+- A **component layer** (`Button`, `Card`, `Modal`, etc.) with Tomo defaults
+- A **provider layer** (`TomoUIProvider`) and a **theme hook** (`useTheme`)
+- A **Tailwind v4 plugin** that wires HeroUI and Tomo design tokens together
+
+It is designed so that **applications only depend on `@tomo-inc/tomo-ui`**, without touching the underlying UI framework directly.
+
+---
+
+## 1. Installation
+
+> This package is currently intended for use inside the Tomo monorepo and selected internal projects.
+
+Install from your workspace (example uses `pnpm`):
+
+```bash
+pnpm add @tomo-inc/tomo-ui
+```
+
+Peer dependencies (usually already present in the host app):
+
+- `react` `>=18`
+- `react-dom` `>=18`
+- `tailwindcss` `^4` (for apps that want to use the Tailwind plugin)
+
+---
+
+## 2. Usage
+
+### 2.1 Basic React usage
+
+Wrap your app with `TomoUIProvider` and import components from the root package:
+
+```tsx
+import {
+  TomoUIProvider,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+} from "@tomo-inc/tomo-ui";
+
+export function App() {
+  return (
+    <TomoUIProvider>
+      <div className="app-root">
+        <Card>
+          <CardHeader>
+            <h1>Tomo UI Starter</h1>
+          </CardHeader>
+          <CardBody>
+            <p>Now you can start building with @tomo-inc/tomo-ui components.</p>
+          </CardBody>
+          <CardFooter>
+            <Button color="primary">Get Started</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </TomoUIProvider>
+  );
+}
+```
+
+### 2.2 Tailwind CSS v4 integration
+
+Tomo UI ships a Tailwind v4 plugin that wraps HeroUI and Tomo design tokens.  
+In your main CSS entry (for example `src/index.css`):
+
+```css
+@import "tailwindcss";
+
+@plugin "@tomo-inc/tomo-ui/tailwind/plugin";
+
+@source "./**/*.{js,ts,jsx,tsx,mdx}";
+@source "../node_modules/@tomo-inc/tomo-ui/dist/**/*.{js,mjs}";
+```
+
+Notes:
+
+- `@plugin` references the **Tomo UI plugin only**; your app does not need to reference HeroUI directly.
+- `@source` must include:
+  - Your application source (so Tailwind can see your class usage)
+  - Tomo UI’s `dist` (so Tailwind can generate classes used by Tomo components)
+
+Tailwind v4 is configured via PostCSS only. A minimal `postcss.config.(js|mjs|cjs)` looks like:
+
+```js
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
+### 2.3 Dynamic theme configuration
+
+Tomo UI allows you to provide a theme configuration at runtime.  
+The type is aligned with HeroUI’s theme configuration surface.
+
+```tsx
+import {
+  TomoUIProvider,
+  useTheme,
+  type ThemeConfig,
+} from "@tomo-inc/tomo-ui";
+
+const themeConfig: ThemeConfig = {
+  themes: {
+    light: {
+      colors: {
+        primary: "#FCD436",
+      },
+    },
+    dark: {
+      colors: {
+        primary: "#FCD436",
+      },
+    },
+  },
+  defaultTheme: "light",
+};
+
+export function Root() {
+  return (
+    <TomoUIProvider themeConfig={themeConfig}>
+      <ThemedApp />
+    </TomoUIProvider>
+  );
+}
+
+function ThemedApp() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div>
+      <p>Current theme: {theme}</p>
+      <button onClick={() => setTheme("light")}>Light</button>
+      <button onClick={() => setTheme("dark")}>Dark</button>
+    </div>
+  );
+}
+```
+
+Under the hood, the provider:
+
+- Runs the Tomo UI Tailwind plugin at build time to generate base tokens
+- Uses `themeConfigToCSS` at runtime to convert your `ThemeConfig` into CSS variables
+- Scopes the variables to the provider’s DOM subtree, enabling per-subtree theming
+
+---
+
+## 3. Architecture Overview
+
+High-level architecture of `@tomo-inc/tomo-ui`:
+
+- **React components**
+  - Most components are **thin wrappers** around HeroUI components.
+  - Props and types are re-exported from the root package so consumers only import from `@tomo-inc/tomo-ui`.
+  - Domain-specific primitives (e.g. formatted numbers, QR code, MFA/passcode inputs) live under `src/components`.
+
+- **Provider and theming**
+  - `TomoUIProvider` wraps `HeroUIProvider` and a custom `ThemeContextProvider`.
+  - `ThemeConfig` (a typed wrapper around HeroUI’s theme config) is converted to CSS variables via `themeConfigToCSS`.
+  - Theme variables are scoped to a unique DOM node, allowing:
+    - Multiple independent theme instances on the same page
+    - Runtime theme switching (light/dark or brand-based)
+
+- **Tailwind v4 integration**
+  - `src/tailwind/plugin.ts` defines `baseConfig` and exports `heroui(baseConfig)` as the Tailwind plugin.
+  - The compiled plugin is exposed as `@tomo-inc/tomo-ui/tailwind/plugin`.
+  - During build, HeroUI’s theme dist is copied into `dist/theme` so that Tailwind can scan it through Tomo UI’s own package paths.
+  - Applications only interact with:
+    - `@plugin "@tomo-inc/tomo-ui/tailwind/plugin";`
+    - `@source "../node_modules/@tomo-inc/tomo-ui/dist/**/*.{js,mjs}";`
+
+- **Dynamic theme vs. build-time theme**
+  - **Build-time**: Tailwind + HeroUI produce the base class names and token structure.
+  - **Runtime**: `ThemeConfig` controls the concrete colors and layout tokens via CSS variables.
+  - This separation allows you to change branding and theme behavior without changing the Tailwind build configuration.
+
+---
+
+## 4. License, Copyright, and Usage
+
+> **Important:** This package is primarily intended for internal use within Tomo, Inc. and for selected partners.  
+> It is not a general-purpose public UI library unless explicitly documented and licensed as such.
+
+- **Ownership**
+  - `@tomo-inc/tomo-ui` is owned and maintained by **Tomo, Inc.**.
+  - All source code, compiled artifacts, and design assets are copyrighted.
+
+- **Usage scope**
+  - Intended for:
+    - Applications and packages inside the Tomo monorepo
+    - Official Tomo products and demos
+    - Partner integrations explicitly authorized by Tomo, Inc.
+  - Not intended for:
+    - Unlicensed redistribution
+    - White-label resale as a standalone UI library
+
+- **License**
+  - Unless otherwise stated in the repository root (e.g. in a `LICENSE` file), usage is governed by Tomo’s internal agreements and partner contracts.
+  - If you are unsure whether you are allowed to use this package, please contact the Tomo team or your technical point of contact.
+
+---
+
+If you are extending `@tomo-inc/tomo-ui` or integrating it into a new application, please:
+
+- Prefer importing from the root package (`@tomo-inc/tomo-ui`) instead of deep imports.
+- Avoid depending on HeroUI directly; treat it as an internal implementation detail.
+- Keep Tailwind integration minimal and aligned with the usage examples above, so that future UI framework changes can remain transparent to applications.
+

package/package.json

@@ -1,16 +1,29 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tomo-inc"
+  },
+  "homepage": "https://github.com/tomo-inc",
+  "bugs": {
+    "url": "https://github.com/tomo-inc/discussions"
+  },
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.ts",
-      "default": "./src/index.ts"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./tailwind/plugin": {
+      "import": "./dist/tailwind/plugin.js",
+      "require": "./dist/tailwind/plugin.cjs",
+      "default": "./dist/tailwind/plugin.js"
     },
     "./tailwind/tailwind.css": "./src/tailwind/tailwind.css"
   },
@@ -19,6 +32,8 @@
     "@heroui/react": "2.8.5",
     "@heroui/system": "^2.4.23",
     "@heroui/theme": "^2.4.23",
+    "bignumber.js": "^9.1.2",
+    "classnames": "^2.5.1",
     "color": "^5.0.3",
     "flat": "^6.0.1",
     "framer-motion": "^11.5.6",
@@ -42,6 +57,7 @@
     "vite": "^7.2.4"
   },
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "build": "tsup && node ./scripts/copy-heroui-theme.mjs"
   }
 }

package/project.json

@@ -5,6 +5,13 @@
   "projectType": "library",
   "tags": ["scope:uikit", "type:tomo-uikit"],
   "targets": {
+    "version:up": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "uikits/tomo-ui",
+        "command": "npm version patch --no-git-tag-version"
+      }
+    },
     "build": {
       "executor": "nx:run-commands",
       "outputs": ["{projectRoot}/dist"],

package/src/components/drawer/index.tsx

@@ -0,0 +1,9 @@
+export { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/react";
+
+export type {
+  DrawerBodyProps,
+  DrawerContentProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  DrawerProps,
+} from "@heroui/react";

package/src/components/formatted-number/index.tsx

@@ -0,0 +1,134 @@
+import { BigNumber } from "bignumber.js";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { effectiveBalance, isEmpty } from "../../utils/amount";
+import { NumberType } from "./type";
+
+export const AdaptiveFormatted = (
+  value: string | number | undefined,
+  type: NumberType,
+  balanceIsSub?: boolean,
+  decimalSubLen?: number,
+  decimalFlag?: boolean,
+) => {
+  BigNumber.config({
+    FORMAT: {
+      prefix: "",
+      decimalSeparator: ".",
+      groupSeparator: ",",
+      groupSize: 3,
+      secondaryGroupSize: 0,
+      fractionGroupSeparator: " ",
+      fractionGroupSize: 0,
+      suffix: "",
+    },
+    EXPONENTIAL_AT: [-18, 30],
+  });
+
+  const valueStr = value?.toString() || "";
+  if (isEmpty(valueStr) || !value) {
+    return {
+      formatted: "-",
+      ext: undefined,
+    };
+  }
+  if (valueStr === "0") {
+    return {
+      formatted: type === NumberType.USD ? "0.00" : "0",
+      ext: undefined,
+    };
+  }
+
+  const bigValue = new BigNumber(value);
+  if (type === NumberType.USD) {
+    if (bigValue.lt(0.00001)) {
+      return {
+        formatted: "0.00001",
+        ext: undefined,
+        pre: "<",
+      };
+    }
+  }
+  if (bigValue.lt(0.000001)) {
+    return {
+      formatted: "0.000001",
+      ext: undefined,
+      pre: "<",
+    };
+  }
+
+  const normalBalance = new BigNumber(valueStr).toString();
+  const [intPart, decimalPart] = normalBalance.split(".");
+  if (decimalPart && decimalPart.length > 1 && Number(decimalPart) > 0) {
+    const leadingZeros = decimalPart.match(/^0+/);
+
+    if (leadingZeros && leadingZeros[0].length > 4 && (type === NumberType.PRICE || balanceIsSub)) {
+      const exponent = parseInt(decimalPart).toString().substring(0, 4);
+      return {
+        formatted: `${intPart}.0{${leadingZeros[0].length}}${exponent}`,
+        ext: [intPart, leadingZeros[0].length, exponent],
+      };
+    }
+  }
+  const formatted = effectiveBalance(normalBalance, type === NumberType.USD ? 2 : 4, decimalSubLen, decimalFlag);
+
+  return {
+    formatted,
+    ext: undefined,
+  };
+};
+
+export interface FormattedNumberProps {
+  value: string | number;
+  type: NumberType;
+  className?: string;
+  subClassName?: string;
+  formatClassName?: string;
+  balanceIsSub?: boolean;
+  decimalSubLen?: number;
+  decimalFlag?: boolean;
+}
+
+export const FormattedNumber = ({
+  value,
+  type,
+  className,
+  subClassName,
+  formatClassName,
+  balanceIsSub,
+  decimalSubLen,
+  decimalFlag,
+}: FormattedNumberProps) => {
+  const node = useMemo(() => {
+    const adapt = AdaptiveFormatted(value, type, balanceIsSub, decimalSubLen, decimalFlag);
+    if (adapt.ext) {
+      const ext = adapt.ext as string[];
+      return {
+        render: (
+          <span>
+            {ext[0]}.
+            <span>
+              0<sub className={subClassName}>{ext[1]}</sub>
+              {ext[2]}
+            </span>
+          </span>
+        ),
+        pre: adapt.pre,
+      };
+    }
+    return {
+      render: <span className={formatClassName}>{adapt.formatted}</span>,
+      pre: adapt.pre,
+    };
+  }, [value, type, balanceIsSub, decimalSubLen, decimalFlag, formatClassName, subClassName]);
+
+  return (
+    <span className={classNames(className)}>
+      {node.pre}
+      {(type === NumberType.USD || type === NumberType.PRICE) && "$"}
+      {node.render}
+    </span>
+  );
+};
+
+export { FormattedNumber as AdaptiveNumber, NumberType };

package/src/components/formatted-number/type.ts

@@ -0,0 +1,7 @@
+export const NumberType = {
+  USD: "USD",
+  PRICE: "PRICE",
+  BALANCE: "BALANCE",
+} as const;
+
+export type NumberType = (typeof NumberType)[keyof typeof NumberType];

package/src/components/index.ts

@@ -1,15 +1,21 @@
 export * from "./button";
 export * from "./card";
 export * from "./chip";
+export * from "./drawer";
+export * from "./formatted-number";
 export * from "./image";
+export * from "./info-item";
 export * from "./input";
 export * from "./link";
+export * from "./listbox";
 export * from "./mfaTypeChoose";
 export * from "./modal";
 export * from "./passcodeInput";
 export * from "./qr";
+export * from "./radio";
 export * from "./select";
 export * from "./skeleton";
 export * from "./spinner";
+export * from "./switch";
 export * from "./tabs";
 export * from "./toast";

package/src/components/info-item/index.tsx

@@ -0,0 +1,23 @@
+export interface InfoItemProps {
+  label?: string | React.ReactNode;
+  context?: string | React.ReactNode;
+}
+
+export const InfoItem = ({ label, context }: InfoItemProps) => {
+  return (
+    <div className="flex w-full items-center justify-between gap-1">
+      <div className="truncate text-xs font-normal text-default-500 ">
+        <span className="w-full opacity-100 h-auto will-change-transform transform-none">{label}</span>
+      </div>
+      <div className="text-xs font-normal text-foreground flex-1 overflow-hidden">
+        <div className="w-full flex justify-end">
+          <div className="w-fit max-w-full">
+            <span className="w-full opacity-100 h-auto will-change-transform transform-none">{context}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { InfoItem as BaseItem };

package/src/components/listbox/index.tsx

@@ -0,0 +1,2 @@
+export { Listbox, ListboxItem } from "@heroui/react";
+export type { ListboxItemProps, ListboxProps } from "@heroui/react";

package/src/components/mfaTypeChoose/index.tsx

@@ -1,4 +1,5 @@
-import { cn, RadioGroup, RadioProps, useRadio, VisuallyHidden } from "@heroui/react";
+import type { RadioProps } from "@heroui/react";
+import { cn, RadioGroup, useRadio, VisuallyHidden } from "@heroui/react";
 import { useEffect, useState } from "react";
 
 interface CustomRadioProps extends RadioProps {

package/src/components/radio/index.tsx

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from "@heroui/react";
+export type { RadioGroupProps, RadioProps } from "@heroui/react";

package/src/components/switch/index.tsx

@@ -0,0 +1,2 @@
+export { Switch } from "@heroui/react";
+export type { SwitchProps } from "@heroui/react";

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from "./components";
 export * from "./icons";
 
-export { TomoUIProvider } from "./theme-provider";
 export { useTheme } from "./theme-context";
+export { TomoUIProvider } from "./theme-provider";
+export type { ThemeConfig } from "./types";
+

package/src/tailwind/plugin.ts

@@ -1,22 +1,10 @@
-import { heroui, HeroUIPluginConfig } from "@heroui/react";
+import type { HeroUIPluginConfig } from "@heroui/react";
+import { heroui } from "@heroui/react";
 
 export const baseConfig: HeroUIPluginConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
-  // prefix: "tomoui",
   themes: {
-    // light: {
-    //   colors: {
-    //     foreground: "#000",
-    //     background: "#FFF",
-    //     content1: "#FCFCFD",
-    //     primary: {
-    //       ...generateColorScale("#fe3c9c"),
-    //       DEFAULT: "#fe3c9c",
-    //       foreground: "#fff",
-    //     },
-    //   },
-    // },
     light: {
       colors: {
         foreground: "#12122A",
@@ -46,183 +34,6 @@ export const baseConfig: HeroUIPluginConfig = {
         t5: "#EEC41F",
       } as any,
     },
-    dark: {},
   },
 };
-
-export const ThemePlugin = heroui(baseConfig) as any;
-export default ThemePlugin;
-
-// export const ThemePlugin: any = heroui({
-//   layout: {},
-//   themes: {
-//     light: {
-//       colors: {
-//         foreground: "#12122A",
-//         background: "#FFF",
-//         content1: "#FCFCFD",
-//         primary: {
-//           50: "#FFFBEA",
-//           100: "#FFF3C4",
-//           200: "#FCE588",
-//           300: "#FADB5F",
-//           400: "#F7C948",
-//           500: "#FCD436",
-//           600: "#F0B429",
-//           700: "#DE911D",
-//           800: "#CB6E17",
-//           900: "#B44D12",
-//           DEFAULT: "#FCD436",
-//         },
-//         danger: "#FF5A5A",
-//         warning: "#FFAD32",
-//         success: "#079455",
-//         // Remove no required colors
-//         // t1: "#12122A",
-//         // t2: "#616184",
-//         // t3: "#8989AB",
-//         // t4: "#C1C0D8",
-//         // t5: "#EEC41F",
-//       },
-//     },
-//     // doge_light: {
-//     //   colors: {
-//     //     foreground: "#12122A",
-//     //     background: "#FFF",
-//     //     content1: "#FCFCFD",
-//     //     primary: {
-//     //       50: "#FFFBEA",
-//     //       100: "#FFF3C4",
-//     //       200: "#FCE588",
-//     //       300: "#FADB5F",
-//     //       400: "#F7C948",
-//     //       500: "#FCD436",
-//     //       600: "#F0B429",
-//     //       700: "#DE911D",
-//     //       800: "#CB6E17",
-//     //       900: "#B44D12",
-//     //       foreground: "#12122A",
-//     //       DEFAULT: "#FCD436",
-//     //     },
-//     //     danger: "#FF5A5A",
-//     //     warning: "#FFAD32",
-//     //     success: "#079455",
-//     //     t1: "#12122A",
-//     //     t2: "#616184",
-//     //     t3: "#8989AB",
-//     //     t4: "#C1C0D8",
-//     //     t5: "#EEC41F",
-//     //   } as any,
-//     // },
-
-//     // mydoge: {
-//     //   colors: {
-//     //     primary: {
-//     //       "50": "#fffef7",
-//     //       "100": "#fffceb",
-//     //       "200": "#fff9d5",
-//     //       "300": "#fff5b8",
-//     //       "400": "#feef8a",
-//     //       "500": "#FED70B",
-//     //       "600": "#e5c009",
-//     //       "700": "#bfa007",
-//     //       "800": "#998006",
-//     //       "900": "#736005",
-//     //       foreground: "#000",
-//     //       DEFAULT: "#FED70B",
-//     //     },
-//     //     secondary: {
-//     //       "50": "#f5f3ff",
-//     //       "100": "#ede9fe",
-//     //       "200": "#ddd6fe",
-//     //       "300": "#c4b5fd",
-//     //       "400": "#a78bfa",
-//     //       "500": "#8b5cf6",
-//     //       "600": "#7c3aed",
-//     //       "700": "#6d28d9",
-//     //       "800": "#5b21b6",
-//     //       "900": "#4c1d95",
-//     //       foreground: "#fff",
-//     //       DEFAULT: "#8b5cf6",
-//     //     },
-//     //     default: {
-//     //       "50": "#0e0e0e",
-//     //       "100": "#1c1c1c",
-//     //       "200": "#2a2a2a",
-//     //       "300": "#383838",
-//     //       "400": "#464646",
-//     //       "500": "#6b6b6b",
-//     //       "600": "#909090",
-//     //       "700": "#b5b5b5",
-//     //       "800": "#dadada",
-//     //       "900": "#ffffff",
-//     //       foreground: "#ffffff",
-//     //       DEFAULT: "#464646",
-//     //     },
-//     //     success: {
-//     //       "50": "#f0fdf4",
-//     //       "100": "#dcfce7",
-//     //       "200": "#bbf7d0",
-//     //       "300": "#86efac",
-//     //       "400": "#4ade80",
-//     //       "500": "#10b981",
-//     //       "600": "#059669",
-//     //       "700": "#047857",
-//     //       "800": "#065f46",
-//     //       "900": "#064e3b",
-//     //       foreground: "#fff",
-//     //       DEFAULT: "#10b981",
-//     //     },
-//     //     warning: {
-//     //       "50": "#fffbeb",
-//     //       "100": "#fef3c7",
-//     //       "200": "#fde68a",
-//     //       "300": "#fcd34d",
-//     //       "400": "#fbbf24",
-//     //       "500": "#f59e0b",
-//     //       "600": "#d97706",
-//     //       "700": "#b45309",
-//     //       "800": "#92400e",
-//     //       "900": "#78350f",
-//     //       foreground: "#000",
-//     //       DEFAULT: "#f59e0b",
-//     //     },
-//     //     danger: {
-//     //       "50": "#fef2f2",
-//     //       "100": "#fee2e2",
-//     //       "200": "#fecaca",
-//     //       "300": "#fca5a5",
-//     //       "400": "#f87171",
-//     //       "500": "#ef4444",
-//     //       "600": "#dc2626",
-//     //       "700": "#b91c1c",
-//     //       "800": "#991b1b",
-//     //       "900": "#7f1d1d",
-//     //       foreground: "#fff",
-//     //       DEFAULT: "#ef4444",
-//     //     },
-//     //     background: "#000000",
-//     //     foreground: "#ffffff",
-//     //     content1: {
-//     //       DEFAULT: "#1A1A1A",
-//     //       foreground: "#fff",
-//     //     },
-//     //     content2: {
-//     //       DEFAULT: "#242424",
-//     //       foreground: "#fff",
-//     //     },
-//     //     content3: {
-//     //       DEFAULT: "#464646",
-//     //       foreground: "#fff",
-//     //     },
-//     //     content4: {
-//     //       DEFAULT: "#666666",
-//     //       foreground: "#fff",
-//     //     },
-//     //     focus: "#FED70B",
-//     //     overlay: "#000000",
-//     //     divider: "#464646",
-//     //   },
-//     // },
-//   },
-// });
+export default heroui(baseConfig) as any;

package/src/theme-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
 
 type Theme = string;
 
@@ -19,6 +19,11 @@ interface ThemeContextProviderProps {
 export function ThemeContextProvider({ children, defaultTheme = "light", forcedTheme }: ThemeContextProviderProps) {
   const [theme, setThemeState] = useState<Theme>(forcedTheme || defaultTheme);
 
+  useEffect(() => {
+    const next = forcedTheme ?? defaultTheme ?? "light";
+    setThemeState(next);
+  }, [defaultTheme, forcedTheme]);
+
   const setTheme = useCallback(
     (newTheme: Theme) => {
       if (!forcedTheme) {

package/src/theme-provider.tsx

@@ -3,7 +3,7 @@ import { useId, useMemo, type ReactElement, type ReactNode } from "react";
 import { baseConfig } from "./tailwind/plugin";
 import { themeConfigToCSS } from "./tailwind/theme-to-css";
 import { ThemeContextProvider, useTheme } from "./theme-context";
-import { ThemeConfig } from "./types";
+import type { ThemeConfig } from "./types";
 
 type Props = {
   children: ReactNode;

package/src/types.ts

@@ -1,6 +1,7 @@
 import type { ConfigThemes, DefaultThemeType, LayoutTheme } from "@heroui/theme";
 
 export type ThemeConfig = {
+  prefix?: string;
   layout?: LayoutTheme;
   themes?: ConfigThemes;
   defaultTheme?: DefaultThemeType;

package/src/utils/amount.ts

@@ -0,0 +1,58 @@
+import { BigNumber } from "bignumber.js";
+
+export function effectiveBalance(
+  balance: any,
+  length: number = 4,
+  decimalSubLen: number = 2,
+  decimalFlag: boolean = false,
+) {
+  if (isNaN(parseFloat(balance))) {
+    return "0.00";
+  }
+  if (!balance || balance === "0") {
+    return 0;
+  }
+  if (balance < 1 / Math.pow(10, 6)) {
+    if (decimalFlag) {
+      return BigNumber(balance.toString()).toFixed();
+    }
+    return "0.00";
+  }
+  balance = new BigNumber(balance.toString()).toFixed();
+  if (balance.split(".").length === 1) {
+    return balance > 1000 ? `${Number(balance).toLocaleString()}.00` : `${balance}.00`;
+  }
+  const integer = balance.split(".")[0];
+  const decimal = balance.split(".")[1];
+  if (integer > 0) {
+    const str = decimal.length === 1 ? `${decimal}0` : decimal.substr(0, decimalSubLen);
+    const res = `${integer}.${str}`;
+    return Number(res) > 1000 ? `${Number(integer).toLocaleString()}.${str}` : res;
+  }
+
+  const temp: any = [];
+  let tempNum = 0;
+  let isNotZero = false;
+  for (let i = 0; i < decimal.length; i++) {
+    if (decimal[i] != "0" && !isNotZero) {
+      isNotZero = true;
+    }
+    if (isNotZero) {
+      tempNum++;
+    }
+    if (tempNum <= length) {
+      temp.push(decimal[i]);
+    }
+  }
+  const res = parseFloat(`${integer}.${temp.join("")}`);
+  return res > 1000 ? `${Number(integer).toLocaleString()}.${temp.join("")}` : res;
+}
+
+export const isEmpty = (data: string | object) => {
+  if (data instanceof Array) {
+    return !data.length;
+  } else if (data instanceof Object) {
+    return !Object.keys(data).length;
+  }
+  return !data;
+};

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    "tailwind/plugin": "src/tailwind/plugin.ts",
+  },
+  format: ["esm", "cjs"],
+  dts: false,
+  sourcemap: false,
+  clean: true,
+  target: "es2019",
+  splitting: false,
+  external: ["react", "react-dom", "@heroui/react", "@heroui/system", "@heroui/theme", "tailwindcss"],
+});
+