@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/inputs/index.cjs

@@ -0,0 +1,746 @@
+'use strict';
+
+var react$1 = require('react');
+var ui = require('@beautinique/frontend-components/ui');
+var react = require('@iconify/react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/content.ts
+var hasContent = /* @__PURE__ */ __name((content) => content !== null && content !== void 0 && content !== false && content !== true && content !== "", "hasContent");
+
+// src/lib/mergeRefs.ts
+var assign = /* @__PURE__ */ __name((ref, node) => {
+  if (typeof ref === "function") return ref(node);
+  if (ref) ref.current = node;
+  return void 0;
+}, "assign");
+var mergeRefs = /* @__PURE__ */ __name((...refs) => (node) => {
+  const cleanups = refs.map((ref) => assign(ref, node));
+  return () => {
+    refs.forEach((ref, index) => {
+      const cleanup = cleanups[index];
+      if (typeof cleanup === "function") cleanup();
+      else assign(ref, null);
+    });
+  };
+}, "mergeRefs");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/inputs/inputs-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "info-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 17V11"/><path stroke-linejoin="round" d="M12 8H12.0001"/></g>'
+      },
+      "alt-arrow-down-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9L12 15L5 9"/>'
+      },
+      "unread-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12.9L10.1429 16.5L18 7.5"/>'
+      }
+    }
+  }
+];
+var { register: registerInputIcons, names: INPUT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var InputError = /* @__PURE__ */ __name(({ error = "", className = "", ...pProps }) => {
+  registerInputIcons();
+  if (!error) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "p",
+    {
+      role: "alert",
+      ...pProps,
+      className: `text-red-c flex w-full items-center gap-1 text-start text-[11px] ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "solar:info-circle-linear", className: "mb-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 leading-3 whitespace-pre-line first-letter:uppercase", children: error })
+      ]
+    }
+  );
+}, "InputError");
+var useFieldIds = /* @__PURE__ */ __name(({ id, name, error, describedBy }) => {
+  const generated = react$1.useId();
+  const fieldId = id ?? name ?? generated;
+  const errorId = `${fieldId}-error`;
+  return {
+    id: fieldId,
+    errorId,
+    "aria-invalid": error ? true : void 0,
+    "aria-describedby": [describedBy, error ? errorId : void 0].filter(Boolean).join(" ") || void 0
+  };
+}, "useFieldIds");
+var Checkbox = /* @__PURE__ */ __name(({
+  register,
+  className = "",
+  content,
+  checkboxProps,
+  containerClassName = "",
+  error = "",
+  tooltip,
+  ref
+}) => {
+  const { id, errorId, ...aria } = useFieldIds({
+    id: checkboxProps.id,
+    name: checkboxProps.name ?? register?.name,
+    error,
+    describedBy: checkboxProps["aria-describedby"]
+  });
+  const mergedRef = react$1.useMemo(
+    () => mergeRefs(register?.ref, ref),
+    [register?.ref, ref]
+  );
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (checkboxProps.disabled) return;
+    void register?.onChange(event);
+    checkboxProps.onChange?.(event);
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    checkboxProps.onBlur?.(event);
+    void register?.onBlur(event);
+  }, "handleBlur");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          title: tooltip?.title,
+          description: tooltip?.description,
+          placement: tooltip?.placement,
+          required: tooltip?.required ?? false,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative inline-block h-6 w-12 shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...register,
+                ...checkboxProps,
+                ...aria,
+                type: "checkbox",
+                role: "switch",
+                ref: mergedRef,
+                id,
+                onChange: handleChange,
+                onBlur: handleBlur,
+                className: "peer sr-only"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: `border-primary/10 bg-tertiary-invert peer-checked:border-blue-crayola-c before:bg-silver-duo peer-checked:before:bg-accent-duo absolute inset-0 cursor-pointer rounded-full border transition-all duration-400 ease-[cubic-bezier(0.175,0.885,0.32,1.275)] peer-checked:shadow-[0_0_10px_rgba(var(--blue-crayola-c-rgb),0.8)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-crayola-c peer-disabled:cursor-not-allowed peer-disabled:opacity-60 motion-reduce:transition-none before:absolute before:top-1/2 before:left-1 before:aspect-square before:h-[70%] before:-translate-y-1/2 before:rounded-full before:transition-all before:duration-400 before:ease-[cubic-bezier(0.23,1,0.32,1)] before:content-[''] motion-reduce:before:transition-none peer-checked:before:translate-x-[calc(150%)] ${className}`
+              }
+            )
+          ] })
+        }
+      ),
+      hasContent(content) && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: "text-primary/50 cursor-pointer text-xs font-medium whitespace-break-spaces sm:text-[13px] md:text-sm",
+          children: content
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, error })
+  ] });
+}, "Checkbox");
+var BUTTON_CSS = "flex shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c disabled:cursor-not-allowed disabled:opacity-60";
+var InputIcon = /* @__PURE__ */ __name(({ icon }) => {
+  if (!icon) return null;
+  if (react$1.isValidElement(icon)) return icon;
+  if (icon.onClick) {
+    const { onClick, label, disabled, className: className2 = "", ...iconProps2 } = icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        disabled,
+        onClick,
+        className: BUTTON_CSS,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...iconProps2, className: className2 })
+      }
+    );
+  }
+  const { className = "", ...iconProps } = icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...iconProps, className: `shrink-0 ${className}` });
+}, "InputIcon");
+var InputLabel = /* @__PURE__ */ __name(({
+  children,
+  className = "",
+  htmlFor,
+  ...labelProps
+}) => hasContent(children) ? /* @__PURE__ */ jsxRuntime.jsx(
+  "label",
+  {
+    ...labelProps,
+    htmlFor,
+    className: `text-primary/50 border-primary/10 bg-smoke-eerie absolute top-0 left-3 -translate-y-1/2 transform rounded-sm border px-1 py-0.5 pt-1 text-[10px] leading-none md:px-2 ${htmlFor ? "cursor-pointer" : "cursor-default"} ${className}`,
+    children
+  }
+) : null, "InputLabel");
+var Input = /* @__PURE__ */ __name(({
+  label = "",
+  register,
+  className = "",
+  error = "",
+  containerClassName = "",
+  icons,
+  inputProps,
+  needRef = false,
+  ref
+}) => {
+  const inputRef = react$1.useRef(null);
+  const { id, errorId, ...aria } = useFieldIds({
+    id: inputProps.id,
+    name: inputProps.name ?? register?.name,
+    error,
+    describedBy: inputProps["aria-describedby"]
+  });
+  const mergedRef = react$1.useMemo(
+    () => mergeRefs(register?.ref, ref, inputRef),
+    [register?.ref, ref]
+  );
+  react$1.useEffect(() => {
+    if (needRef) inputRef.current?.focus();
+  }, [needRef]);
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (inputProps.disabled) return;
+    inputProps.onChange?.(event);
+    void register?.onChange(event);
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    inputProps.onBlur?.(event);
+    void register?.onBlur(event);
+  }, "handleBlur");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: id, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-invalid": error ? "" : void 0,
+          className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c flex items-center gap-3 overflow-hidden rounded-lg border px-3 ${className}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InputIcon, { icon: icons?.left }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...register,
+                ...inputProps,
+                ...aria,
+                ref: mergedRef,
+                id,
+                onChange: handleChange,
+                onBlur: handleBlur,
+                onWheel: (event) => {
+                  inputProps.onWheel?.(event);
+                  if (inputProps.type === "number") event.currentTarget.blur();
+                },
+                className: `text-primary placeholder:text-primary/30 autofill-effect min-w-0 flex-1 border-none bg-transparent py-2 text-[13px] leading-normal outline-hidden placeholder:text-[13px] focus:border-none focus:outline-hidden disabled:cursor-not-allowed xl:py-3 ${inputProps.className ?? ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InputIcon, { icon: icons?.right })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, error })
+  ] });
+}, "Input");
+var Radio = /* @__PURE__ */ __name(({
+  value,
+  onChange,
+  options,
+  className = "",
+  containerClassName = "",
+  error = "",
+  label,
+  name,
+  disabled = false
+}) => {
+  const generated = react$1.useId();
+  const groupName = name ?? generated;
+  const errorId = `${groupName}-error`;
+  const index = options.findIndex((option) => option.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": label,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        className: `border-battleship-davys-gray mx-auto flex w-full items-center justify-center gap-4 overflow-hidden rounded-full border ${className}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-smoke-eerie shadow-primary-btn hover:shadow-primary-btn-hover relative flex h-9 w-full items-center justify-between rounded-full transition-shadow duration-300", children: [
+          index >= 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-accent-duo absolute h-full transform rounded-full shadow-lg transition-transform duration-300 ease-in-out motion-reduce:transition-none",
+              style: {
+                width: `${String(100 / options.length)}%`,
+                transform: `translateX(${String(index * 100)}%)`
+              }
+            }
+          ),
+          options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: `has-focus-visible:outline-blue-crayola-c relative z-1 inline-block flex-1 rounded-full text-center text-sm has-focus-visible:outline-2 has-focus-visible:outline-offset-2 ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"} ${value === option.value ? "font-semibold text-white/90" : "text-primary/50 font-medium"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: groupName,
+                    value: option.value,
+                    checked: value === option.value,
+                    disabled,
+                    onChange: () => {
+                      onChange(option.value);
+                    },
+                    className: "sr-only"
+                  }
+                ),
+                option.label
+              ]
+            },
+            option.value
+          ))
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, error })
+  ] });
+}, "Radio");
+
+// src/lib/dropdown-position.ts
+var DROPDOWN_GAP = 8;
+var getDropdownPlacement = /* @__PURE__ */ __name(({
+  rect,
+  viewportHeight,
+  desired,
+  needed
+}) => {
+  const below = viewportHeight - rect.bottom - DROPDOWN_GAP;
+  const above = rect.top - DROPDOWN_GAP;
+  const room = desired === "bottom" ? below : above;
+  const other = desired === "bottom" ? above : below;
+  if (room >= needed || other <= room) return desired;
+  return desired === "bottom" ? "top" : "bottom";
+}, "getDropdownPlacement");
+var getDropdownStyle = /* @__PURE__ */ __name((rect, placement, viewportHeight) => ({
+  left: rect.left,
+  width: rect.width,
+  ...placement === "top" ? { bottom: viewportHeight - rect.top + DROPDOWN_GAP } : { top: rect.bottom + DROPDOWN_GAP }
+}), "getDropdownStyle");
+
+// src/lib/scrollRowIntoView.ts
+var scrollRowIntoView = /* @__PURE__ */ __name((list, row) => {
+  const top = row.offsetTop;
+  const bottom = top + row.offsetHeight;
+  if (top < list.scrollTop) list.scrollTop = top;
+  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+}, "scrollRowIntoView");
+
+// src/lib/typeahead.ts
+var findTypeaheadMatch = /* @__PURE__ */ __name((options, typed, fromIndex) => {
+  const text = typed.toLowerCase();
+  if (!text || options.length === 0) return -1;
+  const isRepeat = text.length > 1 && new Set(text).size === 1;
+  const query = isRepeat ? text.slice(0, 1) : text;
+  const start = isRepeat ? fromIndex + 1 : fromIndex;
+  for (let step = 0; step < options.length; step += 1) {
+    const index = ((start + step) % options.length + options.length) % options.length;
+    const option = options.at(index);
+    if (option && !option.disabled && option.label.toLowerCase().startsWith(query)) return index;
+  }
+  return -1;
+}, "findTypeaheadMatch");
+var findEnabledIndex = /* @__PURE__ */ __name((options, from, step) => {
+  for (let index = from + step; index >= 0 && index < options.length; index += step) {
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}, "findEnabledIndex");
+var openStack = [];
+var useDismiss = /* @__PURE__ */ __name((onDismiss, { enabled = true, ignore, outside = true, escape = true } = {}) => {
+  const ref = react$1.useRef(null);
+  const onDismissRef = react$1.useRef(onDismiss);
+  const ignoreRef = react$1.useRef(ignore);
+  react$1.useLayoutEffect(() => {
+    onDismissRef.current = onDismiss;
+    ignoreRef.current = ignore;
+  });
+  react$1.useEffect(() => {
+    if (!enabled) return;
+    const token = /* @__PURE__ */ Symbol("dismissable");
+    if (escape) openStack.push(token);
+    const handlePress = /* @__PURE__ */ __name((event) => {
+      const element = ref.current;
+      if (!outside || !element) return;
+      const path = event.composedPath();
+      const isInside = path.includes(element) || (ignoreRef.current ?? []).some(({ current }) => current !== null && path.includes(current));
+      if (!isInside) onDismissRef.current("outside", event);
+    }, "handlePress");
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (!escape || event.key !== "Escape" || event.defaultPrevented) return;
+      if (openStack.at(-1) !== token) return;
+      onDismissRef.current("escape", event);
+    }, "handleKey");
+    document.addEventListener("pointerdown", handlePress, true);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("pointerdown", handlePress, true);
+      document.removeEventListener("keydown", handleKey);
+      const index = openStack.indexOf(token);
+      if (index !== -1) openStack.splice(index, 1);
+    };
+  }, [enabled, outside, escape]);
+  return ref;
+}, "useDismiss");
+var LIST_MAX_HEIGHT = 240 + 10;
+var TYPEAHEAD_RESET_MS = 700;
+var labelTextOf = /* @__PURE__ */ __name((option) => option.searchLabel ?? (typeof option.label === "string" ? option.label : String(option.value)), "labelTextOf");
+var Select = /* @__PURE__ */ __name(({
+  label = "",
+  className = "",
+  error = "",
+  containerClassName = "",
+  optionsClassName = "",
+  icons,
+  selectProps,
+  options,
+  position = "bottom",
+  clearable = true
+}) => {
+  registerInputIcons();
+  const baseId = react$1.useId();
+  const triggerId = selectProps.id ?? `${baseId}-field`;
+  const listId = `${baseId}-list`;
+  const errorId = `${baseId}-error`;
+  const optionId = /* @__PURE__ */ __name((index) => `${baseId}-option-${String(index)}`, "optionId");
+  const [isOpenState, setIsOpen] = react$1.useState(false);
+  const [activeIndex, setActiveIndex] = react$1.useState(-1);
+  const [list, setList] = react$1.useState(null);
+  const triggerBoxRef = react$1.useRef(null);
+  const listRef = react$1.useRef(null);
+  const activeOptionRef = react$1.useRef(null);
+  const listboxRef = react$1.useRef(null);
+  const typedRef = react$1.useRef({ text: "", timer: 0 });
+  const selectedIndex = options.findIndex((option) => option.value === selectProps.value);
+  const optionAt = /* @__PURE__ */ __name((index) => index >= 0 && index < options.length ? options[index] : void 0, "optionAt");
+  const selected = optionAt(selectedIndex);
+  const hasValue = selected !== void 0 && selected.value !== "";
+  const canOpen = options.length > 0;
+  const isOpen = isOpenState && !selectProps.disabled;
+  const containerRef = useDismiss(
+    () => {
+      setIsOpen(false);
+    },
+    { enabled: isOpen, ignore: [listRef] }
+  );
+  const open = /* @__PURE__ */ __name((at) => {
+    if (!canOpen) return;
+    setActiveIndex(at);
+    setIsOpen(true);
+  }, "open");
+  const close = /* @__PURE__ */ __name(() => {
+    setIsOpen(false);
+  }, "close");
+  const choose = /* @__PURE__ */ __name((index) => {
+    const option = optionAt(index);
+    if (!option || option.disabled || selectProps.disabled) return;
+    selectProps.onChange(clearable && index === selectedIndex ? "" : option.value);
+    close();
+  }, "choose");
+  react$1.useLayoutEffect(() => {
+    if (!isOpen) return;
+    const update = /* @__PURE__ */ __name(() => {
+      const box = triggerBoxRef.current;
+      if (!box) return;
+      const rect = box.getBoundingClientRect();
+      const placement = getDropdownPlacement({
+        rect,
+        viewportHeight: window.innerHeight,
+        desired: position,
+        needed: Math.min(options.length * 32 + 8, LIST_MAX_HEIGHT)
+      });
+      setList({ rect, placement });
+    }, "update");
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [isOpen, position, options.length]);
+  react$1.useEffect(() => {
+    const row = activeOptionRef.current;
+    const scroller = listboxRef.current;
+    if (isOpen && scroller && row) scrollRowIntoView(scroller, row);
+  }, [isOpen, activeIndex, list]);
+  react$1.useEffect(() => {
+    const typed = typedRef.current;
+    return () => {
+      window.clearTimeout(typed.timer);
+    };
+  }, []);
+  const typeAhead = /* @__PURE__ */ __name((character) => {
+    const typed = typedRef.current;
+    window.clearTimeout(typed.timer);
+    typed.text += character;
+    typed.timer = window.setTimeout(() => {
+      typed.text = "";
+    }, TYPEAHEAD_RESET_MS);
+    const match = findTypeaheadMatch(
+      options.map((option) => ({ label: labelTextOf(option), disabled: option.disabled })),
+      typed.text,
+      isOpen ? activeIndex : selectedIndex
+    );
+    if (match === -1) return;
+    if (isOpen) setActiveIndex(match);
+    else open(match);
+  }, "typeAhead");
+  const handleKeyDown = /* @__PURE__ */ __name((event) => {
+    if (selectProps.disabled || event.altKey || event.ctrlKey || event.metaKey) return;
+    const first = findEnabledIndex(options, -1, 1);
+    const last = findEnabledIndex(options, options.length, -1);
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!isOpen) {
+          open(selectedIndex !== -1 ? selectedIndex : event.key === "ArrowDown" ? first : last);
+          return;
+        }
+        const next = findEnabledIndex(options, activeIndex, event.key === "ArrowDown" ? 1 : -1);
+        if (next !== -1) setActiveIndex(next);
+        return;
+      }
+      case "Home":
+      case "End":
+        event.preventDefault();
+        if (isOpen) setActiveIndex(event.key === "Home" ? first : last);
+        else open(event.key === "Home" ? first : last);
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (isOpen) choose(activeIndex);
+        else open(selectedIndex !== -1 ? selectedIndex : first);
+        return;
+      case "Tab":
+        close();
+        return;
+      default:
+        if (event.key.length === 1) {
+          event.preventDefault();
+          typeAhead(event.key);
+        }
+    }
+  }, "handleKeyDown");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: triggerBoxRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: triggerId, className: "z-2", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-invalid": error ? "" : void 0,
+              className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c flex items-center gap-3 overflow-hidden rounded-lg border px-3 ${className}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(InputIcon, { icon: icons?.left }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    id: triggerId,
+                    type: "button",
+                    role: "combobox",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": isOpen,
+                    "aria-controls": isOpen ? listId : void 0,
+                    "aria-activedescendant": isOpen && activeIndex !== -1 ? optionId(activeIndex) : void 0,
+                    "aria-invalid": error ? true : void 0,
+                    "aria-describedby": error ? errorId : void 0,
+                    disabled: selectProps.disabled,
+                    onClick: () => {
+                      if (isOpen) close();
+                      else open(selectedIndex);
+                    },
+                    onKeyDown: handleKeyDown,
+                    className: `text-primary flex min-w-0 flex-1 items-center justify-between gap-0.5 truncate border-none bg-transparent text-left text-[13px] outline-hidden ${selectProps.disabled ? "cursor-no-drop" : "cursor-pointer"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: `flex-1 truncate py-2 first-letter:capitalize xl:py-3 ${hasValue ? "" : "text-primary/30"}`,
+                          children: selected?.label ?? selectProps.placeholder
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.Icon,
+                        {
+                          icon: "solar:alt-arrow-down-linear",
+                          className: `size-4 transition-transform motion-reduce:transition-none md:size-5 ${isOpen ? "rotate-180" : ""} ${hasValue ? "text-primary" : "text-primary/30"}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(InputIcon, { icon: icons?.right })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, error }),
+        isOpen && list && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              className: `border-primary/10 bg-smoke-eerie fixed z-3 overflow-hidden rounded-lg border shadow-md ${optionsClassName}`,
+              style: getDropdownStyle(list.rect, list.placement, window.innerHeight),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "ul",
+                {
+                  id: listId,
+                  ref: listboxRef,
+                  role: "listbox",
+                  "aria-label": label || void 0,
+                  className: "relative flex max-h-60 flex-col gap-0.5 overflow-auto p-1",
+                  children: options.map((option, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isActive = index === activeIndex;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "li",
+                      {
+                        id: optionId(index),
+                        ref: isActive ? activeOptionRef : null,
+                        role: "option",
+                        "aria-selected": isSelected,
+                        "aria-disabled": option.disabled ? true : void 0,
+                        className: `text-tertiary flex items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-[13px] ${option.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${isActive ? "bg-primary/5" : ""} ${isSelected ? "bg-primary/8" : ""}`,
+                        onMouseMove: () => {
+                          if (!option.disabled && !isActive) setActiveIndex(index);
+                        },
+                        onClick: () => {
+                          choose(index);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left text-[13px] first-letter:capitalize", children: option.label }),
+                          isSelected && /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "solar:unread-linear", className: "text-primary size-4 md:size-5" })
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}, "Select");
+var Textarea = /* @__PURE__ */ __name(({
+  label = "",
+  register,
+  className = "",
+  error = "",
+  containerClassName = "",
+  textAreaProps,
+  needRef = false,
+  ref
+}) => {
+  const textareaRef = react$1.useRef(null);
+  const { id, errorId, ...aria } = useFieldIds({
+    id: textAreaProps.id,
+    name: textAreaProps.name ?? register?.name,
+    error,
+    describedBy: textAreaProps["aria-describedby"]
+  });
+  const mergedRef = react$1.useMemo(
+    () => mergeRefs(register?.ref, ref, textareaRef),
+    [register?.ref, ref]
+  );
+  react$1.useEffect(() => {
+    if (needRef) textareaRef.current?.focus();
+  }, [needRef]);
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (textAreaProps.disabled) return;
+    textAreaProps.onChange?.(event);
+    void register?.onChange(event);
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    textAreaProps.onBlur?.(event);
+    void register?.onBlur(event);
+  }, "handleBlur");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: id, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-invalid": error ? "" : void 0,
+          className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c overflow-hidden rounded-lg border ${className}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ...register,
+              ...textAreaProps,
+              ...aria,
+              ref: mergedRef,
+              id,
+              rows: textAreaProps.rows ?? 5,
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: `text-primary placeholder:text-primary/30 autofill-effect block w-full resize-y border-none bg-transparent px-3 py-2 text-[13px] leading-normal outline-hidden placeholder:text-[13px] focus:border-none focus:outline-hidden disabled:cursor-not-allowed xl:py-3 ${textAreaProps.className ?? ""}`
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, error })
+  ] });
+}, "Textarea");
+
+exports.Checkbox = Checkbox;
+exports.Input = Input;
+exports.InputError = InputError;
+exports.InputIcon = InputIcon;
+exports.InputLabel = InputLabel;
+exports.Radio = Radio;
+exports.Select = Select;
+exports.Textarea = Textarea;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map