@aster-ui/prefixed 0.12.54 → 0.12.56

package/dist/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useId,\n  useCallback,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createContext,\n  useContext,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { Skeleton } from './Skeleton'\n\n// DaisyUI classes\nconst dBtn = 'd-btn'\nconst dBtnGhost = 'd-btn-ghost'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnSquare = 'd-btn-square'\n\nexport type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left'\nexport type DrawerSize = 'default' | 'large' | number\n\nexport interface DrawerPushConfig {\n  /** Distance to push parent drawer (default: 180) */\n  distance?: number\n}\n\nexport interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Drawer content */\n  children: React.ReactNode\n  /** Whether the drawer is visible */\n  open?: boolean\n  /** Callback when drawer is closed */\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void\n  /** Callback after open/close animation completes */\n  afterOpenChange?: (open: boolean) => void\n  /** Drawer title */\n  title?: React.ReactNode\n  /** Direction drawer slides from */\n  placement?: DrawerPlacement\n  /** Preset size or custom width/height in pixels */\n  size?: DrawerSize\n  /** Custom width (overrides size for left/right placement) */\n  width?: number | string\n  /** Custom height (overrides size for top/bottom placement) */\n  height?: number | string\n  /** Whether to show close button */\n  closable?: boolean\n  /** Whether to show mask/backdrop */\n  mask?: boolean\n  /** Whether clicking mask closes drawer */\n  maskClosable?: boolean\n  /** Whether ESC closes drawer */\n  keyboard?: boolean\n  /** Footer content */\n  footer?: React.ReactNode\n  /** Extra content in header (right side) */\n  extra?: React.ReactNode\n  /** CSS class for drawer panel */\n  className?: string\n  /** CSS class for drawer wrapper */\n  rootClassName?: string\n  /** Style for drawer panel */\n  style?: React.CSSProperties\n  /** Style for drawer header */\n  headerStyle?: React.CSSProperties\n  /** Style for drawer body/content area */\n  bodyStyle?: React.CSSProperties\n  /** Style for drawer footer */\n  footerStyle?: React.CSSProperties\n  /** Style for drawer wrapper (includes mask) */\n  rootStyle?: React.CSSProperties\n  /** Style for mask/backdrop */\n  maskStyle?: React.CSSProperties\n  /** z-index of drawer */\n  zIndex?: number\n  /** Destroy content when closed */\n  destroyOnClose?: boolean\n  /** Pre-render drawer content (keep in DOM even when closed) */\n  forceRender?: boolean\n  /** Where to place initial focus */\n  initialFocus?: 'close' | 'content'\n  /** Show loading skeleton */\n  loading?: boolean\n  /** Custom container for portal (false to disable portal) */\n  getContainer?: HTMLElement | (() => HTMLElement) | false\n  /** Nested drawer push behavior */\n  push?: boolean | DrawerPushConfig\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface DrawerRef {\n  /** The drawer panel element */\n  nativeElement: HTMLDivElement | null\n}\n\n// Context for nested drawer push behavior\ninterface DrawerContextValue {\n  push: boolean | DrawerPushConfig\n  pushDistance: number\n}\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null)\n\nfunction useDrawerContext() {\n  return useContext(DrawerContext)\n}\n\n/**\n * Drawer - A panel that slides in from the edge of the screen.\n * Use for forms, details, or task panels.\n * For responsive sidebar navigation, use ResponsiveDrawer instead.\n */\nexport const Drawer = forwardRef<DrawerRef, DrawerProps>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      afterOpenChange,\n      title,\n      placement = 'right',\n      size = 'default',\n      width,\n      height,\n      closable = true,\n      mask = true,\n      maskClosable = true,\n      keyboard = true,\n      footer,\n      extra,\n      className = '',\n      rootClassName = '',\n      style,\n      headerStyle,\n      bodyStyle,\n      footerStyle,\n      rootStyle,\n      maskStyle,\n      zIndex = 1000,\n      destroyOnClose = false,\n      forceRender = false,\n      initialFocus = 'close',\n      loading = false,\n      getContainer,\n      push = { distance: 180 },\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const drawerRef = useRef<HTMLDivElement>(null)\n    const closeButtonRef = useRef<HTMLButtonElement>(null)\n    const contentRef = useRef<HTMLDivElement>(null)\n    const previousActiveElement = useRef<HTMLElement | null>(null)\n    const titleId = useId()\n    const contentId = useId()\n    const [mounted, setMounted] = useState(false)\n    const [shouldRender, setShouldRender] = useState(open || forceRender)\n    const [isAnimating, setIsAnimating] = useState(false)\n\n    // Get parent drawer context for nested push behavior\n    const parentDrawer = useDrawerContext()\n\n    // Expose ref\n    useImperativeHandle(ref, () => ({\n      nativeElement: drawerRef.current,\n    }))\n\n    // Handle SSR - only render portal after mounting in browser\n    useEffect(() => {\n      setMounted(true)\n    }, [])\n\n    // Calculate dimensions\n    const getSizeValue = (): number => {\n      if (typeof size === 'number') return size\n      return size === 'large' ? 736 : 378\n    }\n\n    const getDimension = (): { width?: string; height?: string } => {\n      const isHorizontal = placement === 'left' || placement === 'right'\n      const sizeValue = getSizeValue()\n\n      if (isHorizontal) {\n        const w = width ?? sizeValue\n        return { width: typeof w === 'number' ? `${w}px` : w }\n      } else {\n        const h = height ?? sizeValue\n        return { height: typeof h === 'number' ? `${h}px` : h }\n      }\n    }\n\n    // Calculate push distance for nested drawers\n    const getPushDistance = (): number => {\n      if (!push) return 0\n      if (typeof push === 'boolean') return push ? 180 : 0\n      return push.distance ?? 180\n    }\n\n    // Focus trap\n    const trapFocus = useCallback((e: KeyboardEvent) => {\n      if (!drawerRef.current || e.key !== 'Tab' || typeof document === 'undefined') return\n\n      const focusableElements = drawerRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      )\n      const firstElement = focusableElements[0]\n      const lastElement = focusableElements[focusableElements.length - 1]\n\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault()\n        lastElement?.focus()\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault()\n        firstElement?.focus()\n      }\n    }, [])\n\n    // Handle ESC key\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (keyboard && e.key === 'Escape' && onClose) {\n          e.preventDefault()\n          onClose()\n        }\n      },\n      [keyboard, onClose]\n    )\n\n    // Handle animation end\n    const handleTransitionEnd = useCallback(() => {\n      setIsAnimating(false)\n      afterOpenChange?.(open)\n\n      if (!open && destroyOnClose) {\n        setShouldRender(false)\n      }\n    }, [open, afterOpenChange, destroyOnClose])\n\n    // Open/close effects\n    useEffect(() => {\n      if (typeof document === 'undefined') return\n\n      if (open) {\n        setShouldRender(true)\n        setIsAnimating(true)\n        previousActiveElement.current = document.activeElement as HTMLElement\n        document.body.style.overflow = 'hidden'\n\n        // Set initial focus\n        const focusTimeout = setTimeout(() => {\n          if (initialFocus === 'close' && closeButtonRef.current) {\n            closeButtonRef.current.focus()\n          } else if (contentRef.current) {\n            const firstFocusable = contentRef.current.querySelector<HTMLElement>(\n              'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n            )\n            firstFocusable?.focus()\n          }\n        }, 0)\n\n        // Add event listeners\n        document.addEventListener('keydown', handleKeyDown)\n        document.addEventListener('keydown', trapFocus)\n\n        return () => {\n          clearTimeout(focusTimeout)\n          document.body.style.overflow = ''\n          document.removeEventListener('keydown', handleKeyDown)\n          document.removeEventListener('keydown', trapFocus)\n        }\n      } else {\n        setIsAnimating(true)\n        // Restore focus to previously focused element if it's still in the DOM\n        const prevElement = previousActiveElement.current\n        if (prevElement && document.body.contains(prevElement)) {\n          prevElement.focus()\n        }\n      }\n    }, [open, handleKeyDown, trapFocus, initialFocus])\n\n    const handleMaskClick = (e: React.MouseEvent) => {\n      if (maskClosable && onClose) {\n        onClose(e)\n      }\n    }\n\n    // Position classes\n    const placementClasses: Record<DrawerPlacement, string> = {\n      top: 'inset-x-0 top-0',\n      right: 'inset-y-0 right-0',\n      bottom: 'inset-x-0 bottom-0',\n      left: 'inset-y-0 left-0',\n    }\n\n    // Transform for animation\n    const getTransform = (isOpen: boolean): string => {\n      // Apply push offset from child drawer\n      const pushOffset = parentDrawer && open ? parentDrawer.pushDistance : 0\n\n      if (isOpen) {\n        if (pushOffset === 0) return 'translate(0, 0)'\n        switch (placement) {\n          case 'right':\n            return `translateX(-${pushOffset}px)`\n          case 'left':\n            return `translateX(${pushOffset}px)`\n          case 'top':\n            return `translateY(${pushOffset}px)`\n          case 'bottom':\n            return `translateY(-${pushOffset}px)`\n        }\n      }\n\n      switch (placement) {\n        case 'top':\n          return 'translateY(-100%)'\n        case 'right':\n          return 'translateX(100%)'\n        case 'bottom':\n          return 'translateY(100%)'\n        case 'left':\n          return 'translateX(-100%)'\n      }\n    }\n\n    const dimension = getDimension()\n\n    // Get container element\n    const getContainerElement = (): HTMLElement | null => {\n      if (getContainer === false) return null\n      if (typeof getContainer === 'function') return getContainer()\n      if (getContainer) return getContainer\n      return typeof document !== 'undefined' ? document.body : null\n    }\n\n    // Generate test IDs\n    const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n    const drawerContent = (\n      <DrawerContext.Provider value={{ push, pushDistance: getPushDistance() }}>\n        <div\n          className={`fixed inset-0 ${open ? '' : 'pointer-events-none'} ${rootClassName}`}\n          style={{ zIndex, ...rootStyle }}\n          role=\"presentation\"\n          data-state={open ? 'open' : 'closed'}\n          data-testid={testId}\n          {...rest}\n        >\n          {/* Backdrop/Mask */}\n          {mask && (\n            <div\n              className={`absolute inset-0 bg-black transition-opacity duration-300 ${\n                open ? 'opacity-50' : 'opacity-0'\n              }`}\n              style={maskStyle}\n              onClick={handleMaskClick}\n              aria-hidden=\"true\"\n              data-testid={getTestId('mask')}\n            />\n          )}\n\n          {/* Drawer Panel */}\n          <div\n            ref={drawerRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={title ? titleId : undefined}\n            aria-describedby={contentId}\n            className={`fixed flex flex-col bg-base-100 shadow-xl transition-transform duration-300 ease-in-out ${placementClasses[placement]} ${className}`}\n            style={{\n              ...dimension,\n              transform: getTransform(open),\n              ...style,\n            }}\n            onTransitionEnd={handleTransitionEnd}\n            data-testid={getTestId('panel')}\n          >\n            {/* Header */}\n            {(title || closable || extra) && (\n              <div\n                className=\"flex items-center justify-between px-6 py-4 border-b border-base-300\"\n                style={headerStyle}\n                data-testid={getTestId('header')}\n              >\n                {title && (\n                  <h2 id={titleId} className=\"text-lg font-semibold\">\n                    {title}\n                  </h2>\n                )}\n                <div className=\"flex items-center gap-2 ml-auto\">\n                  {extra}\n                  {closable && (\n                    <button\n                      ref={closeButtonRef}\n                      type=\"button\"\n                      className={`${dBtn} ${dBtnGhost} ${dBtnSm} ${dBtnSquare}`}\n                      onClick={onClose}\n                      aria-label=\"Close drawer\"\n                      data-testid={getTestId('close')}\n                    >\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        className=\"h-5 w-5\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M6 18L18 6M6 6l12 12\"\n                        />\n                      </svg>\n                    </button>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {/* Content */}\n            <div\n              ref={contentRef}\n              id={contentId}\n              className=\"flex-1 overflow-auto p-6\"\n              style={bodyStyle}\n              data-testid={getTestId('body')}\n            >\n              {loading ? (\n                <div className=\"space-y-4\" data-testid={getTestId('skeleton')}>\n                  <Skeleton className=\"h-4 w-3/4\" />\n                  <Skeleton className=\"h-4 w-full\" />\n                  <Skeleton className=\"h-4 w-5/6\" />\n                  <Skeleton className=\"h-4 w-2/3\" />\n                  <Skeleton className=\"h-32 w-full\" />\n                </div>\n              ) : (\n                children\n              )}\n            </div>\n\n            {/* Footer */}\n            {footer && (\n              <div\n                className=\"px-6 py-4 border-t border-base-300\"\n                style={footerStyle}\n                data-testid={getTestId('footer')}\n              >\n                {footer}\n              </div>\n            )}\n          </div>\n        </div>\n      </DrawerContext.Provider>\n    )\n\n    // Don't render during SSR or when not needed\n    if (!mounted) return null\n    if (!shouldRender && !open && !forceRender) return null\n\n    // Render without portal if getContainer is false\n    const container = getContainerElement()\n    if (container === null) return drawerContent\n\n    return createPortal(drawerContent, container)\n  }\n)\n\nDrawer.displayName = 'Drawer'\n"],"names":["dBtn","dBtnGhost","dBtnSm","dBtnSquare","DrawerContext","createContext","useDrawerContext","useContext","Drawer","forwardRef","children","open","onClose","afterOpenChange","title","placement","size","width","height","closable","mask","maskClosable","keyboard","footer","extra","className","rootClassName","style","headerStyle","bodyStyle","footerStyle","rootStyle","maskStyle","zIndex","destroyOnClose","forceRender","initialFocus","loading","getContainer","push","testId","rest","ref","drawerRef","useRef","closeButtonRef","contentRef","previousActiveElement","titleId","useId","contentId","mounted","setMounted","useState","shouldRender","setShouldRender","isAnimating","setIsAnimating","parentDrawer","useImperativeHandle","useEffect","getSizeValue","getDimension","isHorizontal","sizeValue","w","h","getPushDistance","trapFocus","useCallback","focusableElements","firstElement","lastElement","handleKeyDown","handleTransitionEnd","focusTimeout","prevElement","handleMaskClick","placementClasses","getTransform","isOpen","pushOffset","dimension","getContainerElement","getTestId","suffix","drawerContent","jsx","jsxs","Skeleton","container","createPortal"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useId,\n  useCallback,\n  useState,\n  forwardRef,\n  useImperativeHandle,\n  createContext,\n  useContext,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { Skeleton } from './Skeleton'\n\n// DaisyUI classes\nconst dBtn = 'd-btn'\nconst dBtnGhost = 'd-btn-ghost'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnSquare = 'd-btn-square'\n\nexport type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left'\nexport type DrawerSize = 'default' | 'large' | number\n\nexport interface DrawerPushConfig {\n  /** Distance to push parent drawer (default: 180) */\n  distance?: number\n}\n\nexport interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Drawer content */\n  children: React.ReactNode\n  /** Whether the drawer is visible */\n  open?: boolean\n  /** Callback when drawer is closed */\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void\n  /** Callback after open/close animation completes */\n  afterOpenChange?: (open: boolean) => void\n  /** Drawer title */\n  title?: React.ReactNode\n  /** Direction drawer slides from */\n  placement?: DrawerPlacement\n  /** Preset size or custom width/height in pixels */\n  size?: DrawerSize\n  /** Custom width (overrides size for left/right placement) */\n  width?: number | string\n  /** Custom height (overrides size for top/bottom placement) */\n  height?: number | string\n  /** Whether to show close button */\n  closable?: boolean\n  /** Whether to show mask/backdrop */\n  mask?: boolean\n  /** Whether clicking mask closes drawer */\n  maskClosable?: boolean\n  /** Whether ESC closes drawer */\n  keyboard?: boolean\n  /** Footer content */\n  footer?: React.ReactNode\n  /** Extra content in header (right side) */\n  extra?: React.ReactNode\n  /** CSS class for drawer panel */\n  className?: string\n  /** CSS class for drawer wrapper */\n  rootClassName?: string\n  /** Style for drawer panel */\n  style?: React.CSSProperties\n  /** Style for drawer header */\n  headerStyle?: React.CSSProperties\n  /** Style for drawer body/content area */\n  bodyStyle?: React.CSSProperties\n  /** Style for drawer footer */\n  footerStyle?: React.CSSProperties\n  /** Style for drawer wrapper (includes mask) */\n  rootStyle?: React.CSSProperties\n  /** Style for mask/backdrop */\n  maskStyle?: React.CSSProperties\n  /** z-index of drawer */\n  zIndex?: number\n  /** Destroy content when closed */\n  destroyOnClose?: boolean\n  /** Pre-render drawer content (keep in DOM even when closed) */\n  forceRender?: boolean\n  /** Where to place initial focus */\n  initialFocus?: 'close' | 'content'\n  /** Show loading skeleton */\n  loading?: boolean\n  /** Custom container for portal (false to disable portal) */\n  getContainer?: HTMLElement | (() => HTMLElement) | false\n  /** Nested drawer push behavior */\n  push?: boolean | DrawerPushConfig\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface DrawerRef {\n  /** The drawer panel element */\n  nativeElement: HTMLDivElement | null\n}\n\n// Context for nested drawer push behavior\ninterface DrawerContextValue {\n  push: boolean | DrawerPushConfig\n  pushDistance: number\n}\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null)\n\nfunction useDrawerContext() {\n  return useContext(DrawerContext)\n}\n\n/**\n * Drawer - A panel that slides in from the edge of the screen.\n * Use for forms, details, or task panels.\n * For responsive sidebar navigation, use ResponsiveDrawer instead.\n */\nexport const Drawer = forwardRef<DrawerRef, DrawerProps>(\n  (\n    {\n      children,\n      open = false,\n      onClose,\n      afterOpenChange,\n      title,\n      placement = 'right',\n      size = 'default',\n      width,\n      height,\n      closable = true,\n      mask = true,\n      maskClosable = true,\n      keyboard = true,\n      footer,\n      extra,\n      className = '',\n      rootClassName = '',\n      style,\n      headerStyle,\n      bodyStyle,\n      footerStyle,\n      rootStyle,\n      maskStyle,\n      zIndex = 1000,\n      destroyOnClose = false,\n      forceRender = false,\n      initialFocus = 'close',\n      loading = false,\n      getContainer,\n      push = { distance: 180 },\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const drawerRef = useRef<HTMLDivElement>(null)\n    const closeButtonRef = useRef<HTMLButtonElement>(null)\n    const contentRef = useRef<HTMLDivElement>(null)\n    const previousActiveElement = useRef<HTMLElement | null>(null)\n    const titleId = useId()\n    const contentId = useId()\n    const [mounted, setMounted] = useState(false)\n    const [shouldRender, setShouldRender] = useState(open || forceRender)\n    const [, setIsAnimating] = useState(false)\n\n    // Get parent drawer context for nested push behavior\n    const parentDrawer = useDrawerContext()\n\n    // Expose ref\n    useImperativeHandle(ref, () => ({\n      nativeElement: drawerRef.current,\n    }))\n\n    // Handle SSR - only render portal after mounting in browser\n    useEffect(() => {\n      setMounted(true)\n    }, [])\n\n    // Calculate dimensions\n    const getSizeValue = (): number => {\n      if (typeof size === 'number') return size\n      return size === 'large' ? 736 : 378\n    }\n\n    const getDimension = (): { width?: string; height?: string } => {\n      const isHorizontal = placement === 'left' || placement === 'right'\n      const sizeValue = getSizeValue()\n\n      if (isHorizontal) {\n        const w = width ?? sizeValue\n        return { width: typeof w === 'number' ? `${w}px` : w }\n      } else {\n        const h = height ?? sizeValue\n        return { height: typeof h === 'number' ? `${h}px` : h }\n      }\n    }\n\n    // Calculate push distance for nested drawers\n    const getPushDistance = (): number => {\n      if (!push) return 0\n      if (typeof push === 'boolean') return push ? 180 : 0\n      return push.distance ?? 180\n    }\n\n    // Focus trap\n    const trapFocus = useCallback((e: KeyboardEvent) => {\n      if (!drawerRef.current || e.key !== 'Tab' || typeof document === 'undefined') return\n\n      const focusableElements = drawerRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      )\n      const firstElement = focusableElements[0]\n      const lastElement = focusableElements[focusableElements.length - 1]\n\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault()\n        lastElement?.focus()\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault()\n        firstElement?.focus()\n      }\n    }, [])\n\n    // Handle ESC key\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (keyboard && e.key === 'Escape' && onClose) {\n          e.preventDefault()\n          onClose()\n        }\n      },\n      [keyboard, onClose]\n    )\n\n    // Handle animation end\n    const handleTransitionEnd = useCallback(() => {\n      setIsAnimating(false)\n      afterOpenChange?.(open)\n\n      if (!open && destroyOnClose) {\n        setShouldRender(false)\n      }\n    }, [open, afterOpenChange, destroyOnClose])\n\n    // Open/close effects\n    useEffect(() => {\n      if (typeof document === 'undefined') return\n\n      if (open) {\n        setShouldRender(true)\n        setIsAnimating(true)\n        previousActiveElement.current = document.activeElement as HTMLElement\n        document.body.style.overflow = 'hidden'\n\n        // Set initial focus\n        const focusTimeout = setTimeout(() => {\n          if (initialFocus === 'close' && closeButtonRef.current) {\n            closeButtonRef.current.focus()\n          } else if (contentRef.current) {\n            const firstFocusable = contentRef.current.querySelector<HTMLElement>(\n              'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n            )\n            firstFocusable?.focus()\n          }\n        }, 0)\n\n        // Add event listeners\n        document.addEventListener('keydown', handleKeyDown)\n        document.addEventListener('keydown', trapFocus)\n\n        return () => {\n          clearTimeout(focusTimeout)\n          document.body.style.overflow = ''\n          document.removeEventListener('keydown', handleKeyDown)\n          document.removeEventListener('keydown', trapFocus)\n        }\n      } else {\n        setIsAnimating(true)\n        // Restore focus to previously focused element if it's still in the DOM\n        const prevElement = previousActiveElement.current\n        if (prevElement && document.body.contains(prevElement)) {\n          prevElement.focus()\n        }\n      }\n    }, [open, handleKeyDown, trapFocus, initialFocus])\n\n    const handleMaskClick = (e: React.MouseEvent) => {\n      if (maskClosable && onClose) {\n        onClose(e)\n      }\n    }\n\n    // Position classes\n    const placementClasses: Record<DrawerPlacement, string> = {\n      top: 'inset-x-0 top-0',\n      right: 'inset-y-0 right-0',\n      bottom: 'inset-x-0 bottom-0',\n      left: 'inset-y-0 left-0',\n    }\n\n    // Transform for animation\n    const getTransform = (isOpen: boolean): string => {\n      // Apply push offset from child drawer\n      const pushOffset = parentDrawer && open ? parentDrawer.pushDistance : 0\n\n      if (isOpen) {\n        if (pushOffset === 0) return 'translate(0, 0)'\n        switch (placement) {\n          case 'right':\n            return `translateX(-${pushOffset}px)`\n          case 'left':\n            return `translateX(${pushOffset}px)`\n          case 'top':\n            return `translateY(${pushOffset}px)`\n          case 'bottom':\n            return `translateY(-${pushOffset}px)`\n        }\n      }\n\n      switch (placement) {\n        case 'top':\n          return 'translateY(-100%)'\n        case 'right':\n          return 'translateX(100%)'\n        case 'bottom':\n          return 'translateY(100%)'\n        case 'left':\n          return 'translateX(-100%)'\n      }\n    }\n\n    const dimension = getDimension()\n\n    // Get container element\n    const getContainerElement = (): HTMLElement | null => {\n      if (getContainer === false) return null\n      if (typeof getContainer === 'function') return getContainer()\n      if (getContainer) return getContainer\n      return typeof document !== 'undefined' ? document.body : null\n    }\n\n    // Generate test IDs\n    const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n    const drawerContent = (\n      <DrawerContext.Provider value={{ push, pushDistance: getPushDistance() }}>\n        <div\n          className={`fixed inset-0 ${open ? '' : 'pointer-events-none'} ${rootClassName}`}\n          style={{ zIndex, ...rootStyle }}\n          role=\"presentation\"\n          data-state={open ? 'open' : 'closed'}\n          data-testid={testId}\n          {...rest}\n        >\n          {/* Backdrop/Mask */}\n          {mask && (\n            <div\n              className={`absolute inset-0 bg-black transition-opacity duration-300 ${\n                open ? 'opacity-50' : 'opacity-0'\n              }`}\n              style={maskStyle}\n              onClick={handleMaskClick}\n              aria-hidden=\"true\"\n              data-testid={getTestId('mask')}\n            />\n          )}\n\n          {/* Drawer Panel */}\n          <div\n            ref={drawerRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={title ? titleId : undefined}\n            aria-describedby={contentId}\n            className={`fixed flex flex-col bg-base-100 shadow-xl transition-transform duration-300 ease-in-out ${placementClasses[placement]} ${className}`}\n            style={{\n              ...dimension,\n              transform: getTransform(open),\n              ...style,\n            }}\n            onTransitionEnd={handleTransitionEnd}\n            data-testid={getTestId('panel')}\n          >\n            {/* Header */}\n            {(title || closable || extra) && (\n              <div\n                className=\"flex items-center justify-between px-6 py-4 border-b border-base-300\"\n                style={headerStyle}\n                data-testid={getTestId('header')}\n              >\n                {title && (\n                  <h2 id={titleId} className=\"text-lg font-semibold\">\n                    {title}\n                  </h2>\n                )}\n                <div className=\"flex items-center gap-2 ml-auto\">\n                  {extra}\n                  {closable && (\n                    <button\n                      ref={closeButtonRef}\n                      type=\"button\"\n                      className={`${dBtn} ${dBtnGhost} ${dBtnSm} ${dBtnSquare}`}\n                      onClick={onClose}\n                      aria-label=\"Close drawer\"\n                      data-testid={getTestId('close')}\n                    >\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        className=\"h-5 w-5\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M6 18L18 6M6 6l12 12\"\n                        />\n                      </svg>\n                    </button>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {/* Content */}\n            <div\n              ref={contentRef}\n              id={contentId}\n              className=\"flex-1 overflow-auto p-6\"\n              style={bodyStyle}\n              data-testid={getTestId('body')}\n            >\n              {loading ? (\n                <div className=\"space-y-4\" data-testid={getTestId('skeleton')}>\n                  <Skeleton className=\"h-4 w-3/4\" />\n                  <Skeleton className=\"h-4 w-full\" />\n                  <Skeleton className=\"h-4 w-5/6\" />\n                  <Skeleton className=\"h-4 w-2/3\" />\n                  <Skeleton className=\"h-32 w-full\" />\n                </div>\n              ) : (\n                children\n              )}\n            </div>\n\n            {/* Footer */}\n            {footer && (\n              <div\n                className=\"px-6 py-4 border-t border-base-300\"\n                style={footerStyle}\n                data-testid={getTestId('footer')}\n              >\n                {footer}\n              </div>\n            )}\n          </div>\n        </div>\n      </DrawerContext.Provider>\n    )\n\n    // Don't render during SSR or when not needed\n    if (!mounted) return null\n    if (!shouldRender && !open && !forceRender) return null\n\n    // Render without portal if getContainer is false\n    const container = getContainerElement()\n    if (container === null) return drawerContent\n\n    return createPortal(drawerContent, container)\n  }\n)\n\nDrawer.displayName = 'Drawer'\n"],"names":["dBtn","dBtnGhost","dBtnSm","dBtnSquare","DrawerContext","createContext","useDrawerContext","useContext","Drawer","forwardRef","children","open","onClose","afterOpenChange","title","placement","size","width","height","closable","mask","maskClosable","keyboard","footer","extra","className","rootClassName","style","headerStyle","bodyStyle","footerStyle","rootStyle","maskStyle","zIndex","destroyOnClose","forceRender","initialFocus","loading","getContainer","push","testId","rest","ref","drawerRef","useRef","closeButtonRef","contentRef","previousActiveElement","titleId","useId","contentId","mounted","setMounted","useState","shouldRender","setShouldRender","setIsAnimating","parentDrawer","useImperativeHandle","useEffect","getSizeValue","getDimension","isHorizontal","sizeValue","w","h","getPushDistance","trapFocus","useCallback","focusableElements","firstElement","lastElement","handleKeyDown","handleTransitionEnd","focusTimeout","prevElement","handleMaskClick","placementClasses","getTransform","isOpen","pushOffset","dimension","getContainerElement","getTestId","suffix","drawerContent","jsx","jsxs","Skeleton","container","createPortal"],"mappings":"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"}

