@fanvue/ui 1.17.2 → 1.18.0

package/dist/components/Autocomplete/AutocompleteOptionItem.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+import { CREATE_PREFIX, getLabel } from "./constants.mjs";
+function AutocompleteOptionItem({
+  option,
+  optionId,
+  index,
+  isSelected,
+  isActive,
+  onSelect,
+  onMouseEnter,
+  renderOption
+}) {
+  const isCreate = option.value.startsWith(CREATE_PREFIX);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: optionId,
+      role: "option",
+      tabIndex: -1,
+      "aria-selected": isSelected,
+      "aria-disabled": option.disabled || void 0,
+      "data-option-index": index,
+      className: cn(
+        "typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none",
+        isActive && "bg-neutral-100",
+        option.disabled && "pointer-events-none opacity-50",
+        isCreate && "italic"
+      ),
+      onMouseEnter,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => {
+        if (!option.disabled) onSelect();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!option.disabled) onSelect();
+        }
+      },
+      children: renderOption ? renderOption(option, { selected: isSelected, active: isActive }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: getLabel(option) }),
+        isSelected && /* @__PURE__ */ jsx("span", { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-foreground-default" }) })
+      ] })
+    }
+  );
+}
+export {
+  AutocompleteOptionItem
+};
+//# sourceMappingURL=AutocompleteOptionItem.mjs.map

package/dist/components/Autocomplete/AutocompleteOptionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOptionItem.mjs","sources":["../../../src/components/Autocomplete/AutocompleteOptionItem.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { CREATE_PREFIX, getLabel } from \"./constants\";\n\nexport function AutocompleteOptionItem({\n  option,\n  optionId,\n  index,\n  isSelected,\n  isActive,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n}: {\n  option: AutocompleteOption;\n  optionId: string;\n  index: number;\n  isSelected: boolean;\n  isActive: boolean;\n  onSelect: () => void;\n  onMouseEnter: () => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n}) {\n  const isCreate = option.value.startsWith(CREATE_PREFIX);\n\n  return (\n    <div\n      id={optionId}\n      role=\"option\"\n      tabIndex={-1}\n      aria-selected={isSelected}\n      aria-disabled={option.disabled || undefined}\n      data-option-index={index}\n      className={cn(\n        \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none\",\n        isActive && \"bg-neutral-100\",\n        option.disabled && \"pointer-events-none opacity-50\",\n        isCreate && \"italic\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={() => {\n        if (!option.disabled) onSelect();\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          if (!option.disabled) onSelect();\n        }\n      }}\n    >\n      {renderOption ? (\n        renderOption(option, { selected: isSelected, active: isActive })\n      ) : (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">{getLabel(option)}</span>\n          {isSelected && (\n            <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n              <CheckIcon className=\"size-4 text-foreground-default\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,QAAM,WAAW,OAAO,MAAM,WAAW,aAAa;AAEtD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,iBAAe,OAAO,YAAY;AAAA,MAClC,qBAAmB;AAAA,MACnB,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO,YAAY;AAAA,QACnB,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,MACA,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,MACtB,SAAS,MAAM;AACb,YAAI,CAAC,OAAO,SAAU,UAAA;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAA;AACF,cAAI,CAAC,OAAO,SAAU,UAAA;AAAA,QACxB;AAAA,MACF;AAAA,MAEC,UAAA,eACC,aAAa,QAAQ,EAAE,UAAU,YAAY,QAAQ,SAAA,CAAU,IAE/D,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2BAA2B,UAAA,SAAS,MAAM,GAAE;AAAA,QAC3D,kCACE,QAAA,EAAK,WAAU,4DACd,UAAA,oBAAC,WAAA,EAAU,WAAU,iCAAA,CAAiC,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Autocomplete/AutocompleteTag.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { getLabel } from "./constants.mjs";
+function AutocompleteTag({
+  option,
+  disabled,
+  onRemove,
+  renderTag
+}) {
+  if (renderTag) {
+    return /* @__PURE__ */ jsx("span", { children: renderTag(option, onRemove) });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "typography-regular-body-sm inline-flex max-w-full items-center gap-1 rounded-md bg-neutral-200 px-2 py-0.5 text-foreground-default", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: getLabel(option) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": `Remove ${getLabel(option)}`,
+        className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-foreground-secondary hover:text-foreground-default active:scale-95",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        disabled,
+        children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
+      }
+    )
+  ] });
+}
+export {
+  AutocompleteTag
+};
+//# sourceMappingURL=AutocompleteTag.mjs.map

