@particle-academy/react-fancy 5.51.2 → 5.53.0

package/dist/{chunk-23PAOCQQ.cjs.map → chunk-EXQ33MJR.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-23PAOCQQ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-zinc-200 dark:bg-zinc-700\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-EXQ33MJR.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}

package/dist/{chunk-HKRB2Z6R.cjs → chunk-FGI2EC32.cjs}

@@ -24,17 +24,17 @@ function ModalHeader({ children, className }) {
     {
       "data-react-fancy-modal-header": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        "flex items-center justify-between border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-6 py-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]", children }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: close,
-            className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+            className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300",
             "aria-label": "Close",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
           }
@@ -51,7 +51,7 @@ function ModalBody({ children, className }) {
     // `flex-1` alone would push the panel through its own max-height and the
     // scrollbar would never appear. This is what permits the overflow that
     // `overflow-y-auto` then handles.
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-modal-body": "", className: chunkZU5Q77OT_cjs.cn("min-h-0 flex-1 overflow-y-auto px-6 py-4 text-zinc-700 dark:text-zinc-300", className), children })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-modal-body": "", className: chunkZU5Q77OT_cjs.cn("min-h-0 flex-1 overflow-y-auto px-6 py-4 text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]", className), children })
   );
 }
 ModalBody.displayName = "ModalBody";
