@astherix/ui 0.40.0

package/dist/chunk-IZEGCTZW.js

@@ -0,0 +1,588 @@
+"use client";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      radius: ["control", "control-sm", "control-lg", "modal", "card"]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button/Button.tsx
+import * as React from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  [
+    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
+    "font-medium tracking-[-0.005em] leading-none",
+    "[--btn-ring:0_0_#0000] [--btn-edge:0_0_#0000] [--btn-drop:0_0_#0000]",
+    "shadow-[var(--btn-ring),var(--btn-edge),var(--btn-drop)]",
+    "transition-[background-color,box-shadow,color,translate] duration-100 ease-out",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+    "disabled:pointer-events-none disabled:opacity-45",
+    "aria-busy:cursor-progress",
+    "motion-reduce:transition-none",
+    // SVG icons
+    "[&_svg]:pointer-events-none [&_svg]:size-[1.125em] [&_svg]:shrink-0",
+    // Icon fonts (Bootstrap Icons, Font Awesome, Glyphicons…) rendered as <i>
+    "[&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:text-[1.125em] [&_i]:leading-none [&_i]:not-italic"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-fg hover:bg-primary-hover [--btn-edge-color:var(--color-primary-edge)] [--ui-orbit-color:#fff] [--ui-progress-fill:color-mix(in_srgb,var(--color-primary-fg)_22%,transparent)] [--ui-progress-bar:var(--color-primary-fg)]",
+        secondary: [
+          "bg-secondary text-fg hover:bg-secondary-hover [--btn-edge-color:var(--color-border-strong)] [--ui-orbit-color:var(--color-primary)] [--ui-progress-fill:color-mix(in_srgb,var(--color-primary)_16%,transparent)] [--ui-progress-bar:var(--color-primary)]",
+          "[--btn-ring:inset_0_0_0_1px_var(--color-border-strong)]"
+        ],
+        ghost: "bg-transparent text-fg hover:bg-secondary-hover active:bg-border [--ui-orbit-color:var(--color-primary)] [--ui-progress-fill:color-mix(in_srgb,var(--color-primary)_16%,transparent)] [--ui-progress-bar:var(--color-primary)]",
+        danger: "bg-danger text-danger-fg hover:bg-danger-hover [--btn-edge-color:var(--color-danger-edge)] [--ui-orbit-color:#fff] [--ui-progress-fill:color-mix(in_srgb,var(--color-danger-fg)_22%,transparent)] [--ui-progress-bar:var(--color-danger-fg)]"
+      },
+      // Raised: a 3px darker bottom edge makes the button look lifted. On press it drops
+      // 2px and the edge shrinks to 1px, so it reads as pushed in. Flat buttons move 1px.
+      raised: {
+        true: [
+          "pb-[3px] [--btn-edge:inset_0_-3px_0_0_var(--btn-edge-color)]",
+          "active:translate-y-[2px] active:[--btn-edge:inset_0_-1px_0_0_var(--btn-edge-color)]",
+          "motion-reduce:active:translate-y-0"
+        ],
+        false: "active:translate-y-px motion-reduce:active:translate-y-0"
+      },
+      // Drop shadow weight. Values are theme tokens (--ui-shadow-*), tuned for light and dark.
+      // Pressing a button with a shadow lowers it to the lightest level.
+      shadow: {
+        none: "",
+        sm: "[--btn-drop:var(--ui-shadow-sm)]",
+        md: "[--btn-drop:var(--ui-shadow-md)] active:[--btn-drop:var(--ui-shadow-sm)]",
+        lg: "[--btn-drop:var(--ui-shadow-lg)] active:[--btn-drop:var(--ui-shadow-sm)]",
+        xl: "[--btn-drop:var(--ui-shadow-xl)] active:[--btn-drop:var(--ui-shadow-sm)]"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-[0.9375rem]",
+        lg: "h-12 px-5 text-base"
+      },
+      // Corner radius. "md" follows --radius-control, so changing that token re-shapes
+      // every default button in an app. With iconOnly, "full" makes a perfect circle.
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-control-sm",
+        md: "rounded-control",
+        lg: "rounded-control-lg",
+        full: "rounded-full"
+      },
+      iconOnly: {
+        true: "px-0",
+        false: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Ghost buttons are always flat.
+      {
+        variant: "ghost",
+        raised: true,
+        class: "pb-0 [--btn-edge:0_0_#0000] active:[--btn-edge:0_0_#0000] active:translate-y-px"
+      },
+      { iconOnly: true, size: "sm", class: "w-8" },
+      { iconOnly: true, size: "md", class: "w-10" },
+      { iconOnly: true, size: "lg", class: "w-12" },
+      // Pill buttons get a little more side padding so the label doesn't crowd the curve.
+      { rounded: "full", iconOnly: false, size: "sm", class: "px-4" },
+      { rounded: "full", iconOnly: false, size: "md", class: "px-5" },
+      { rounded: "full", iconOnly: false, size: "lg", class: "px-6" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      raised: true,
+      shadow: "none",
+      size: "md",
+      rounded: "md",
+      iconOnly: false,
+      fullWidth: false
+    }
+  }
+);
+function renderIcon(icon) {
+  if (typeof icon === "string") {
+    return icon.trim() ? /* @__PURE__ */ jsx("i", { className: icon, "aria-hidden": "true" }) : null;
+  }
+  return icon;
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      className: "animate-spin motion-reduce:animate-none",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.25 8A6.25 6.25 0 0 0 8 1.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function isPromiseLike(value) {
+  return !!value && typeof value.then === "function";
+}
+function SideSlot({
+  side,
+  busy,
+  icon
+}) {
+  if (icon) return /* @__PURE__ */ jsx(Fragment, { children: busy ? /* @__PURE__ */ jsx(Spinner, {}) : icon });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center justify-center overflow-hidden",
+        "transition-[width,margin] duration-150 ease-out motion-reduce:transition-none",
+        busy ? "w-[1.125em]" : cn("w-0", side === "start" ? "-mr-2" : "-ml-2")
+      ),
+      children: busy && /* @__PURE__ */ jsx(Spinner, {})
+    }
+  );
+}
+var PROGRESS_FINISH_MS = 420;
+function ProgressIndicator({
+  kind,
+  value,
+  finishing
+}) {
+  const barRef = React.useRef(null);
+  const determinate = typeof value === "number" && Number.isFinite(value);
+  React.useLayoutEffect(() => {
+    const el = barRef.current;
+    if (!el) return;
+    if (!finishing) {
+      el.style.animation = el.style.transition = el.style.opacity = "";
+      if (!determinate) el.style.width = "";
+      return;
+    }
+    const current = getComputedStyle(el).width;
+    el.style.animation = "none";
+    el.style.width = current;
+    void el.getBoundingClientRect();
+    el.style.transition = "width 180ms ease-out, opacity 220ms ease 180ms";
+    el.style.width = "100%";
+    el.style.opacity = "0";
+  }, [finishing]);
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: barRef,
+      className: cn(
+        "absolute left-0",
+        kind === "fill" ? "inset-y-0 bg-[var(--ui-progress-fill)]" : "bottom-0 h-[var(--ui-progress-height,3px)] bg-[var(--ui-progress-bar)]",
+        !determinate && "animate-[ui-progress-creep_var(--ui-progress-duration,8s)_cubic-bezier(0.1,0.6,0.3,1)_forwards]"
+      ),
+      style: determinate && !finishing ? { width: `${Math.min(100, Math.max(0, value))}%`, transition: "width 200ms ease-out" } : determinate ? { width: `${Math.min(100, Math.max(0, value))}%` } : void 0
+    }
+  ) });
+}
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    rounded,
+    raised,
+    shadow,
+    iconOnly,
+    fullWidth,
+    asChild = false,
+    loading = false,
+    spinnerPlacement = "center",
+    loadingIndicator = "spinner",
+    progressStyle = "fill",
+    progress,
+    loadingLabel,
+    minLoadingTime = 0,
+    leadingIcon,
+    trailingIcon,
+    icon,
+    disabled,
+    type,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const [pending, setPending] = React.useState(false);
+    const mounted = React.useRef(true);
+    React.useEffect(() => {
+      mounted.current = true;
+      return () => {
+        mounted.current = false;
+      };
+    }, []);
+    const busy = loading || pending;
+    const usesProgress = loadingIndicator === "progress";
+    const [finishing, setFinishing] = React.useState(false);
+    const wasBusy = React.useRef(busy);
+    React.useEffect(() => {
+      const ended = wasBusy.current && !busy;
+      wasBusy.current = busy;
+      if (busy) setFinishing(false);
+      if (!ended || !usesProgress) return;
+      setFinishing(true);
+      const timer = window.setTimeout(() => setFinishing(false), PROGRESS_FINISH_MS);
+      return () => window.clearTimeout(timer);
+    }, [busy, usesProgress]);
+    const classes = cn(buttonVariants({ variant, raised, shadow, size, rounded, iconOnly, fullWidth }), className);
+    const lead = renderIcon(leadingIcon);
+    const trail = renderIcon(trailingIcon);
+    const content = icon !== void 0 ? renderIcon(icon) : children;
+    if (asChild) {
+      return /* @__PURE__ */ jsxs(Slot, { ref, className: classes, onClick, ...props, children: [
+        lead,
+        /* @__PURE__ */ jsx(Slottable, { children }),
+        trail
+      ] });
+    }
+    const handleClick = (event) => {
+      if (busy) {
+        event.preventDefault();
+        return;
+      }
+      const result = onClick?.(event);
+      if (!isPromiseLike(result)) return;
+      setPending(true);
+      const startedAt = Date.now();
+      const stop = () => {
+        const remaining = Math.max(0, minLoadingTime - (Date.now() - startedAt));
+        setTimeout(() => {
+          if (mounted.current) setPending(false);
+        }, remaining);
+      };
+      Promise.resolve(result).then(stop, stop);
+    };
+    const orbit = loadingIndicator === "orbit";
+    const keepsLabel = orbit || usesProgress;
+    const centered = spinnerPlacement === "center" || iconOnly;
+    const showSpinner = busy && !keepsLabel;
+    const useLoadingLabel = busy && !iconOnly && loadingLabel !== void 0 && (keepsLabel || !centered);
+    const label = useLoadingLabel ? loadingLabel : content;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        disabled,
+        "aria-disabled": busy || void 0,
+        "aria-busy": busy || void 0,
+        "data-loading": busy ? "" : void 0,
+        onClick: handleClick,
+        ...props,
+        children: [
+          orbit && busy && // Experimental: a light running around the edge. The outer span adds the glow,
+          // the inner span draws the light (see .ui-btn-orbit in theme.css).
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-btn-orbit-glow", children: /* @__PURE__ */ jsx("span", { className: "ui-btn-orbit" }) }),
+          usesProgress && (busy || finishing) && /* @__PURE__ */ jsx(
+            ProgressIndicator,
+            {
+              kind: progressStyle,
+              value: progress,
+              finishing: !busy && finishing
+            }
+          ),
+          centered && showSpinner && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center pb-[inherit]", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+          /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex items-center gap-2", centered && showSpinner && "opacity-0"), children: centered || keepsLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            lead,
+            label,
+            trail
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            spinnerPlacement === "start" ? /* @__PURE__ */ jsx(SideSlot, { side: "start", busy: showSpinner, icon: lead }) : lead,
+            label,
+            spinnerPlacement === "end" ? /* @__PURE__ */ jsx(SideSlot, { side: "end", busy: showSpinner, icon: trail }) : trail
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/input/Field.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FieldContext = React2.createContext(null);
+function useField() {
+  return React2.useContext(FieldContext);
+}
+function useFieldControlProps(props) {
+  const field = useField();
+  const describedBy = [props["aria-describedby"], field?.descriptionId, field?.errorId].filter(Boolean).join(" ") || void 0;
+  const invalid = props.invalid ?? field?.invalid ?? false;
+  return {
+    id: props.id ?? field?.id,
+    required: props.required ?? field?.required,
+    disabled: props.disabled ?? field?.disabled,
+    invalid,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid || void 0
+  };
+}
+function Field({
+  label,
+  description,
+  error,
+  required = false,
+  optional = false,
+  disabled = false,
+  id: idProp,
+  className,
+  children,
+  ...props
+}) {
+  const autoId = React2.useId();
+  const id = idProp ?? `${autoId}-control`;
+  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+  const value = {
+    id,
+    labelId: `${id}-label`,
+    descriptionId: description ? `${id}-description` : void 0,
+    errorId: hasError ? `${id}-error` : void 0,
+    invalid: hasError,
+    required,
+    disabled
+  };
+  return /* @__PURE__ */ jsx2(FieldContext.Provider, { value, children: /* @__PURE__ */ jsxs2("div", { className: cn("grid content-start gap-1.5", className), ...props, children: [
+    /* @__PURE__ */ jsxs2("label", { id: value.labelId, htmlFor: id, className: "w-fit text-sm font-medium leading-snug text-fg", children: [
+      label,
+      required && /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "ml-0.5 text-danger", children: "*" }),
+      optional && /* @__PURE__ */ jsx2("span", { className: "ml-1 font-normal text-fg-muted", children: "(optional)" })
+    ] }),
+    description && /* @__PURE__ */ jsx2("p", { id: value.descriptionId, className: "-mt-0.5 text-[0.8125rem] leading-relaxed text-fg-muted", children: description }),
+    children,
+    hasError && /* @__PURE__ */ jsxs2("p", { id: value.errorId, className: "flex items-start gap-1.5 text-[0.8125rem] leading-snug text-danger", children: [
+      /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: "mt-px size-3.5 shrink-0", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 3a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0v-3A.75.75 0 0 0 8 4.5Zm0 6.25a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7Z" }) }),
+      /* @__PURE__ */ jsx2("span", { children: error })
+    ] })
+  ] }) });
+}
+
+// src/components/input/Input.tsx
+import * as React3 from "react";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/components/input/controlStyles.ts
+import { cva as cva2 } from "class-variance-authority";
+var controlFrame = cva2(
+  [
+    "relative flex w-full border bg-surface text-fg transition-[border-color,box-shadow] duration-100",
+    "border-border-strong shadow-[inset_0_1px_2px_rgb(var(--ui-shadow-color)/0.07)]",
+    "hover:not-focus-within:border-fg-muted/60",
+    "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/25",
+    "data-[invalid]:border-danger data-[invalid]:hover:not-focus-within:border-danger data-[invalid]:focus-within:ring-danger/25",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:bg-secondary-hover data-[disabled]:opacity-70 data-[disabled]:hover:border-border-strong",
+    "data-[readonly]:bg-secondary-hover/60",
+    "motion-reduce:transition-none"
+  ],
+  {
+    variants: {
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-control-sm",
+        md: "rounded-control",
+        lg: "rounded-control-lg",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: { rounded: "md" }
+  }
+);
+
+// src/components/input/Input.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var inputFrame = cva3("items-center", {
+  variants: {
+    size: {
+      sm: "h-8 gap-1.5 px-2.5 text-sm",
+      md: "h-10 gap-2 px-3 text-[0.9375rem]",
+      lg: "h-12 gap-2.5 px-3.5 text-base"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var EyeIcon = ({ off }) => /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx3("path", { d: "M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10Z" }),
+  /* @__PURE__ */ jsx3("circle", { cx: "10", cy: "10", r: "2.5" }),
+  off && /* @__PURE__ */ jsx3("path", { d: "M3.5 3.5l13 13" })
+] });
+var ClearIcon = () => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M6 6l8 8M14 6l-8 8" }) });
+function ControlButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "-mr-1 grid size-7 shrink-0 cursor-pointer place-items-center rounded-control-sm text-fg-muted",
+        "hover:bg-secondary-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
+        "[&_svg]:size-[1.05em]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function setNativeValue(el, value) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  Object.getOwnPropertyDescriptor(proto, "value")?.set?.call(el, value);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+}
+var Input = React3.forwardRef(
+  ({
+    size = "md",
+    rounded = "md",
+    leadingIcon,
+    trailingIcon,
+    prefix,
+    suffix,
+    invalid: invalidProp,
+    clearable = false,
+    onClear,
+    revealable = true,
+    frameClassName,
+    overlay,
+    className,
+    type = "text",
+    id: idProp,
+    required: requiredProp,
+    disabled: disabledProp,
+    readOnly,
+    value,
+    defaultValue,
+    onChange,
+    "aria-describedby": describedByProp,
+    ...props
+  }, ref) => {
+    const { invalid, ...control } = useFieldControlProps({
+      id: idProp,
+      invalid: invalidProp,
+      required: requiredProp,
+      disabled: disabledProp,
+      "aria-describedby": describedByProp
+    });
+    const inputRef = React3.useRef(null);
+    const setRefs = (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const [hasValue, setHasValue] = React3.useState(() => String(value ?? defaultValue ?? "") !== "");
+    React3.useEffect(() => {
+      if (value !== void 0) setHasValue(String(value) !== "");
+    }, [value]);
+    const [revealed, setRevealed] = React3.useState(false);
+    const isPassword = type === "password";
+    const effectiveType = isPassword && revealed ? "text" : type;
+    const lead = renderIcon(leadingIcon);
+    const trail = renderIcon(trailingIcon);
+    const showClear = clearable && hasValue && !control.disabled && !readOnly;
+    const inputEl = /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref: setRefs,
+        type: effectiveType,
+        readOnly,
+        value,
+        defaultValue,
+        onChange: (event) => {
+          if (value === void 0) setHasValue(event.target.value !== "");
+          onChange?.(event);
+        },
+        className: cn(
+          "h-full w-0 min-w-0 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-muted/70",
+          "disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none",
+          className
+        ),
+        ...control,
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        "data-control-frame": "",
+        "data-invalid": invalid ? "" : void 0,
+        "data-disabled": control.disabled ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        className: cn(
+          controlFrame({ rounded }),
+          inputFrame({ size }),
+          rounded === "full" && (size === "sm" ? "px-3.5" : size === "lg" ? "px-5" : "px-4"),
+          "[&>svg]:size-[1.125em] [&>svg]:shrink-0 [&>svg]:text-fg-muted [&>i]:shrink-0 [&>i]:text-[1.125em] [&>i]:leading-none [&>i]:text-fg-muted",
+          frameClassName
+        ),
+        onMouseDown: (event) => {
+          if (event.target !== inputRef.current && !event.target.closest("button")) {
+            event.preventDefault();
+            inputRef.current?.focus();
+          }
+        },
+        children: [
+          lead,
+          prefix !== void 0 && /* @__PURE__ */ jsx3("span", { className: "shrink-0 select-none whitespace-nowrap text-fg-muted", children: prefix }),
+          overlay !== void 0 ? /* @__PURE__ */ jsxs3("span", { className: "relative flex h-full min-w-0 flex-1", children: [
+            inputEl,
+            overlay
+          ] }) : inputEl,
+          suffix !== void 0 && /* @__PURE__ */ jsx3("span", { className: "shrink-0 select-none whitespace-nowrap text-fg-muted", children: suffix }),
+          showClear && /* @__PURE__ */ jsx3(
+            ControlButton,
+            {
+              "aria-label": "Clear",
+              onClick: () => {
+                const el = inputRef.current;
+                if (!el) return;
+                setNativeValue(el, "");
+                el.focus();
+                onClear?.();
+              },
+              children: /* @__PURE__ */ jsx3(ClearIcon, {})
+            }
+          ),
+          isPassword && revealable && !control.disabled && /* @__PURE__ */ jsx3(
+            ControlButton,
+            {
+              "aria-label": revealed ? "Hide password" : "Show password",
+              "aria-pressed": revealed,
+              onClick: () => setRevealed((r) => !r),
+              children: /* @__PURE__ */ jsx3(EyeIcon, { off: revealed })
+            }
+          ),
+          trail
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  cn,
+  buttonVariants,
+  renderIcon,
+  Button,
+  useField,
+  useFieldControlProps,
+  Field,
+  controlFrame,
+  Input
+};
+//# sourceMappingURL=chunk-IZEGCTZW.js.map