package/dist/components/Autocomplete/AutocompleteTag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTag.mjs","sources":["../../../src/components/Autocomplete/AutocompleteTag.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { getLabel } from \"./constants\";\n\nexport function AutocompleteTag({\n  option,\n  disabled,\n  onRemove,\n  renderTag,\n}: {\n  option: AutocompleteOption;\n  disabled: boolean;\n  onRemove: () => void;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n}) {\n  if (renderTag) {\n    return <span>{renderTag(option, onRemove)}</span>;\n  }\n\n  return (\n    <span className=\"typography-regular-body-sm inline-flex max-w-full items-center gap-1 rounded-md bg-neutral-200 px-2 py-0.5 text-foreground-default\">\n      <span className=\"truncate\">{getLabel(option)}</span>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={`Remove ${getLabel(option)}`}\n        className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-foreground-secondary hover:text-foreground-default active:scale-95\"\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        disabled={disabled}\n      >\n        <CloseIcon className=\"size-3\" />\n      </button>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WAAO,oBAAC,QAAA,EAAM,UAAA,UAAU,QAAQ,QAAQ,GAAE;AAAA,EAC5C;AAEA,SACE,qBAAC,QAAA,EAAK,WAAU,sIACd,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,SAAS,MAAM,GAAE;AAAA,IAC7C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAY,UAAU,SAAS,MAAM,CAAC;AAAA,QACtC,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAA;AAAA,QACF;AAAA,QACA;AAAA,QAEA,UAAA,oBAAC,WAAA,EAAU,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;"}

package/dist/components/Autocomplete/constants.mjs

@@ -0,0 +1,15 @@
+"use client";
+const CREATE_PREFIX = "__create__";
+function defaultFilter(option, query) {
+  const label = option.label ?? option.value;
+  return label.toLowerCase().includes(query.toLowerCase());
+}
+function getLabel(option) {
+  return option.label ?? option.value;
+}
+export {
+  CREATE_PREFIX,
+  defaultFilter,
+  getLabel
+};
+//# sourceMappingURL=constants.mjs.map

package/dist/components/Autocomplete/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../../src/components/Autocomplete/constants.ts"],"sourcesContent":["import type { AutocompleteOption } from \"./Autocomplete\";\n\nexport const CREATE_PREFIX = \"__create__\";\n\nexport function defaultFilter(option: AutocompleteOption, query: string): boolean {\n  const label = option.label ?? option.value;\n  return label.toLowerCase().includes(query.toLowerCase());\n}\n\nexport function getLabel(option: AutocompleteOption): string {\n  return option.label ?? option.value;\n}\n"],"names":[],"mappings":";AAEO,MAAM,gBAAgB;AAEtB,SAAS,cAAc,QAA4B,OAAwB;AAChF,QAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,SAAO,MAAM,YAAA,EAAc,SAAS,MAAM,aAAa;AACzD;AAEO,SAAS,SAAS,QAAoC;AAC3D,SAAO,OAAO,SAAS,OAAO;AAChC;"}

package/dist/components/Autocomplete/useAutocomplete.mjs

