@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-6GC5DMOK.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
+var chunkRXDRYWVD_cjs = require('./chunk-RXDRYWVD.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function BreadcrumbsItem({
+  children,
+  href,
+  as: As,
+  active = false,
+  onClick,
+  className,
+  ...rest
+}) {
+  const baseClass = chunk3Z6ALUWP_cjs.cn(
+    "text-sm",
+    active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300",
+    className
+  );
+  if ((href || As) && !active) {
+    const Link = As ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        "data-react-fancy-breadcrumbs-item": "",
+        ...href ? { href } : {},
+        onClick,
+        className: baseClass,
+        ...rest,
+        children
+      }
+    );
+  }
+  if (onClick && !active) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-react-fancy-breadcrumbs-item": "",
+        onClick,
+        className: chunk3Z6ALUWP_cjs.cn(baseClass, "cursor-pointer border-0 bg-transparent p-0"),
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-breadcrumbs-item": "", className: baseClass, "aria-current": active ? "page" : void 0, ...rest, children });
+}
+BreadcrumbsItem.displayName = "BreadcrumbsItem";
+function BreadcrumbsDropdown({ items, activeLabel }) {
+  const [open, setOpen] = react.useState(false);
+  const ref = react.useRef(null);
+  chunk57FQGQJK_cjs.useOutsideClick(ref, () => setOpen(false), open);
+  chunkRXDRYWVD_cjs.useEscapeKey(() => setOpen(false), open);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-breadcrumbs-dropdown": "", className: "relative flex md:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
+        children: [
+          activeLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, className: chunk3Z6ALUWP_cjs.cn("transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children: items.map((item, i) => {
+      const cls = chunk3Z6ALUWP_cjs.cn(
+        "block w-full px-3 py-1.5 text-left text-sm",
+        item.active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+      );
+      if (item.href && !item.active) {
+        return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, onClick: () => setOpen(false), children: item.label }, i);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls, children: item.label }, i);
+    }) })
+  ] });
+}
+BreadcrumbsDropdown.displayName = "BreadcrumbsDropdown";
+function BreadcrumbsRoot({
+  children,
+  separator,
+  shrink,
+  className
+}) {
+  const items = react.Children.toArray(children);
+  const [expanded, setExpanded] = react.useState(false);
+  const sep = separator ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 12, className: "text-zinc-400" });
+  const lastItem = items[items.length - 1];
+  const dropdownItems = items.map((child) => {
+    const el = child;
+    return {
+      label: el.props?.children,
+      href: el.props?.href,
+      active: el.props?.active
+    };
+  });
+  const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? "Menu";
+  const showShrunk = shrink && !expanded && items.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        "data-react-fancy-breadcrumbs": "",
+        "aria-label": "Breadcrumb",
+        className: chunk3Z6ALUWP_cjs.cn("hidden items-center gap-2 md:flex", className),
+        onMouseLeave: () => shrink && setExpanded(false),
+        children: showShrunk ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded(true),
+              onMouseEnter: () => setExpanded(true),
+              className: "text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+              children: "..."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: sep }),
+          lastItem
+        ] }) : items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: sep }),
+          child
+        ] }, i))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbsDropdown, { items: dropdownItems, activeLabel })
+  ] });
+}
+var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Item: BreadcrumbsItem
+});
+
+exports.Breadcrumbs = Breadcrumbs;
+//# sourceMappingURL=chunk-6GC5DMOK.cjs.map
+//# sourceMappingURL=chunk-6GC5DMOK.cjs.map