package/dist/components/ThemeController.js

@@ -1,84 +1,94 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { useState as h, useEffect as w, useId as x } from "react";
-import { useConfig as A } from "./ConfigProvider.js";
-const $ = "d-swap", k = "d-swap-rotate", C = "d-swap-off", M = "d-swap-on", S = "d-dropdown", T = "d-dropdown-end", Z = "d-dropdown-content", f = "d-btn", N = "d-btn-sm", D = "d-btn-block", B = "d-btn-ghost", E = "d-toggle", y = "d-toggle-xs", O = "d-toggle-sm", z = "d-toggle-md", I = "d-toggle-lg", j = "d-toggle-xl";
-function a() {
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useState as b, useEffect as f, useId as $ } from "react";
+import { useConfig as S } from "./ConfigProvider.js";
+import { useTheme as v } from "../hooks/useTheme.js";
+const C = "d-swap", D = "d-swap-rotate", M = "d-swap-off", Z = "d-swap-on", N = "d-dropdown", B = "d-dropdown-end", y = "d-dropdown-content", A = "d-btn", E = "d-btn-sm", I = "d-btn-block", O = "d-btn-ghost", z = "d-toggle", j = "d-toggle-xs", F = "d-toggle-sm", H = "d-toggle-md", L = "d-toggle-lg", V = "d-toggle-xl";
+function i() {
   return document.documentElement.getAttribute("data-theme");
 }
