@tomo-inc/tomo-ui 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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/project.json

@@ -3,5 +3,23 @@
   "$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": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "options": {
+        "command": "echo 'tomo-ui uses source files directly, no build needed' || true",
+        "cwd": "uikits/tomo-ui"
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "command": "pnpm publish --access public --no-git-checks --tag ${NPM_TAG:-latest}",
+        "cwd": "uikits/tomo-ui"
+      }
+    }
+  }
 }

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}";