package/dist/chunk-6GC5DMOK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["cn","jsx","useState","useRef","useOutsideClick","useEscapeKey","jsxs","ChevronDown","Children","ChevronRight","Fragment"],"mappings":"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","file":"chunk-6GC5DMOK.cjs","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n  children,\n  href,\n  as: As,\n  active = false,\n  onClick,\n  className,\n  ...rest\n}: BreadcrumbsItemProps) {\n  const baseClass = cn(\n    \"text-sm\",\n    active\n      ? \"font-medium text-zinc-900 dark:text-white\"\n      : \"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\n    className,\n  );\n\n  // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n  // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n  if ((href || As) && !active) {\n    const Link = (As ?? \"a\") as ElementType;\n\n    return (\n      <Link\n        data-react-fancy-breadcrumbs-item=\"\"\n        {...(href ? { href } : {})}\n        onClick={onClick}\n        className={baseClass}\n        {...rest}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  // A crumb that navigates through a callback rather than a URL. Controlled\n  // components own their navigation and have no href to give — a repository\n  // browser walking directories, a wizard stepping back — and until this\n  // existed the only way to make such a crumb clickable was to nest a button\n  // inside the span below, which is interactive content inside a non-\n  // interactive element.\n  if (onClick && !active) {\n    return (\n      <button\n        type=\"button\"\n        data-react-fancy-breadcrumbs-item=\"\"\n        onClick={onClick}\n        className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  return (\n    <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n      {children}\n    </span>\n  );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n  label: ReactNode;\n  href?: string;\n  active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n  items: BreadcrumbsDropdownItem[];\n  activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useOutsideClick(ref, () => setOpen(false), open);\n  useEscapeKey(() => setOpen(false), open);\n\n  return (\n    <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800\"\n      >\n        {activeLabel}\n        <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n      </button>\n      {open && (\n        <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\">\n          {items.map((item, i) => {\n            const cls = cn(\n              \"block w-full px-3 py-1.5 text-left text-sm\",\n              item.active\n                ? \"font-medium text-zinc-900 dark:text-white\"\n                : \"text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\",\n            );\n\n            if (item.href && !item.active) {\n              return (\n                <a key={i} href={item.href} className={cls} onClick={() => setOpen(false)}>\n                  {item.label}\n                </a>\n              );\n            }\n\n            return (\n              <span key={i} className={cls}>\n                {item.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n  children,\n  separator,\n  shrink,\n  className,\n}: BreadcrumbsProps) {\n  const items = Children.toArray(children);\n  const [expanded, setExpanded] = useState(false);\n\n  const sep = separator ?? (\n    <ChevronRight size={12} className=\"text-zinc-400\" />\n  );\n\n  const lastItem = items[items.length - 1];\n\n  // Extract info from children for mobile dropdown\n  const dropdownItems = items.map((child) => {\n    const el = child as ReactElement<BreadcrumbsItemProps>;\n    return {\n      label: el.props?.children,\n      href: el.props?.href,\n      active: el.props?.active,\n    };\n  });\n\n  const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n  const showShrunk = shrink && !expanded && items.length > 1;\n\n  return (\n    <>\n      {/* Desktop trail */}\n      <nav\n        data-react-fancy-breadcrumbs=\"\"\n        aria-label=\"Breadcrumb\"\n        className={cn(\"hidden items-center gap-2 md:flex\", className)}\n        onMouseLeave={() => shrink && setExpanded(false)}\n      >\n        {showShrunk ? (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setExpanded(true)}\n              onMouseEnter={() => setExpanded(true)}\n              className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n            >\n              ...\n            </button>\n            <span aria-hidden=\"true\">{sep}</span>\n            {lastItem}\n          </>\n        ) : (\n          items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n              {child}\n            </Fragment>\n          ))\n        )}\n      </nav>\n\n      {/* Mobile dropdown */}\n      <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n    </>\n  );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n});\n"]}

package/dist/chunk-6H6OYLMJ.js

