@tomo-inc/tomo-ui 0.0.8 → 0.0.10

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