@particle-academy/react-fancy 5.12.0 → 5.13.1

package/dist/chunk-DOSSIU6S.cjs

@@ -0,0 +1,162 @@
+'use strict';
+
+var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DEFAULT_COLOR = "#3b82f6";
+var SWATCH_SIZES = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10"
+};
+var TEXT_SIZES = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var ColorPicker = react.forwardRef(
+  ({
+    value,
+    defaultValue = DEFAULT_COLOR,
+    onChange,
+    presets,
+    size = "md",
+    variant = "outline",
+    disabled = false,
+    className,
+    mode
+  }, ref) => {
+    const [color, setColor] = chunkOUOEQZHY_cjs.useControllableState(
+      value,
+      defaultValue,
+      onChange
+    );
+    const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+    const inputRef = react.useRef(null);
+    const datalistId = react.useId();
+    const handleChange = (e) => {
+      setColor(e.target.value);
+    };
+    const handleSwatchClick = () => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    };
+    if (!showControl) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-color-picker": "",
+          "data-mode": "view",
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: chunk3Z6ALUWP_cjs.cn(
+            "inline-flex items-center gap-2",
+            interactive && "cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk3Z6ALUWP_cjs.cn(
+                  "shrink-0 rounded-full",
+                  SWATCH_SIZES[size],
+                  variant === "outline" && "ring-1 ring-zinc-300 dark:ring-zinc-600"
+                ),
+                style: { backgroundColor: color },
+                "aria-label": `Color: ${color}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk3Z6ALUWP_cjs.cn(
+                  "select-all font-mono uppercase",
+                  TEXT_SIZES[size],
+                  "text-zinc-700 dark:text-zinc-300"
+                ),
+                children: color.toUpperCase()
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-color-picker": "",
+        className: chunk3Z6ALUWP_cjs.cn("inline-flex items-center gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              autoFocus: interactive,
+              onClick: handleSwatchClick,
+              className: chunk3Z6ALUWP_cjs.cn(
+                "relative shrink-0 rounded-full transition-shadow",
+                SWATCH_SIZES[size],
+                variant === "outline" && "ring-1 ring-zinc-300 dark:ring-zinc-600",
+                disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:ring-2 hover:ring-zinc-400 dark:hover:ring-zinc-500"
+              ),
+              style: { backgroundColor: color },
+              "aria-label": `Selected color: ${color}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "color",
+                  value: color,
+                  onChange: handleChange,
+                  disabled,
+                  className: "absolute inset-0 h-full w-full cursor-pointer opacity-0",
+                  tabIndex: -1,
+                  list: presets ? datalistId : void 0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "select-all font-mono uppercase",
+                TEXT_SIZES[size],
+                "text-zinc-700 dark:text-zinc-300",
+                disabled && "opacity-50"
+              ),
+              children: color.toUpperCase()
+            }
+          ),
+          presets && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: datalistId, children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: preset }, preset)) })
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=chunk-DOSSIU6S.cjs.map
+//# sourceMappingURL=chunk-DOSSIU6S.cjs.map

