@nexub/react 0.0.2 → 1.1.0

package/dist/chunk-UTBUIBEP.js

@@ -0,0 +1,153 @@
+'use client';
+import {
+  useIsomorphicLayoutEffect
+} from "./chunk-NHUQLIHL.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Rating/Rating.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+
+// src/hooks/useControllableState.ts
+import { useState, useCallback, useRef } from "react";
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolled;
+  const onChangeRef = useRef(onChange);
+  useIsomorphicLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/components/Rating/Rating.tsx
+import { jsx } from "react/jsx-runtime";
+var ratingVariants = cva("inline-flex items-center gap-0.5", {
+  variants: {
+    size: {
+      sm: "[&_svg]:h-4 [&_svg]:w-4",
+      md: "[&_svg]:h-5 [&_svg]:w-5",
+      lg: "[&_svg]:h-7 [&_svg]:w-7"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Rating = React.forwardRef(
+  ({
+    className,
+    size,
+    value: controlledValue,
+    max = 5,
+    readOnly = false,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue: 0,
+      onChange: onValueChange
+    });
+    const [hovered, setHovered] = React.useState(null);
+    const displayValue = hovered ?? value ?? 0;
+    const starRefs = React.useRef([]);
+    const tabStop = value && value > 0 ? value : 1;
+    const handleKeyDown = (e, starValue) => {
+      const next = e.key === "ArrowRight" || e.key === "ArrowUp" ? Math.min(max, starValue + 1) : e.key === "ArrowLeft" || e.key === "ArrowDown" ? Math.max(1, starValue - 1) : e.key === "Home" ? 1 : e.key === "End" ? max : null;
+      if (next === null) return;
+      e.preventDefault();
+      setValue(next);
+      starRefs.current[next - 1]?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(ratingVariants({ size }), className),
+        role: "radiogroup",
+        "aria-label": "Rating",
+        "aria-readonly": readOnly || void 0,
+        ...props,
+        children: Array.from({ length: max }, (_, i) => {
+          const starValue = i + 1;
+          const filled = starValue <= displayValue;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                starRefs.current[i] = el;
+              },
+              type: "button",
+              role: "radio",
+              tabIndex: starValue === tabStop ? 0 : -1,
+              "aria-checked": starValue === (value ?? 0),
+              "aria-label": `${starValue} star${starValue !== 1 ? "s" : ""}`,
+              disabled: readOnly,
+              onClick: () => !readOnly && setValue(starValue),
+              onKeyDown: (e) => !readOnly && handleKeyDown(e, starValue),
+              onMouseEnter: () => !readOnly && setHovered(starValue),
+              onMouseLeave: () => !readOnly && setHovered(null),
+              className: cn(
+                "bg-transparent border-0 p-0 m-0 inline-flex items-center justify-center transition-transform",
+                !readOnly && "cursor-pointer hover:scale-110",
+                readOnly && "cursor-default",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1 rounded-sm",
+                "disabled:pointer-events-none"
+              ),
+              children: /* @__PURE__ */ jsx(
+                StarIcon,
+                {
+                  filled,
+                  "aria-hidden": "true"
+                }
+              )
+            },
+            starValue
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+function StarIcon({ filled, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      fill: filled ? "var(--color-founderub-500, #f59e0b)" : "none",
+      stroke: filled ? "var(--color-founderub-500, #f59e0b)" : "var(--color-border-default)",
+      strokeWidth: "1.5",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinejoin: "round",
+          d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+        }
+      )
+    }
+  );
+}
+
+export {
+  useControllableState,
+  ratingVariants,
+  Rating
+};

package/dist/chunk-UWWL5FPC.js

@@ -0,0 +1,80 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Text/Text.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var textVariants = cva("", {
+  variants: {
+    size: {
+      "body-lg": "text-lg leading-relaxed",
+      body: "text-base leading-relaxed",
+      "body-sm": "text-sm leading-relaxed",
+      caption: "text-xs leading-normal",
+      label: "text-sm leading-none font-medium"
+    },
+    tone: {
+      default: "text-[var(--color-text-primary)]",
+      secondary: "text-[var(--color-text-secondary)]",
+      muted: "text-[var(--color-text-muted)]",
+      subtle: "text-[var(--color-text-subtle)]",
+      inverse: "text-[var(--color-text-inverse)]"
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "body",
+    tone: "default"
+  }
+});
+var Text = React.forwardRef(
+  ({
+    size,
+    tone,
+    weight,
+    asChild = false,
+    truncate = false,
+    lineClamp,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    const clampStyle = lineClamp !== void 0 ? {
+      display: "-webkit-box",
+      WebkitLineClamp: lineClamp,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    } : {};
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          textVariants({ size, tone, weight }),
+          truncate && "truncate",
+          className
+        ),
+        style: { ...clampStyle, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+
+export {
+  textVariants,
+  Text
+};

package/dist/chunk-V3FZHIEB.js

@@ -0,0 +1,52 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Flex/Flex.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var directionClass = {
+  row: "flex-row",
+  column: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse"
+};
+var Flex = React.forwardRef(
+  ({
+    gap,
+    align,
+    justify,
+    wrap = false,
+    direction = "row",
+    asChild = false,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const inlineStyle = {
+      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
+      ...align ? { alignItems: align } : {},
+      ...justify ? { justifyContent: justify } : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn("flex", directionClass[direction], wrap && "flex-wrap", className),
+        style: inlineStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+
+export {
+  Flex
+};

package/dist/chunk-V6GZZFTV.js

@@ -0,0 +1,106 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/CommandPalette/CommandPalette.tsx
+import * as React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Command } from "cmdk";
+import { Search } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(RadixDialog.Root, { ...props, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+  /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-[var(--z-modal)] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0" }),
+  /* @__PURE__ */ jsx(
+    RadixDialog.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-[20%] z-[var(--z-modal)] w-full max-w-xl -translate-x-1/2",
+        "overflow-hidden rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-2xl",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+      ),
+      children: /* @__PURE__ */ jsx(Command, { className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-text-primary)]", children })
+    }
+  )
+] }) }));
+Root2.displayName = "CommandPalette.Root";
+var Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-border-default)] px-3", children: [
+  /* @__PURE__ */ jsx(Search, { size: "sm", className: "mr-2 shrink-0 opacity-50", "aria-hidden": "true" }),
+  /* @__PURE__ */ jsx(
+    Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-12 w-full bg-transparent py-3 text-sm outline-none placeholder:text-[var(--color-text-muted)] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+Input.displayName = "CommandPalette.Input";
+var List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.List,
+  {
+    ref,
+    className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
+    ...props
+  }
+));
+List.displayName = "CommandPalette.List";
+var Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    ref,
+    className: cn(
+      "py-8 text-center text-sm text-[var(--color-text-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Empty.displayName = "CommandPalette.Empty";
+var Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-[var(--color-text-primary)]",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--color-text-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+Group.displayName = "CommandPalette.Group";
+var Item = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-md px-3 py-2 text-sm outline-none",
+      "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)]",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+Item.displayName = "CommandPalette.Item";
+var Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+    ...props
+  }
+));
+Separator.displayName = "CommandPalette.Separator";
+var CommandPalette = { Root: Root2, Input, List, Empty, Group, Item, Separator };
+
+export {
+  CommandPalette
+};

