asterui 0.12.13 → 0.12.15

package/dist/index5.js

@@ -1,104 +1,185 @@
-import { jsxs as z, jsx as c } from "react/jsx-runtime";
-import { useState as g, useRef as v, useEffect as y } from "react";
-const L = ({
-  value: a,
-  defaultValue: k = "",
-  onChange: m,
-  options: D,
-  placeholder: I = "Type to search...",
-  disabled: b = !1,
-  size: E = "md",
-  className: N = "",
-  allowCustomValue: w = !0,
-  filterOption: x,
-  notFoundContent: A = "No results found",
-  ...C
+import { jsxs as M, jsx as r } from "react/jsx-runtime";
+import { useId as le, useState as C, useRef as z, useEffect as A } from "react";
+const oe = ({ onClick: o, className: g }) => /* @__PURE__ */ r(
+  "button",
+  {
+    type: "button",
+    onClick: o,
+    className: `flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity ${g || ""}`,
+    "aria-label": "Clear input",
+    tabIndex: -1,
+    children: /* @__PURE__ */ r("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+  }
+), pe = ({
+  value: o,
+  defaultValue: g = "",
+  onChange: w,
+  onSelect: R,
+  onSearch: T,
+  options: V,
+  placeholder: K = "Type to search...",
+  disabled: p = !1,
+  size: S = "md",
+  color: N,
+  status: x,
+  className: U = "",
+  allowCustomValue: D = !0,
+  filterOption: j,
+  notFoundContent: F = "No results found",
+  allowClear: f,
+  onClear: H,
+  open: $,
+  defaultOpen: P = !1,
+  onOpenChange: W,
+  defaultActiveFirstOption: v = !0,
+  ...q
 }) => {
-  const u = D.map(
+  const y = le(), G = `${y}-input`, E = `${y}-listbox`, I = V.map(
     (e) => typeof e == "string" ? { value: e, label: e } : e
-  ), [i, d] = g(k), [f, l] = g(!1), [r, n] = g(-1), p = v(null), o = v(null);
-  y(() => {
-    if (a !== void 0) {
-      const e = u.find((t) => t.value === a);
-      d(e?.label || a);
+  ), [b, h] = C(g), [J, Q] = C(P), [n, a] = C(-1), m = z(null), c = z(null), B = $ !== void 0, u = B ? $ : J, i = (e) => {
+    B || Q(e), W?.(e);
+  };
+  A(() => {
+    if (o !== void 0) {
+      const e = I.find((t) => t.value === o);
+      h(e?.label || o);
     }
-  }, [a, u]);
-  const O = (e, t) => e.label.toLowerCase().includes(t.toLowerCase()), s = u.filter(
-    (e) => x ? x(e, i) : O(e, i)
-  ), F = (e) => {
+  }, [o, I]);
+  const X = (e, t) => e.label.toLowerCase().includes(t.toLowerCase()), l = I.filter(
+    (e) => j ? j(e, b) : X(e, b)
+  ), d = l.filter((e) => !e.disabled), Y = (e) => {
     const t = e.target.value;
-    d(t), l(!0), n(0), w && m?.(t);
-  }, h = (e) => {
-    d(e.label), l(!1), n(-1), m?.(e.value), p.current?.focus();
-  }, R = (e) => {
-    if (!f && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      l(!0), n(0);
+    h(t), i(!0), v && d.length > 0 ? a(0) : a(-1), T?.(t), D && w?.(t);
+  }, k = (e) => {
+    e.disabled || (h(e.label), i(!1), a(-1), w?.(e.value), R?.(e.value, e), m.current?.focus());
+  }, Z = (e) => {
+    if (!u && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      i(!0), v && d.length > 0 && a(0);
       return;
     }
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), n((t) => t < s.length - 1 ? t + 1 : t);
+        e.preventDefault(), a((t) => {
+          for (let s = t + 1; s < l.length; s++)
+            if (!l[s].disabled) return s;
+          return t;
+        });
         break;
       case "ArrowUp":
-        e.preventDefault(), n((t) => t > 0 ? t - 1 : 0);
+        e.preventDefault(), a((t) => {
+          for (let s = t - 1; s >= 0; s--)
+            if (!l[s].disabled) return s;
+          return t;
+        });
         break;
       case "Enter":
-        e.preventDefault(), r >= 0 && s[r] ? h(s[r]) : !w && s.length > 0 && h(s[0]);
+        e.preventDefault(), n >= 0 && l[n] && !l[n].disabled ? k(l[n]) : !D && d.length > 0 && k(d[0]);
         break;
       case "Escape":
-        l(!1), n(-1), p.current?.blur();
+        i(!1), a(-1), m.current?.blur();
         break;
     }
-  }, T = () => {
-    l(!0), s.length > 0 && n(0);
-  }, V = (e) => {
-    o.current && o.current.contains(e.relatedTarget) || setTimeout(() => l(!1), 200);
-  }, $ = {
+  }, _ = () => {
+    i(!0), v && d.length > 0 && a(0);
+  }, ee = (e) => {
+    c.current && c.current.contains(e.relatedTarget) || setTimeout(() => i(!1), 200);
+  }, te = (e) => {
+    e.stopPropagation(), h(""), w?.(""), H?.(), m.current?.focus();
+  }, ne = {
     xs: "input-xs",
     sm: "input-sm",
     md: "input-md",
-    lg: "input-lg"
-  }[E];
-  return y(() => {
-    r >= 0 && o.current && o.current.children[r]?.scrollIntoView({ block: "nearest" });
-  }, [r]), /* @__PURE__ */ z("div", { className: `relative ${N}`, "data-state": f ? "open" : "closed", ...C, children: [
-    /* @__PURE__ */ c(
-      "input",
-      {
-        ref: p,
-        type: "text",
-        value: i,
-        onChange: F,
-        onKeyDown: R,
-        onFocus: T,
-        onBlur: V,
-        placeholder: I,
-        disabled: b,
-        className: `input input-bordered w-full ${$}`
-      }
-    ),
-    f && !b && /* @__PURE__ */ c(
-      "div",
-      {
-        ref: o,
-        className: "absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto",
-        children: s.length > 0 ? s.map((e, t) => /* @__PURE__ */ c(
-          "div",
+    lg: "input-lg",
+    xl: "input-xl"
+  }, se = x ? {
+    error: "input-error",
+    warning: "input-warning"
+  }[x] : N ? {
+    neutral: "input-neutral",
+    primary: "input-primary",
+    secondary: "input-secondary",
+    accent: "input-accent",
+    info: "input-info",
+    success: "input-success",
+    warning: "input-warning",
+    error: "input-error"
+  }[N] : "";
+  A(() => {
+    n >= 0 && c.current && c.current.children[n]?.scrollIntoView({ block: "nearest" });
+  }, [n]);
+  const L = f && b && !p, re = typeof f == "object" && f.clearIcon ? f.clearIcon : null, O = (e) => `${y}-option-${e}`, ae = [
+    "input input-bordered w-full",
+    ne[S],
+    se,
+    L && "pr-10"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      className: `dropdown dropdown-bottom w-full ${u && !p ? "dropdown-open" : ""} ${U}`,
+      "data-state": u ? "open" : "closed",
+      ...q,
+      children: [
+        /* @__PURE__ */ M("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: m,
+              id: G,
+              type: "text",
+              role: "combobox",
+              "aria-expanded": u,
+              "aria-haspopup": "listbox",
+              "aria-controls": E,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": n >= 0 ? O(n) : void 0,
+              "aria-invalid": x === "error" ? !0 : void 0,
+              value: b,
+              onChange: Y,
+              onKeyDown: Z,
+              onFocus: _,
+              onBlur: ee,
+              placeholder: K,
+              disabled: p,
+              className: ae
+            }
+          ),
+          L && /* @__PURE__ */ r("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 z-10", children: re || /* @__PURE__ */ r(oe, { onClick: te }) })
+        ] }),
+        u && !p && /* @__PURE__ */ r(
+          "ul",
           {
-            onMouseDown: (j) => {
-              j.preventDefault(), h(e);
-            },
-            onMouseEnter: () => n(t),
-            className: `px-4 py-2 cursor-pointer transition-colors ${t === r ? "bg-primary text-primary-content" : "hover:bg-base-200"}`,
-            children: e.label
-          },
-          e.value
-        )) : /* @__PURE__ */ c("div", { className: "px-4 py-2 text-base-content/60 text-center", children: A })
-      }
-    )
-  ] });
+            ref: c,
+            id: E,
+            role: "listbox",
+            "aria-label": "Suggestions",
+            tabIndex: -1,
+            className: "dropdown-content menu bg-base-100 rounded-box z-50 w-full shadow-lg border border-base-300 max-h-60 overflow-auto flex-nowrap",
+            children: l.length > 0 ? l.map((e, t) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+              "a",
+              {
+                id: O(t),
+                role: "option",
+                "aria-selected": n === t,
+                "aria-disabled": e.disabled,
+                onMouseDown: (s) => {
+                  s.preventDefault(), k(e);
+                },
+                onMouseEnter: () => !e.disabled && a(t),
+                className: [
+                  t === n && !e.disabled && "active",
+                  e.disabled && "disabled text-base-content/40 cursor-not-allowed"
+                ].filter(Boolean).join(" "),
+                children: e.label
+              }
+            ) }, e.value)) : /* @__PURE__ */ r("li", { className: "disabled", children: /* @__PURE__ */ r("span", { className: "text-base-content/60 text-center cursor-default", children: F }) })
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  L as Autocomplete
+  pe as Autocomplete
 };
 //# sourceMappingURL=index5.js.map