package/dist/chunk-DOSSIU6S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["forwardRef","useControllableState","useFieldMode","useInlineEdit","useRef","useId","jsxs","cn","jsx"],"mappings":"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","file":"chunk-DOSSIU6S.cjs","sourcesContent":["import { forwardRef, useId, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { ColorPickerProps } from \"./ColorPicker.types\";\n\nconst DEFAULT_COLOR = \"#3b82f6\";\n\nconst SWATCH_SIZES = {\n  sm: \"h-6 w-6\",\n  md: \"h-8 w-8\",\n  lg: \"h-10 w-10\",\n} as const;\n\nconst TEXT_SIZES = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (\n    {\n      value,\n      defaultValue = DEFAULT_COLOR,\n      onChange,\n      presets,\n      size = \"md\",\n      variant = \"outline\",\n      disabled = false,\n      className,\n      mode,\n    },\n    ref,\n  ) => {\n    const [color, setColor] = useControllableState(\n      value,\n      defaultValue,\n      onChange,\n    );\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const datalistId = useId();\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setColor(e.target.value);\n    };\n\n    const handleSwatchClick = () => {\n      if (!disabled) {\n        inputRef.current?.click();\n      }\n    };\n\n    if (!showControl) {\n      return (\n        <div\n          ref={ref}\n          data-react-fancy-color-picker=\"\"\n          data-mode=\"view\"\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          title={interactive ? \"Click to edit\" : undefined}\n          onClick={interactive ? enterEdit : undefined}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    enterEdit();\n                  }\n                }\n              : undefined\n          }\n          className={cn(\n            \"inline-flex items-center gap-2\",\n            interactive &&\n              \"cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40\",\n            className,\n          )}\n        >\n          <span\n            className={cn(\n              \"shrink-0 rounded-full\",\n              SWATCH_SIZES[size],\n              variant === \"outline\" && \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            )}\n            style={{ backgroundColor: color }}\n            aria-label={`Color: ${color}`}\n          />\n          <span\n            className={cn(\n              \"select-all font-mono uppercase\",\n              TEXT_SIZES[size],\n              \"text-zinc-700 dark:text-zinc-300\",\n            )}\n          >\n            {color.toUpperCase()}\n          </span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-color-picker=\"\"\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n      >\n        <button\n          type=\"button\"\n          disabled={disabled}\n          autoFocus={interactive}\n          onClick={handleSwatchClick}\n          className={cn(\n            \"relative shrink-0 rounded-full transition-shadow\",\n            SWATCH_SIZES[size],\n            variant === \"outline\" &&\n              \"ring-1 ring-zinc-300 dark:ring-zinc-600\",\n            disabled\n              ? \"cursor-not-allowed opacity-50\"\n              : \"cursor-pointer hover:ring-2 hover:ring-zinc-400 dark:hover:ring-zinc-500\",\n          )}\n          style={{ backgroundColor: color }}\n          aria-label={`Selected color: ${color}`}\n        >\n          <input\n            ref={inputRef}\n            type=\"color\"\n            value={color}\n            onChange={handleChange}\n            disabled={disabled}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            tabIndex={-1}\n            list={presets ? datalistId : undefined}\n          />\n        </button>\n\n        <span\n          className={cn(\n            \"select-all font-mono uppercase\",\n            TEXT_SIZES[size],\n            \"text-zinc-700 dark:text-zinc-300\",\n            disabled && \"opacity-50\",\n          )}\n        >\n          {color.toUpperCase()}\n        </span>\n\n        {presets && (\n          <datalist id={datalistId}>\n            {presets.map((preset) => (\n              <option key={preset} value={preset} />\n            ))}\n          </datalist>\n        )}\n      </div>\n    );\n  },\n);\n\nColorPicker.displayName = \"ColorPicker\";\n"]}

package/dist/chunk-DSUHZO6T.js

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=chunk-DSUHZO6T.js.map
+//# sourceMappingURL=chunk-DSUHZO6T.js.map

package/dist/chunk-DSUHZO6T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-DSUHZO6T.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/chunk-DTPGJNOI.js

