@tomo-inc/tomo-ui 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -17,9 +17,11 @@
   "private": false,
   "dependencies": {
     "@heroui/react": "2.8.5",
-    "@heroui/toast": "^2.0.17",
+    "@heroui/system": "^2.4.23",
+    "@heroui/theme": "^2.4.23",
+    "color": "^5.0.3",
+    "flat": "^6.0.1",
     "framer-motion": "^11.5.6",
-    "next-themes": "^0.4.6",
     "qr-code-styling": "^1.9.2"
   },
   "peerDependencies": {

package/src/App.tsx

@@ -1,23 +1,143 @@
-import { QRCodeComponent } from "./components";
+import { Switch, useDisclosure } from "@heroui/react";
+import { useTheme } from ".";
 import { Button } from "./components/button";
-import { Input, NumberInput } from "./components/input";
+import { Input } from "./components/input";
+import { Modal, ModalContent, ModalHeader } from "./components/modal";
+
 import "./style.css";
 import { TomoUIProvider } from "./theme-provider";
+import { ThemeConfig } from "./types";
 
-function App() {
+const _dogeThemeConfig: ThemeConfig = {
+  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",
+          foreground: "#12122A",
+          DEFAULT: "#FCD436",
+        },
+        danger: "#FF5A5A",
+        warning: "#FFAD32",
+        success: "#079455",
+        t1: "#12122A",
+        t2: "#616184",
+        t3: "#8989AB",
+        t4: "#C1C0D8",
+        t5: "#EEC41F",
+      } as any,
+    },
+  },
+};
+
+export const MoonIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <TomoUIProvider defaultTheme="doge_light" forcedTheme="doge_light">
-      123123
-      <Input label="Email" type="email" />
-      <NumberInput label="Number" placeholder="Enter your number" type="number" />
-      <Button color="primary">Click me</Button>
-      <QRCodeComponent
-        content="https://tomo.inc"
-        size={280}
-        logo="https://faucet.testnet.dogeos.com/images/h4.avif"
-        logoBackground="#1C1917"
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+        fill="currentColor"
       />
-    </TomoUIProvider>
+    </svg>
+  );
+};
+
+export const SunIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+      </g>
+    </svg>
+  );
+};
+
+export const SwitchTheme = () => {
+  const { theme, setTheme } = useTheme();
+  return (
+    <Switch
+      color="success"
+      size="lg"
+      endContent={<MoonIcon />}
+      startContent={<SunIcon />}
+      isSelected={theme === "dark"}
+      onValueChange={(isSelected) => setTheme(isSelected ? "dark" : "light")}
+    />
+  );
+};
+
+function App() {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+  return (
+    <div>
+      <TomoUIProvider>
+        <div className="bg-content1 p-4 rounded-lg flex flex-col gap-4 border border-primary">
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold text-foreground">Tomo Theme Config Preview</h1>
+            <SwitchTheme />
+          </div>
+          <Input label="Email" type="email" />
+          <Button color="primary" variant="solid">
+            Click me
+          </Button>
+          <Button color="primary" variant="bordered">
+            Click me
+          </Button>
+        </div>
+      </TomoUIProvider>
+      <br />
+      <TomoUIProvider themeConfig={_dogeThemeConfig}>
+        <div className="bg-content1 p-4 rounded-lg flex flex-col gap-4 border border-primary">
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold text-foreground">Doge Theme Config Preview</h1>
+            <SwitchTheme />
+          </div>
+          <Input label="Email" type="email" />
+          <Button color="primary" variant="solid">
+            Click me
+          </Button>
+          <Button color="primary" variant="bordered" onPress={onOpen}>
+            Open Modal
+          </Button>
+        </div>
+        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+          <ModalContent>
+            <ModalHeader>
+              <h1>Modal</h1>
+            </ModalHeader>
+          </ModalContent>
+        </Modal>
+      </TomoUIProvider>
+    </div>
   );
 }
 export default App;

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from "./input";
 export * from "./link";
 export * from "./mfaTypeChoose";
 export * from "./modal";