package/dist/chunk-VPZCQFVY.js

@@ -0,0 +1,33 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Checkbox/Checkbox.tsx
+import * as React from "react";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { Check, Minus } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixCheckbox.Root,
+    {
+      ref,
+      className: cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--color-border-input)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-[var(--color-fill-primary)] data-[state=checked]:border-[var(--color-fill-primary)] data-[state=checked]:text-white",
+        "data-[state=indeterminate]:bg-[var(--color-fill-primary)] data-[state=indeterminate]:border-[var(--color-fill-primary)] data-[state=indeterminate]:text-white",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "flex items-center justify-center", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : /* @__PURE__ */ jsx(Check, { size: "xs" }) })
+    }
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/chunk-VT7RKY46.js

@@ -0,0 +1,49 @@
+'use client';
+import {
+  Combobox
+} from "./chunk-2VDP2ML4.js";
+
+// src/components/Autocomplete/Autocomplete.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Search\u2026",
+  emptyText = "No results found.",
+  loading = false,
+  className
+}) {
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
+  const [search, setSearch] = React.useState(selectedLabel);
+  const [prevValue, setPrevValue] = React.useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setSearch(selectedLabel);
+  }
+  return /* @__PURE__ */ jsxs(Combobox.Root, { className, children: [
+    /* @__PURE__ */ jsx(Combobox.Input, { placeholder, value: search, onValueChange: setSearch }),
+    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-text-muted)]", children: "Loading\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText }),
+      options.map((opt) => /* @__PURE__ */ jsx(
+        Combobox.Item,
+        {
+          value: opt.label,
+          keywords: [opt.value],
+          onSelect: () => {
+            onValueChange?.(opt.value);
+            setSearch(opt.label);
+          },
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] }) })
+  ] });
+}
+Autocomplete.displayName = "Autocomplete";
+
+export {
+  Autocomplete
+};