package/dist/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":["../src/components/Autocomplete.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\n\nexport interface AutocompleteOption {\n  value: string\n  label: string\n}\n\nexport interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  options: AutocompleteOption[] | string[]\n  placeholder?: string\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  allowCustomValue?: boolean\n  filterOption?: (option: AutocompleteOption, inputValue: string) => boolean\n  notFoundContent?: React.ReactNode\n}\n\nexport const Autocomplete: React.FC<AutocompleteProps> = ({\n  value,\n  defaultValue = '',\n  onChange,\n  options: rawOptions,\n  placeholder = 'Type to search...',\n  disabled = false,\n  size = 'md',\n  className = '',\n  allowCustomValue = true,\n  filterOption,\n  notFoundContent = 'No results found',\n  ...rest\n}) => {\n  // Normalize options to AutocompleteOption[]\n  const options: AutocompleteOption[] = rawOptions.map((opt) =>\n    typeof opt === 'string' ? { value: opt, label: opt } : opt\n  )\n\n  const [inputValue, setInputValue] = useState(defaultValue)\n  const [isOpen, setIsOpen] = useState(false)\n  const [highlightedIndex, setHighlightedIndex] = useState(-1)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n\n  // Update input value when controlled value changes\n  useEffect(() => {\n    if (value !== undefined) {\n      const selectedOption = options.find((opt) => opt.value === value)\n      setInputValue(selectedOption?.label || value)\n    }\n  }, [value, options])\n\n  // Filter options based on input\n  const defaultFilter = (option: AutocompleteOption, input: string) =>\n    option.label.toLowerCase().includes(input.toLowerCase())\n\n  const filteredOptions = options.filter((option) =>\n    filterOption ? filterOption(option, inputValue) : defaultFilter(option, inputValue)\n  )\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newInputValue = e.target.value\n    setInputValue(newInputValue)\n    setIsOpen(true)\n    setHighlightedIndex(0)\n\n    if (allowCustomValue) {\n      onChange?.(newInputValue)\n    }\n  }\n\n  const handleOptionClick = (option: AutocompleteOption) => {\n    setInputValue(option.label)\n    setIsOpen(false)\n    setHighlightedIndex(-1)\n\n    onChange?.(option.value)\n    inputRef.current?.focus()\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n      setIsOpen(true)\n      setHighlightedIndex(0)\n      return\n    }\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev))\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))\n        break\n      case 'Enter':\n        e.preventDefault()\n        if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {\n          handleOptionClick(filteredOptions[highlightedIndex])\n        } else if (!allowCustomValue && filteredOptions.length > 0) {\n          handleOptionClick(filteredOptions[0])\n        }\n        break\n      case 'Escape':\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        inputRef.current?.blur()\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    setIsOpen(true)\n    if (filteredOptions.length > 0) {\n      setHighlightedIndex(0)\n    }\n  }\n\n  const handleBlur = (e: React.FocusEvent) => {\n    // Don't close if clicking inside dropdown\n    if (dropdownRef.current && dropdownRef.current.contains(e.relatedTarget as Node)) {\n      return\n    }\n    setTimeout(() => setIsOpen(false), 200)\n  }\n\n  const sizeClass = {\n    xs: 'input-xs',\n    sm: 'input-sm',\n    md: 'input-md',\n    lg: 'input-lg',\n  }[size]\n\n  // Scroll highlighted option into view\n  useEffect(() => {\n    if (highlightedIndex >= 0 && dropdownRef.current) {\n      const highlightedElement = dropdownRef.current.children[highlightedIndex] as HTMLElement\n      highlightedElement?.scrollIntoView({ block: 'nearest' })\n    }\n  }, [highlightedIndex])\n\n  return (\n    <div className={`relative ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={`input input-bordered w-full ${sizeClass}`}\n      />\n\n      {isOpen && !disabled && (\n        <div\n          ref={dropdownRef}\n          className=\"absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto\"\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((option, index) => (\n              <div\n                key={option.value}\n                onMouseDown={(e) => {\n                  e.preventDefault()\n                  handleOptionClick(option)\n                }}\n                onMouseEnter={() => setHighlightedIndex(index)}\n                className={`px-4 py-2 cursor-pointer transition-colors ${\n                  index === highlightedIndex\n                    ? 'bg-primary text-primary-content'\n                    : 'hover:bg-base-200'\n                }`}\n              >\n                {option.label}\n              </div>\n            ))\n          ) : (\n            <div className=\"px-4 py-2 text-base-content/60 text-center\">{notFoundContent}</div>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["Autocomplete","value","defaultValue","onChange","rawOptions","placeholder","disabled","size","className","allowCustomValue","filterOption","notFoundContent","rest","options","opt","inputValue","setInputValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","inputRef","useRef","dropdownRef","useEffect","selectedOption","defaultFilter","option","input","filteredOptions","handleInputChange","newInputValue","handleOptionClick","handleKeyDown","prev","handleFocus","handleBlur","sizeClass","jsxs","jsx","index","e"],"mappings":"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"}
+{"version":3,"file":"index5.js","sources":["../src/components/Autocomplete.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react'\n\nexport interface AutocompleteOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSelect'> {\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  onSelect?: (value: string, option: AutocompleteOption) => void\n  onSearch?: (value: string) => void\n  options: AutocompleteOption[] | string[]\n  placeholder?: string\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'\n  /** Validation status */\n  status?: 'error' | 'warning'\n  allowCustomValue?: boolean\n  filterOption?: (option: AutocompleteOption, inputValue: string) => boolean\n  notFoundContent?: React.ReactNode\n  /** Show clear button when input has value */\n  allowClear?: boolean | { clearIcon?: React.ReactNode }\n  /** Callback when clear button is clicked */\n  onClear?: () => void\n  /** Controlled open state */\n  open?: boolean\n  /** Default open state */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Activate first option by default */\n  defaultActiveFirstOption?: boolean\n}\n\n// Clear icon component\nconst ClearIcon: React.FC<{ onClick: (e: React.MouseEvent) => void; className?: string }> = ({ onClick, className }) => (\n  <button\n    type=\"button\"\n    onClick={onClick}\n    className={`flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity ${className || ''}`}\n    aria-label=\"Clear input\"\n    tabIndex={-1}\n  >\n    <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  </button>\n)\n\nexport const Autocomplete: React.FC<AutocompleteProps> = ({\n  value,\n  defaultValue = '',\n  onChange,\n  onSelect,\n  onSearch,\n  options: rawOptions,\n  placeholder = 'Type to search...',\n  disabled = false,\n  size = 'md',\n  color,\n  status,\n  className = '',\n  allowCustomValue = true,\n  filterOption,\n  notFoundContent = 'No results found',\n  allowClear,\n  onClear,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  defaultActiveFirstOption = true,\n  ...rest\n}) => {\n  // Generate unique IDs for ARIA\n  const baseId = useId()\n  const inputId = `${baseId}-input`\n  const listboxId = `${baseId}-listbox`\n\n  // Normalize options to AutocompleteOption[]\n  const options: AutocompleteOption[] = rawOptions.map((opt) =>\n    typeof opt === 'string' ? { value: opt, label: opt } : opt\n  )\n\n  const [inputValue, setInputValue] = useState(defaultValue)\n  const [internalOpen, setInternalOpen] = useState(defaultOpen)\n  const [highlightedIndex, setHighlightedIndex] = useState(-1)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const dropdownRef = useRef<HTMLUListElement>(null)\n\n  // Determine if open state is controlled\n  const isOpenControlled = controlledOpen !== undefined\n  const isOpen = isOpenControlled ? controlledOpen : internalOpen\n\n  const setIsOpen = (newOpen: boolean) => {\n    if (!isOpenControlled) {\n      setInternalOpen(newOpen)\n    }\n    onOpenChange?.(newOpen)\n  }\n\n  // Update input value when controlled value changes\n  useEffect(() => {\n    if (value !== undefined) {\n      const selectedOption = options.find((opt) => opt.value === value)\n      setInputValue(selectedOption?.label || value)\n    }\n  }, [value, options])\n\n  // Filter options based on input\n  const defaultFilter = (option: AutocompleteOption, input: string) =>\n    option.label.toLowerCase().includes(input.toLowerCase())\n\n  const filteredOptions = options.filter((option) =>\n    filterOption ? filterOption(option, inputValue) : defaultFilter(option, inputValue)\n  )\n\n  // Get only enabled options for keyboard navigation\n  const enabledOptions = filteredOptions.filter(opt => !opt.disabled)\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newInputValue = e.target.value\n    setInputValue(newInputValue)\n    setIsOpen(true)\n\n    if (defaultActiveFirstOption && enabledOptions.length > 0) {\n      setHighlightedIndex(0)\n    } else {\n      setHighlightedIndex(-1)\n    }\n\n    onSearch?.(newInputValue)\n\n    if (allowCustomValue) {\n      onChange?.(newInputValue)\n    }\n  }\n\n  const handleOptionClick = (option: AutocompleteOption) => {\n    if (option.disabled) return\n\n    setInputValue(option.label)\n    setIsOpen(false)\n    setHighlightedIndex(-1)\n\n    onChange?.(option.value)\n    onSelect?.(option.value, option)\n    inputRef.current?.focus()\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n      setIsOpen(true)\n      if (defaultActiveFirstOption && enabledOptions.length > 0) {\n        setHighlightedIndex(0)\n      }\n      return\n    }\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        setHighlightedIndex((prev) => {\n          // Find next enabled option\n          for (let i = prev + 1; i < filteredOptions.length; i++) {\n            if (!filteredOptions[i].disabled) return i\n          }\n          return prev\n        })\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        setHighlightedIndex((prev) => {\n          // Find previous enabled option\n          for (let i = prev - 1; i >= 0; i--) {\n            if (!filteredOptions[i].disabled) return i\n          }\n          return prev\n        })\n        break\n      case 'Enter':\n        e.preventDefault()\n        if (highlightedIndex >= 0 && filteredOptions[highlightedIndex] && !filteredOptions[highlightedIndex].disabled) {\n          handleOptionClick(filteredOptions[highlightedIndex])\n        } else if (!allowCustomValue && enabledOptions.length > 0) {\n          handleOptionClick(enabledOptions[0])\n        }\n        break\n      case 'Escape':\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        inputRef.current?.blur()\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    setIsOpen(true)\n    if (defaultActiveFirstOption && enabledOptions.length > 0) {\n      setHighlightedIndex(0)\n    }\n  }\n\n  const handleBlur = (e: React.FocusEvent) => {\n    // Don't close if clicking inside dropdown\n    if (dropdownRef.current && dropdownRef.current.contains(e.relatedTarget as Node)) {\n      return\n    }\n    setTimeout(() => setIsOpen(false), 200)\n  }\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setInputValue('')\n    onChange?.('')\n    onClear?.()\n    inputRef.current?.focus()\n  }\n\n  const sizeClasses = {\n    xs: 'input-xs',\n    sm: 'input-sm',\n    md: 'input-md',\n    lg: 'input-lg',\n    xl: 'input-xl',\n  }\n\n  const colorClasses = {\n    neutral: 'input-neutral',\n    primary: 'input-primary',\n    secondary: 'input-secondary',\n    accent: 'input-accent',\n    info: 'input-info',\n    success: 'input-success',\n    warning: 'input-warning',\n    error: 'input-error',\n  }\n\n  const statusClasses = {\n    error: 'input-error',\n    warning: 'input-warning',\n  }\n\n  // Status takes precedence over color for validation feedback\n  const effectiveColorClass = status ? statusClasses[status] : (color ? colorClasses[color] : '')\n\n  // Scroll highlighted option into view\n  useEffect(() => {\n    if (highlightedIndex >= 0 && dropdownRef.current) {\n      const highlightedElement = dropdownRef.current.children[highlightedIndex] as HTMLElement\n      highlightedElement?.scrollIntoView({ block: 'nearest' })\n    }\n  }, [highlightedIndex])\n\n  // Determine if we should show clear button\n  const showClear = allowClear && inputValue && !disabled\n\n  // Get custom clear icon if provided\n  const clearIcon = typeof allowClear === 'object' && allowClear.clearIcon\n    ? allowClear.clearIcon\n    : null\n\n  // Get option ID for ARIA\n  const getOptionId = (index: number) => `${baseId}-option-${index}`\n\n  const inputClasses = [\n    'input input-bordered w-full',\n    sizeClasses[size],\n    effectiveColorClass,\n    showClear && 'pr-10',\n  ].filter(Boolean).join(' ')\n\n  return (\n    <div\n      className={`dropdown dropdown-bottom w-full ${isOpen && !disabled ? 'dropdown-open' : ''} ${className}`}\n      data-state={isOpen ? 'open' : 'closed'}\n      {...rest}\n    >\n      <div className=\"relative w-full\">\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={highlightedIndex >= 0 ? getOptionId(highlightedIndex) : undefined}\n          aria-invalid={status === 'error' ? true : undefined}\n          value={inputValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={inputClasses}\n        />\n        {showClear && (\n          <span className=\"absolute right-3 top-1/2 -translate-y-1/2 z-10\">\n            {clearIcon || <ClearIcon onClick={handleClear} />}\n          </span>\n        )}\n      </div>\n\n      {isOpen && !disabled && (\n        <ul\n          ref={dropdownRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-label=\"Suggestions\"\n          tabIndex={-1}\n          className=\"dropdown-content menu bg-base-100 rounded-box z-50 w-full shadow-lg border border-base-300 max-h-60 overflow-auto flex-nowrap\"\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((option, index) => (\n              <li key={option.value}>\n                <a\n                  id={getOptionId(index)}\n                  role=\"option\"\n                  aria-selected={highlightedIndex === index}\n                  aria-disabled={option.disabled}\n                  onMouseDown={(e) => {\n                    e.preventDefault()\n                    handleOptionClick(option)\n                  }}\n                  onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}\n                  className={[\n                    index === highlightedIndex && !option.disabled && 'active',\n                    option.disabled && 'disabled text-base-content/40 cursor-not-allowed',\n                  ].filter(Boolean).join(' ')}\n                >\n                  {option.label}\n                </a>\n              </li>\n            ))\n          ) : (\n            <li className=\"disabled\">\n              <span className=\"text-base-content/60 text-center cursor-default\">{notFoundContent}</span>\n            </li>\n          )}\n        </ul>\n      )}\n    </div>\n  )\n}\n"],"names":["ClearIcon","onClick","className","jsx","Autocomplete","value","defaultValue","onChange","onSelect","onSearch","rawOptions","placeholder","disabled","size","color","status","allowCustomValue","filterOption","notFoundContent","allowClear","onClear","controlledOpen","defaultOpen","onOpenChange","defaultActiveFirstOption","rest","baseId","useId","inputId","listboxId","options","opt","inputValue","setInputValue","useState","internalOpen","setInternalOpen","highlightedIndex","setHighlightedIndex","inputRef","useRef","dropdownRef","isOpenControlled","isOpen","setIsOpen","newOpen","useEffect","selectedOption","defaultFilter","option","input","filteredOptions","enabledOptions","handleInputChange","newInputValue","handleOptionClick","handleKeyDown","prev","i","handleFocus","handleBlur","handleClear","sizeClasses","effectiveColorClass","showClear","clearIcon","getOptionId","index","inputClasses","jsxs","e"],"mappings":"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"}

package/dist/index50.js

@@ -1,179 +1,84 @@
-import { jsx as a, jsxs as K } from "react/jsx-runtime";
-import { useState as f, useRef as $, useCallback as A, useEffect as C } from "react";
-import { createPortal as oe } from "react-dom";
-const fe = ({
-  value: p,
-  defaultValue: q = "",
-  onChange: E,
-  onSelect: U,
-  onSearch: W,
-  options: R = [],
-  loading: X = !1,
-  prefix: k = "@",
-  split: v = " ",
-  placeholder: Y,
-  disabled: G = !1,
-  readOnly: J = !1,
-  rows: V = 3,
-  autoSize: o = !1,
-  notFoundContent: Q = "No matches found",
-  filterOption: x = !0,
-  className: Z = "",
-  dropdownClassName: _ = "",
-  ...z
+import { jsx as H } from "react/jsx-runtime";
+import I, { useRef as R, useState as b, useCallback as K, useLayoutEffect as A } from "react";
+const d = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function L(t, e) {
+  return typeof t == "number" ? t : t ? t["2xl"] !== void 0 && e >= d["2xl"] ? t["2xl"] : t.xl !== void 0 && e >= d.xl ? t.xl : t.lg !== void 0 && e >= d.lg ? t.lg : t.md !== void 0 && e >= d.md ? t.md : t.sm !== void 0 && e >= d.sm ? t.sm : t.xs !== void 0 ? t.xs : 3 : 3;
+}
+const O = ({
+  children: t,
+  columns: e = 3,
+  gap: r = 16,
+  className: z = "",
+  style: M,
+  ...P
 }) => {
-  const [ee, T] = f(q), h = p !== void 0 ? p : ee, [u, m] = f(!1), [I, N] = f(null), [D, M] = f(""), [d, y] = f(0), [g, H] = f(null), [j, te] = f({ top: 0, left: 0 }), l = $(null), b = $(null), B = $(null), ne = Array.isArray(k) ? k : [k], c = A(() => {
-    if (!x) return R;
-    const e = typeof x == "function" ? x : (t, n) => (n.label || n.value).toLowerCase().includes(t.toLowerCase());
-    return R.filter((t) => e(D, t));
-  }, [R, D, x])(), L = A(() => {
-    const e = l.current;
-    if (!e || !o) return;
-    e.style.height = "auto";
-    const t = e.scrollHeight;
-    if (typeof o == "object") {
-      const n = parseInt(getComputedStyle(e).lineHeight) || 20, r = o.minRows ? o.minRows * n : 0, s = o.maxRows ? o.maxRows * n : 1 / 0;
-      e.style.height = `${Math.min(Math.max(t, r), s)}px`;
-    } else
-      e.style.height = `${t}px`;
-  }, [o]);
-  C(() => {
-    L();
-  }, [h, L]);
-  const O = A(() => {
-    const e = l.current, t = B.current;
-    if (!e || !t || g === null) return;
-    const n = h.substring(0, g);
-    t.textContent = n;
-    const r = e.getBoundingClientRect(), s = t.getBoundingClientRect(), w = parseInt(getComputedStyle(e).lineHeight) || 20;
-    te({
-      top: r.top + window.scrollY + w + 4,
-      left: r.left + window.scrollX + Math.min(s.width % r.width, r.width - 200)
-    });
-  }, [h, g]);
-  C(() => {
-    u && O();
-  }, [u, O, D]);
-  const re = (e) => {
-    const t = e.target.value, n = e.target.selectionStart;
-    p === void 0 && T(t), E?.(t), se(t, n);
-  }, se = (e, t) => {
-    let n = null, r = null;
-    for (const s of ne) {
-      const i = e.substring(0, t).lastIndexOf(s);
-      if (i !== -1) {
-        const S = i > 0 ? e[i - 1] : v;
-        if (S === v || S === `
-` || i === 0) {
-          const F = e.substring(i + s.length, t);
-          if (!F.includes(v) && !F.includes(`
-`)) {
-            n = s, r = i;
-            break;
-          }
-        }
-      }
-    }
-    if (n !== null && r !== null) {
-      const s = e.substring(r + n.length, t);
-      N(n), M(s), H(r), m(!0), y(0), W?.(s, n);
-    } else
-      m(!1), N(null), M(""), H(null);
-  }, P = (e) => {
-    if (e.disabled || g === null || I === null) return;
-    const t = l.current;
-    if (!t) return;
-    const n = h.substring(0, g), r = h.substring(t.selectionStart), s = `${I}${e.value}${v}`, w = n + s + r;
-    p === void 0 && T(w), E?.(w), U?.(e, I), m(!1), N(null), M(""), H(null), setTimeout(() => {
-      const i = n.length + s.length;
-      t.focus(), t.setSelectionRange(i, i);
-    }, 0);
-  }, ae = (e) => {
-    if (u)
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault(), y((t) => (t + 1) % Math.max(c.length, 1));
-          break;
-        case "ArrowUp":
-          e.preventDefault(), y((t) => (t - 1 + c.length) % Math.max(c.length, 1));
-          break;
-        case "Enter":
-          c[d] && (e.preventDefault(), P(c[d]));
-          break;
-        case "Escape":
-          e.preventDefault(), m(!1);
-          break;
-        case "Tab":
-          c[d] && (e.preventDefault(), P(c[d]));
-          break;
-      }
-  };
-  C(() => {
-    const e = (t) => {
-      b.current && !b.current.contains(t.target) && l.current && !l.current.contains(t.target) && m(!1);
+  const u = R(null), [l, T] = b([]), [y, N] = b(0), w = R([]), c = I.Children.toArray(t), s = K(() => {
+    const i = u.current;
+    if (!i || c.length === 0) return;
+    const n = i.offsetWidth, m = typeof window < "u" ? window.innerWidth : n, a = L(e, m), j = (n - r * (a - 1)) / a, o = new Array(a).fill(0), W = [];
+    c.forEach((_, x) => {
+      const C = w.current[x];
+      if (!C) return;
+      let h = 0, E = o[0];
+      for (let f = 1; f < a; f++)
+        o[f] < E && (E = o[f], h = f);
+      const k = h * (j + r), B = o[h];
+      W[x] = { left: k, top: B };
+      const F = C.offsetHeight;
+      o[h] += F + r;
+    }), T(W), N(Math.max(...o) - r);
+  }, [t, e, r, c.length]);
+  A(() => {
+    s();
+    const i = () => {
+      s();
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), C(() => {
-    u && b.current && b.current.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
-  }, [d, u]);
-  const le = u && /* @__PURE__ */ a(
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, [s]), A(() => {
+    const i = setTimeout(s, 0);
+    return () => clearTimeout(i);
+  }, [t, s]);
+  const v = u.current?.offsetWidth ?? 0, S = typeof window < "u" ? window.innerWidth : v, g = L(e, S), p = v > 0 ? (v - r * (g - 1)) / g : 0;
+  return /* @__PURE__ */ H(
     "div",
     {
-      ref: b,
-      className: `fixed z-50 bg-base-100 border border-base-300 rounded-lg shadow-lg
-        min-w-48 max-h-60 overflow-auto ${_}`,
+      ref: u,
+      className: z,
       style: {
-        top: j.top,
-        left: j.left
+        position: "relative",
+        height: y > 0 ? y : void 0,
+        ...M
       },
-      children: X ? /* @__PURE__ */ a("div", { className: "p-3 text-center text-base-content/60", children: /* @__PURE__ */ a("span", { className: "loading loading-spinner loading-sm" }) }) : c.length === 0 ? /* @__PURE__ */ a("div", { className: "p-3 text-center text-base-content/60 text-sm", children: Q }) : /* @__PURE__ */ a("ul", { className: "menu menu-sm p-1", children: c.map((e, t) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ K(
-        "button",
+      ...P,
+      children: c.map((i, n) => /* @__PURE__ */ H(
+        "div",
         {
-          type: "button",
-          "data-active": t === d,
-          className: `flex items-center gap-2 ${t === d ? "active" : ""} ${e.disabled ? "disabled opacity-50 cursor-not-allowed" : ""}`,
-          onClick: () => P(e),
-          onMouseEnter: () => y(t),
-          children: [
-            e.avatar && /* @__PURE__ */ a("div", { className: "avatar", children: /* @__PURE__ */ a("div", { className: "w-6 h-6 rounded-full", children: /* @__PURE__ */ a("img", { src: e.avatar, alt: "" }) }) }),
-            /* @__PURE__ */ a("span", { children: e.label || e.value })
-          ]
-        }
-      ) }, e.value)) })
+          ref: (m) => {
+            w.current[n] = m;
+          },
+          style: {
+            position: l.length > 0 ? "absolute" : "relative",
+            left: l[n]?.left ?? 0,
+            top: l[n]?.top ?? 0,
+            width: p > 0 ? p : "100%",
+            visibility: l.length > 0 ? "visible" : "hidden"
+          },
+          children: i
+        },
+        n
+      ))
     }
   );
-  return /* @__PURE__ */ K("div", { className: `relative ${Z}`, "data-state": u ? "open" : "closed", ...z, children: [
-    /* @__PURE__ */ a(
-      "div",
-      {
-        ref: B,
-        className: "invisible absolute whitespace-pre-wrap break-words",
-        style: {
-          font: l.current ? getComputedStyle(l.current).font : void 0,
-          width: l.current?.clientWidth,
-          padding: l.current ? getComputedStyle(l.current).padding : void 0
-        },
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ a(
-      "textarea",
-      {
-        ref: l,
-        value: h,
-        onChange: re,
-        onKeyDown: ae,
-        placeholder: Y,
-        disabled: G,
-        readOnly: J,
-        rows: typeof o == "object" ? o.minRows || V : o ? 1 : V,
-        className: "textarea textarea-bordered w-full resize-none"
-      }
-    ),
-    oe(le, document.body)
-  ] });
 };
+O.displayName = "Masonry";
 export {
-  fe as Mention
+  O as Masonry,
+  O as default
 };
 //# sourceMappingURL=index50.js.map