@@ -0,0 +1,204 @@
+import { useFocusTrap } from './chunk-5U2DZ7AV.js';
+import { useAnimation } from './chunk-CHADHN6M.js';
+import { Portal } from './chunk-WHEXTDPV.js';
+import { useEscapeKey } from './chunk-JXE5XID6.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import { Search } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CommandContext = createContext(null);
+function useCommand() {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error(
+      "Command compound components must be used within <Command>"
+    );
+  }
+  return ctx;
+}
+function CommandInput({
+  placeholder = "Type a command or search...",
+  className
+}) {
+  const { query, setQuery } = useCommand();
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-command-input": "", className: "flex items-center border-b border-zinc-200 px-4 dark:border-zinc-700", children: [
+    /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-zinc-400" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        placeholder,
+        className: cn(
+          "flex-1 bg-transparent px-3 py-3 text-sm outline-none placeholder:text-zinc-400",
+          className
+        ),
+        autoFocus: true
+      }
+    )
+  ] });
+}
+CommandInput.displayName = "CommandInput";
+function CommandList({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-command-list": "",
+      role: "listbox",
+      className: cn("max-h-72 overflow-y-auto p-2", className),
+      children
+    }
+  );
+}
+CommandList.displayName = "CommandList";
+function CommandItem({
+  children,
+  value,
+  onSelect,
+  className
+}) {
+  const { query, close } = useCommand();
+  const text = value ?? (typeof children === "string" ? children : "");
+  if (query && !text.toLowerCase().includes(query.toLowerCase())) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-react-fancy-command-item": "",
+      type: "button",
+      role: "option",
+      className: cn(
+        "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors",
+        "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+        className
+      ),
+      onClick: () => {
+        onSelect?.();
+        close();
+      },
+      children
+    }
+  );
+}
+CommandItem.displayName = "CommandItem";
+function CommandGroup({
+  children,
+  heading,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-command-group": "", role: "group", className: cn("py-1", className), children: [
+    heading && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs font-medium text-zinc-400", children: heading }),
+    children
+  ] });
+}
+CommandGroup.displayName = "CommandGroup";
+function CommandEmpty({
+  children = "No results found.",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-command-empty": "",
+      className: cn(
+        "py-6 text-center text-sm text-zinc-500 dark:text-zinc-400",
+        className
+      ),
+      children
+    }
+  );
+}
+CommandEmpty.displayName = "CommandEmpty";
+function CommandRoot({ children, open, onClose, className }) {
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const panelRef = useRef(null);
+  const close = useCallback(() => {
+    onClose();
+    setQuery("");
+    setActiveIndex(-1);
+  }, [onClose]);
+  useEscapeKey(close, open);
+  useFocusTrap(panelRef, open);
+  useEffect(() => {
+    if (open) {
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = original;
+      };
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      const items = panelRef.current?.querySelectorAll(
+        '[role="option"]'
+      );
+      if (!items?.length) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
+        setActiveIndex(next);
+        items[next]?.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+        setActiveIndex(prev);
+        items[prev]?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, activeIndex]);
+  const { mounted, className: animClass, ref: animRef } = useAnimation({
+    open,
+    enterClass: "fancy-slide-up",
+    exitClass: "fancy-fade-out"
+  });
+  const ctx = useMemo(
+    () => ({ open, close, query, setQuery, activeIndex, setActiveIndex }),
+    [open, close, query, activeIndex]
+  );
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(CommandContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          panelRef.current = node;
+          animRef.current = node;
+        },
+        "data-react-fancy-command": "",
+        className: cn(
+          "relative w-full max-w-lg overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-700 dark:bg-zinc-900",
+          animClass,
+          className
+        ),
+        children
+      }
+    )
+  ] }) }) });
+}
+var Command = Object.assign(CommandRoot, {
+  Input: CommandInput,
+  List: CommandList,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Empty: CommandEmpty
+});
+
+export { Command, useCommand };
+//# sourceMappingURL=chunk-DTPGJNOI.js.map
+//# sourceMappingURL=chunk-DTPGJNOI.js.map