package/dist/chunk-W4IEXUD4.js

@@ -0,0 +1,127 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Textarea/Textarea.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var textareaVariants = cva(
+  [
+    "w-full rounded-md border bg-[var(--color-bg-default)] text-[var(--color-text-primary)]",
+    "placeholder:text-[var(--color-text-placeholder)]",
+    "border-[var(--color-border-input)] transition-colors",
+    // Border shifts to ring color on focus; ring is a semi-transparent halo.
+    // One hard 1 px border + one soft 2 px glow = single clean focus indicator.
+    "focus-visible:outline-none focus-visible:border-[var(--color-ring-default)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+    "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-1.5 text-sm min-h-[64px]",
+        md: "px-3 py-2 text-sm min-h-[80px]",
+        lg: "px-4 py-2.5 text-base min-h-[96px]"
+      },
+      invalid: {
+        true: "border-[var(--color-danger-500)] focus-visible:border-[var(--color-danger-500)] focus-visible:ring-[color-mix(in_srgb,var(--color-danger-500)_25%,transparent)]"
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      resize: "vertical"
+    }
+  }
+);
+var Textarea = React.forwardRef(
+  ({
+    className,
+    size,
+    invalid,
+    resize = "vertical",
+    autoGrow = false,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? ""
+    );
+    const controlled = value !== void 0;
+    const resolvedValue = controlled ? String(value) : internalValue;
+    const handleChange = (e) => {
+      if (!controlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const sharedClass = cn(
+      textareaVariants({ size, invalid, resize: autoGrow ? "none" : resize }),
+      className
+    );
+    if (autoGrow) {
+      return (
+        /*
+         * CSS grid trick: the grid area is shared between the mirror span
+         * and the textarea, so the container grows to fit the larger of the two.
+         * The textarea is stretched to fill the container height automatically.
+         */
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid w-full",
+            style: { gridTemplateAreas: '"grow"' },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(sharedClass, "invisible whitespace-pre-wrap break-words pointer-events-none"),
+                  style: { gridArea: "grow" },
+                  children: resolvedValue + "\u200B"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref,
+                  value,
+                  defaultValue: !controlled ? defaultValue : void 0,
+                  onChange: handleChange,
+                  className: cn(sharedClass, "overflow-hidden"),
+                  "aria-invalid": invalid ?? void 0,
+                  style: { gridArea: "grow" },
+                  ...props
+                }
+              )
+            ]
+          }
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        value,
+        defaultValue: !controlled ? defaultValue : void 0,
+        onChange: handleChange,
+        className: sharedClass,
+        "aria-invalid": invalid ?? void 0,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export {
+  textareaVariants,
+  Textarea
+};

package/dist/chunk-WPPNDU2E.js

@@ -0,0 +1,36 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/RadioGroup/RadioGroup.tsx
+import * as React from "react";
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixRadioGroup.Root, { ref, className: cn("flex flex-col gap-2", className), ...props })
+);
+Root2.displayName = "RadioGroup.Root";
+var Item2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixRadioGroup.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-[var(--color-border-input)]",
+        "text-[var(--color-brand-primary-500)]",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-[var(--color-brand-primary-500)]" }) })
+    }
+  )
+);
+Item2.displayName = "RadioGroup.Item";
+var RadioGroup = { Root: Root2, Item: Item2 };
+
+export {
+  RadioGroup
+};

package/dist/chunk-XNDCVVNE.js

@@ -0,0 +1,45 @@
+'use client';
+import {
+  Input
+} from "./chunk-CVBAWKNG.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/PasswordInput/PasswordInput.tsx
+import * as React from "react";
+import { Eye, EyeOff } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var PasswordInput = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const toggleButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setShowPassword((prev) => !prev),
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        className: cn(
+          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+        ),
+        children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        className,
+        trailingIcon: toggleButton,
+        ...props
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+export {
+  PasswordInput
+};