@@ -61,7 +61,7 @@ function ModalFooter({ children, className }) {
     {
       "data-react-fancy-modal-footer": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "flex items-center justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700",
+        "flex items-center justify-end gap-3 border-t border-[color:var(--fancy-border,var(--color-zinc-200))] px-6 py-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
         className
       ),
       children
@@ -126,7 +126,7 @@ function ModalRoot({
         "aria-modal": "true",
         ...rest,
         className: chunkZU5Q77OT_cjs.cn(
-          "relative flex w-full flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900",
+          "relative flex w-full flex-col overflow-hidden rounded-2xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
           SIZE_MAP[size],
           animClass,
           className
@@ -144,5 +144,5 @@ var Modal = Object.assign(ModalRoot, {
 
 exports.Modal = Modal;
 exports.useModal = useModal;
-//# sourceMappingURL=chunk-HKRB2Z6R.cjs.map
-//# sourceMappingURL=chunk-HKRB2Z6R.cjs.map
+//# sourceMappingURL=chunk-FGI2EC32.cjs.map
+//# sourceMappingURL=chunk-FGI2EC32.cjs.map

package/dist/chunk-FGI2EC32.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.context.ts","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/Modal.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","X","useRef","useCallback","useEscapeKey","useFocusTrap","useEffect","useAnimation","useMemo","Portal"],"mappings":"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","file":"chunk-FGI2EC32.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ModalContextValue } from \"./Modal.types\";\n\nexport const ModalContext = createContext<ModalContextValue | null>(null);\n\nexport function useModal(): ModalContextValue {\n  const ctx = useContext(ModalContext);\n  if (!ctx) {\n    throw new Error(\"Modal compound components must be used within <Modal>\");\n  }\n  return ctx;\n}\n","import { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useModal } from \"./Modal.context\";\nimport type { ModalHeaderProps } from \"./Modal.types\";\n\nexport function ModalHeader({ children, className }: ModalHeaderProps) {\n  const { close } = useModal();\n\n  return (\n    <div\n      data-react-fancy-modal-header=\"\"\n      className={cn(\n        \"flex items-center justify-between border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-6 py-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      <div className=\"text-lg font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">{children}</div>\n      <button\n        type=\"button\"\n        onClick={close}\n        className=\"rounded-lg p-1 text-zinc-400 transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\"\n        aria-label=\"Close\"\n      >\n        <X size={20} />\n      </button>\n    </div>\n  );\n}\n\nModalHeader.displayName = \"ModalHeader\";\n","import { cn } from \"../../utils/cn\";\nimport type { ModalBodyProps } from \"./Modal.types\";\n\nexport function ModalBody({ children, className }: ModalBodyProps) {\n  return (\n    // `min-h-0` is load-bearing, not decoration. A flex child defaults to\n    // `min-height: auto`, which refuses to shrink below its content — so\n    // `flex-1` alone would push the panel through its own max-height and the\n    // scrollbar would never appear. This is what permits the overflow that\n    // `overflow-y-auto` then handles.\n    <div data-react-fancy-modal-body=\"\" className={cn(\"min-h-0 flex-1 overflow-y-auto px-6 py-4 text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\", className)}>\n      {children}\n    </div>\n  );\n}\n\nModalBody.displayName = \"ModalBody\";\n","import { cn } from \"../../utils/cn\";\nimport type { ModalFooterProps } from \"./Modal.types\";\n\nexport function ModalFooter({ children, className }: ModalFooterProps) {\n  return (\n    <div\n      data-react-fancy-modal-footer=\"\"\n      className={cn(\n        \"flex items-center justify-end gap-3 border-t border-[color:var(--fancy-border,var(--color-zinc-200))] px-6 py-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nModalFooter.displayName = \"ModalFooter\";\n","import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { ModalContext } from \"./Modal.context\";\nimport { ModalHeader } from \"./ModalHeader\";\nimport { ModalBody } from \"./ModalBody\";\nimport { ModalFooter } from \"./ModalFooter\";\nimport { useFocusTrap } from \"../../hooks/use-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { ModalProps } from \"./Modal.types\";\n\n/**\n * Every size is capped against the VIEWPORT, not just the width.\n *\n * Only `full` used to carry a max-height. The other four were width-constrained\n * and vertically unbounded, so a modal with long content simply grew past the\n * bottom of the screen and the rest became unreachable — no scrollbar, because\n * there was no overflow to scroll: the box got taller instead.\n *\n * `ModalBody` already had `flex-1 overflow-y-auto` and the panel already had\n * `overflow-hidden`. The scrolling machinery was complete and inert, waiting on\n * the one constraint that makes it engage.\n *\n * `dvh` over `vh` deliberately: on mobile browsers `100vh` is the tallest the\n * viewport ever gets, ignoring the address bar, so a `vh`-capped modal still\n * runs under the chrome on exactly the devices with least room. `dvh` tracks\n * the visible height. The `vh` fallback is listed first for any engine that\n * does not know `dvh` yet — an unknown unit drops the declaration, so ordering\n * is what keeps the old behaviour rather than none.\n */\nconst VIEWPORT_CAP = \"max-h-[calc(100vh-2rem)] max-h-[calc(100dvh-2rem)]\";\n\nconst SIZE_MAP = {\n  sm: `max-w-sm ${VIEWPORT_CAP}`,\n  md: `max-w-lg ${VIEWPORT_CAP}`,\n  lg: `max-w-2xl ${VIEWPORT_CAP}`,\n  xl: `max-w-4xl ${VIEWPORT_CAP}`,\n  full: `max-w-[calc(100vw-2rem)] ${VIEWPORT_CAP}`,\n} as const;\n\nfunction ModalRoot({\n  children,\n  open,\n  onClose,\n  size = \"md\",\n  className,\n  ...rest\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const close = useCallback(() => onClose(), [onClose]);\n  useEscapeKey(close, open);\n  useFocusTrap(panelRef, open);\n\n  // Body scroll lock\n  useEffect(() => {\n    if (open) {\n      const original = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = original;\n      };\n    }\n  }, [open]);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-slide-up\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  const ctx = useMemo(() => ({ open, close }), [open, close]);\n\n  if (!mounted) return null;\n\n  return (\n    <ModalContext.Provider value={ctx}>\n      <Portal>\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n          {/* Backdrop */}\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={close}\n            aria-hidden=\"true\"\n          />\n          {/* Panel */}\n          <div\n            ref={(node) => {\n              panelRef.current = node;\n              (animRef as React.MutableRefObject<HTMLElement | null>).current =\n                node;\n            }}\n            data-react-fancy-modal=\"\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            {...rest}\n            className={cn(\n              \"relative flex w-full flex-col overflow-hidden rounded-2xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n              SIZE_MAP[size],\n              animClass,\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </Portal>\n    </ModalContext.Provider>\n  );\n}\n\nexport const Modal = Object.assign(ModalRoot, {\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n});\n"]}

package/dist/{chunk-AASQ6L6X.cjs → chunk-FNIHCNVD.cjs}

@@ -21,7 +21,7 @@ var Skeleton = react.forwardRef(
         "aria-hidden": "true",
         "data-react-fancy-skeleton": "",
         className: chunkZU5Q77OT_cjs.cn(
-          "animate-pulse bg-zinc-200 dark:bg-zinc-700",
+          "animate-pulse bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
           shape === "rect" && "rounded-lg",
           shape === "circle" && "rounded-full aspect-square",
           shape === "text" && "rounded h-4 w-full",
@@ -35,5 +35,5 @@ var Skeleton = react.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 exports.Skeleton = Skeleton;
-//# sourceMappingURL=chunk-AASQ6L6X.cjs.map
-//# sourceMappingURL=chunk-AASQ6L6X.cjs.map
+//# sourceMappingURL=chunk-FNIHCNVD.cjs.map
+//# sourceMappingURL=chunk-FNIHCNVD.cjs.map

package/dist/{chunk-AASQ6L6X.cjs.map → chunk-FNIHCNVD.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,SAAS,aAAa,KAAA,EAAwD;AAC5E,EAAA,IAAI,KAAA,KAAU,QAAW,OAAO,MAAA;AAChC,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AACpD;AAEO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,GAAQ,MAAA,EAAQ,OAAO,MAAA,EAAQ,SAAA,IAAa,GAAA,KAAQ;AACrD,IAAA,MAAM,KAAA,GAA6B;AAAA,MACjC,KAAA,EAAO,aAAa,KAAK,CAAA;AAAA,MACzB,MAAA,EAAQ,aAAa,MAAM;AAAA,KAC7B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QACZ,2BAAA,EAA0B,EAAA;AAAA,QAC1B,SAAA,EAAWC,oBAAA;AAAA,UACT,4CAAA;AAAA,UACA,UAAU,MAAA,IAAU,YAAA;AAAA,UACpB,UAAU,QAAA,IAAY,4BAAA;AAAA,UACtB,UAAU,MAAA,IAAU,oBAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-AASQ6L6X.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\nfunction toStyleValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape = \"rect\", width, height, className }, ref) => {\n    const style: React.CSSProperties = {\n      width: toStyleValue(width),\n      height: toStyleValue(height),\n    };\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-react-fancy-skeleton=\"\"\n        className={cn(\n          \"animate-pulse bg-zinc-200 dark:bg-zinc-700\",\n          shape === \"rect\" && \"rounded-lg\",\n          shape === \"circle\" && \"rounded-full aspect-square\",\n          shape === \"text\" && \"rounded h-4 w-full\",\n          className,\n        )}\n        style={style}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"]}
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,SAAS,aAAa,KAAA,EAAwD;AAC5E,EAAA,IAAI,KAAA,KAAU,QAAW,OAAO,MAAA;AAChC,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AACpD;AAEO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,GAAQ,MAAA,EAAQ,OAAO,MAAA,EAAQ,SAAA,IAAa,GAAA,KAAQ;AACrD,IAAA,MAAM,KAAA,GAA6B;AAAA,MACjC,KAAA,EAAO,aAAa,KAAK,CAAA;AAAA,MACzB,MAAA,EAAQ,aAAa,MAAM;AAAA,KAC7B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QACZ,2BAAA,EAA0B,EAAA;AAAA,QAC1B,SAAA,EAAWC,oBAAA;AAAA,UACT,mIAAA;AAAA,UACA,UAAU,MAAA,IAAU,YAAA;AAAA,UACpB,UAAU,QAAA,IAAY,4BAAA;AAAA,UACtB,UAAU,MAAA,IAAU,oBAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-FNIHCNVD.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\nfunction toStyleValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape = \"rect\", width, height, className }, ref) => {\n    const style: React.CSSProperties = {\n      width: toStyleValue(width),\n      height: toStyleValue(height),\n    };\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-react-fancy-skeleton=\"\"\n        className={cn(\n          \"animate-pulse bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n          shape === \"rect\" && \"rounded-lg\",\n          shape === \"circle\" && \"rounded-full aspect-square\",\n          shape === \"text\" && \"rounded h-4 w-full\",\n          className,\n        )}\n        style={style}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"]}

package/dist/{chunk-O6GTY53I.cjs → chunk-FVQO75KY.cjs}

@@ -15,7 +15,7 @@ var StatList = react.forwardRef(
         "data-react-fancy-stat-list": "",
         "data-align": align,
         className: chunkZU5Q77OT_cjs.cn(
-          "flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400",
+          "flex flex-col gap-0.5 font-mono text-[11.5px] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
           align === "right" ? "items-end text-right" : "items-start text-left",
           className
         ),
@@ -24,7 +24,7 @@ var StatList = react.forwardRef(
           {
             "data-stat": item.key ?? (typeof item.label === "string" ? item.label : void 0),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: item.value }),
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]", children: item.value }),
               " ",
               item.label
             ]
@@ -38,5 +38,5 @@ var StatList = react.forwardRef(
 StatList.displayName = "StatList";
 
 exports.StatList = StatList;
-//# sourceMappingURL=chunk-O6GTY53I.cjs.map
-//# sourceMappingURL=chunk-O6GTY53I.cjs.map
+//# sourceMappingURL=chunk-FVQO75KY.cjs.map
+//# sourceMappingURL=chunk-FVQO75KY.cjs.map

package/dist/{chunk-O6GTY53I.cjs.map → chunk-FVQO75KY.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/StatList/StatList.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":";;;;;;AAoBO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,EAAO,KAAA,GAAQ,SAAS,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAWC,oBAAA;AAAA,UACT,gFAAA;AAAA,UACA,KAAA,KAAU,UAAU,sBAAA,GAAyB,uBAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChBC,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,WAAA,EAAW,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,MAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAAK,GAAA;AAAA,cAC5E,IAAA,CAAK;AAAA;AAAA,WAAA;AAAA,UAJD,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,SAMnE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-O6GTY53I.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatListProps } from \"./StatList.types\";\n\n/**\n * The mono figure stack — `70 packages / 261 components / MIT licensed`.\n *\n * The Inspiration index and `/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site — and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n */\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{item.value}</b>{\" \"}\n            {item.label}\n          </span>\n        ))}\n      </div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n"]}
+{"version":3,"sources":["../src/components/StatList/StatList.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":";;;;;;AAoBO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,EAAO,KAAA,GAAQ,SAAS,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAWC,oBAAA;AAAA,UACT,+KAAA;AAAA,UACA,KAAA,KAAU,UAAU,sBAAA,GAAyB,uBAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChBC,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,WAAA,EAAW,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,MAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iIAAA,EAAmI,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAAK,GAAA;AAAA,cAC/J,IAAA,CAAK;AAAA;AAAA,WAAA;AAAA,UAJD,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,SAMnE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-FVQO75KY.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatListProps } from \"./StatList.types\";\n\n/**\n * The mono figure stack — `70 packages / 261 components / MIT licensed`.\n *\n * The Inspiration index and `/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site — and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n */\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">{item.value}</b>{\" \"}\n            {item.label}\n          </span>\n        ))}\n      </div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n"]}

package/dist/{chunk-FCSR2WVS.js → chunk-FWAVMWMP.js}

@@ -62,7 +62,7 @@ var BrandRoot = forwardRef(
               "span",
               {
                 className: cn(
-                  "truncate font-bold text-zinc-900 dark:text-zinc-100",
+                  "truncate font-bold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]",
                   nameClasses[size]
                 ),
                 children: name
@@ -72,7 +72,7 @@ var BrandRoot = forwardRef(
               "span",
               {
                 className: cn(
-                  "truncate text-zinc-500 dark:text-zinc-400",
+                  "truncate text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
                   taglineClasses[size]
                 ),
                 children: tagline
@@ -88,5 +88,5 @@ BrandRoot.displayName = "Brand";
 var Brand = Object.assign(BrandRoot, { Mark: BrandMark });
 
 export { Brand, BrandMark };
-//# sourceMappingURL=chunk-FCSR2WVS.js.map
-//# sourceMappingURL=chunk-FCSR2WVS.js.map
+//# sourceMappingURL=chunk-FWAVMWMP.js.map
+//# sourceMappingURL=chunk-FWAVMWMP.js.map

package/dist/{chunk-FCSR2WVS.js.map → chunk-FWAVMWMP.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Brand/BrandMark.tsx","../src/components/Brand/Brand.tsx"],"names":["forwardRef","jsx"],"mappings":"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","file":"chunk-FCSR2WVS.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BrandMarkProps } from \"./Brand.types\";\n\nconst sizeClasses: Record<Exclude<NonNullable<BrandMarkProps[\"size\"]>, number>, string> = {\n  sm: \"h-6 w-6 rounded-md text-[11px]\",\n  md: \"h-8 w-8 rounded-lg text-sm\",\n  lg: \"h-11 w-11 rounded-xl text-lg\",\n};\n\n/**\n * The square logo tile — a glyph centred in a rounded, coloured square.\n *\n * `Brand` has always taken its mark as a caller-supplied `logo` node, which is\n * exactly why every page that wanted one rebuilt the same square: fixed size,\n * rounded, grid-centred, bold, white, and `shrink-0` so a flex row never\n * squashes it. Four surfaces carried that block inline.\n *\n * ## It ships no brand colour, deliberately\n *\n * The default is a neutral zinc tile. A component library inventing your brand\n * gradient would be wrong, and would be the first thing every consumer had to\n * override — so the FILL is `className`'s job and only the geometry lives here.\n * That is also what the duplicated code actually had in common: each copy\n * already pulled its gradient from a token class and hand-rolled the box.\n */\nexport const BrandMark = forwardRef<HTMLSpanElement, BrandMarkProps>(\n  ({ glyph, size = \"md\", className, style, ...props }, ref) => {\n    const numeric = typeof size === \"number\";\n\n    return (\n      <span\n        ref={ref}\n        data-react-fancy-brand-mark=\"\"\n        aria-hidden={props[\"aria-label\"] ? undefined : true}\n        className={cn(\n          \"grid shrink-0 place-items-center font-bold leading-none text-white select-none\",\n          numeric ? \"rounded-lg\" : sizeClasses[size],\n          // Overridable default: a mark with no `className` still reads as a\n          // mark rather than as an invisible box.\n          \"bg-zinc-900 dark:bg-zinc-100 dark:text-zinc-900\",\n          className,\n        )}\n        style={numeric ? { height: size, width: size, fontSize: Math.round(size * 0.5), ...style } : style}\n        {...props}\n      >\n        {glyph}\n      </span>\n    );\n  },\n);\n\nBrandMark.displayName = \"BrandMark\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { BrandMark } from \"./BrandMark\";\nimport type { BrandProps } from \"./Brand.types\";\n\nconst gapClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"gap-2\",\n  md: \"gap-3\",\n  lg: \"gap-4\",\n};\n\nconst nameClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"text-sm\",\n  md: \"text-base\",\n  lg: \"text-xl\",\n};\n\nconst taglineClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n};\n\nconst BrandRoot = forwardRef<HTMLDivElement, BrandProps>(\n  ({ logo, name, tagline, size = \"md\", className }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-brand=\"\"\n        className={cn(\"flex items-center\", gapClasses[size], className)}\n      >\n        {logo && <div className=\"shrink-0\">{logo}</div>}\n        {(name || tagline) && (\n          <div className=\"flex min-w-0 flex-col\">\n            {name && (\n              <span\n                className={cn(\n                  \"truncate font-bold text-zinc-900 dark:text-zinc-100\",\n                  nameClasses[size],\n                )}\n              >\n                {name}\n              </span>\n            )}\n            {tagline && (\n              <span\n                className={cn(\n                  \"truncate text-zinc-500 dark:text-zinc-400\",\n                  taglineClasses[size],\n                )}\n              >\n                {tagline}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nBrandRoot.displayName = \"Brand\";\n\nexport const Brand = Object.assign(BrandRoot, { Mark: BrandMark });\n"]}
+{"version":3,"sources":["../src/components/Brand/BrandMark.tsx","../src/components/Brand/Brand.tsx"],"names":["forwardRef","jsx"],"mappings":";;;;AAIA,IAAM,WAAA,GAAoF;AAAA,EACxF,EAAA,EAAI,gCAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAkBO,IAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,KAAA,EAAO,IAAA,GAAO,IAAA,EAAM,WAAW,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3D,IAAA,MAAM,OAAA,GAAU,OAAO,IAAA,KAAS,QAAA;AAEhC,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,6BAAA,EAA4B,EAAA;AAAA,QAC5B,aAAA,EAAa,KAAA,CAAM,YAAY,CAAA,GAAI,MAAA,GAAY,IAAA;AAAA,QAC/C,SAAA,EAAW,EAAA;AAAA,UACT,gFAAA;AAAA,UACA,OAAA,GAAU,YAAA,GAAe,WAAA,CAAY,IAAI,CAAA;AAAA;AAAA;AAAA,UAGzC,iDAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,OAAA,GAAU,EAAE,MAAA,EAAQ,MAAM,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,IAAA,CAAK,MAAM,IAAA,GAAO,GAAG,CAAA,EAAG,GAAG,OAAM,GAAI,KAAA;AAAA,QAC5F,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AC/CxB,IAAM,UAAA,GAA8D;AAAA,EAClE,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,WAAA,GAA+D;AAAA,EACnE,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,cAAA,GAAkE;AAAA,EACtE,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAYA,UAAAA;AAAA,EAChB,CAAC,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,IAAA,GAAO,IAAA,EAAM,SAAA,EAAU,EAAG,GAAA,KAAQ;AACxD,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,wBAAA,EAAuB,EAAA;AAAA,QACvB,WAAW,EAAA,CAAG,mBAAA,EAAqB,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAE7D,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQC,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UAAA,CACvC,IAAA,IAAQ,OAAA,qBACR,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,IAAA,oBACCA,GAAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,wIAAA;AAAA,kBACA,YAAY,IAAI;AAAA,iBAClB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YAED,2BACCA,GAAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,0IAAA;AAAA,kBACA,eAAe,IAAI;AAAA,iBACrB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF,CAAA;AAEA,SAAA,CAAU,WAAA,GAAc,OAAA;AAEjB,IAAM,QAAQ,MAAA,CAAO,MAAA,CAAO,WAAW,EAAE,IAAA,EAAM,WAAW","file":"chunk-FWAVMWMP.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BrandMarkProps } from \"./Brand.types\";\n\nconst sizeClasses: Record<Exclude<NonNullable<BrandMarkProps[\"size\"]>, number>, string> = {\n  sm: \"h-6 w-6 rounded-md text-[11px]\",\n  md: \"h-8 w-8 rounded-lg text-sm\",\n  lg: \"h-11 w-11 rounded-xl text-lg\",\n};\n\n/**\n * The square logo tile — a glyph centred in a rounded, coloured square.\n *\n * `Brand` has always taken its mark as a caller-supplied `logo` node, which is\n * exactly why every page that wanted one rebuilt the same square: fixed size,\n * rounded, grid-centred, bold, white, and `shrink-0` so a flex row never\n * squashes it. Four surfaces carried that block inline.\n *\n * ## It ships no brand colour, deliberately\n *\n * The default is a neutral zinc tile. A component library inventing your brand\n * gradient would be wrong, and would be the first thing every consumer had to\n * override — so the FILL is `className`'s job and only the geometry lives here.\n * That is also what the duplicated code actually had in common: each copy\n * already pulled its gradient from a token class and hand-rolled the box.\n */\nexport const BrandMark = forwardRef<HTMLSpanElement, BrandMarkProps>(\n  ({ glyph, size = \"md\", className, style, ...props }, ref) => {\n    const numeric = typeof size === \"number\";\n\n    return (\n      <span\n        ref={ref}\n        data-react-fancy-brand-mark=\"\"\n        aria-hidden={props[\"aria-label\"] ? undefined : true}\n        className={cn(\n          \"grid shrink-0 place-items-center font-bold leading-none text-white select-none\",\n          numeric ? \"rounded-lg\" : sizeClasses[size],\n          // Overridable default: a mark with no `className` still reads as a\n          // mark rather than as an invisible box.\n          \"bg-zinc-900 dark:bg-zinc-100 dark:text-zinc-900\",\n          className,\n        )}\n        style={numeric ? { height: size, width: size, fontSize: Math.round(size * 0.5), ...style } : style}\n        {...props}\n      >\n        {glyph}\n      </span>\n    );\n  },\n);\n\nBrandMark.displayName = \"BrandMark\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { BrandMark } from \"./BrandMark\";\nimport type { BrandProps } from \"./Brand.types\";\n\nconst gapClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"gap-2\",\n  md: \"gap-3\",\n  lg: \"gap-4\",\n};\n\nconst nameClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"text-sm\",\n  md: \"text-base\",\n  lg: \"text-xl\",\n};\n\nconst taglineClasses: Record<NonNullable<BrandProps[\"size\"]>, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n};\n\nconst BrandRoot = forwardRef<HTMLDivElement, BrandProps>(\n  ({ logo, name, tagline, size = \"md\", className }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-brand=\"\"\n        className={cn(\"flex items-center\", gapClasses[size], className)}\n      >\n        {logo && <div className=\"shrink-0\">{logo}</div>}\n        {(name || tagline) && (\n          <div className=\"flex min-w-0 flex-col\">\n            {name && (\n              <span\n                className={cn(\n                  \"truncate font-bold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n                  nameClasses[size],\n                )}\n              >\n                {name}\n              </span>\n            )}\n            {tagline && (\n              <span\n                className={cn(\n                  \"truncate text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n                  taglineClasses[size],\n                )}\n              >\n                {tagline}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nBrandRoot.displayName = \"Brand\";\n\nexport const Brand = Object.assign(BrandRoot, { Mark: BrandMark });\n"]}

package/dist/{chunk-FSRPZYZZ.js → chunk-G35XN5WV.js}

@@ -51,7 +51,7 @@ var Pillbox = forwardRef(
         "data-react-fancy-pillbox": "",
         ref,
         className: cn(
-          "flex flex-wrap items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20",
+          "flex flex-wrap items-center gap-1.5 rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-[color:var(--fancy-focus,var(--color-blue-500))] focus-within:ring-2 focus-within:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-zinc-100 dark:focus-within:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-within:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -60,7 +60,7 @@ var Pillbox = forwardRef(
           items.map((item, i) => /* @__PURE__ */ jsxs(
             "span",
             {
-              className: "inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-0.5 text-sm dark:bg-zinc-800",
+              className: "inline-flex items-center gap-1 rounded-md bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] px-2 py-0.5 text-sm dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
               children: [
                 item,
                 !disabled && /* @__PURE__ */ jsx(
@@ -101,5 +101,5 @@ var Pillbox = forwardRef(
 Pillbox.displayName = "Pillbox";
 
 export { Pillbox };
-//# sourceMappingURL=chunk-FSRPZYZZ.js.map
-//# sourceMappingURL=chunk-FSRPZYZZ.js.map
+//# sourceMappingURL=chunk-G35XN5WV.js.map
+//# sourceMappingURL=chunk-G35XN5WV.js.map

package/dist/chunk-G35XN5WV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pillbox/Pillbox.tsx"],"names":["Pillbox"],"mappings":"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","file":"chunk-G35XN5WV.js","sourcesContent":["import { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { PillboxProps } from \"./Pillbox.types\";\n\nexport const Pillbox = forwardRef<HTMLDivElement, PillboxProps>(\n  function Pillbox(\n    {\n      value: controlledValue,\n      defaultValue = [],\n      onChange,\n      placeholder = \"Type and press Enter...\",\n      maxItems,\n      disabled = false,\n      className,\n    },\n    ref,\n  ) {\n    const [items, setItems] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const [input, setInput] = useState(\"\");\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const addItem = useCallback(\n      (text: string) => {\n        const trimmed = text.trim();\n        if (!trimmed || items.includes(trimmed)) return;\n        if (maxItems && items.length >= maxItems) return;\n        setItems([...items, trimmed]);\n        setInput(\"\");\n      },\n      [items, setItems, maxItems],\n    );\n\n    const removeItem = useCallback(\n      (index: number) => {\n        setItems(items.filter((_, i) => i !== index));\n      },\n      [items, setItems],\n    );\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        addItem(input);\n      } else if (e.key === \"Backspace\" && !input && items.length > 0) {\n        removeItem(items.length - 1);\n      }\n    };\n\n    return (\n      <div\n        data-react-fancy-pillbox=\"\"\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-center gap-1.5 rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 transition-[border-color,box-shadow] duration-150 focus-within:border-[color:var(--fancy-focus,var(--color-blue-500))] focus-within:ring-2 focus-within:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-zinc-100 dark:focus-within:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus-within:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        onClick={() => inputRef.current?.focus()}\n      >\n        {items.map((item, i) => (\n          <span\n            key={`${item}-${i}`}\n            className=\"inline-flex items-center gap-1 rounded-md bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] px-2 py-0.5 text-sm dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n          >\n            {item}\n            {!disabled && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  removeItem(i);\n                }}\n                className=\"text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n                aria-label={`Remove ${item}`}\n              >\n                <X size={12} />\n              </button>\n            )}\n          </span>\n        ))}\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={items.length === 0 ? placeholder : \"\"}\n          disabled={disabled}\n          className=\"min-w-[80px] flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-400\"\n        />\n      </div>\n    );\n  },\n);\n\nPillbox.displayName = \"Pillbox\";\n"]}

package/dist/{chunk-HE3JJXIL.cjs → chunk-G4M3MCJO.cjs}

@@ -29,7 +29,7 @@ function ChatDrawer({
             onClick: () => onTabChange(tab.id),
             className: [
               "group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition",
-              active ? "border-violet-500 bg-violet-500 text-white" : "border-zinc-200 bg-transparent text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
+              active ? "border-violet-500 bg-violet-500 text-white" : "border-[color:var(--fancy-border,var(--color-zinc-200))] bg-transparent text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:border-zinc-300 hover:bg-zinc-50 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
             ].join(" "),
             "aria-pressed": active,
             children: [
@@ -38,7 +38,7 @@ function ChatDrawer({
                 {
                   className: [
                     "inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold",
-                    active ? "bg-white/20 text-white" : "bg-zinc-200 text-zinc-600 group-hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300"
+                    active ? "bg-white/20 text-white" : "bg-[color:var(--fancy-border,var(--color-zinc-200))] text-zinc-600 group-hover:bg-zinc-300 dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:text-zinc-300"
                   ].join(" "),
                   children: number
                 }
@@ -56,7 +56,7 @@ function ChatDrawer({
           onClick: handleToggle,
           "aria-label": open ? "Collapse drawer" : "Expand drawer",
           "aria-expanded": open,
-          className: "ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+          className: "ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-700 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-200",
           children: /* @__PURE__ */ jsxRuntime.jsx(
             chunkQKFOJKVE_cjs.Icon,
             {
@@ -79,5 +79,5 @@ function ChatDrawer({
 }
 
 exports.ChatDrawer = ChatDrawer;
-//# sourceMappingURL=chunk-HE3JJXIL.cjs.map
-//# sourceMappingURL=chunk-HE3JJXIL.cjs.map
+//# sourceMappingURL=chunk-G4M3MCJO.cjs.map
+//# sourceMappingURL=chunk-G4M3MCJO.cjs.map

package/dist/{chunk-HE3JJXIL.cjs.map → chunk-G4M3MCJO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChatDrawer/ChatDrawer.tsx"],"names":["useCallback","jsxs","jsx","Icon"],"mappings":";;;;;;AA+DO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAA,QAAA,GAAW,CAAC,IAAI,CAAA;AAAA,EAClB,CAAA,EAAG,CAAC,QAAA,EAAU,IAAI,CAAC,CAAA;AAEnB,EAAA,uBACEC,eAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uCAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,qCAAA,EACZ,eAAK,GAAA,CAAI,CAAC,KAAK,CAAA,KAAM;AACpB,QAAA,MAAM,MAAA,GAAS,IAAI,EAAA,KAAO,WAAA;AAC1B,QAAA,MAAM,SAAS,GAAA,CAAI,MAAA,KAAW,OAAO,IAAA,GAAO,GAAA,CAAI,UAAU,CAAA,GAAI,CAAA;AAC9D,QAAA,uBACED,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE,CAAA;AAAA,YACjC,SAAA,EAAW;AAAA,cACT,2GAAA;AAAA,cACA,SACI,4CAAA,GACA;AAAA,aACN,CAAE,KAAK,GAAG,CAAA;AAAA,YACV,cAAA,EAAc,MAAA;AAAA,YAEb,QAAA,EAAA;AAAA,cAAA,MAAA,KAAW,IAAA,oBACVC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW;AAAA,oBACT,wFAAA;AAAA,oBACA,SACI,wBAAA,GACA;AAAA,mBACN,CAAE,KAAK,GAAG,CAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,8BAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAA0B,cAAI,KAAA,EAAM;AAAA;AAAA,WAAA;AAAA,UAvB/C,GAAA,CAAI;AAAA,SAwBX;AAAA,MAEJ,CAAC,CAAA,EACH,CAAA;AAAA,sBACAA,cAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,YAAA;AAAA,UACT,YAAA,EAAY,OAAO,iBAAA,GAAoB,eAAA;AAAA,UACvC,eAAA,EAAe,IAAA;AAAA,UACf,SAAA,EAAU,qLAAA;AAAA,UAEV,QAAA,kBAAAA,cAAA;AAAA,YAACC,sBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAO,cAAA,GAAiB,YAAA;AAAA,cAC9B,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AACF,KAAA,EACF,CAAA;AAAA,IAEC,IAAA,oBACCD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,eAAA;AAAA,QACV,KAAA,EAAO,EAAE,SAAA,EAAW,aAAA,EAAc;AAAA,QAEjC;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-HE3JJXIL.cjs","sourcesContent":["import { type ReactNode, useCallback } from \"react\";\nimport { Icon } from \"../Icon\";\n\n/**\n * ChatDrawer — tabbed, collapsible panel that sits *above* a `PromptInput`\n * (via the input's `aboveInput` slot) so the drawer and composer share one\n * rounded shell. Each tab gets a numbered chip and a content panel; only\n * one panel renders at a time.\n *\n *   <PromptInput\n *     aboveInput={\n *       <ChatDrawer\n *         tabs={[\n *           { id: \"files\",   label: \"Files\" },\n *           { id: \"tools\",   label: \"Chat Tools\" },\n *           { id: \"prompts\", label: \"Chat Prompts\" },\n *           { id: \"deal\",    label: \"IBM Analytics Platform\" },\n *         ]}\n *         activeTabId={tab}\n *         onTabChange={setTab}\n *         open={open}\n *         onToggle={setOpen}\n *       >\n *         {tab === \"tools\" && <ToolsGrid />}\n *         {tab === \"deal\"  && <DealCard />}\n *       </ChatDrawer>\n *     }\n *     budgetTokens={200_000}\n *     onSubmit={(text) => send(text)}\n *   />\n *\n * The drawer is purely presentational and slot-driven — you decide what\n * each tab shows. Tab order in the numbered chips is the order you pass.\n */\n\nexport type ChatDrawerTab = {\n  /** Stable id — used as the React key and as `activeTabId`. */\n  id: string;\n  /** Human label rendered on the chip. */\n  label: string;\n  /**\n   * Optional override for the numbered prefix (defaults to position +1).\n   * Set to `null` to hide the number entirely (e.g. for a context-specific\n   * tab like the deal one in the screenshots).\n   */\n  number?: number | null;\n};\n\nexport interface ChatDrawerProps {\n  tabs: ChatDrawerTab[];\n  activeTabId: string;\n  onTabChange: (id: string) => void;\n  /** Body open/closed. Default true. */\n  open?: boolean;\n  /** Called when the chevron is clicked. */\n  onToggle?: (open: boolean) => void;\n  /** Body content for the active tab. */\n  children?: ReactNode;\n  /** Min height of the body when open, in px. Default 140. */\n  minBodyHeight?: number;\n  className?: string;\n}\n\nexport function ChatDrawer({\n  tabs,\n  activeTabId,\n  onTabChange,\n  open = true,\n  onToggle,\n  children,\n  minBodyHeight = 140,\n  className,\n}: ChatDrawerProps) {\n  const handleToggle = useCallback(() => {\n    onToggle?.(!open);\n  }, [onToggle, open]);\n\n  return (\n    <div className={className}>\n      <div className=\"flex items-center gap-1.5 px-2.5 py-2\">\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {tabs.map((tab, i) => {\n            const active = tab.id === activeTabId;\n            const number = tab.number === null ? null : tab.number ?? i + 1;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                onClick={() => onTabChange(tab.id)}\n                className={[\n                  \"group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition\",\n                  active\n                    ? \"border-violet-500 bg-violet-500 text-white\"\n                    : \"border-zinc-200 bg-transparent text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\n                ].join(\" \")}\n                aria-pressed={active}\n              >\n                {number !== null && (\n                  <span\n                    className={[\n                      \"inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold\",\n                      active\n                        ? \"bg-white/20 text-white\"\n                        : \"bg-zinc-200 text-zinc-600 group-hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300\",\n                    ].join(\" \")}\n                  >\n                    {number}\n                  </span>\n                )}\n                <span className=\"truncate max-w-[180px]\">{tab.label}</span>\n              </button>\n            );\n          })}\n        </div>\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={open ? \"Collapse drawer\" : \"Expand drawer\"}\n          aria-expanded={open}\n          className=\"ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200\"\n        >\n          <Icon\n            name={open ? \"chevron-down\" : \"chevron-up\"}\n            className=\"h-3.5 w-3.5\"\n          />\n        </button>\n      </div>\n\n      {open && (\n        <div\n          className=\"px-2.5 pb-2.5\"\n          style={{ minHeight: minBodyHeight }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/ChatDrawer/ChatDrawer.tsx"],"names":["useCallback","jsxs","jsx","Icon"],"mappings":";;;;;;AA+DO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAA,QAAA,GAAW,CAAC,IAAI,CAAA;AAAA,EAClB,CAAA,EAAG,CAAC,QAAA,EAAU,IAAI,CAAC,CAAA;AAEnB,EAAA,uBACEC,eAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uCAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,qCAAA,EACZ,eAAK,GAAA,CAAI,CAAC,KAAK,CAAA,KAAM;AACpB,QAAA,MAAM,MAAA,GAAS,IAAI,EAAA,KAAO,WAAA;AAC1B,QAAA,MAAM,SAAS,GAAA,CAAI,MAAA,KAAW,OAAO,IAAA,GAAO,GAAA,CAAI,UAAU,CAAA,GAAI,CAAA;AAC9D,QAAA,uBACED,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE,CAAA;AAAA,YACjC,SAAA,EAAW;AAAA,cACT,2GAAA;AAAA,cACA,SACI,4CAAA,GACA;AAAA,aACN,CAAE,KAAK,GAAG,CAAA;AAAA,YACV,cAAA,EAAc,MAAA;AAAA,YAEb,QAAA,EAAA;AAAA,cAAA,MAAA,KAAW,IAAA,oBACVC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW;AAAA,oBACT,wFAAA;AAAA,oBACA,SACI,wBAAA,GACA;AAAA,mBACN,CAAE,KAAK,GAAG,CAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,8BAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAA0B,cAAI,KAAA,EAAM;AAAA;AAAA,WAAA;AAAA,UAvB/C,GAAA,CAAI;AAAA,SAwBX;AAAA,MAEJ,CAAC,CAAA,EACH,CAAA;AAAA,sBACAA,cAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,YAAA;AAAA,UACT,YAAA,EAAY,OAAO,iBAAA,GAAoB,eAAA;AAAA,UACvC,eAAA,EAAe,IAAA;AAAA,UACf,SAAA,EAAU,0RAAA;AAAA,UAEV,QAAA,kBAAAA,cAAA;AAAA,YAACC,sBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAO,cAAA,GAAiB,YAAA;AAAA,cAC9B,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AACF,KAAA,EACF,CAAA;AAAA,IAEC,IAAA,oBACCD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,eAAA;AAAA,QACV,KAAA,EAAO,EAAE,SAAA,EAAW,aAAA,EAAc;AAAA,QAEjC;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-G4M3MCJO.cjs","sourcesContent":["import { type ReactNode, useCallback } from \"react\";\nimport { Icon } from \"../Icon\";\n\n/**\n * ChatDrawer — tabbed, collapsible panel that sits *above* a `PromptInput`\n * (via the input's `aboveInput` slot) so the drawer and composer share one\n * rounded shell. Each tab gets a numbered chip and a content panel; only\n * one panel renders at a time.\n *\n *   <PromptInput\n *     aboveInput={\n *       <ChatDrawer\n *         tabs={[\n *           { id: \"files\",   label: \"Files\" },\n *           { id: \"tools\",   label: \"Chat Tools\" },\n *           { id: \"prompts\", label: \"Chat Prompts\" },\n *           { id: \"deal\",    label: \"IBM Analytics Platform\" },\n *         ]}\n *         activeTabId={tab}\n *         onTabChange={setTab}\n *         open={open}\n *         onToggle={setOpen}\n *       >\n *         {tab === \"tools\" && <ToolsGrid />}\n *         {tab === \"deal\"  && <DealCard />}\n *       </ChatDrawer>\n *     }\n *     budgetTokens={200_000}\n *     onSubmit={(text) => send(text)}\n *   />\n *\n * The drawer is purely presentational and slot-driven — you decide what\n * each tab shows. Tab order in the numbered chips is the order you pass.\n */\n\nexport type ChatDrawerTab = {\n  /** Stable id — used as the React key and as `activeTabId`. */\n  id: string;\n  /** Human label rendered on the chip. */\n  label: string;\n  /**\n   * Optional override for the numbered prefix (defaults to position +1).\n   * Set to `null` to hide the number entirely (e.g. for a context-specific\n   * tab like the deal one in the screenshots).\n   */\n  number?: number | null;\n};\n\nexport interface ChatDrawerProps {\n  tabs: ChatDrawerTab[];\n  activeTabId: string;\n  onTabChange: (id: string) => void;\n  /** Body open/closed. Default true. */\n  open?: boolean;\n  /** Called when the chevron is clicked. */\n  onToggle?: (open: boolean) => void;\n  /** Body content for the active tab. */\n  children?: ReactNode;\n  /** Min height of the body when open, in px. Default 140. */\n  minBodyHeight?: number;\n  className?: string;\n}\n\nexport function ChatDrawer({\n  tabs,\n  activeTabId,\n  onTabChange,\n  open = true,\n  onToggle,\n  children,\n  minBodyHeight = 140,\n  className,\n}: ChatDrawerProps) {\n  const handleToggle = useCallback(() => {\n    onToggle?.(!open);\n  }, [onToggle, open]);\n\n  return (\n    <div className={className}>\n      <div className=\"flex items-center gap-1.5 px-2.5 py-2\">\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {tabs.map((tab, i) => {\n            const active = tab.id === activeTabId;\n            const number = tab.number === null ? null : tab.number ?? i + 1;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                onClick={() => onTabChange(tab.id)}\n                className={[\n                  \"group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition\",\n                  active\n                    ? \"border-violet-500 bg-violet-500 text-white\"\n                    : \"border-[color:var(--fancy-border,var(--color-zinc-200))] bg-transparent text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:border-zinc-300 hover:bg-zinc-50 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\n                ].join(\" \")}\n                aria-pressed={active}\n              >\n                {number !== null && (\n                  <span\n                    className={[\n                      \"inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold\",\n                      active\n                        ? \"bg-white/20 text-white\"\n                        : \"bg-[color:var(--fancy-border,var(--color-zinc-200))] text-zinc-600 group-hover:bg-zinc-300 dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:text-zinc-300\",\n                    ].join(\" \")}\n                  >\n                    {number}\n                  </span>\n                )}\n                <span className=\"truncate max-w-[180px]\">{tab.label}</span>\n              </button>\n            );\n          })}\n        </div>\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={open ? \"Collapse drawer\" : \"Expand drawer\"}\n          aria-expanded={open}\n          className=\"ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-700 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-200\"\n        >\n          <Icon\n            name={open ? \"chevron-down\" : \"chevron-up\"}\n            className=\"h-3.5 w-3.5\"\n          />\n        </button>\n      </div>\n\n      {open && (\n        <div\n          className=\"px-2.5 pb-2.5\"\n          style={{ minHeight: minBodyHeight }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-T45XK5GN.cjs → chunk-G5DMYAWL.cjs}

@@ -109,7 +109,7 @@ function validateFolderName(raw, siblings) {
   }
   return null;
 }
-var SEGMENT_CLASS = "shrink-0 rounded text-[13px] text-zinc-500 transition-colors hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300";
+var SEGMENT_CLASS = "shrink-0 rounded text-[13px] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] transition-colors hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]";
 var ACTIVE_SEGMENT_CLASS = "shrink-0 truncate text-[13px] font-medium text-zinc-900 dark:text-white";
 function FileBrowserPathBar({
   editable = true,
@@ -134,7 +134,7 @@ function FileBrowserPathBar({
     {
       "data-react-fancy-file-browser-path": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        "flex items-center gap-1 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
         className
       ),
       children: [
@@ -159,7 +159,7 @@ function FileBrowserPathBar({
             spellCheck: false,
             placeholder,
             "aria-label": "Path",
-            className: "min-w-0 flex-1 rounded-md border border-zinc-300 bg-transparent px-2 py-0.5 font-mono text-xs text-zinc-700 outline-none placeholder:text-zinc-400 focus:border-blue-400 dark:border-zinc-600 dark:text-zinc-300"
+            className: "min-w-0 flex-1 rounded-md border border-zinc-300 bg-transparent px-2 py-0.5 font-mono text-xs text-[color:var(--fancy-text-soft,var(--color-zinc-700))] outline-none placeholder:text-zinc-400 focus:border-blue-400 dark:border-zinc-600 dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
@@ -211,7 +211,7 @@ function FileBrowserPathBar({
             type: "button",
             "aria-label": "Edit path",
             onClick: startEdit,
-            className: "shrink-0 rounded-md p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+            className: "shrink-0 rounded-md p-1 text-zinc-400 transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 13 })
           }
         )
@@ -275,7 +275,7 @@ function FileBrowserNewFolder({ className }) {
         title: `New folder in ${path}`,
         className: chunkZU5Q77OT_cjs.cn(
           "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-zinc-500 transition-colors",
-          "hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+          "hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]",
           className
         ),
         children: [
@@ -321,8 +321,8 @@ function FileBrowserNewFolder({ className }) {
               },
               className: chunkZU5Q77OT_cjs.cn(
                 "w-32 min-w-0 rounded-md border px-1.5 py-0.5 text-xs outline-none",
-                "bg-transparent text-zinc-700 placeholder:text-zinc-400 dark:text-zinc-300",
-                shown ? "border-red-400 dark:border-red-500" : "border-zinc-200 dark:border-zinc-700"
+                "bg-transparent text-[color:var(--fancy-text-soft,var(--color-zinc-700))] placeholder:text-zinc-400 dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]",
+                shown ? "border-red-400 dark:border-red-500" : "border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]"
               )
             }
           ),
@@ -343,7 +343,7 @@ function FileBrowserNewFolder({ className }) {
               type: "button",
               "data-react-fancy-file-browser-new-folder-cancel": "",
               onClick: close,
-              className: "rounded-md px-1.5 py-0.5 text-xs text-zinc-500 transition-colors hover:text-zinc-700 dark:hover:text-zinc-300",
+              className: "rounded-md px-1.5 py-0.5 text-xs text-zinc-500 transition-colors hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]",
               children: "Cancel"
             }
           )
@@ -374,7 +374,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
     {
       "data-react-fancy-file-browser-toolbar": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "flex items-center gap-2 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        "flex items-center gap-2 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
         className
       ),
       children: [
@@ -382,7 +382,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
           "div",
           {
             "data-react-fancy-file-browser-filter": "",
-            className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-zinc-200 px-2 dark:border-zinc-700",
+            className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 13, "aria-hidden": "true", className: "shrink-0 text-zinc-400" }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -394,7 +394,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
                   placeholder: filterPlaceholder,
                   "aria-label": "Filter by name",
                   spellCheck: false,
-                  className: "min-w-0 flex-1 bg-transparent py-1 text-xs text-zinc-700 outline-none placeholder:text-zinc-400 dark:text-zinc-300"
+                  className: "min-w-0 flex-1 bg-transparent py-1 text-xs text-[color:var(--fancy-text-soft,var(--color-zinc-700))] outline-none placeholder:text-zinc-400 dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
                 }
               ),
               filter !== "" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -430,7 +430,7 @@ function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
                   ),
                   className: chunkZU5Q77OT_cjs.cn(
                     "flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs transition-colors",
-                    active ? "bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300"
+                    active ? "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] font-medium text-zinc-900 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
                   ),
                   children: [
                     label,
@@ -497,7 +497,7 @@ function FileBrowserStatusRow({ depth, kind, message, onRetry }) {
             {
               type: "button",
               onClick: onRetry,
-              className: "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+              className: "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-[color:var(--fancy-text-muted,var(--color-zinc-500))] transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-700 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-200",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { size: 11 }),
                 "Retry"
@@ -513,7 +513,7 @@ function FileBrowserStatusRow({ depth, kind, message, onRetry }) {
     {
       role: "none",
       "data-react-fancy-file-browser-status": kind,
-      className: "flex items-center gap-1.5 py-0.5 text-xs text-zinc-400 italic dark:text-zinc-500",
+      className: "flex items-center gap-1.5 py-0.5 text-xs text-[color:var(--fancy-text-faint,var(--color-zinc-400))] italic dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]",
       style: { paddingLeft },
       children: [
         kind === "loading" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "shrink-0 animate-spin", "aria-hidden": "true" }),
@@ -597,7 +597,7 @@ function FileBrowserNode({ entry, depth }) {
             onDoubleClick: handleDoubleClick,
             className: chunkZU5Q77OT_cjs.cn(
               "flex w-full cursor-pointer items-center gap-1 rounded-md py-0.5 pr-2 text-left text-[13px] transition-colors select-none",
-              selected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+              selected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
               entry.disabled && "pointer-events-none opacity-40",
               "group-focus-visible:ring-2 group-focus-visible:ring-blue-500/40 group-focus-visible:ring-inset"
             ),
@@ -622,7 +622,7 @@ function FileBrowserNode({ entry, depth }) {
               ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 shrink-0" }),
               showIcons && (entry.kind === "dir" ? /* @__PURE__ */ jsxRuntime.jsx(FolderIcon, { open: expanded }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { ext })),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
-              entry.kind === "file" && entry.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-zinc-400 tabular-nums dark:text-zinc-500", children: formatFileSize(entry.size) })
+              entry.kind === "file" && entry.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-[color:var(--fancy-text-faint,var(--color-zinc-400))] tabular-nums dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: formatFileSize(entry.size) })
             ]
           }
         ),
@@ -1061,7 +1061,7 @@ function FileBrowserRoot({
     {
       "data-react-fancy-file-browser": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white text-sm dark:border-zinc-700 dark:bg-zinc-900",
+        "flex flex-col overflow-hidden rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] text-sm dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
         className
       ),
       children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1084,5 +1084,5 @@ exports.FileBrowser = FileBrowser;
 exports.FileBrowserNewFolder = FileBrowserNewFolder;
 exports.useFileBrowser = useFileBrowser;
 exports.validateFolderName = validateFolderName;
-//# sourceMappingURL=chunk-T45XK5GN.cjs.map
-//# sourceMappingURL=chunk-T45XK5GN.cjs.map
+//# sourceMappingURL=chunk-G5DMYAWL.cjs.map
+//# sourceMappingURL=chunk-G5DMYAWL.cjs.map