@@ -0,0 +1,105 @@
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Pillbox = forwardRef(
+  function Pillbox2({
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    placeholder = "Type and press Enter...",
+    maxItems,
+    disabled = false,
+    className
+  }, ref) {
+    const [items, setItems] = useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const [input, setInput] = useState("");
+    const inputRef = useRef(null);
+    const addItem = useCallback(
+      (text) => {
+        const trimmed = text.trim();
+        if (!trimmed || items.includes(trimmed)) return;
+        if (maxItems && items.length >= maxItems) return;
+        setItems([...items, trimmed]);
+        setInput("");
+      },
+      [items, setItems, maxItems]
+    );
+    const removeItem = useCallback(
+      (index) => {
+        setItems(items.filter((_, i) => i !== index));
+      },
+      [items, setItems]
+    );
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addItem(input);
+      } else if (e.key === "Backspace" && !input && items.length > 0) {
+        removeItem(items.length - 1);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "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",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          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",
+              children: [
+                item,
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeItem(i);
+                    },
+                    className: "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+                    "aria-label": `Remove ${item}`,
+                    children: /* @__PURE__ */ jsx(X, { size: 12 })
+                  }
+                )
+              ]
+            },
+            `${item}-${i}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: items.length === 0 ? placeholder : "",
+              disabled,
+              className: "min-w-[80px] flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-400"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pillbox.displayName = "Pillbox";
+
+export { Pillbox };
+//# sourceMappingURL=chunk-6H6OYLMJ.js.map
+//# sourceMappingURL=chunk-6H6OYLMJ.js.map

package/dist/chunk-6H6OYLMJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pillbox/Pillbox.tsx"],"names":["Pillbox"],"mappings":";;;;;;AAMO,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP;AAAA,IACE,KAAA,EAAO,eAAA;AAAA,IACP,eAAe,EAAC;AAAA,IAChB,QAAA;AAAA,IACA,WAAA,GAAc,yBAAA;AAAA,IACd,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,oBAAA;AAAA,MACxB,eAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,EAAE,CAAA;AACrC,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,IAAA,MAAM,OAAA,GAAU,WAAA;AAAA,MACd,CAAC,IAAA,KAAiB;AAChB,QAAA,MAAM,OAAA,GAAU,KAAK,IAAA,EAAK;AAC1B,QAAA,IAAI,CAAC,OAAA,IAAW,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,EAAG;AACzC,QAAA,IAAI,QAAA,IAAY,KAAA,CAAM,MAAA,IAAU,QAAA,EAAU;AAC1C,QAAA,QAAA,CAAS,CAAC,GAAG,KAAA,EAAO,OAAO,CAAC,CAAA;AAC5B,QAAA,QAAA,CAAS,EAAE,CAAA;AAAA,MACb,CAAA;AAAA,MACA,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ;AAAA,KAC5B;AAEA,IAAA,MAAM,UAAA,GAAa,WAAA;AAAA,MACjB,CAAC,KAAA,KAAkB;AACjB,QAAA,QAAA,CAAS,MAAM,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,KAAM,KAAK,CAAC,CAAA;AAAA,MAC9C,CAAA;AAAA,MACA,CAAC,OAAO,QAAQ;AAAA,KAClB;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA6C;AAClE,MAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf,CAAA,MAAA,IAAW,EAAE,GAAA,KAAQ,WAAA,IAAe,CAAC,KAAA,IAAS,KAAA,CAAM,SAAS,CAAA,EAAG;AAC9D,QAAA,UAAA,CAAW,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA,MAC7B;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,0BAAA,EAAyB,EAAA;AAAA,QACzB,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,0VAAA;AAAA,UACA,QAAA,IAAY,+BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA,OAAA,EAAS,MAAM,QAAA,CAAS,OAAA,EAAS,KAAA,EAAM;AAAA,QAEtC,QAAA,EAAA;AAAA,UAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChB,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cAEC,SAAA,EAAU,4FAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,IAAA;AAAA,gBACA,CAAC,QAAA,oBACA,GAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,QAAA;AAAA,oBACL,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,sBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,sBAAA,UAAA,CAAW,CAAC,CAAA;AAAA,oBACd,CAAA;AAAA,oBACA,SAAA,EAAU,4DAAA;AAAA,oBACV,YAAA,EAAY,UAAU,IAAI,CAAA,CAAA;AAAA,oBAE1B,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AACf;AAAA,aAAA;AAAA,YAfG,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,CAAC,CAAA;AAAA,WAkBpB,CAAA;AAAA,0BACD,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,QAAA;AAAA,cACL,IAAA,EAAK,MAAA;AAAA,cACL,KAAA,EAAO,KAAA;AAAA,cACP,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cACxC,SAAA,EAAW,aAAA;AAAA,cACX,WAAA,EAAa,KAAA,CAAM,MAAA,KAAW,CAAA,GAAI,WAAA,GAAc,EAAA;AAAA,cAChD,QAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-6H6OYLMJ.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-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\",\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-zinc-100 px-2 py-0.5 text-sm dark:bg-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-6L6LI2RL.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var IndexList = react.forwardRef(
+  ({ items, linkAs, className, ...props }, ref) => {
+    const Link = linkAs ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, "data-react-fancy-index-list": "", className: chunk3Z6ALUWP_cjs.cn("m-0 list-none p-0", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        "data-react-fancy-index-row": "",
+        className: "relative flex items-baseline gap-4 border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800",
+        children: [
+          item.num != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-index-num": "", className: "shrink-0 font-mono text-xs tabular-nums text-zinc-400 dark:text-zinc-500", children: item.num }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-index-title": "", className: "min-w-0 flex-1 truncate font-medium text-zinc-900 dark:text-zinc-100", children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            Link,
+            {
+              href: item.href,
+              className: "no-underline after:absolute after:inset-0 after:content-[''] hover:underline",
+              children: item.title
+            }
+          ) : item.title }),
+          item.meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-index-meta": "", className: "shrink-0 truncate text-sm text-zinc-500 dark:text-zinc-400", children: item.meta }),
+          item.value != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-index-value": "", className: "ml-auto shrink-0 font-mono text-xs tabular-nums text-zinc-500 dark:text-zinc-400", children: item.value })
+        ]
+      },
+      item.id ?? i
+    )) });
+  }
+);
+IndexList.displayName = "IndexList";
+
+exports.IndexList = IndexList;
+//# sourceMappingURL=chunk-6L6LI2RL.cjs.map
+//# sourceMappingURL=chunk-6L6LI2RL.cjs.map

package/dist/chunk-6L6LI2RL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/IndexList/IndexList.tsx"],"names":["forwardRef","cn","jsxs","jsx"],"mappings":";;;;;;AAuBO,IAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CAAC,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC/C,IAAA,MAAM,OAAO,MAAA,IAAU,GAAA;AAEvB,IAAA,sCACG,IAAA,EAAA,EAAG,GAAA,EAAU,6BAAA,EAA4B,EAAA,EAAG,WAAWC,oBAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7F,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,CAAA,qBAChBC,eAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QAEC,4BAAA,EAA2B,EAAA;AAAA,QAC3B,SAAA,EAAU,uGAAA;AAAA,QAET,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,GAAA,IAAO,wBACXC,cAAA,CAAC,MAAA,EAAA,EAAK,8BAA2B,EAAA,EAAG,SAAA,EAAU,0EAAA,EAC3C,QAAA,EAAA,IAAA,CAAK,GAAA,EACR,CAAA;AAAA,yCAGD,MAAA,EAAA,EAAK,8BAAA,EAA6B,IAAG,SAAA,EAAU,sEAAA,EAC7C,eAAK,IAAA,mBACJA,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,SAAA,EAAU,8EAAA;AAAA,cAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR,GAEA,KAAK,KAAA,EAET,CAAA;AAAA,UAEC,IAAA,CAAK,IAAA,IAAQ,IAAA,oBACZA,cAAA,CAAC,MAAA,EAAA,EAAK,+BAA4B,EAAA,EAAG,SAAA,EAAU,4DAAA,EAA8D,QAAA,EAAA,IAAA,CAAK,IAAA,EAAK,CAAA;AAAA,UAGxH,IAAA,CAAK,KAAA,IAAS,IAAA,oBACbA,cAAA,CAAC,MAAA,EAAA,EAAK,gCAA6B,EAAA,EAAG,SAAA,EAAU,kFAAA,EAC7C,QAAA,EAAA,IAAA,CAAK,KAAA,EACR;AAAA;AAAA,OAAA;AAAA,MA9BG,KAAK,EAAA,IAAM;AAAA,KAiCnB,CAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-6L6LI2RL.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { IndexListProps } from \"./IndexList.types\";\n\n/**\n * A flush-left numbered index — `num · title · meta · trailing value`, each row\n * optionally a single clickable target.\n *\n * Thirteen gallery styles build this, and the sandbox uses a `stretched-link`\n * treatment in twenty-four places.\n *\n * ## Exactly one anchor per row, by construction\n *\n * The row is `relative` and the title's `<a>` carries `after:absolute\n * after:inset-0`, so the anchor's own pseudo-element covers the row. The\n * alternative — wrapping the row in an `<a>` and putting more links inside —\n * produces nested anchors, which is issue #418: the browser silently\n * restructures that DOM, so the server HTML and the client tree disagree and\n * hydration blows up. A test asserts one anchor per row for that reason.\n *\n * The link text stays the title rather than becoming an `aria-label` on an\n * invisible overlay, so the accessible name is the thing you would say out loud.\n */\nexport const IndexList = forwardRef<HTMLOListElement, IndexListProps>(\n  ({ items, linkAs, className, ...props }, ref) => {\n    const Link = linkAs ?? \"a\";\n\n    return (\n      <ol ref={ref} data-react-fancy-index-list=\"\" className={cn(\"m-0 list-none p-0\", className)} {...props}>\n        {items.map((item, i) => (\n          <li\n            key={item.id ?? i}\n            data-react-fancy-index-row=\"\"\n            className=\"relative flex items-baseline gap-4 border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800\"\n          >\n            {item.num != null && (\n              <span data-react-fancy-index-num=\"\" className=\"shrink-0 font-mono text-xs tabular-nums text-zinc-400 dark:text-zinc-500\">\n                {item.num}\n              </span>\n            )}\n\n            <span data-react-fancy-index-title=\"\" className=\"min-w-0 flex-1 truncate font-medium text-zinc-900 dark:text-zinc-100\">\n              {item.href ? (\n                <Link\n                  href={item.href}\n                  className=\"no-underline after:absolute after:inset-0 after:content-[''] hover:underline\"\n                >\n                  {item.title}\n                </Link>\n              ) : (\n                item.title\n              )}\n            </span>\n\n            {item.meta != null && (\n              <span data-react-fancy-index-meta=\"\" className=\"shrink-0 truncate text-sm text-zinc-500 dark:text-zinc-400\">{item.meta}</span>\n            )}\n\n            {item.value != null && (\n              <span data-react-fancy-index-value=\"\" className=\"ml-auto shrink-0 font-mono text-xs tabular-nums text-zinc-500 dark:text-zinc-400\">\n                {item.value}\n              </span>\n            )}\n          </li>\n        ))}\n      </ol>\n    );\n  },\n);\n\nIndexList.displayName = \"IndexList\";\n"]}

package/dist/chunk-6MDZQIMZ.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function FormProvider({ mode = "edit", children }) {
+  const value = react.useMemo(() => ({ mode }), [mode]);
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkL3V3BYVS_cjs.FieldModeContext.Provider, { value, children });
+}
+function Form({ mode, children, ...formProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { mode, children: /* @__PURE__ */ jsxRuntime.jsx("form", { "data-react-fancy-form": "", ...formProps, children }) });
+}
+
+exports.Form = Form;
+exports.FormProvider = FormProvider;
+//# sourceMappingURL=chunk-6MDZQIMZ.cjs.map
+//# sourceMappingURL=chunk-6MDZQIMZ.cjs.map

package/dist/chunk-6MDZQIMZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/mode/Form.tsx"],"names":["useMemo","jsx","FieldModeContext"],"mappings":";;;;;;AAoBO,SAAS,YAAA,CAAa,EAAE,IAAA,GAAO,MAAA,EAAQ,UAAS,EAAsB;AAC3E,EAAA,MAAM,KAAA,GAAQA,cAAQ,OAAO,EAAE,MAAK,CAAA,EAAI,CAAC,IAAI,CAAC,CAAA;AAC9C,EAAA,uBAAOC,cAAA,CAACC,kCAAA,CAAiB,QAAA,EAAjB,EAA0B,OAAe,QAAA,EAAS,CAAA;AAC5D;AAOO,SAAS,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,GAAG,WAAU,EAAc;AAChE,EAAA,uBACED,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EACZ,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,yBAAsB,EAAA,EAAI,GAAG,SAAA,EAChC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ","file":"chunk-6MDZQIMZ.cjs","sourcesContent":["import { useMemo, type FormHTMLAttributes, type ReactNode } from \"react\";\nimport type { FieldMode } from \"../inputs.types\";\nimport { FieldModeContext } from \"./FieldMode.context\";\n\nexport interface FormProviderProps {\n  /** `\"edit\"` (default) or `\"view\"` — applied to every input below that doesn't override it. */\n  mode?: FieldMode;\n  children?: ReactNode;\n}\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /** `\"edit\"` (default) or `\"view\"` — applied to every input inside. */\n  mode?: FieldMode;\n}\n\n/**\n * Provide a form-wide {@link FieldMode} to every Fancy input below — flip a\n * whole form from editable to read-only display in one place. Pure context, no\n * DOM (use it to wrap a filter bar or any tree that isn't a `<form>`).\n */\nexport function FormProvider({ mode = \"edit\", children }: FormProviderProps) {\n  const value = useMemo(() => ({ mode }), [mode]);\n  return <FieldModeContext.Provider value={value}>{children}</FieldModeContext.Provider>;\n}\n\n/**\n * A real `<form>` that also broadcasts a form-wide {@link FieldMode} to the\n * inputs inside it (sugar over {@link FormProvider}). Per-input `mode` props\n * still override this.\n */\nexport function Form({ mode, children, ...formProps }: FormProps) {\n  return (\n    <FormProvider mode={mode}>\n      <form data-react-fancy-form=\"\" {...formProps}>\n        {children}\n      </form>\n    </FormProvider>\n  );\n}\n"]}