@@ -0,0 +1,267 @@
+"use client";
+import * as React from "react";
+import { defaultFilter, CREATE_PREFIX, getLabel } from "./constants.mjs";
+function useAutocomplete(props) {
+  const {
+    id,
+    options,
+    disabled = false,
+    filterFn,
+    creatable = false,
+    creatableLabel,
+    onCreate,
+    inputValue: inputValueProp,
+    onInputChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange
+  } = props;
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const helperTextId = `${inputId}-helper`;
+  const listboxId = `${inputId}-listbox`;
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const isMulti = props.multiple === true;
+  const [internalValue, setInternalValue] = React.useState(
+    !isMulti && props.defaultValue || null
+  );
+  const selectedValue = !isMulti ? props.value !== void 0 ? props.value : internalValue : null;
+  const [internalMultiValue, setInternalMultiValue] = React.useState(
+    isMulti && props.defaultValue ? props.defaultValue : []
+  );
+  const selectedMultiValues = isMulti ? props.value !== void 0 ? props.value : internalMultiValue : [];
+  const [internalInputValue, setInternalInputValue] = React.useState("");
+  const searchText = inputValueProp !== void 0 ? inputValueProp : internalInputValue;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpen = openProp !== void 0 ? openProp : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openProp === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const filter = filterFn ?? defaultFilter;
+  const filteredOptions = React.useMemo(() => {
+    if (!searchText) return options;
+    return options.filter((o) => filter(o, searchText));
+  }, [options, searchText, filter]);
+  const showCreate = creatable && searchText.length > 0 && !options.some((o) => (o.label ?? o.value).toLowerCase() === searchText.toLowerCase());
+  const visibleOptions = React.useMemo(() => {
+    if (!showCreate) return filteredOptions;
+    const createOption = {
+      value: `${CREATE_PREFIX}${searchText}`,
+      label: creatableLabel ? creatableLabel(searchText) : searchText
+    };
+    return [...filteredOptions, createOption];
+  }, [filteredOptions, showCreate, searchText, creatableLabel]);
+  const prevOptionsLengthRef = React.useRef(visibleOptions.length);
+  const prevSearchTextRef = React.useRef(searchText);
+  React.useEffect(() => {
+    if (searchText !== prevSearchTextRef.current || visibleOptions.length !== prevOptionsLengthRef.current) {
+      setActiveIndex(-1);
+      prevSearchTextRef.current = searchText;
+      prevOptionsLengthRef.current = visibleOptions.length;
+    }
+  }, [searchText, visibleOptions.length]);
+  React.useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    const el = listRef.current.querySelector(`[data-option-index="${activeIndex}"]`);
+    if (typeof el?.scrollIntoView === "function") {
+      el.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  function clearInputText() {
+    if (inputValueProp === void 0) setInternalInputValue("");
+    onInputChange?.("");
+  }
+  function selectSingle(val) {
+    if (!isMulti && props.value === void 0) setInternalValue(val);
+    if (!isMulti) props.onChange?.(val);
+  }
+  function toggleMulti(val) {
+    const next = selectedMultiValues.includes(val) ? selectedMultiValues.filter((v) => v !== val) : [...selectedMultiValues, val];
+    if (isMulti && props.value === void 0) setInternalMultiValue(next);
+    if (isMulti) props.onChange?.(next);
+  }
+  function handleSelect(option) {
+    if (option.value.startsWith(CREATE_PREFIX)) {
+      const raw = option.value.slice(CREATE_PREFIX.length);
+      onCreate?.(raw);
+      if (isMulti) {
+        toggleMulti(raw);
+      } else {
+        selectSingle(raw);
+        setOpen(false);
+      }
+      clearInputText();
+      return;
+    }
+    if (isMulti) {
+      toggleMulti(option.value);
+      clearInputText();
+    } else {
+      selectSingle(option.value);
+      clearInputText();
+      setOpen(false);
+    }
+  }
+  function handleInputChange(e) {
+    const val = e.target.value;
+    if (inputValueProp === void 0) setInternalInputValue(val);
+    onInputChange?.(val);
+    if (!isOpen) setOpen(true);
+  }
+  function findNextEnabled(start, direction) {
+    let idx = start;
+    while (idx >= 0 && idx < visibleOptions.length && visibleOptions[idx]?.disabled) {
+      idx += direction;
+    }
+    return idx >= 0 && idx < visibleOptions.length ? idx : null;
+  }
+  function handleKeyDown(e) {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!isOpen) {
+          setOpen(true);
+          return;
+        }
+        setActiveIndex((prev) => findNextEnabled(prev + 1, 1) ?? prev);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!isOpen) {
+          setOpen(true);
+          return;
+        }
+        setActiveIndex((prev) => findNextEnabled(prev - 1, -1) ?? prev);
+        break;
+      }
+      case "Enter": {
+        if (isOpen && activeIndex >= 0 && activeIndex < visibleOptions.length) {
+          e.preventDefault();
+          const opt = visibleOptions[activeIndex];
+          if (opt && !opt.disabled) handleSelect(opt);
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        if (isOpen) setOpen(false);
+        break;
+      }
+      case "Backspace": {
+        if (isMulti && searchText === "" && selectedMultiValues.length > 0) {
+          const lastVal = selectedMultiValues[selectedMultiValues.length - 1];
+          if (lastVal !== void 0) toggleMulti(lastVal);
+        }
+        break;
+      }
+      case "Home": {
+        if (isOpen) {
+          e.preventDefault();
+          const idx = findNextEnabled(0, 1);
+          if (idx !== null) setActiveIndex(idx);
+        }
+        break;
+      }
+      case "End": {
+        if (isOpen) {
+          e.preventDefault();
+          const idx = findNextEnabled(visibleOptions.length - 1, -1);
+          if (idx !== null) setActiveIndex(idx);
+        }
+        break;
+      }
+    }
+  }
+  function handleClear(e) {
+    e.stopPropagation();
+    if (isMulti) {
+      if (props.value === void 0) setInternalMultiValue([]);
+      if (isMulti) props.onChange?.([]);
+    } else {
+      selectSingle(null);
+    }
+    clearInputText();
+    inputRef.current?.focus();
+  }
+  function handleBlur(e) {
+    const container = e.currentTarget.closest("[data-autocomplete-root]");
+    if (container && e.relatedTarget instanceof Node && container.contains(e.relatedTarget)) {
+      return;
+    }
+    if (e.relatedTarget instanceof Node && e.relatedTarget.closest?.("[data-radix-popper-content-wrapper]")) {
+      return;
+    }
+    if (isOpen) setOpen(false);
+  }
+  function handleFocus() {
+    if (!disabled && !isOpen) setOpen(true);
+  }
+  function handleContainerClick() {
+    if (!disabled) {
+      inputRef.current?.focus();
+      if (!isOpen) setOpen(true);
+    }
+  }
+  function handleOpenChange(next) {
+    setOpen(next);
+    if (!next) {
+      clearInputText();
+      setActiveIndex(-1);
+    }
+  }
+  const selectedOption = React.useMemo(
+    () => options.find((o) => o.value === selectedValue),
+    [options, selectedValue]
+  );
+  const selectedMultiOptions = React.useMemo(
+    () => selectedMultiValues.map((v) => options.find((o) => o.value === v)).filter(Boolean),
+    [options, selectedMultiValues]
+  );
+  const hasClearableValue = isMulti ? selectedMultiValues.length > 0 : selectedValue != null;
+  const displayInputValue = React.useMemo(() => {
+    if (searchText) return searchText;
+    if (isMulti || isOpen) return "";
+    return selectedOption ? getLabel(selectedOption) : "";
+  }, [searchText, isMulti, isOpen, selectedOption]);
+  const activeDescendantId = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  return {
+    inputId,
+    helperTextId,
+    listboxId,
+    inputRef,
+    listRef,
+    isMulti,
+    isOpen,
+    selectedValue,
+    selectedMultiValues,
+    selectedMultiOptions,
+    searchText,
+    visibleOptions,
+    activeIndex,
+    activeDescendantId,
+    hasClearableValue,
+    displayInputValue,
+    setActiveIndex,
+    handleSelect,
+    handleInputChange,
+    handleKeyDown,
+    handleClear,
+    handleBlur,
+    handleFocus,
+    handleContainerClick,
+    handleOpenChange,
+    toggleMulti
+  };
+}
+export {
+  useAutocomplete
+};
+//# sourceMappingURL=useAutocomplete.mjs.map