+export * from "./passcodeInput";
 export * from "./qr";
 export * from "./select";
 export * from "./skeleton";

package/src/components/modal/index.tsx

@@ -1,13 +1,10 @@
-export { Modal } from "./modal";
-export { ModalBody } from "./modal-body";
-export { ModalContent } from "./modal-content";
-export { ModalFooter } from "./modal-footer";
-export { ModalHeader } from "./modal-header";
-export { useDisclosure } from "./use-disclosure";
+export { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, useDisclosure } from "@heroui/react";
 
-export type { ModalProps } from "./modal";
-export type { ModalBodyProps } from "./modal-body";
-export type { ModalContentProps } from "./modal-content";
-export type { ModalFooterProps } from "./modal-footer";
-export type { ModalHeaderProps } from "./modal-header";
-export type { UseDisclosureProps } from "./use-disclosure";
+export type {
+  ModalBodyProps,
+  ModalContentProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalProps,
+  UseDisclosureProps,
+} from "@heroui/react";

package/src/components/passcodeInput/index.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+
+interface PasscodeInputProps {
+  length?: number;
+  value: string;
+  onChange: (val: string) => void;
+  onFill?: (val: string) => void;
+}
+
+export function PasscodeInput({ length = 6, value, onChange, onFill }: PasscodeInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value.replace(/\D/g, "");
+    if (val.length > length) val = val.slice(0, length);
+
+    onChange(val);
+
+    if (val.length === length) {
+      onFill?.(val);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && value.length > 0) {
+      e.preventDefault();
+      onChange(value.slice(0, -1));
+    }
+  };
+
+  const chars = Array(length)
+    .fill("")
+    .map((_, i) => value[i] || "");
+
+  // Current cursor position
+  const activeIndex = chars.findIndex((c) => c === "") === -1 ? length - 1 : chars.findIndex((c) => c === "");
+
+  return (
+    <div className="flex gap-1 cursor-text w-full" onClick={() => inputRef.current?.focus()}>
+      {chars.map((char, i) => {
+        const isActive = i === activeIndex;
+        const isFilled = !!char;
+
+        let boxStyle = "";
+        if (isFilled) {
+          boxStyle = "border-primary bg-primary-50";
+        } else if (isActive) {
+          boxStyle = "border-primary bg-background";
+        } else {
+          boxStyle = "border-default bg-background";
+        }
+
+        return (
+          <div
+            key={i}
+            className={`w-full h-[70px] flex items-center justify-center rounded-2xl border text-2xl font-bold transition-colors ${boxStyle}`}
+          >
+            {char || "-"}
+          </div>
+        );
+      })}
+
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="numeric"
+        maxLength={length}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className="absolute opacity-0 pointer-events-none"
+      />
+    </div>
+  );
+}

package/src/components/toast/index.ts

@@ -1,2 +1 @@
-// Re-export toast functionality from @heroui/toast
-export { addToast, ToastProvider } from "@heroui/toast";
+export { addToast, ToastProvider } from "@heroui/react";

package/src/index.ts

@@ -2,3 +2,4 @@ export * from "./components";
 export * from "./icons";
 
 export { TomoUIProvider } from "./theme-provider";
+export { useTheme } from "./theme-context";

package/src/style.css

@@ -1,4 +1,3 @@
 @import "./tailwind/tailwind.css";
 
-@source '../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@source "../src/**/*.{js,ts,jsx,tsx,mdx}";
+@source "./**/*.{js,ts,jsx,tsx,mdx}";

package/src/tailwind/plugin.ts

@@ -1,11 +1,23 @@
-import { heroui } from "@heroui/react";
+import { heroui, HeroUIPluginConfig } from "@heroui/react";
 