package/dist/chunk-6OSHAP6L.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var glowColors = {
+  on: "#a855f7",
+  // violet — neutral
+  xp: "#22c55e",
+  // green
+  achievement: "#f59e0b"
+  // amber
+};
+var containerSizeClasses = {
+  xs: "h-6 w-6",
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12",
+  xl: "h-16 w-16"
+};
+var fallbackTextSize = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var statusSizeClasses = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+  xl: "h-4 w-4"
+};
+var statusColorClasses = {
+  online: "bg-green-500",
+  offline: "bg-zinc-400",
+  busy: "bg-red-500",
+  away: "bg-amber-500"
+};
+var Avatar = react.forwardRef(
+  ({
+    src,
+    alt = "",
+    fallback,
+    size = "md",
+    status,
+    glow,
+    className
+  }, ref) => {
+    const glowKey = glow === true ? "on" : glow || null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-avatar": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "relative inline-flex items-center justify-center rounded-full",
+          containerSizeClasses[size],
+          !src && "bg-zinc-200 dark:bg-zinc-700",
+          className
+        ),
+        children: [
+          glowKey && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-react-fancy-avatar-glow": glowKey,
+              className: "fancy-avatar-glow",
+              style: { "--fancy-glow": glowColors[glowKey] }
+            }
+          ),
+          src ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: "h-full w-full rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "font-medium text-zinc-600 dark:text-zinc-300 select-none",
+                fallbackTextSize[size]
+              ),
+              children: fallback
+            }
+          ),
+          status && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-zinc-900",
+                statusSizeClasses[size],
+                statusColorClasses[status]
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=chunk-6OSHAP6L.cjs.map
+//# sourceMappingURL=chunk-6OSHAP6L.cjs.map