package/dist/components/Autocomplete/useAutocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocomplete.mjs","sources":["../../../src/components/Autocomplete/useAutocomplete.ts"],"sourcesContent":["import * as React from \"react\";\nimport type { AutocompleteOption, AutocompleteProps } from \"./Autocomplete\";\nimport { CREATE_PREFIX, defaultFilter, getLabel } from \"./constants\";\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Combobox hook managing interconnected controlled/uncontrolled state\nexport function useAutocomplete(props: AutocompleteProps) {\n  const {\n    id,\n    options,\n    disabled = false,\n    filterFn,\n    creatable = false,\n    creatableLabel,\n    onCreate,\n    inputValue: inputValueProp,\n    onInputChange,\n    open: openProp,\n    defaultOpen = false,\n    onOpenChange,\n  } = props;\n\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const helperTextId = `${inputId}-helper`;\n  const listboxId = `${inputId}-listbox`;\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const listRef = React.useRef<HTMLDivElement>(null);\n\n  const isMulti = props.multiple === true;\n\n  // --- single-select state ---\n  const [internalValue, setInternalValue] = React.useState<string | null>(\n    (!isMulti && props.defaultValue) || null,\n  );\n  const selectedValue: string | null = !isMulti\n    ? props.value !== undefined\n      ? props.value\n      : internalValue\n    : null;\n\n  // --- multi-select state ---\n  const [internalMultiValue, setInternalMultiValue] = React.useState<string[]>(\n    isMulti && props.defaultValue ? props.defaultValue : [],\n  );\n  const selectedMultiValues: string[] = isMulti\n    ? props.value !== undefined\n      ? props.value\n      : internalMultiValue\n    : [];\n\n  // --- input text ---\n  const [internalInputValue, setInternalInputValue] = React.useState(\"\");\n  const searchText = inputValueProp !== undefined ? inputValueProp : internalInputValue;\n\n  // --- open state ---\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isOpen = openProp !== undefined ? openProp : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  // --- active index ---\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n\n  // --- filtering ---\n  const filter = filterFn ?? defaultFilter;\n\n  const filteredOptions = React.useMemo(() => {\n    if (!searchText) return options;\n    return options.filter((o) => filter(o, searchText));\n  }, [options, searchText, filter]);\n\n  const showCreate =\n    creatable &&\n    searchText.length > 0 &&\n    !options.some((o) => (o.label ?? o.value).toLowerCase() === searchText.toLowerCase());\n\n  const visibleOptions = React.useMemo(() => {\n    if (!showCreate) return filteredOptions;\n    const createOption: AutocompleteOption = {\n      value: `${CREATE_PREFIX}${searchText}`,\n      label: creatableLabel ? creatableLabel(searchText) : searchText,\n    };\n    return [...filteredOptions, createOption];\n  }, [filteredOptions, showCreate, searchText, creatableLabel]);\n\n  const prevOptionsLengthRef = React.useRef(visibleOptions.length);\n  const prevSearchTextRef = React.useRef(searchText);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally reset only when search text or option count actually changes\n  React.useEffect(() => {\n    if (\n      searchText !== prevSearchTextRef.current ||\n      visibleOptions.length !== prevOptionsLengthRef.current\n    ) {\n      setActiveIndex(-1);\n      prevSearchTextRef.current = searchText;\n      prevOptionsLengthRef.current = visibleOptions.length;\n    }\n  }, [searchText, visibleOptions.length]);\n\n  // --- scroll active option into view ---\n  React.useEffect(() => {\n    if (activeIndex < 0 || !listRef.current) return;\n    const el = listRef.current.querySelector(`[data-option-index=\"${activeIndex}\"]`);\n    if (typeof el?.scrollIntoView === \"function\") {\n      el.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  // --- helpers ---\n  function clearInputText() {\n    if (inputValueProp === undefined) setInternalInputValue(\"\");\n    onInputChange?.(\"\");\n  }\n\n  function selectSingle(val: string | null) {\n    if (!isMulti && props.value === undefined) setInternalValue(val);\n    if (!isMulti) (props as { onChange?: (v: string | null) => void }).onChange?.(val);\n  }\n\n  function toggleMulti(val: string) {\n    const next = selectedMultiValues.includes(val)\n      ? selectedMultiValues.filter((v) => v !== val)\n      : [...selectedMultiValues, val];\n    if (isMulti && props.value === undefined) setInternalMultiValue(next);\n    if (isMulti) (props as { onChange?: (v: string[]) => void }).onChange?.(next);\n  }\n\n  function handleSelect(option: AutocompleteOption) {\n    if (option.value.startsWith(CREATE_PREFIX)) {\n      const raw = option.value.slice(CREATE_PREFIX.length);\n      onCreate?.(raw);\n      if (isMulti) {\n        toggleMulti(raw);\n      } else {\n        selectSingle(raw);\n        setOpen(false);\n      }\n      clearInputText();\n      return;\n    }\n\n    if (isMulti) {\n      toggleMulti(option.value);\n      clearInputText();\n    } else {\n      selectSingle(option.value);\n      clearInputText();\n      setOpen(false);\n    }\n  }\n\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const val = e.target.value;\n    if (inputValueProp === undefined) setInternalInputValue(val);\n    onInputChange?.(val);\n    if (!isOpen) setOpen(true);\n  }\n\n  function findNextEnabled(start: number, direction: 1 | -1): number | null {\n    let idx = start;\n    while (idx >= 0 && idx < visibleOptions.length && visibleOptions[idx]?.disabled) {\n      idx += direction;\n    }\n    return idx >= 0 && idx < visibleOptions.length ? idx : null;\n  }\n\n  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Flat switch is clearer than splitting into separate handler functions\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (disabled) return;\n\n    switch (e.key) {\n      case \"ArrowDown\": {\n        e.preventDefault();\n        if (!isOpen) {\n          setOpen(true);\n          return;\n        }\n        setActiveIndex((prev) => findNextEnabled(prev + 1, 1) ?? prev);\n        break;\n      }\n      case \"ArrowUp\": {\n        e.preventDefault();\n        if (!isOpen) {\n          setOpen(true);\n          return;\n        }\n        setActiveIndex((prev) => findNextEnabled(prev - 1, -1) ?? prev);\n        break;\n      }\n      case \"Enter\": {\n        if (isOpen && activeIndex >= 0 && activeIndex < visibleOptions.length) {\n          e.preventDefault();\n          const opt = visibleOptions[activeIndex];\n          if (opt && !opt.disabled) handleSelect(opt);\n        }\n        break;\n      }\n      case \"Escape\": {\n        e.preventDefault();\n        if (isOpen) setOpen(false);\n        break;\n      }\n      case \"Backspace\": {\n        if (isMulti && searchText === \"\" && selectedMultiValues.length > 0) {\n          const lastVal = selectedMultiValues[selectedMultiValues.length - 1];\n          if (lastVal !== undefined) toggleMulti(lastVal);\n        }\n        break;\n      }\n      case \"Home\": {\n        if (isOpen) {\n          e.preventDefault();\n          const idx = findNextEnabled(0, 1);\n          if (idx !== null) setActiveIndex(idx);\n        }\n        break;\n      }\n      case \"End\": {\n        if (isOpen) {\n          e.preventDefault();\n          const idx = findNextEnabled(visibleOptions.length - 1, -1);\n          if (idx !== null) setActiveIndex(idx);\n        }\n        break;\n      }\n    }\n  }\n\n  function handleClear(e: React.MouseEvent) {\n    e.stopPropagation();\n    if (isMulti) {\n      if (props.value === undefined) setInternalMultiValue([]);\n      if (isMulti) (props as { onChange?: (v: string[]) => void }).onChange?.([]);\n    } else {\n      selectSingle(null);\n    }\n    clearInputText();\n    inputRef.current?.focus();\n  }\n\n  function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n    const container = e.currentTarget.closest(\"[data-autocomplete-root]\");\n    if (container && e.relatedTarget instanceof Node && container.contains(e.relatedTarget)) {\n      return;\n    }\n    if (\n      e.relatedTarget instanceof Node &&\n      (e.relatedTarget as Element).closest?.(\"[data-radix-popper-content-wrapper]\")\n    ) {\n      return;\n    }\n    if (isOpen) setOpen(false);\n  }\n\n  function handleFocus() {\n    if (!disabled && !isOpen) setOpen(true);\n  }\n\n  function handleContainerClick() {\n    if (!disabled) {\n      inputRef.current?.focus();\n      if (!isOpen) setOpen(true);\n    }\n  }\n\n  function handleOpenChange(next: boolean) {\n    setOpen(next);\n    if (!next) {\n      clearInputText();\n      setActiveIndex(-1);\n    }\n  }\n\n  const selectedOption = React.useMemo(\n    () => options.find((o) => o.value === selectedValue),\n    [options, selectedValue],\n  );\n\n  const selectedMultiOptions = React.useMemo(\n    () =>\n      selectedMultiValues\n        .map((v) => options.find((o) => o.value === v))\n        .filter(Boolean) as AutocompleteOption[],\n    [options, selectedMultiValues],\n  );\n\n  const hasClearableValue = isMulti ? selectedMultiValues.length > 0 : selectedValue != null;\n\n  const displayInputValue = React.useMemo(() => {\n    if (searchText) return searchText;\n    if (isMulti || isOpen) return \"\";\n    return selectedOption ? getLabel(selectedOption) : \"\";\n  }, [searchText, isMulti, isOpen, selectedOption]);\n\n  const activeDescendantId = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined;\n\n  return {\n    inputId,\n    helperTextId,\n    listboxId,\n    inputRef,\n    listRef,\n    isMulti,\n    isOpen,\n    selectedValue,\n    selectedMultiValues,\n    selectedMultiOptions,\n    searchText,\n    visibleOptions,\n    activeIndex,\n    activeDescendantId,\n    hasClearableValue,\n    displayInputValue,\n    setActiveIndex,\n    handleSelect,\n    handleInputChange,\n    handleKeyDown,\n    handleClear,\n    handleBlur,\n    handleFocus,\n    handleContainerClick,\n    handleOpenChange,\n    toggleMulti,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Avatar/Avatar.mjs