package/dist/chunk-DTPGJNOI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Command/Command.context.ts","../src/components/Command/CommandInput.tsx","../src/components/Command/CommandList.tsx","../src/components/Command/CommandItem.tsx","../src/components/Command/CommandGroup.tsx","../src/components/Command/CommandEmpty.tsx","../src/components/Command/Command.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-DTPGJNOI.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CommandContextValue } from \"./Command.types\";\n\nexport const CommandContext = createContext<CommandContextValue | null>(null);\n\nexport function useCommand(): CommandContextValue {\n  const ctx = useContext(CommandContext);\n  if (!ctx) {\n    throw new Error(\n      \"Command compound components must be used within <Command>\",\n    );\n  }\n  return ctx;\n}\n","import { Search } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCommand } from \"./Command.context\";\nimport type { CommandInputProps } from \"./Command.types\";\n\nexport function CommandInput({\n  placeholder = \"Type a command or search...\",\n  className,\n}: CommandInputProps) {\n  const { query, setQuery } = useCommand();\n\n  return (\n    <div data-react-fancy-command-input=\"\" className=\"flex items-center border-b border-zinc-200 px-4 dark:border-zinc-700\">\n      <Search size={16} className=\"shrink-0 text-zinc-400\" />\n      <input\n        type=\"text\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder={placeholder}\n        className={cn(\n          \"flex-1 bg-transparent px-3 py-3 text-sm outline-none placeholder:text-zinc-400\",\n          className,\n        )}\n        autoFocus\n      />\n    </div>\n  );\n}\n\nCommandInput.displayName = \"CommandInput\";\n","import { cn } from \"../../utils/cn\";\nimport type { CommandListProps } from \"./Command.types\";\n\nexport function CommandList({ children, className }: CommandListProps) {\n  return (\n    <div\n      data-react-fancy-command-list=\"\"\n      role=\"listbox\"\n      className={cn(\"max-h-72 overflow-y-auto p-2\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nCommandList.displayName = \"CommandList\";\n","import { cn } from \"../../utils/cn\";\nimport { useCommand } from \"./Command.context\";\nimport type { CommandItemProps } from \"./Command.types\";\n\nexport function CommandItem({\n  children,\n  value,\n  onSelect,\n  className,\n}: CommandItemProps) {\n  const { query, close } = useCommand();\n\n  // Filter by query\n  const text = value ?? (typeof children === \"string\" ? children : \"\");\n  if (query && !text.toLowerCase().includes(query.toLowerCase())) {\n    return null;\n  }\n\n  return (\n    <button\n      data-react-fancy-command-item=\"\"\n      type=\"button\"\n      role=\"option\"\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n        className,\n      )}\n      onClick={() => {\n        onSelect?.();\n        close();\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nCommandItem.displayName = \"CommandItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { CommandGroupProps } from \"./Command.types\";\n\nexport function CommandGroup({\n  children,\n  heading,\n  className,\n}: CommandGroupProps) {\n  return (\n    <div data-react-fancy-command-group=\"\" role=\"group\" className={cn(\"py-1\", className)}>\n      {heading && (\n        <div className=\"px-3 py-1.5 text-xs font-medium text-zinc-400\">\n          {heading}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nCommandGroup.displayName = \"CommandGroup\";\n","import { cn } from \"../../utils/cn\";\nimport type { CommandEmptyProps } from \"./Command.types\";\n\nexport function CommandEmpty({\n  children = \"No results found.\",\n  className,\n}: CommandEmptyProps) {\n  return (\n    <div\n      data-react-fancy-command-empty=\"\"\n      className={cn(\n        \"py-6 text-center text-sm text-zinc-500 dark:text-zinc-400\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nCommandEmpty.displayName = \"CommandEmpty\";\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { CommandContext } from \"./Command.context\";\nimport { CommandInput } from \"./CommandInput\";\nimport { CommandList } from \"./CommandList\";\nimport { CommandItem } from \"./CommandItem\";\nimport { CommandGroup } from \"./CommandGroup\";\nimport { CommandEmpty } from \"./CommandEmpty\";\nimport { useFocusTrap } from \"../../hooks/use-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { CommandProps } from \"./Command.types\";\n\nfunction CommandRoot({ children, open, onClose, className }: CommandProps) {\n  const [query, setQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const close = useCallback(() => {\n    onClose();\n    setQuery(\"\");\n    setActiveIndex(-1);\n  }, [onClose]);\n\n  useEscapeKey(close, open);\n  useFocusTrap(panelRef, open);\n\n  // Cmd+K global shortcut is handled by the consumer\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  // Keyboard navigation\n  useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = panelRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"option\"]',\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]);\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(\n    () => ({ open, close, query, setQuery, activeIndex, setActiveIndex }),\n    [open, close, query, activeIndex],\n  );\n\n  if (!mounted) return null;\n\n  return (\n    <CommandContext.Provider value={ctx}>\n      <Portal>\n        <div className=\"fixed inset-0 z-50 flex items-start justify-center pt-[20vh]\">\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={close}\n            aria-hidden=\"true\"\n          />\n          <div\n            ref={(node) => {\n              panelRef.current = node;\n              (animRef as React.MutableRefObject<HTMLElement | null>).current =\n                node;\n            }}\n            data-react-fancy-command=\"\"\n            className={cn(\n              \"relative w-full max-w-lg overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-700 dark:bg-zinc-900\",\n              animClass,\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </Portal>\n    </CommandContext.Provider>\n  );\n}\n\nexport const Command = Object.assign(CommandRoot, {\n  Input: CommandInput,\n  List: CommandList,\n  Item: CommandItem,\n  Group: CommandGroup,\n  Empty: CommandEmpty,\n});\n"]}