-export const ThemePlugin: any = heroui({
-  layout: {},
+export const baseConfig: HeroUIPluginConfig = {
+  // Don't change this prefix, some css not working
+  prefix: "heroui",
+  // prefix: "tomoui",
   themes: {
-    light: {},
-    dark: {},
-    doge_light: {
+    // light: {
+    //   colors: {
+    //     foreground: "#000",
+    //     background: "#FFF",
+    //     content1: "#FCFCFD",
+    //     primary: {
+    //       ...generateColorScale("#fe3c9c"),
+    //       DEFAULT: "#fe3c9c",
+    //       foreground: "#fff",
+    //     },
+    //   },
+    // },
+    light: {
       colors: {
         foreground: "#12122A",
         background: "#FFF",
@@ -34,144 +46,183 @@ export const ThemePlugin: any = heroui({
         t5: "#EEC41F",
       } as any,
     },
-    wallet_kit_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",
-        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",
-      },
-    },
+    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",
+//     //   },
+//     // },
+//   },
+// });

package/src/tailwind/tailwind.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
-@plugin "./plugin";
+@plugin "./plugin.ts";
 
 @source "../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx,mjs}";
+@source "../components/**/*.{js,ts,jsx,tsx,mjs}";

package/src/tailwind/theme-to-css.ts

@@ -0,0 +1,256 @@
+import type { ColorScale, HeroUIPluginConfig, LayoutTheme } from "@heroui/theme";
+
+import Color from "color";
+import * as flat from "flat";
+import { baseConfig } from "./plugin";
+
+/**
+ * Convert camelCase to kebab-case
+ * Matches heroui's kebabCase utility
+ */
+function toKebabCase(str: string): string {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Remove DEFAULT keys (e.g., "primary-DEFAULT" -> "primary")
+ * This matches heroui plugin's removeDefaultKeys function
+ */
+function removeDefaultKeys(obj: Record<string, unknown>): Record<string, unknown> {
+  const newObj: Record<string, unknown> = {};
+
+  for (const key in obj) {
+    if (key.endsWith("-DEFAULT")) {
+      newObj[key.replace("-DEFAULT", "")] = obj[key];
+      continue;
+    }
+    newObj[key] = obj[key];
+  }
+
+  return newObj;
+}
+
+/**
+ * Flatten nested theme objects to `a-b-c` keys.
+ * Uses the same logic as heroui plugin's flattenThemeObject
+ */
+function flattenThemeObject(obj: Record<string, unknown>): Record<string, unknown> {
+  return removeDefaultKeys(
+    flat.flatten(obj, {
+      safe: true,
+      delimiter: "-",
+    }) as Record<string, unknown>,
+  );
+}
+
+/**
+ * Convert color string to HSL format (h s% l%)
+ * Matches heroui plugin's color conversion logic
+ */
+function toHslString(colorValue: string): string | null {
+  try {
+    const parsedColor = Color(colorValue).hsl().round(2).array();
+    const [h, s, l] = parsedColor;
+
+    return `${h} ${s}% ${l}%`;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Generate CSS variable name from prefix and color key
+ * This matches the naming convention used by heroui() plugin
+ */
+function generateCSSVariableName(prefix: string, colorKey: string): string {
+  return `--${prefix}-${colorKey}`;
+}
+
+/**
+ * Process layout theme and convert to CSS variables
+ * Matches heroui plugin's layout processing logic
+ *
+ * @param layout - Layout theme object
+ * @param prefix - CSS variable prefix
+ * @returns Array of CSS variable strings
+ */
+function processLayoutTheme(layout: LayoutTheme, prefix: string): string[] {
+  const cssVars: string[] = [];
+
+  if (!layout) return cssVars;
+
+  // Convert keys to kebab-case (matching heroui's mapKeys logic)
+  const kebabLayout: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(layout)) {
+    kebabLayout[toKebabCase(key)] = value;
+  }
+
+  // Flatten nested layout objects
+  const flatLayout = flat.flatten(kebabLayout, {
+    safe: true,
+    delimiter: "-",
+  }) as Record<string, unknown>;
+
+  // Process each layout value
+  for (const [key, value] of Object.entries(flatLayout)) {
+    if (!value) continue;
+
+    const layoutVariablePrefix = `--${prefix}-${key}`;
+
+    if (typeof value === "object" && !Array.isArray(value)) {
+      // Handle nested objects (e.g., boxShadow: { small: "...", medium: "..." })
+      for (const [nestedKey, nestedValue] of Object.entries(value)) {
+        if (!nestedValue) continue;
+
+        const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+
+        cssVars.push(`  ${nestedLayoutVariable}: ${nestedValue};`);
+      }
+    } else {
+      // Handle singular values (e.g., disabledOpacity: 0.5)
+      // Special handling for opacity values: 0.5 -> .5
+      let formattedValue = value;
+
+      if (layoutVariablePrefix.includes("opacity") && typeof value === "number") {
+        formattedValue = value.toString().replace(/^0\./, ".");
+      }
+
+      cssVars.push(`  ${layoutVariablePrefix}: ${formattedValue};`);
+    }
+  }
+
+  return cssVars;
+}
+
+/**
+ * Convert heroui theme configuration to CSS variables string
+ *
+ * This function takes a standard HeroUI theme config (same format as heroui({}))
+ * and converts it to CSS variables that can override the base theme.
+ *
+ * The base theme is automatically generated by heroui() plugin at build time.
+ * This function uses the same processing logic as heroui plugin:
+ * - Uses flat() to flatten nested objects
+ * - Uses Color() to convert colors to HSL
+ * - Generates CSS variables with the same naming convention
+ *
+ * @param config - HeroUI theme configuration object (same format as heroui({}))
+ * @param scopeId - Optional unique ID to scope CSS variables to a specific element
+ * @returns CSS variables as string that can be injected into CSS to override base theme
+ *
+ * @example
+ * const config: HeroUIPluginConfig = {
+ *   themes: {
+ *     light: {
+ *       colors: {
+ *         primary: "#ff0000"
+ *       }
+ *     }
+ *   }
+ * };
+ * const css = themeConfigToCSS(config);
+ * // Returns: ":root { --heroui-primary: 0 100% 50%; }"
+ * const css = themeConfigToCSS(config, "unique-id");
+ * // Returns: "#unique-id [class=\"light\"] { --heroui-primary: 0 100% 50%; }"
+ */
+export function themeConfigToCSS(config: HeroUIPluginConfig, scopeId?: string): string {
+  const prefix = baseConfig.prefix || "tomo"; // is Fixed
+  const themes = config.themes || {};
+  const cssBlocks: string[] = [];
+
+  // Process global layout (applies to all themes)
+  const globalLayoutVars = config.layout ? processLayoutTheme(config.layout, prefix) : [];
+
+  // Build scope selector prefix if scopeId is provided
+  // CSS variables are scoped to the element with the given ID
+  const scopeSelector = scopeId ? `#${scopeId.replace(/:/g, "\\:")}` : "";
+
+  // Process each theme (matching heroui plugin's resolveConfig logic)
+  for (const [themeName, themeConfig] of Object.entries(themes)) {
+    const cssVars: string[] = [];
+
+    // Process colors
+    if (themeConfig?.colors) {
+      // Flatten colors using the same method as heroui plugin
+      const flatColors = flattenThemeObject(themeConfig.colors as Record<string, ColorScale>);
+
+      // Extract colors -> HSL triplet values (matching heroui plugin)
+      for (const [colorKey, colorValue] of Object.entries(flatColors)) {
+        if (!colorValue) continue;
+
+        const value = toHslString(colorValue as string);
+
+        if (value) {
+          const varName = generateCSSVariableName(prefix, colorKey);
+
+          cssVars.push(`  ${varName}: ${value};`);
+        }
+      }
+    }
+
+    // Process theme-specific layout (overrides global layout)
+    if (themeConfig?.layout) {
+      const themeLayoutVars = processLayoutTheme(themeConfig.layout, prefix);
+
+      cssVars.push(...themeLayoutVars);
+    } else if (globalLayoutVars.length > 0) {
+      // Apply global layout if no theme-specific layout
+      cssVars.push(...globalLayoutVars);
+    }
+
+    if (cssVars.length > 0) {
+      // Scope CSS variables to the element with the given ID when class matches
+      // Each TomoUIProvider instance has its own scoped div with class attribute
+      const selector = scopeId ? `${scopeSelector}[class="${themeName}"]` : `[class="${themeName}"]`;
+
+      cssBlocks.push(`${selector} {${cssVars.join("")}}`);
+    }
+  }
+
+  // If no themes but global layout exists, add it to :root or scoped element
+  if (cssBlocks.length === 0 && globalLayoutVars.length > 0) {
+    const rootSelector = scopeId ? scopeSelector : ":root";
+
+    cssBlocks.push(`${rootSelector} {${globalLayoutVars.join("")}}`);
+  }
+
+  return cssBlocks.join("\n");
+}
+
+/**
+ * Generate a color scale from a base color
+ * @param baseColor - The base color to generate the color scale from
+ * @returns A record of color scale values
+ *
+ * @example
+ * const colorScale = generateColorScale("#000000");
+ * // Returns: { "50": "#000000", "100": "#000000", "200": "#000000", "300": "#000000", "400": "#000000", "500": "#000000", "600": "#000000", "700": "#000000", "800": "#000000", "900": "#000000", "950": "#000000" }
+ */
+export function generateColorScale(baseColor: string) {
+  const base = Color(baseColor);
+
+  const steps = {
+    "50": 0.45,
+    "100": 0.35,
+    "200": 0.25,
+    "300": 0.15,
+    "400": 0.07,
+    "500": 0,
+    "600": -0.07,
+    "700": -0.15,
+    "800": -0.25,
+    "900": -0.35,
+    "950": -0.45,
+  };
+
+  const scale: Record<string, string> = {};
+
+  Object.keys(steps).forEach((key) => {
+    const amount = steps[key as keyof typeof steps];
+
+    scale[key] = amount >= 0 ? base.lighten(amount).hex() : base.darken(Math.abs(amount)).hex();
+  });
+
+  return scale;
+}

package/src/theme-context.tsx

@@ -0,0 +1,47 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+type Theme = string;
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeContextProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  forcedTheme?: Theme;
+  themes?: string[];
+}
+
+export function ThemeContextProvider({ children, defaultTheme = "light", forcedTheme }: ThemeContextProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(forcedTheme || defaultTheme);
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      if (!forcedTheme) {
+        setThemeState(newTheme);
+      }
+    },
+    [forcedTheme],
+  );
+
+  const value: ThemeContextType = {
+    theme: forcedTheme || theme,
+    setTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeContextProvider");
+  }
+
+  return context;
+}

package/src/theme-provider.tsx

@@ -1,19 +1,45 @@
 import { HeroUIProvider } from "@heroui/react";
-import { ThemeProvider } from "next-themes";
-import type { ReactElement, ReactNode } from "react";
+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";
 
 type Props = {
   children: ReactNode;
+  themeConfig?: ThemeConfig;
   defaultTheme?: string;
   forcedTheme?: string;
 };
 
-export const TomoUIProvider = ({ children, defaultTheme = "dark", forcedTheme = "dark" }: Props): ReactElement => {
+// Internal component that applies theme to the scoped div
+function ThemedContent({ children, uniqueId }: { children: ReactNode; uniqueId: string }) {
+  const { theme } = useTheme();
+
+  return (
+    <div id={uniqueId} className={theme} data-theme>
+      {children}
+    </div>
+  );
+}
+
+export const TomoUIProvider = ({ children, themeConfig, defaultTheme, forcedTheme }: Props): ReactElement => {
+  const uniqueId = useId().replace(/:/g, "-");
+  const styleId = `${baseConfig.prefix}-theme-override-${uniqueId}`;
+  const themeCSS = useMemo(
+    () => (themeConfig ? themeConfigToCSS(themeConfig, uniqueId) : null),
+    [themeConfig, uniqueId],
+  );
+
   return (
     <HeroUIProvider>
-      <ThemeProvider defaultTheme={defaultTheme} attribute="class" forcedTheme={forcedTheme}>
-        {children}
-      </ThemeProvider>
+      <ThemeContextProvider
+        defaultTheme={defaultTheme || themeConfig?.defaultTheme || "light"}
+        forcedTheme={forcedTheme}
+      >
+        {themeCSS ? <style id={styleId}>{themeCSS}</style> : null}
+        <ThemedContent uniqueId={uniqueId}>{children}</ThemedContent>
+      </ThemeContextProvider>
     </HeroUIProvider>
   );
 };

package/src/types.ts

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

package/src/components/modal/modal-body.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface ModalBodyProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function ModalBody({ children, className = "" }: ModalBodyProps) {
-  return <div className={`p-4 overflow-y-auto flex-1 ${className}`}>{children}</div>;
-}

package/src/components/modal/modal-content.tsx

@@ -1,17 +0,0 @@
-import type { ReactNode } from "react";
-import { useModalContext } from "./modal-context";
-
-export interface ModalContentProps {
-  children: ReactNode | ((onClose: () => void) => ReactNode);
-  className?: string;
-  onClose?: () => void;
-}
-
-export function ModalContent({ children, className = "", onClose }: ModalContentProps) {
-  const context = useModalContext();
-  const handleClose = onClose || context.onClose || (() => {});
-
-  const content = typeof children === "function" ? children(handleClose) : children;
-
-  return <div className={`flex flex-col ${className}`}>{content}</div>;
-}

package/src/components/modal/modal-context.tsx

@@ -1,12 +0,0 @@
-import { createContext, useContext } from "react";
-
-export interface ModalContextValue {
-  onClose?: () => void;
-  hideCloseButton?: boolean;
-}
-
-export const ModalContext = createContext<ModalContextValue>({});
-
-export function useModalContext() {
-  return useContext(ModalContext);
-}

package/src/components/modal/modal-footer.tsx

@@ -1,12 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface ModalFooterProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function ModalFooter({ children, className = "" }: ModalFooterProps) {
-  return (
-    <div className={`flex items-center justify-end gap-2 p-4 border-t border-default-200 ${className}`}>{children}</div>
-  );
-}

package/src/components/modal/modal-header.tsx

@@ -1,28 +0,0 @@
-import type { ReactNode } from "react";
-import { CloseIcon } from "../../icons";
-import { Button } from "../button";
-import { useModalContext } from "./modal-context";
-
-export interface ModalHeaderProps {
-  children: ReactNode;
-  className?: string;
-  onClose?: () => void;
-  hideCloseButton?: boolean;
-}
-
-export function ModalHeader({ children, className = "", onClose, hideCloseButton }: ModalHeaderProps) {
-  const context = useModalContext();
-  const handleClose = onClose || context.onClose;
-  const shouldHideCloseButton = hideCloseButton ?? context.hideCloseButton ?? false;
-
-  return (
-    <div className={`flex items-center justify-between p-4 border-b border-default-200 ${className}`}>
-      <div className="flex-1">{children}</div>
-      {!shouldHideCloseButton && handleClose && (
-        <Button isIconOnly size="sm" variant="light" onPress={handleClose} className="ml-2" aria-label="Close">
-          <CloseIcon />
-        </Button>
-      )}
-    </div>
-  );
-}

package/src/components/modal/modal.tsx

@@ -1,152 +0,0 @@
-import type { ReactNode } from "react";
-import { cloneElement, isValidElement, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { ModalBody } from "./modal-body";
-import { ModalContent } from "./modal-content";
-import { ModalContext } from "./modal-context";
-import { ModalFooter } from "./modal-footer";
-import { ModalHeader } from "./modal-header";
-
-export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
-
-export type ModalRadius = "none" | "sm" | "md" | "lg" | "full";
-
-export type ScrollBehavior = "inside" | "outside";
-
-export interface ModalProps {
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  children: ReactNode;
-  size?: ModalSize;
-  radius?: ModalRadius;
-  isDismissable?: boolean;
-  isKeyboardDismissDisabled?: boolean;
-  hideCloseButton?: boolean;
-  scrollBehavior?: ScrollBehavior;
-  className?: string;
-  classNames?: {
-    base?: string;
-    backdrop?: string;
-    wrapper?: string;
-  };
-}
-
-const sizeClasses: Record<ModalSize, string> = {
-  xs: "max-w-xs",
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  "2xl": "max-w-2xl",
-  "3xl": "max-w-3xl",
-  "4xl": "max-w-4xl",
-  "5xl": "max-w-5xl",
-  full: "max-w-full",
-};
-
-const radiusClasses: Record<ModalRadius, string> = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  full: "rounded-full",
-};
-
-export function Modal({
-  isOpen = false,
-  onOpenChange,
-  children,
-  size = "md",
-  radius = "md",
-  isDismissable = true,
-  isKeyboardDismissDisabled = false,
-  hideCloseButton = false,
-  scrollBehavior = "outside",
-  className = "",
-  classNames = {},
-}: ModalProps) {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !isKeyboardDismissDisabled && isDismissable) {
-        onOpenChange?.(false);
-      }
-    };
-
-    document.addEventListener("keydown", handleEscape);
-    document.body.style.overflow = "hidden";
-
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [isOpen, isKeyboardDismissDisabled, isDismissable, onOpenChange]);
-
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isDismissable && e.target === e.currentTarget) {
-      onOpenChange?.(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  const sizeClass = sizeClasses[size];
-  const radiusClass = radiusClasses[radius];
-
-  const handleClose = () => {
-    onOpenChange?.(false);
-  };
-
-  const contextValue = {
-    onClose: handleClose,
-    hideCloseButton,
-  };
-
-  // Clone children to pass onClose prop
-  const childrenWithProps = isValidElement(children)
-    ? cloneElement(children, { onClose: handleClose } as any)
-    : children;
-
-  const modalContent = (
-    <ModalContext.Provider value={contextValue}>
-      <div
-        className={`fixed inset-0 z-50 flex items-center justify-center ${classNames.wrapper || ""}`}
-        onClick={handleBackdropClick}
-      >
-        {/* Backdrop */}
-        <div className={`fixed inset-0 bg-black/50 backdrop-blur-sm ${classNames.backdrop || ""}`} aria-hidden="true" />
-
-        {/* Modal Content */}
-        <div
-          ref={modalRef}
-          className={`
-            relative z-10 bg-background shadow-lg
-            ${sizeClass}
-            ${radiusClass}
-            ${scrollBehavior === "inside" ? "max-h-[90vh] overflow-hidden flex flex-col" : ""}
-            ${className}
-            ${classNames.base || ""}
-          `}
-          onClick={(e) => e.stopPropagation()}
-          role="dialog"
-          aria-modal="true"
-        >
-          {childrenWithProps}
-        </div>
-      </div>
-    </ModalContext.Provider>
-  );
-
-  return createPortal(modalContent, document.body);
-}
-
-// Export sub-components
-Modal.Content = ModalContent;
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
-export { ModalBody, ModalContent, ModalFooter, ModalHeader };

package/src/components/modal/use-disclosure.ts

@@ -1,46 +0,0 @@
-import { useCallback, useState } from "react";
-
-export interface UseDisclosureProps {
-  defaultOpen?: boolean;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-}
-
-export function useDisclosure(props: UseDisclosureProps = {}) {
-  const { defaultOpen = false, isOpen: controlledIsOpen, onOpenChange } = props;
-
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
-
-  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : uncontrolledIsOpen;
-
-  const onOpen = useCallback(() => {
-    if (controlledIsOpen === undefined) {
-      setUncontrolledIsOpen(true);
-    }
-    onOpenChange?.(true);
-  }, [controlledIsOpen, onOpenChange]);
-
-  const onClose = useCallback(() => {
-    if (controlledIsOpen === undefined) {
-      setUncontrolledIsOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [controlledIsOpen, onOpenChange]);
-
-  const onOpenChangeHandler = useCallback(
-    (newIsOpen: boolean) => {
-      if (controlledIsOpen === undefined) {
-        setUncontrolledIsOpen(newIsOpen);
-      }
-      onOpenChange?.(newIsOpen);
-    },
-    [controlledIsOpen, onOpenChange],
-  );
-
-  return {
-    isOpen,
-    onOpen,
-    onClose,
-    onOpenChange: onOpenChangeHandler,
-  };
-}