package/dist/chunk-6OSHAP6L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;;AAIA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,WAAA,EAAa;AAAA;AACf,CAAA;AAKA,IAAM,oBAAA,GAAmD;AAAA,EACvD,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,gBAAA,GAA+C;AAAA,EACnD,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,iBAAA,GAAgD;AAAA,EACpD,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,kBAAA,GAAmD;AAAA,EACvD,MAAA,EAAQ,cAAA;AAAA,EACR,OAAA,EAAS,aAAA;AAAA,EACT,IAAA,EAAM,YAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEO,IAAM,MAAA,GAASA,gBAAA;AAAA,EACpB,CACE;AAAA,IACE,GAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,QAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,IAAQ,IAAA;AAC/C,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,yBAAA,EAAwB,EAAA;AAAA,QACxB,SAAA,EAAWC,oBAAA;AAAA,UACT,+DAAA;AAAA,UACA,qBAAqB,IAAI,CAAA;AAAA,UACzB,CAAC,GAAA,IAAO,8BAAA;AAAA,UACR;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,OAAA,oBACCC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,8BAAA,EAA8B,OAAA;AAAA,cAC9B,SAAA,EAAU,mBAAA;AAAA,cACV,KAAA,EAAO,EAAE,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAA;AAAE;AAAA,WAC/C;AAAA,UAED,GAAA,mBACCA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,GAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA,WACZ,mBAEAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,0DAAA;AAAA,gBACA,iBAAiB,IAAI;AAAA,eACvB;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,MAAA,oBACCC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,6EAAA;AAAA,gBACA,kBAAkB,IAAI,CAAA;AAAA,gBACtB,mBAAmB,MAAM;AAAA;AAC3B;AAAA;AACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-6OSHAP6L.cjs","sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AvatarProps } from \"./Avatar.types\";\n\nconst glowColors = {\n  on: \"#a855f7\", // violet — neutral\n  xp: \"#22c55e\", // green\n  achievement: \"#f59e0b\", // amber\n} as const;\n\ntype AvatarSize = NonNullable<AvatarProps[\"size\"]>;\ntype AvatarStatus = NonNullable<AvatarProps[\"status\"]>;\n\nconst containerSizeClasses: Record<AvatarSize, string> = {\n  xs: \"h-6 w-6\",\n  sm: \"h-8 w-8\",\n  md: \"h-10 w-10\",\n  lg: \"h-12 w-12\",\n  xl: \"h-16 w-16\",\n};\n\nconst fallbackTextSize: Record<AvatarSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-lg\",\n};\n\nconst statusSizeClasses: Record<AvatarSize, string> = {\n  xs: \"h-1.5 w-1.5\",\n  sm: \"h-2 w-2\",\n  md: \"h-2.5 w-2.5\",\n  lg: \"h-3 w-3\",\n  xl: \"h-4 w-4\",\n};\n\nconst statusColorClasses: Record<AvatarStatus, string> = {\n  online: \"bg-green-500\",\n  offline: \"bg-zinc-400\",\n  busy: \"bg-red-500\",\n  away: \"bg-amber-500\",\n};\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      src,\n      alt = \"\",\n      fallback,\n      size = \"md\",\n      status,\n      glow,\n      className,\n    },\n    ref,\n  ) => {\n    const glowKey = glow === true ? \"on\" : glow || null;\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-avatar=\"\"\n        className={cn(\n          \"relative inline-flex items-center justify-center rounded-full\",\n          containerSizeClasses[size],\n          !src && \"bg-zinc-200 dark:bg-zinc-700\",\n          className,\n        )}\n      >\n        {glowKey && (\n          <span\n            aria-hidden\n            data-react-fancy-avatar-glow={glowKey}\n            className=\"fancy-avatar-glow\"\n            style={{ \"--fancy-glow\": glowColors[glowKey] } as CSSProperties}\n          />\n        )}\n        {src ? (\n          <img\n            src={src}\n            alt={alt}\n            className=\"h-full w-full rounded-full object-cover\"\n          />\n        ) : (\n          <span\n            className={cn(\n              \"font-medium text-zinc-600 dark:text-zinc-300 select-none\",\n              fallbackTextSize[size],\n            )}\n          >\n            {fallback}\n          </span>\n        )}\n        {status && (\n          <span\n            className={cn(\n              \"absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-zinc-900\",\n              statusSizeClasses[size],\n              statusColorClasses[status],\n            )}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n"]}