package/dist/chunk-DV4IMAQW.js

@@ -0,0 +1,100 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var FauxClient = forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const viewportRef = useRef(null);
+    const stageRef = useRef(null);
+    const [s, setS] = useState(typeof scale === "number" ? scale : 1);
+    const [contentHeight, setContentHeight] = useState(void 0);
+    useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
+        const naturalHeight = stage.offsetHeight;
+        setS(next);
+        setContentHeight(naturalHeight * next);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-faux-client": "",
+        className: cn(
+          "overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: cn("relative overflow-hidden", bodyClassName),
+              style: scaled ? { height: contentHeight } : void 0,
+              children: scaled ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: stageRef,
+                  className: "absolute left-0 top-0 origin-top-left",
+                  style: { width, transform: `scale(${s})` },
+                  children
+                }
+              ) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
+
+export { FauxClient };
+//# sourceMappingURL=chunk-DV4IMAQW.js.map
+//# sourceMappingURL=chunk-DV4IMAQW.js.map

package/dist/chunk-DV4IMAQW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":[],"mappings":"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","file":"chunk-DV4IMAQW.js","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { FauxClientProps } from \"./FauxClient.types\";\n\nconst DOT_COLORS = [\"bg-rose-300\", \"bg-amber-300\", \"bg-green-300\"];\n\n/**\n * A frame that mimics a browser window or device, rendering **real UI** inside.\n * With a logical `width` + `scale=\"fit\"` it renders a full-size page/app and\n * scales it down to fit any container (live thumbnails, device mockups) — the\n * content is real and interactive, just zoomed.\n *\n * Omit `width` for chrome around natural-size content (e.g. a code/preview card).\n */\nexport const FauxClient = forwardRef<HTMLDivElement, FauxClientProps>(\n  (\n    {\n      variant = \"browser\",\n      url,\n      meta,\n      dots = true,\n      width,\n      scale = \"fit\",\n      className,\n      barClassName,\n      bodyClassName,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const scaled = typeof width === \"number\";\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const stageRef = useRef<HTMLDivElement>(null);\n    const [s, setS] = useState(typeof scale === \"number\" ? scale : 1);\n    const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n    useLayoutEffect(() => {\n      if (!scaled) return;\n      const viewport = viewportRef.current;\n      const stage = stageRef.current;\n      if (!viewport || !stage) return;\n      if (typeof ResizeObserver === \"undefined\") return;\n\n      const measure = () => {\n        const avail = viewport.clientWidth;\n        const next = scale === \"fit\" ? (width && width > 0 ? avail / width : 1) : scale;\n        // offsetHeight is the pre-transform layout height (CSS transforms don't affect it).\n        const naturalHeight = stage.offsetHeight;\n        setS(next);\n        setContentHeight(naturalHeight * next);\n      };\n\n      measure();\n      const ro = new ResizeObserver(measure);\n      ro.observe(viewport);\n      ro.observe(stage);\n      return () => ro.disconnect();\n    }, [scaled, scale, width]);\n\n    const isBrowser = variant === \"browser\";\n    const isDevice = variant === \"device\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-faux-client=\"\"\n        className={cn(\n          \"overflow-hidden bg-white dark:bg-zinc-900\",\n          isBrowser && \"rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800\",\n          isDevice && \"rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700\",\n          variant === \"bare\" && \"rounded-lg border border-zinc-200 dark:border-zinc-800\",\n          className,\n        )}\n        {...rest}\n      >\n        {isBrowser && (\n          <div\n            className={cn(\n              \"flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400\",\n              barClassName,\n            )}\n          >\n            {dots && (\n              <div className=\"mr-1.5 flex gap-[5px]\">\n                {DOT_COLORS.map((color, i) => (\n                  <span key={i} className={cn(\"h-[9px] w-[9px] rounded-full\", color)} />\n                ))}\n              </div>\n            )}\n            {url != null && <span className=\"min-w-0 flex-1 truncate\">{url}</span>}\n            {meta != null && <span className=\"shrink-0 text-zinc-400 dark:text-zinc-500\">{meta}</span>}\n          </div>\n        )}\n\n        <div\n          ref={viewportRef}\n          className={cn(\"relative overflow-hidden\", bodyClassName)}\n          style={scaled ? { height: contentHeight } : undefined}\n        >\n          {scaled ? (\n            <div\n              ref={stageRef}\n              className=\"absolute left-0 top-0 origin-top-left\"\n              style={{ width, transform: `scale(${s})` }}\n            >\n              {children}\n            </div>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nFauxClient.displayName = \"FauxClient\";\n"]}

