@lindle/linoardo 1.0.31 → 1.0.32

package/dist/index.cjs

@@ -2320,138 +2320,142 @@ var resolveIconClassName4 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-var Input = ({
-  variant = "outline",
-  size = "medium",
-  success,
-  error,
-  warn,
-  icon,
-  className,
-  wrapperClassName,
-  label,
-  ...props
-}) => {
-  const { placeholder, onFocus, onBlur, ...inputProps } = props;
-  const reactId = React4__namespace.default.useId();
-  const hasLabel = Boolean(label);
-  const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
-  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
-  const [isFocused, setIsFocused] = React4__namespace.default.useState(false);
-  const classBase = "input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
-  const variantClasses5 = {
-    solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-    sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-    outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
-    text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
-    ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
-    filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-    underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
-    rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
-  };
-  const sizeClasses4 = {
-    "x-small": { paddingNoIcon: "px-2 py-2", paddingWithIcon: "pl-8 pr-2 py-2", text: "text-xs" },
-    small: {
-      paddingNoIcon: "px-2.5 py-2.5",
-      paddingWithIcon: "pl-9 pr-2.5 py-2.5",
-      text: "text-sm"
-    },
-    medium: { paddingNoIcon: "px-3 py-3", paddingWithIcon: "pl-10 pr-3 py-3", text: "text-base" },
-    large: {
-      paddingNoIcon: "px-3.5 py-3.5",
-      paddingWithIcon: "pl-11 pr-3.5 py-3.5",
-      text: "text-lg"
-    },
-    "x-large": { paddingNoIcon: "px-4 py-4", paddingWithIcon: "pl-12 pr-4 py-4", text: "text-xl" }
-  };
-  const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
-  const statusClasses = {
-    error: "border-red-500 focus:border-red-500 focus:ring-red-400",
-    warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
-    success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
-  };
-  const statusMessageClasses = {
-    error: "text-red-600 dark:text-red-300",
-    warn: "text-amber-600 dark:text-amber-300",
-    success: "text-emerald-600 dark:text-emerald-300"
-  };
-  const variantClass = variantClasses5[variant] ?? variantClasses5.outline;
-  const toneClass = status ? statusClasses[status.tone] : void 0;
-  let prependIconClass = resolveIconClassName4(icon);
-  const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
-  const sizeClass = [
-    prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
-    sizeConfig.text
-  ].join(" ");
-  const inputName = inputProps.name || reactId;
-  const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
-  const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
-  const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
-  const labelLeftClass = prependIconClass ? "left-10" : "left-3";
-  const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
-  const handleFocus = (event) => {
-    if (hidePlaceholderUntilFocus) setIsFocused(true);
-    onFocus?.(event);
-  };
-  const handleBlur = (event) => {
-    if (hidePlaceholderUntilFocus) setIsFocused(false);
-    onBlur?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-      prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
-        "i",
-        {
-          className: tailwindMerge.twMerge(
-            "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
-            status?.tone && statusMessageClasses[status?.tone] || "",
-            prependIconClass
-          ),
-          "aria-hidden": true
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ...inputProps,
-          id: inputName,
-          name: inputName,
-          placeholder: placeholderValue,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          className: tailwindMerge.twMerge(
-            "peer",
-            classBase,
-            variantClass,
-            toneClass,
-            sizeClass,
-            placeholderClass,
-            className
-          )
-        }
-      ),
-      label && /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          htmlFor: inputName,
-          className: tailwindMerge.twMerge(
-            "absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
-            labelLeftClass,
-            // Floated state: center label's vertical middle on the top border line
-            "-top-1.5  left-1 peer-focus:left-7   -translate-y-2/3 text-xs px-1",
-            labelBgDefault,
-            // focus state mirrors floated state (keeps center on border)
-            "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
-            // when input is empty (placeholder shown) -> center label inside input
-            "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
-          ),
-          children: label
-        }
-      )
-    ] }),
-    status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
-  ] });
-};
+var Input = React4__namespace.default.forwardRef(
+  ({
+    variant = "outline",
+    size = "medium",
+    success,
+    error,
+    warn,
+    icon,
+    className,
+    wrapperClassName,
+    label,
+    ...props
+  }, ref) => {
+    const { placeholder, onFocus, onBlur, ...inputProps } = props;
+    const reactId = React4__namespace.default.useId();
+    const hasLabel = Boolean(label);
+    const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+    const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
+    const [isFocused, setIsFocused] = React4__namespace.default.useState(false);
+    const classBase = "input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
+    const variantClasses5 = {
+      solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+      sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+      outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
+      text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+      ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
+      filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
+      underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+      rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
+    };
+    const sizeClasses4 = {
+      "x-small": { paddingNoIcon: "px-2 py-2", paddingWithIcon: "pl-8 pr-2 py-2", text: "text-xs" },
+      small: {
+        paddingNoIcon: "px-2.5 py-2.5",
+        paddingWithIcon: "pl-9 pr-2.5 py-2.5",
+        text: "text-sm"
+      },
+      medium: { paddingNoIcon: "px-3 py-3", paddingWithIcon: "pl-10 pr-3 py-3", text: "text-base" },
+      large: {
+        paddingNoIcon: "px-3.5 py-3.5",
+        paddingWithIcon: "pl-11 pr-3.5 py-3.5",
+        text: "text-lg"
+      },
+      "x-large": { paddingNoIcon: "px-4 py-4", paddingWithIcon: "pl-12 pr-4 py-4", text: "text-xl" }
+    };
+    const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
+    const statusClasses = {
+      error: "border-red-500 focus:border-red-500 focus:ring-red-400",
+      warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
+      success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
+    };
+    const statusMessageClasses = {
+      error: "text-red-600 dark:text-red-300",
+      warn: "text-amber-600 dark:text-amber-300",
+      success: "text-emerald-600 dark:text-emerald-300"
+    };
+    const variantClass = variantClasses5[variant] ?? variantClasses5.outline;
+    const toneClass = status ? statusClasses[status.tone] : void 0;
+    let prependIconClass = resolveIconClassName4(icon);
+    const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
+    const sizeClass = [
+      prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
+      sizeConfig.text
+    ].join(" ");
+    const inputName = inputProps.name || reactId;
+    const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
+    const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
+    const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
+    const labelLeftClass = prependIconClass ? "left-10" : "left-3";
+    const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
+    const handleFocus = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(true);
+      onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(false);
+      onBlur?.(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+        prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
+          "i",
+          {
+            className: tailwindMerge.twMerge(
+              "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+              status?.tone && statusMessageClasses[status?.tone] || "",
+              prependIconClass
+            ),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...inputProps,
+            ref,
+            id: inputName,
+            name: inputName,
+            placeholder: placeholderValue,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            className: tailwindMerge.twMerge(
+              "peer",
+              classBase,
+              variantClass,
+              toneClass,
+              sizeClass,
+              placeholderClass,
+              className
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: inputName,
+            className: tailwindMerge.twMerge(
+              "absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
+              labelLeftClass,
+              // Floated state: center label's vertical middle on the top border line
+              "-top-1.5  left-1 peer-focus:left-7   -translate-y-2/3 text-xs px-1",
+              labelBgDefault,
+              // focus state mirrors floated state (keeps center on border)
+              "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
+              // when input is empty (placeholder shown) -> center label inside input
+              "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
+            ),
+            children: label
+          }
+        )
+      ] }),
+      status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
+    ] });
+  }
+);
+Input.displayName = "Input";
 var Input_default = Input;
 
 // src/utils/helpers/randomStr.ts