@@ -9,13 +9,13 @@ const AvatarContext = React.createContext({
 });
 const STATUS_POSITIONS = {
   16: { top: -2, right: -2, indicatorSize: "size-2", borderSize: "border" },
-  24: { top: 0, right: 0, indicatorSize: "size-2.5", borderSize: "border" },
-  32: { top: 0, right: 0, indicatorSize: "size-3", borderSize: "border" },
-  40: { top: 0, right: 0, indicatorSize: "size-3.5", borderSize: "border" },
-  48: { top: 0, right: 0, indicatorSize: "size-4", borderSize: "border" },
-  64: { top: 2, right: 0, indicatorSize: "size-4.5", borderSize: "border" },
-  88: { top: 6, right: 4, indicatorSize: "size-5", borderSize: "border-2" },
-  148: { top: 14, right: 14, indicatorSize: "size-6", borderSize: "border-2" }
+  24: { top: 0, right: 0, indicatorSize: "size-2", borderSize: "border" },
+  32: { top: 0, right: 0, indicatorSize: "size-2", borderSize: "border" },
+  40: { top: 2, right: 2, indicatorSize: "size-2", borderSize: "border" },
+  48: { top: 5, right: 2, indicatorSize: "size-2", borderSize: "border" },
+  64: { top: 5, right: 1, indicatorSize: "size-3", borderSize: "border" },
+  88: { top: 8, right: 6, indicatorSize: "size-3", borderSize: "border" },
+  148: { top: 15, right: 15, indicatorSize: "size-3", borderSize: "border" }
 };
 const AvatarRoot = React.forwardRef(
   ({

package/dist/components/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n  AvatarSize,\n  { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n  16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  24: { top: 0, right: 0, indicatorSize: \"size-2.5\", borderSize: \"border\" },\n  32: { top: 0, right: 0, indicatorSize: \"size-3\", borderSize: \"border\" },\n  40: { top: 0, right: 0, indicatorSize: \"size-3.5\", borderSize: \"border\" },\n  48: { top: 0, right: 0, indicatorSize: \"size-4\", borderSize: \"border\" },\n  64: { top: 2, right: 0, indicatorSize: \"size-4.5\", borderSize: \"border\" },\n  88: { top: 6, right: 4, indicatorSize: \"size-5\", borderSize: \"border-2\" },\n  148: { top: 14, right: 14, indicatorSize: \"size-6\", borderSize: \"border-2\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-200\",\n              size === 16 && \"size-4 text-2xs\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-22 text-2xl\",\n              size === 148 && \"size-37 text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className={cn(\n                \"absolute rounded-full border-surface-container bg-brand-accent-default\",\n                statusPosition.borderSize,\n                statusPosition.indicatorSize,\n              )}\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center font-semibold text-foreground-default uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n  AvatarSize,\n  { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n  16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  24: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  32: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  40: { top: 2, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  48: { top: 5, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  64: { top: 5, right: 1, indicatorSize: \"size-3\", borderSize: \"border\" },\n  88: { top: 8, right: 6, indicatorSize: \"size-3\", borderSize: \"border\" },\n  148: { top: 15, right: 15, indicatorSize: \"size-3\", borderSize: \"border\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-200\",\n              size === 16 && \"size-4 text-2xs\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-22 text-2xl\",\n              size === 148 && \"size-37 text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className={cn(\n                \"absolute rounded-full border-surface-container bg-brand-accent-default\",\n                statusPosition.borderSize,\n                statusPosition.indicatorSize,\n              )}\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center font-semibold text-foreground-default uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}

package/dist/components/BottomNavigation/BottomNavigation.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const BottomNavigationContext = React.createContext({
+  showLabelsOnlyWhenActive: false,
+  hideLabels: false
+});
+function useBottomNavigationContext() {
+  return React.useContext(BottomNavigationContext);
+}
+const BottomNavigation = React.forwardRef(
+  ({
+    className,
+    children,
+    value,
+    onValueChange,
+    showLabelsOnlyWhenActive = false,
+    hideLabels = false,
+    hideOnDesktop = false,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(
+      () => ({ value, onValueChange, showLabelsOnlyWhenActive, hideLabels }),
+      [value, onValueChange, showLabelsOnlyWhenActive, hideLabels]
+    );
+    return /* @__PURE__ */ jsx(BottomNavigationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cn(
+          "fixed inset-x-0 bottom-0",
+          "flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around",
+          "border-neutral-200 border-t bg-surface-page/[.82] backdrop-blur-[16px]",
+          "pb-[env(safe-area-inset-bottom,0px)]",
+          hideOnDesktop && "md:hidden",
+          className
+        ),
+        style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...props.style },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+BottomNavigation.displayName = "BottomNavigation";
+export {
+  BottomNavigation,
+  useBottomNavigationContext
+};
+//# sourceMappingURL=BottomNavigation.mjs.map

package/dist/components/BottomNavigation/BottomNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigation.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /** The currently selected action value. */\n  value?: string;\n  /** Called when the selected action changes. */\n  onValueChange?: (value: string) => void;\n  /** When `true`, labels are only shown on the active action. @default false */\n  showLabelsOnlyWhenActive?: boolean;\n  /** When `true`, all labels are hidden. @default false */\n  hideLabels?: boolean;\n  /** When `true`, the navigation bar is hidden on viewports wider than `md` (768 px). @default false */\n  hideOnDesktop?: boolean;\n}\n\ninterface BottomNavigationContextValue {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  showLabelsOnlyWhenActive: boolean;\n  hideLabels: boolean;\n}\n\nconst BottomNavigationContext = React.createContext<BottomNavigationContextValue>({\n  showLabelsOnlyWhenActive: false,\n  hideLabels: false,\n});\n\nexport function useBottomNavigationContext(): BottomNavigationContextValue {\n  return React.useContext(BottomNavigationContext);\n}\n\nexport const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      onValueChange,\n      showLabelsOnlyWhenActive = false,\n      hideLabels = false,\n      hideOnDesktop = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const contextValue = React.useMemo<BottomNavigationContextValue>(\n      () => ({ value, onValueChange, showLabelsOnlyWhenActive, hideLabels }),\n      [value, onValueChange, showLabelsOnlyWhenActive, hideLabels],\n    );\n\n    return (\n      <BottomNavigationContext.Provider value={contextValue}>\n        <nav\n          ref={ref}\n          className={cn(\n            \"fixed inset-x-0 bottom-0\",\n            \"flex h-[calc(env(safe-area-inset-bottom,0px)+68px)] items-center justify-around\",\n            \"border-neutral-200 border-t bg-surface-page/[.82] backdrop-blur-[16px]\",\n            \"pb-[env(safe-area-inset-bottom,0px)]\",\n            hideOnDesktop && \"md:hidden\",\n            className,\n          )}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...props.style }}\n          {...props}\n        >\n          {children}\n        </nav>\n      </BottomNavigationContext.Provider>\n    );\n  },\n);\n\nBottomNavigation.displayName = \"BottomNavigation\";\n"],"names":[],"mappings":";;;;AAuBA,MAAM,0BAA0B,MAAM,cAA4C;AAAA,EAChF,0BAA0B;AAAA,EAC1B,YAAY;AACd,CAAC;AAEM,SAAS,6BAA2D;AACzE,SAAO,MAAM,WAAW,uBAAuB;AACjD;AAEO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,2BAA2B;AAAA,IAC3B,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,MAAM;AAAA,MACzB,OAAO,EAAE,OAAO,eAAe,0BAA0B,WAAA;AAAA,MACzD,CAAC,OAAO,eAAe,0BAA0B,UAAU;AAAA,IAAA;AAG7D,WACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,cACvC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAM,MAAA;AAAA,QAChE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;"}

package/dist/components/BottomNavigation/BottomNavigationAction.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { useBottomNavigationContext } from "./BottomNavigation.mjs";
+const BottomNavigationAction = React.forwardRef(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {
+  const {
+    value: selectedValue,
+    onValueChange,
+    showLabelsOnlyWhenActive,
+    hideLabels
+  } = useBottomNavigationContext();
+  const isActive = selectedValue === value;
+  const showLabel = !hideLabels && (!showLabelsOnlyWhenActive || isActive);
+  const handleClick = (e) => {
+    onValueChange?.(value);
+    onClick?.(e);
+  };
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ref,
+      ...!asChild && { type: "button" },
+      "aria-current": isActive ? "page" : void 0,
+      "aria-label": !showLabel && label ? label : void 0,
+      "data-state": isActive ? "active" : "inactive",
+      className: cn(
+        "relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2",
+        "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        isActive ? "text-brand-accent-default" : "text-foreground-tertiary hover:text-foreground-secondary",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: [
+        asChild && /* @__PURE__ */ jsx(Slottable, { children }),
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-7", "aria-hidden": "true", children: icon }),
+          badge && /* @__PURE__ */ jsx("span", { className: "absolute -end-1 -top-0.5", children: badge })
+        ] }),
+        showLabel && label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "typography-semibold-body-xs min-w-0 max-w-full truncate",
+              isActive ? "text-brand-accent-default" : "text-foreground-tertiary"
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+});
+BottomNavigationAction.displayName = "BottomNavigationAction";
+export {
+  BottomNavigationAction
+};
+//# sourceMappingURL=BottomNavigationAction.mjs.map

package/dist/components/BottomNavigation/BottomNavigationAction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigationAction.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigationAction.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useBottomNavigationContext } from \"./BottomNavigation\";\n\nexport interface BottomNavigationActionProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** Unique value that identifies this action. */\n  value: string;\n  /** Icon element displayed above the label. */\n  icon: React.ReactElement;\n  /** Text label displayed below the icon. */\n  label?: string;\n  /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */\n  badge?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n}\n\nexport const BottomNavigationAction = React.forwardRef<\n  HTMLButtonElement,\n  BottomNavigationActionProps\n>(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {\n  const {\n    value: selectedValue,\n    onValueChange,\n    showLabelsOnlyWhenActive,\n    hideLabels,\n  } = useBottomNavigationContext();\n\n  const isActive = selectedValue === value;\n  const showLabel = !hideLabels && (!showLabelsOnlyWhenActive || isActive);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onValueChange?.(value);\n    onClick?.(e);\n  };\n\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      {...(!asChild && { type: \"button\" as const })}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-label={!showLabel && label ? label : undefined}\n      data-state={isActive ? \"active\" : \"inactive\"}\n      className={cn(\n        \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2\",\n        \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n        isActive\n          ? \"text-brand-accent-default\"\n          : \"text-foreground-tertiary hover:text-foreground-secondary\",\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {asChild && <Slottable>{children}</Slottable>}\n      <span className=\"relative inline-flex\">\n        <span className=\"flex size-7\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {badge && <span className=\"absolute -end-1 -top-0.5\">{badge}</span>}\n      </span>\n      {showLabel && label && (\n        <span\n          className={cn(\n            \"typography-semibold-body-xs min-w-0 max-w-full truncate\",\n            isActive ? \"text-brand-accent-default\" : \"text-foreground-tertiary\",\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </Comp>\n  );\n});\n\nBottomNavigationAction.displayName = \"BottomNavigationAction\";\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,yBAAyB,MAAM,WAG1C,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,OAAO,SAAS,UAAU,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,2BAAA;AAEJ,QAAM,WAAW,kBAAkB;AACnC,QAAM,YAAY,CAAC,eAAe,CAAC,4BAA4B;AAE/D,QAAM,cAAc,CAAC,MAA2C;AAC9D,oBAAgB,KAAK;AACrB,cAAU,CAAC;AAAA,EACb;AAEA,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,cAAY,CAAC,aAAa,QAAQ,QAAQ;AAAA,MAC1C,cAAY,WAAW,WAAW;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WACI,8BACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,oBAAC,aAAW,SAAA,CAAS;AAAA,QACjC,qBAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,eAAc,eAAY,QACvC,UAAA,MACH;AAAA,UACC,SAAS,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,QAAA,GAC9D;AAAA,QACC,aAAa,SACZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,8BAA8B;AAAA,YAAA;AAAA,YAG1C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAED,uBAAuB,cAAc;"}