-function p(t) {
-  document.documentElement.setAttribute("data-theme", t);
+function x(n) {
+  document.documentElement.setAttribute("data-theme", n);
 }
-function F({
-  lightTheme: t = "light",
-  darkTheme: n = "dark",
-  onChange: d,
-  className: l = ""
+function X({
+  lightTheme: n = "light",
+  darkTheme: o = "dark",
+  onChange: u,
+  className: m = ""
 }) {
-  const [i, u] = h(() => a() === n);
-  w(() => {
-    const c = new MutationObserver(() => {
-      const e = a();
-      u(e === n);
+  const { setTheme: g, isDark: t } = v(), h = g ?? x, [c, l] = b(() => t !== void 0 ? t : i() === o);
+  f(() => {
+    if (t !== void 0) {
+      l(t);
+      return;
+    }
+    const s = new MutationObserver(() => {
+      const e = i();
+      l(e === o);
     });
-    return c.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => c.disconnect();
-  }, [n]);
-  const s = (c) => {
-    const r = c.target.checked ? n : t;
-    p(r), d?.(r);
+    return s.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => s.disconnect();
+  }, [o, t]);
+  const a = (s) => {
+    const d = s.target.checked ? o : n;
+    h(d), u?.(d);
   };
-  return /* @__PURE__ */ m("label", { className: `${$} ${k} ${l}`, children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ p("label", { className: `${C} ${D} ${m}`, children: [
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        checked: i,
-        onChange: s
+        checked: c,
+        onChange: a
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ r(
       "svg",
       {
-        className: `${C} h-8 w-8 fill-current`,
+        className: `${M} h-8 w-8 fill-current`,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ o("path", { d: "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" })
+        children: /* @__PURE__ */ r("path", { d: "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" })
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ r(
       "svg",
       {
-        className: `${M} h-8 w-8 fill-current`,
+        className: `${Z} h-8 w-8 fill-current`,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ o("path", { d: "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" })
+        children: /* @__PURE__ */ r("path", { d: "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" })
       }
     )
   ] });
 }
-function H({
-  themes: t,
-  defaultTheme: n,
-  onChange: d,
-  className: l = ""
+function G({
+  themes: n,
+  defaultTheme: o,
+  onChange: u,
+  className: m = ""
 }) {
-  const i = x(), [u, s] = h(() => {
-    const e = a();
-    return e && t.includes(e) ? e : n || t[0] || "light";
+  const { setTheme: g, resolvedTheme: t } = v(), h = g ?? x, c = $(), [l, a] = b(() => {
+    if (t && n.includes(t)) return t;
+    const e = i();
+    return e && n.includes(e) ? e : o || n[0] || "light";
   });
-  w(() => {
+  f(() => {
+    if (t && n.includes(t)) {
+      a(t);
+      return;
+    }
     const e = new MutationObserver(() => {
-      const r = a();
-      r && t.includes(r) && s(r);
+      const d = i();
+      d && n.includes(d) && a(d);
     });
     return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
-  }, [t]);
-  const c = (e) => {
-    s(e), p(e), d?.(e);
+  }, [n, t]);
+  const s = (e) => {
+    a(e), h(e), u?.(e);
   };
-  return /* @__PURE__ */ m("div", { className: `${S} ${T} ${l}`, children: [
-    /* @__PURE__ */ m("div", { tabIndex: 0, role: "button", className: f, children: [
+  return /* @__PURE__ */ p("div", { className: `${N} ${B} ${m}`, children: [
+    /* @__PURE__ */ p("div", { tabIndex: 0, role: "button", className: A, children: [
       "Theme",
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "svg",
         {
           width: "12px",
@@ -86,77 +96,81 @@ function H({
           className: "inline-block h-2 w-2 fill-current opacity-60",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 2048 2048",
-          children: /* @__PURE__ */ o("path", { d: "M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" })
+          children: /* @__PURE__ */ r("path", { d: "M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" })
         }
       )
     ] }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ r(
       "ul",
       {
         tabIndex: 0,
-        className: `${Z} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`,
-        children: t.map((e) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+        className: `${y} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`,
+        children: n.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
           "input",
           {
             type: "radio",
-            name: i,
-            className: `${f} ${N} ${D} ${B} justify-start`,
+            name: c,
+            className: `${A} ${E} ${I} ${O} justify-start`,
             "aria-label": e,
             value: e,
-            checked: u === e,
-            onChange: () => c(e)
+            checked: l === e,
+            onChange: () => s(e)
           }
         ) }, e))
       }
     )
   ] });
 }
-const L = {
-  xs: y,
-  sm: O,
-  md: z,
-  lg: I,
-  xl: j
+const R = {
+  xs: j,
+  sm: F,
+  md: H,
+  lg: L,
+  xl: V
 };
-function V({
-  lightTheme: t = "light",
-  darkTheme: n = "dark",
-  onChange: d,
-  size: l,
-  className: i = ""
+function q({
+  lightTheme: n = "light",
+  darkTheme: o = "dark",
+  onChange: u,
+  size: m,
+  className: g = ""
 }) {
-  const { componentSize: u } = A(), s = l ?? u ?? "md", [c, e] = h(() => a() === n);
-  w(() => {
-    const g = new MutationObserver(() => {
-      const b = a();
-      e(b === n);
+  const { componentSize: t } = S(), { setTheme: h, isDark: c } = v(), l = h ?? x, a = m ?? t ?? "md", [s, e] = b(() => c !== void 0 ? c : i() === o);
+  f(() => {
+    if (c !== void 0) {
+      e(c);
+      return;
+    }
+    const w = new MutationObserver(() => {
+      const T = i();
+      e(T === o);
     });
-    return g.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => g.disconnect();
-  }, [n]);
-  const r = (g) => {
-    const v = g.target.checked ? n : t;
-    p(v), d?.(v);
+    return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => w.disconnect();
+  }, [o, c]);
+  const d = (w) => {
+    const k = w.target.checked ? o : n;
+    l(k), u?.(k);
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ r(
     "input",
     {
       type: "checkbox",
-      className: `${E} ${L[s]} ${i}`,
-      checked: c,
-      onChange: r,
+      className: `${z} ${R[a]} ${g}`,
+      checked: s,
+      onChange: d,
       "aria-label": "Toggle theme"
     }
   );
 }
-const q = Object.assign(
+const U = Object.assign(
   {},
   {
-    Swap: F,
-    Dropdown: H,
-    Toggle: V
+    Swap: X,
+    Dropdown: G,
+    Toggle: q
   }
 );
 export {
-  q as ThemeController
+  U as ThemeController
 };
 //# sourceMappingURL=ThemeController.js.map

package/dist/components/ThemeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeController.js","sources":["../../src/components/ThemeController.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react'\nimport { useConfig } from './ConfigProvider'\n\n// DaisyUI classes\nconst dSwap = 'd-swap'\nconst dSwapRotate = 'd-swap-rotate'\nconst dSwapOff = 'd-swap-off'\nconst dSwapOn = 'd-swap-on'\nconst dDropdown = 'd-dropdown'\nconst dDropdownEnd = 'd-dropdown-end'\nconst dDropdownContent = 'd-dropdown-content'\nconst dBtn = 'd-btn'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnBlock = 'd-btn-block'\nconst dBtnGhost = 'd-btn-ghost'\nconst dToggle = 'd-toggle'\nconst dToggleXs = 'd-toggle-xs'\nconst dToggleSm = 'd-toggle-sm'\nconst dToggleMd = 'd-toggle-md'\nconst dToggleLg = 'd-toggle-lg'\nconst dToggleXl = 'd-toggle-xl'\n\nexport interface ThemeControllerSwapProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerDropdownProps {\n  themes: string[]\n  defaultTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerToggleProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  className?: string\n}\n\n// Get current theme from document\nfunction getCurrentTheme(): string | null {\n  return document.documentElement.getAttribute('data-theme')\n}\n\n// Set theme on document\nfunction setTheme(theme: string) {\n  document.documentElement.setAttribute('data-theme', theme)\n}\n\nfunction ThemeControllerSwap({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  className = '',\n}: ThemeControllerSwapProps) {\n  const [isDark, setIsDark] = useState(() => {\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <label className={`${dSwap} ${dSwapRotate} ${className}`}>\n      <input\n        type=\"checkbox\"\n        checked={isDark}\n        onChange={handleChange}\n      />\n      {/* sun icon */}\n      <svg\n        className={`${dSwapOff} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\" />\n      </svg>\n      {/* moon icon */}\n      <svg\n        className={`${dSwapOn} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\" />\n      </svg>\n    </label>\n  )\n}\n\nfunction ThemeControllerDropdown({\n  themes,\n  defaultTheme,\n  onChange,\n  className = '',\n}: ThemeControllerDropdownProps) {\n  const radioName = useId()\n  const [selectedTheme, setSelectedTheme] = useState(() => {\n    const current = getCurrentTheme()\n    if (current && themes.includes(current)) return current\n    return defaultTheme || themes[0] || 'light'\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      if (current && themes.includes(current)) {\n        setSelectedTheme(current)\n      }\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [themes])\n\n  const handleChange = (theme: string) => {\n    setSelectedTheme(theme)\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <div className={`${dDropdown} ${dDropdownEnd} ${className}`}>\n      <div tabIndex={0} role=\"button\" className={dBtn}>\n        Theme\n        <svg\n          width=\"12px\"\n          height=\"12px\"\n          className=\"inline-block h-2 w-2 fill-current opacity-60\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 2048 2048\"\n        >\n          <path d=\"M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z\"></path>\n        </svg>\n      </div>\n      <ul\n        tabIndex={0}\n        className={`${dDropdownContent} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`}\n      >\n        {themes.map((theme) => (\n          <li key={theme}>\n            <input\n              type=\"radio\"\n              name={radioName}\n              className={`${dBtn} ${dBtnSm} ${dBtnBlock} ${dBtnGhost} justify-start`}\n              aria-label={theme}\n              value={theme}\n              checked={selectedTheme === theme}\n              onChange={() => handleChange(theme)}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst sizeClasses: Record<string, string> = {\n  xs: dToggleXs,\n  sm: dToggleSm,\n  md: dToggleMd,\n  lg: dToggleLg,\n  xl: dToggleXl,\n}\n\nfunction ThemeControllerToggle({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  size,\n  className = '',\n}: ThemeControllerToggleProps) {\n  const { componentSize } = useConfig()\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const [isDark, setIsDark] = useState(() => {\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <input\n      type=\"checkbox\"\n      className={`${dToggle} ${sizeClasses[effectiveSize]} ${className}`}\n      checked={isDark}\n      onChange={handleChange}\n      aria-label=\"Toggle theme\"\n    />\n  )\n}\n\nexport const ThemeController = Object.assign(\n  {},\n  {\n    Swap: ThemeControllerSwap,\n    Dropdown: ThemeControllerDropdown,\n    Toggle: ThemeControllerToggle,\n  }\n)\n"],"names":["dSwap","dSwapRotate","dSwapOff","dSwapOn","dDropdown","dDropdownEnd","dDropdownContent","dBtn","dBtnSm","dBtnBlock","dBtnGhost","dToggle","dToggleXs","dToggleSm","dToggleMd","dToggleLg","dToggleXl","getCurrentTheme","setTheme","theme","ThemeControllerSwap","lightTheme","darkTheme","onChange","className","isDark","setIsDark","useState","useEffect","observer","current","handleChange","e","jsxs","jsx","ThemeControllerDropdown","themes","defaultTheme","radioName","useId","selectedTheme","setSelectedTheme","sizeClasses","ThemeControllerToggle","size","componentSize","useConfig","effectiveSize","ThemeController"],"mappings":"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"}
+{"version":3,"file":"ThemeController.js","sources":["../../src/components/ThemeController.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react'\nimport { useConfig } from './ConfigProvider'\nimport { useTheme } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dSwap = 'd-swap'\nconst dSwapRotate = 'd-swap-rotate'\nconst dSwapOff = 'd-swap-off'\nconst dSwapOn = 'd-swap-on'\nconst dDropdown = 'd-dropdown'\nconst dDropdownEnd = 'd-dropdown-end'\nconst dDropdownContent = 'd-dropdown-content'\nconst dBtn = 'd-btn'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnBlock = 'd-btn-block'\nconst dBtnGhost = 'd-btn-ghost'\nconst dToggle = 'd-toggle'\nconst dToggleXs = 'd-toggle-xs'\nconst dToggleSm = 'd-toggle-sm'\nconst dToggleMd = 'd-toggle-md'\nconst dToggleLg = 'd-toggle-lg'\nconst dToggleXl = 'd-toggle-xl'\n\nexport interface ThemeControllerSwapProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerDropdownProps {\n  themes: string[]\n  defaultTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerToggleProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  className?: string\n}\n\n// Get current theme from document\nfunction getCurrentTheme(): string | null {\n  return document.documentElement.getAttribute('data-theme')\n}\n\n// Set theme directly on document (fallback when no ThemeProvider)\nfunction setThemeDirectly(theme: string) {\n  document.documentElement.setAttribute('data-theme', theme)\n}\n\nfunction ThemeControllerSwap({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  className = '',\n}: ThemeControllerSwapProps) {\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <label className={`${dSwap} ${dSwapRotate} ${className}`}>\n      <input\n        type=\"checkbox\"\n        checked={isDark}\n        onChange={handleChange}\n      />\n      {/* sun icon */}\n      <svg\n        className={`${dSwapOff} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\" />\n      </svg>\n      {/* moon icon */}\n      <svg\n        className={`${dSwapOn} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\" />\n      </svg>\n    </label>\n  )\n}\n\nfunction ThemeControllerDropdown({\n  themes,\n  defaultTheme,\n  onChange,\n  className = '',\n}: ThemeControllerDropdownProps) {\n  const { setTheme: contextSetTheme, resolvedTheme } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const radioName = useId()\n\n  const [selectedTheme, setSelectedTheme] = useState(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) return resolvedTheme\n    const current = getCurrentTheme()\n    if (current && themes.includes(current)) return current\n    return defaultTheme || themes[0] || 'light'\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) {\n      setSelectedTheme(resolvedTheme)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      if (current && themes.includes(current)) {\n        setSelectedTheme(current)\n      }\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [themes, resolvedTheme])\n\n  const handleChange = (theme: string) => {\n    setSelectedTheme(theme)\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <div className={`${dDropdown} ${dDropdownEnd} ${className}`}>\n      <div tabIndex={0} role=\"button\" className={dBtn}>\n        Theme\n        <svg\n          width=\"12px\"\n          height=\"12px\"\n          className=\"inline-block h-2 w-2 fill-current opacity-60\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 2048 2048\"\n        >\n          <path d=\"M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z\"></path>\n        </svg>\n      </div>\n      <ul\n        tabIndex={0}\n        className={`${dDropdownContent} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`}\n      >\n        {themes.map((theme) => (\n          <li key={theme}>\n            <input\n              type=\"radio\"\n              name={radioName}\n              className={`${dBtn} ${dBtnSm} ${dBtnBlock} ${dBtnGhost} justify-start`}\n              aria-label={theme}\n              value={theme}\n              checked={selectedTheme === theme}\n              onChange={() => handleChange(theme)}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst sizeClasses: Record<string, string> = {\n  xs: dToggleXs,\n  sm: dToggleSm,\n  md: dToggleMd,\n  lg: dToggleLg,\n  xl: dToggleXl,\n}\n\nfunction ThemeControllerToggle({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  size,\n  className = '',\n}: ThemeControllerToggleProps) {\n  const { componentSize } = useConfig()\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <input\n      type=\"checkbox\"\n      className={`${dToggle} ${sizeClasses[effectiveSize]} ${className}`}\n      checked={isDark}\n      onChange={handleChange}\n      aria-label=\"Toggle theme\"\n    />\n  )\n}\n\nexport const ThemeController = Object.assign(\n  {},\n  {\n    Swap: ThemeControllerSwap,\n    Dropdown: ThemeControllerDropdown,\n    Toggle: ThemeControllerToggle,\n  }\n)\n"],"names":["dSwap","dSwapRotate","dSwapOff","dSwapOn","dDropdown","dDropdownEnd","dDropdownContent","dBtn","dBtnSm","dBtnBlock","dBtnGhost","dToggle","dToggleXs","dToggleSm","dToggleMd","dToggleLg","dToggleXl","getCurrentTheme","setThemeDirectly","theme","ThemeControllerSwap","lightTheme","darkTheme","onChange","className","contextSetTheme","contextIsDark","useTheme","setTheme","isDark","setIsDark","useState","useEffect","observer","current","handleChange","e","jsxs","jsx","ThemeControllerDropdown","themes","defaultTheme","resolvedTheme","radioName","useId","selectedTheme","setSelectedTheme","sizeClasses","ThemeControllerToggle","size","componentSize","useConfig","effectiveSize","ThemeController"],"mappings":"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"}

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default theme. Use "system" to follow browser preference. */
+    defaultTheme?: string;
+    /** localStorage key for persisting theme. Set to false to disable persistence. */
+    storageKey?: string | false;
+    /** Light theme to use when system preference is light */
+    lightTheme?: string;
+    /** Dark theme to use when system preference is dark */
+    darkTheme?: string;
+    /** Custom function to determine if a theme is dark */
+    isDarkTheme?: (theme: string) => boolean;
+}
+export interface ThemeColors {
+    background: string;
+    foreground: string;
+    primary: string;
+    primaryContent: string;
+    secondary: string;
+    accent: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+}
+export interface ThemeContextValue {
+    /** The theme setting (what user selected: "system", "light", "dark", etc.) */
+    theme: string;
+    /** The actual applied theme after resolving "system" */
+    resolvedTheme: string;
+    /** Whether the resolved theme is dark */
+    isDark: boolean;
+    /** Set the theme */
+    setTheme: (theme: string) => void;
+    /** Computed theme colors as hex values (for canvas/non-CSS contexts) */
+    colors: ThemeColors;
+    /** The system preference ("light" or "dark") */
+    systemTheme: 'light' | 'dark';
+}
+export declare function ThemeProvider({ children, defaultTheme, storageKey, lightTheme, darkTheme, isDarkTheme, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access theme context.
+ * Must be used within a ThemeProvider.
+ */
+export declare function useThemeContext(): ThemeContextValue;
+/**
+ * Check if ThemeProvider is present in the tree.
+ */
+export declare function useHasThemeProvider(): boolean;

package/dist/components/ThemeProvider.js

@@ -0,0 +1,130 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useState as d, useMemo as m, useCallback as k, useEffect as l, createContext as P, useContext as v } from "react";
+const A = /* @__PURE__ */ new Set([
+  "dark",
+  "synthwave",
+  "halloween",
+  "forest",
+  "black",
+  "luxury",
+  "dracula",
+  "business",
+  "night",
+  "coffee",
+  "dim",
+  "sunset"
+]), h = P(void 0);
+function L(t) {
+  if (typeof document > "u") return "#000000";
+  const e = document.createElement("canvas");
+  e.width = e.height = 1;
+  const n = e.getContext("2d");
+  if (!n) return "#000000";
+  n.fillStyle = t, n.fillRect(0, 0, 1, 1);
+  const [f, o, i] = n.getImageData(0, 0, 1, 1).data;
+  return `#${((1 << 24) + (f << 16) + (o << 8) + i).toString(16).slice(1)}`;
+}
+function b() {
+  if (typeof document > "u")
+    return {
+      background: "#ffffff",
+      foreground: "#000000",
+      primary: "#6366f1",
+      primaryContent: "#ffffff",
+      secondary: "#f000b8",
+      accent: "#37cdbe",
+      info: "#3abff8",
+      success: "#36d399",
+      warning: "#fbbd23",
+      error: "#f87272"
+    };
+  const t = getComputedStyle(document.documentElement), e = (n, f) => {
+    const o = t.getPropertyValue(n).trim();
+    return o ? L(o) : f;
+  };
+  return {
+    background: e("--color-base-100", "#ffffff"),
+    foreground: e("--color-base-content", "#000000"),
+    primary: e("--color-primary", "#6366f1"),
+    primaryContent: e("--color-primary-content", "#ffffff"),
+    secondary: e("--color-secondary", "#f000b8"),
+    accent: e("--color-accent", "#37cdbe"),
+    info: e("--color-info", "#3abff8"),
+    success: e("--color-success", "#36d399"),
+    warning: e("--color-warning", "#fbbd23"),
+    error: e("--color-error", "#f87272")
+  };
+}
+function M() {
+  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function H(t) {
+  if (!t || typeof window > "u") return null;
+  try {
+    return localStorage.getItem(t);
+  } catch {
+    return null;
+  }
+}
+function I(t, e) {
+  if (!(!t || typeof window > "u"))
+    try {
+      localStorage.setItem(t, e);
+    } catch {
+    }
+}
+function F({
+  children: t,
+  defaultTheme: e = "system",
+  storageKey: n = "asterui-theme",
+  lightTheme: f = "light",
+  darkTheme: o = "dark",
+  isDarkTheme: i
+}) {
+  const [u, w] = d(() => H(n) || e), [a, C] = d(M), c = m(() => u === "system" ? a === "dark" ? o : f : u, [u, a, f, o]), g = m(() => i ? i(c) : A.has(c), [c, i]), [y, S] = d(b), p = k((r) => {
+    w(r), I(n, r);
+  }, [n]);
+  l(() => {
+    typeof document > "u" || (document.documentElement.setAttribute("data-theme", c), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        S(b());
+      });
+    }));
+  }, [c]), l(() => {
+    if (typeof window > "u") return;
+    const r = window.matchMedia("(prefers-color-scheme: dark)"), s = (T) => {
+      C(T.matches ? "dark" : "light");
+    };
+    return r.addEventListener("change", s), () => r.removeEventListener("change", s);
+  }, []), l(() => {
+    if (!n || typeof window > "u") return;
+    const r = (s) => {
+      s.key === n && s.newValue && w(s.newValue);
+    };
+    return window.addEventListener("storage", r), () => window.removeEventListener("storage", r);
+  }, [n]);
+  const x = m(() => ({
+    theme: u,
+    resolvedTheme: c,
+    isDark: g,
+    setTheme: p,
+    colors: y,
+    systemTheme: a
+  }), [u, c, g, p, y, a]);
+  return /* @__PURE__ */ E(h.Provider, { value: x, children: t });
+}
+function R() {
+  const t = v(h);
+  if (!t)
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  return t;
+}
+function j() {
+  return v(h) !== void 0;
+}
+export {
+  F as ThemeProvider,
+  j as useHasThemeProvider,
+  R as useThemeContext
+};
+//# sourceMappingURL=ThemeProvider.js.map