package/dist/chunk-DWRMC2FN.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  sm: "h-6 w-6 rounded-md text-[11px]",
+  md: "h-8 w-8 rounded-lg text-sm",
+  lg: "h-11 w-11 rounded-xl text-lg"
+};
+var BrandMark = react.forwardRef(
+  ({ glyph, size = "md", className, style, ...props }, ref) => {
+    const numeric = typeof size === "number";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-react-fancy-brand-mark": "",
+        "aria-hidden": props["aria-label"] ? void 0 : true,
+        className: chunk3Z6ALUWP_cjs.cn(
+          "grid shrink-0 place-items-center font-bold leading-none text-white select-none",
+          numeric ? "rounded-lg" : sizeClasses[size],
+          // Overridable default: a mark with no `className` still reads as a
+          // mark rather than as an invisible box.
+          "bg-zinc-900 dark:bg-zinc-100 dark:text-zinc-900",
+          className
+        ),
+        style: numeric ? { height: size, width: size, fontSize: Math.round(size * 0.5), ...style } : style,
+        ...props,
+        children: glyph
+      }
+    );
+  }
+);
+BrandMark.displayName = "BrandMark";
+var gapClasses = {
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+var nameClasses = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-xl"
+};
+var taglineClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var BrandRoot = react.forwardRef(
+  ({ logo, name, tagline, size = "md", className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-brand": "",
+        className: chunk3Z6ALUWP_cjs.cn("flex items-center", gapClasses[size], className),
+        children: [
+          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: logo }),
+          (name || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            name && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk3Z6ALUWP_cjs.cn(
+                  "truncate font-bold text-zinc-900 dark:text-zinc-100",
+                  nameClasses[size]
+                ),
+                children: name
+              }
+            ),
+            tagline && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk3Z6ALUWP_cjs.cn(
+                  "truncate text-zinc-500 dark:text-zinc-400",
+                  taglineClasses[size]
+                ),
+                children: tagline
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+BrandRoot.displayName = "Brand";
+var Brand = Object.assign(BrandRoot, { Mark: BrandMark });
+
+exports.Brand = Brand;
+exports.BrandMark = BrandMark;
+//# sourceMappingURL=chunk-DWRMC2FN.cjs.map
+//# sourceMappingURL=chunk-DWRMC2FN.cjs.map

package/dist/chunk-DWRMC2FN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Brand/BrandMark.tsx","../src/components/Brand/Brand.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":"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","file":"chunk-DWRMC2FN.cjs","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"]}