@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/utils/variants.d.ts

@@ -0,0 +1,67 @@
+declare const colorVariants: {
+    solid: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    shadow: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    bordered: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    flat: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    faded: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    light: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+    ghost: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+    };
+};
+
+export { colorVariants };

package/dist/theme/utils/variants.js

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/variants.ts
+var variants_exports = {};
+__export(variants_exports, {
+  colorVariants: () => colorVariants
+});
+module.exports = __toCommonJS(variants_exports);
+var solid = {
+  default: "bg-default text-default-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  success: "bg-success text-success-foreground",
+  warning: "bg-warning text-warning-foreground",
+  danger: "bg-danger text-danger-foreground",
+  foreground: "bg-foreground text-background"
+};
+var shadow = {
+  default: "shadow-lg shadow-default/50 bg-default text-default-foreground",
+  primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
+  secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
+};
+var bordered = {
+  default: "bg-transparent border-default text-foreground",
+  primary: "bg-transparent border-primary text-primary",
+  secondary: "bg-transparent border-secondary text-secondary",
+  success: "bg-transparent border-success text-success",
+  warning: "bg-transparent border-warning text-warning",
+  danger: "bg-transparent border-danger text-danger",
+  foreground: "bg-transparent border-foreground text-foreground"
+};
+var flat = {
+  default: "bg-default/40 text-default-700",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
+  foreground: "bg-foreground/10 text-foreground"
+};
+var faded = {
+  default: "border-default bg-default-100 text-default-foreground",
+  primary: "border-default bg-default-100 text-primary",
+  secondary: "border-default bg-default-100 text-secondary",
+  success: "border-default bg-default-100 text-success",
+  warning: "border-default bg-default-100 text-warning",
+  danger: "border-default bg-default-100 text-danger",
+  foreground: "border-default bg-default-100 text-foreground"
+};
+var light = {
+  default: "bg-transparent text-default-foreground",
+  primary: "bg-transparent text-primary",
+  secondary: "bg-transparent text-secondary",
+  success: "bg-transparent text-success",
+  warning: "bg-transparent text-warning",
+  danger: "bg-transparent text-danger",
+  foreground: "bg-transparent text-foreground"
+};
+var ghost = {
+  default: "border-default text-default-foreground",
+  primary: "border-primary text-primary",
+  secondary: "border-secondary text-secondary",
+  success: "border-success text-success",
+  warning: "border-warning text-warning",
+  danger: "border-danger text-danger",
+  foreground: "border-foreground text-foreground hover:!bg-foreground"
+};
+var colorVariants = {
+  solid,
+  shadow,
+  bordered,
+  flat,
+  faded,
+  light,
+  ghost
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorVariants
+});

package/dist/theme/utils/variants.mjs

@@ -0,0 +1,6 @@
+import {
+  colorVariants
+} from "../chunk-GQT3YUX3.mjs";
+export {
+  colorVariants
+};

package/package.json

@@ -1,20 +1,33 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./src/index.ts",
+  "private": false,
+  "homepage": "https://github.com/tomo-inc",
+  "repository": {
+    "type": "git",
+    "url": "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"
   },
-  "private": false,
   "dependencies": {
     "@heroui/react": "2.8.5",
     "@heroui/system": "^2.4.23",
@@ -44,6 +57,7 @@
     "vite": "^7.2.4"
   },
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "build": "tsup && node ./scripts/copy-heroui-theme.mjs"
   }
 }

package/project.json

@@ -3,7 +3,10 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "uikits/tomo-ui/src",
   "projectType": "library",
-  "tags": ["scope:uikit", "type:tomo-uikit"],
+  "tags": [
+    "scope:uikit",
+    "type:tomo-uikit"
+  ],
   "targets": {
     "version:up": {
       "executor": "nx:run-commands",
@@ -14,19 +17,23 @@
     },
     "build": {
       "executor": "nx:run-commands",
-      "outputs": ["{projectRoot}/dist"],
+      "outputs": [
+        "{projectRoot}/dist"
+      ],
       "options": {
-        "command": "echo 'tomo-ui uses source files directly, no build needed' || true",
-        "cwd": "uikits/tomo-ui"
+        "cwd": "uikits/tomo-ui",
+        "command": "pnpm build"
       }
     },
     "publish": {
       "executor": "nx:run-commands",
-      "dependsOn": ["build"],
+      "dependsOn": [
+        "build"
+      ],
       "options": {
-        "command": "pnpm publish --access public --no-git-checks --tag ${NPM_TAG:-latest}",
-        "cwd": "uikits/tomo-ui"
+        "cwd": "uikits/tomo-ui",
+        "command": "pnpm publish --access public --no-git-checks --tag ${NPM_TAG:-latest}"
       }
     }
   }
-}
+}

package/scripts/copy-heroui-theme.mjs

@@ -0,0 +1,26 @@
+import { cp } from "fs/promises";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+async function main() {
+  const projectRoot = dirname(__dirname);
+
+  const src = join(projectRoot, "node_modules", "@heroui", "theme", "dist");
+  const dest = join(projectRoot, "dist", "theme");
+
+  try {
+    await cp(src, dest, { recursive: true });
+    // eslint-disable-next-line no-console
+    console.log(`[tomo-ui] Copied @heroui/theme/dist to ${dest}`);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("[tomo-ui] Failed to copy @heroui/theme/dist:", error);
+    process.exitCode = 1;
+  }
+}
+
+main();
+

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

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

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/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",
@@ -49,177 +37,3 @@ export const baseConfig: HeroUIPluginConfig = {
   },
 };
 export default heroui(baseConfig) as any;
-
-// 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/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/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"],
+});
+