@espressif/dashboard-ui-components 1.2.2 → 1.3.0

package/dist/{chunk-KGOWRVSU.js → chunk-UHRNPXO5.js}

@@ -1,11 +1,11 @@
-import { getStrictContext, Button, Avatar, AvatarImage, AvatarFallback, AvatarBadge, useControlledState, useIsMobile, Separator, Skeleton, useDataState, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-F5P6S7K2.js';
+import { getStrictContext, Button, Avatar, AvatarImage, AvatarFallback, AvatarBadge, useControlledState, useIsMobile, Separator, Skeleton, useDataState, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-7BO76CNB.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
-import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, CircleDot, Circle, ChevronRight } from 'lucide-react';
+import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, ZapIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, CircleDot, Circle, ChevronRight } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, useRef } from 'react';
 import { Slot as Slot$2, DropdownMenu as DropdownMenu$1, Dialog } from 'radix-ui';
-import { motion, LayoutGroup, AnimatePresence, isMotionComponent, useInView } from 'motion/react';
+import { motion, LayoutGroup, AnimatePresence, isMotionComponent, useAnimate, useInView } from 'motion/react';
 import * as motion5 from 'motion/react-client';
 import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, FloatingPortal } from '@floating-ui/react';
 import { motion as motion$1 } from 'framer-motion';
@@ -2123,6 +2123,39 @@ var Button3 = React.forwardRef(
   }
 );
 Button3.displayName = "Button";
+var craftButtonBgClasses = {
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  error: "bg-error text-error-foreground",
+  info: "bg-info text-info-foreground",
+  success: "bg-success text-success-foreground",
+  warning: "bg-warning text-warning-foreground",
+  disabled: "bg-disabled text-disabled-foreground",
+  gray: "bg-gray text-gray-foreground",
+  mist: "bg-mist text-mist-foreground"
+};
+var craftButtonDarkBorderClasses = {
+  primary: "dark:hover:border-primary/30",
+  secondary: "dark:hover:border-secondary/30",
+  error: "dark:hover:border-error/30",
+  info: "dark:hover:border-info/30",
+  success: "dark:hover:border-success/30",
+  warning: "dark:hover:border-warning/30",
+  disabled: "dark:hover:border-disabled/30",
+  gray: "dark:hover:border-gray/30",
+  mist: "dark:hover:border-mist-border/30"
+};
+var craftIconColorClasses = {
+  primary: "text-primary group-hover:bg-primary group-hover:text-primary-foreground",
+  secondary: "text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground",
+  error: "text-error group-hover:bg-error group-hover:text-error-foreground",
+  info: "text-info group-hover:bg-info group-hover:text-info-foreground",
+  success: "text-success group-hover:bg-success group-hover:text-success-foreground",
+  warning: "text-warning group-hover:bg-warning group-hover:text-warning-foreground",
+  disabled: "text-disabled group-hover:bg-disabled group-hover:text-disabled-foreground",
+  gray: "text-gray group-hover:bg-gray group-hover:text-gray-foreground",
+  mist: "text-mist-foreground group-hover:bg-mist group-hover:text-mist-foreground"
+};
 var CraftButtonContext = React.createContext({});
 function CraftButtonLabel({ children, className }) {
   return /* @__PURE__ */ jsx(
@@ -2137,7 +2170,7 @@ function CraftButtonLabel({ children, className }) {
   );
 }
 function CraftButtonIcon({ children, className }) {
-  const { size } = React.useContext(CraftButtonContext);
+  const { size, color = "primary" } = React.useContext(CraftButtonContext);
   const iconSize = size === "lg" ? "size-6" : size === "sm" ? "size-4" : "size-5";
   return /* @__PURE__ */ jsxs("span", { className: cn("relative z-1", iconSize, className), children: [
     /* @__PURE__ */ jsx(
@@ -2153,7 +2186,8 @@ function CraftButtonIcon({ children, className }) {
       "span",
       {
         className: cn(
-          "bg-background text-primary group-hover:bg-primary group-hover:text-background relative z-2 flex items-center justify-center rounded-full transition-all duration-500",
+          "bg-background relative z-2 flex items-center justify-center rounded-full transition-all duration-500",
+          craftIconColorClasses[color],
           iconSize
         ),
         children
@@ -2162,14 +2196,23 @@ function CraftButtonIcon({ children, className }) {
   ] });
 }
 function CraftButton(props) {
-  const { children, size, asChild = false, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(CraftButtonContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
+  const {
+    children,
+    size,
+    color = "primary",
+    asChild = false,
+    className,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(CraftButtonContext.Provider, { value: { size, color }, children: /* @__PURE__ */ jsx(
     Button3,
     {
       size,
       asChild,
       className: cn(
-        "group hover:bg-background dark:hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent",
+        craftButtonBgClasses[color],
+        "group hover:bg-background relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent",
+        craftButtonDarkBorderClasses[color],
         className
       ),
       ...rest,
@@ -2183,6 +2226,136 @@ function InvertButton({ label, icon, ...props }) {
     /* @__PURE__ */ jsx(CraftButtonIcon, { children: icon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-3 stroke-2 transition-transform duration-500 group-hover:rotate-45" }) })
   ] });
 }
+var flashButtonBgClasses = {
+  primary: "bg-primary hover:bg-background text-primary-foreground",
+  secondary: "bg-secondary hover:bg-background text-secondary-foreground",
+  error: "bg-error hover:bg-background text-error-foreground",
+  info: "bg-info hover:bg-background text-info-foreground",
+  success: "bg-success hover:bg-background text-success-foreground",
+  warning: "bg-warning hover:bg-background text-warning-foreground",
+  disabled: "bg-disabled hover:bg-background text-disabled-foreground",
+  gray: "bg-gray hover:bg-background text-gray-foreground",
+  mist: "bg-mist hover:bg-background text-mist-foreground"
+};
+var flashOverlayClasses = {
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  error: "bg-error",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  disabled: "bg-disabled",
+  gray: "bg-gray",
+  mist: "bg-mist"
+};
+var flashButtonDarkBorderClasses = {
+  primary: "dark:hover:border-primary/30",
+  secondary: "dark:hover:border-secondary/30",
+  error: "dark:hover:border-error/30",
+  info: "dark:hover:border-info/30",
+  success: "dark:hover:border-success/30",
+  warning: "dark:hover:border-warning/30",
+  disabled: "dark:hover:border-disabled/30",
+  gray: "dark:hover:border-gray/30",
+  mist: "dark:hover:border-mist-border/30"
+};
+function FlashButton({
+  label,
+  icon,
+  iconPosition = "end",
+  hideIcon = false,
+  size,
+  color = "primary",
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}) {
+  const [scope, animate] = useAnimate();
+  const isHovering = React.useRef(false);
+  const flashLoop = React.useCallback(async () => {
+    while (isHovering.current && scope.current) {
+      const peakOpacity = 0.5 + Math.random() * 0.5;
+      try {
+        await animate(
+          scope.current,
+          { opacity: [0, peakOpacity, 0] },
+          { duration: 0.08 + Math.random() * 0.14, ease: "easeOut" }
+        );
+      } catch {
+        break;
+      }
+      if (!isHovering.current) break;
+      const pause = 60 + Math.random() * 250;
+      await new Promise((r) => setTimeout(r, pause));
+    }
+  }, [animate, scope]);
+  const handleMouseEnter = React.useCallback(
+    (e) => {
+      isHovering.current = true;
+      flashLoop();
+      onMouseEnter?.(e);
+    },
+    [flashLoop, onMouseEnter]
+  );
+  const handleMouseLeave = React.useCallback(
+    (e) => {
+      isHovering.current = false;
+      if (scope.current) {
+        animate(scope.current, { opacity: 0 }, { duration: 0.05 });
+      }
+      onMouseLeave?.(e);
+    },
+    [animate, scope, onMouseLeave]
+  );
+  const iconSize = size === "lg" ? "size-4" : size === "sm" ? "size-2.5" : "size-3";
+  return /* @__PURE__ */ jsxs(
+    Button3,
+    {
+      size,
+      className: cn(
+        flashButtonBgClasses[color],
+        "group relative cursor-pointer gap-1.5 overflow-hidden rounded-full transition-all duration-500 hover:shadow-md dark:border dark:border-transparent",
+        flashButtonDarkBorderClasses[color],
+        className
+      ),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: scope,
+            className: cn(
+              "pointer-events-none absolute inset-0 z-0 rounded-[inherit] opacity-0",
+              flashOverlayClasses[color]
+            )
+          }
+        ),
+        !hideIcon && iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
+          ZapIcon,
+          {
+            className: cn(
+              iconSize,
+              "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "relative z-[1] transition-colors duration-500 group-hover:text-foreground", children: label }),
+        !hideIcon && iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "relative z-[1]", children: icon ?? /* @__PURE__ */ jsx(
+          ZapIcon,
+          {
+            className: cn(
+              iconSize,
+              "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground"
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
 function Button4({
   hoverScale = 1.05,
   tapScale = 0.95,
@@ -2336,215 +2509,6 @@ function Menu({
     )
   ] });
 }
-var inputLabelClassName = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
-var sizeClasses2 = {
-  sm: "h-8 px-2 text-xs",
-  default: "h-10 px-3 py-2 text-base md:text-sm",
-  lg: "h-12 px-4 text-lg"
-};
-var Input = React.forwardRef(
-  ({
-    className,
-    type,
-    label,
-    size,
-    rounded,
-    startHelperContent,
-    endHelperContent,
-    hintContent,
-    error,
-    errorContent,
-    startIcon,
-    endIcon,
-    startAddOnContent,
-    endAddOnContent,
-    startAddOn,
-    endAddOn,
-    floatingLabel,
-    charLimit,
-    onChange,
-    value,
-    defaultValue,
-    id,
-    required,
-    placeholder,
-    ...restProps
-  }, ref) => {
-    const autoId = React.useId();
-    const inputId = id || autoId;
-    const [charCount, setCharCount] = React.useState(() => {
-      if (charLimit === void 0) return 0;
-      if (typeof value === "string") return value.length;
-      if (typeof defaultValue === "string") return defaultValue.length;
-      return 0;
-    });
-    React.useEffect(() => {
-      if (charLimit !== void 0 && typeof value === "string") {
-        setCharCount(value.length);
-      }
-    }, [value, charLimit]);
-    const hasEnhancedProps = label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0;
-    if (!hasEnhancedProps) {
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          type,
-          id,
-          className: cn(
-            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm",
-            className
-          ),
-          ref,
-          onChange,
-          value,
-          defaultValue,
-          required,
-          placeholder,
-          ...restProps
-        }
-      );
-    }
-    const effectiveSize = size || "default";
-    const hasError = error || !!errorContent;
-    const handleChange = (e) => {
-      if (charLimit !== void 0) {
-        setCharCount(e.target.value.length);
-      }
-      onChange?.(e);
-    };
-    const effectivePlaceholder = floatingLabel ? " " : placeholder;
-    const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
-    const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
-    const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
-    const hasAddOn = startAddOnNode != null || endAddOnNode != null;
-    const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
-    const helperStartId = `${inputId}-helper-start`;
-    const helperEndId = `${inputId}-helper-end`;
-    const describedBy = [
-      errorContent && `${inputId}-error`,
-      startHelperContent && !errorContent && helperStartId,
-      endHelperContent && !errorContent && helperEndId
-    ].filter(Boolean).join(" ") || void 0;
-    const inputClasses = cn(
-      "flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10",
-      floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses2[effectiveSize],
-      rounded ? "rounded-full" : "rounded-md",
-      hasError && "border-destructive focus-visible:ring-destructive",
-      startIcon && "ps-9",
-      endIcon && "pe-9",
-      charLimit !== void 0 && !endIcon && "pe-14",
-      charLimit !== void 0 && endIcon && "pe-20",
-      startAddOnNode != null && "rounded-s-none shadow-none",
-      endAddOnNode != null && "rounded-e-none shadow-none",
-      // `peer` is a marker only; the overlay decorators are later siblings and
-      // rely on it for `peer-disabled:` / `peer-placeholder-shown:` variants.
-      "peer",
-      floatingLabel && "placeholder:text-transparent",
-      className
-    );
-    const inputElement = /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        id: inputId,
-        ref,
-        className: inputClasses,
-        required,
-        "aria-invalid": hasError || void 0,
-        "aria-describedby": describedBy,
-        onChange: handleChange,
-        value,
-        defaultValue,
-        maxLength: charLimit,
-        placeholder: effectivePlaceholder,
-        ...restProps
-      }
-    );
-    let inputContainer = inputElement;
-    if (hasOverlay) {
-      inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
-        inputElement,
-        startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50", children: startIcon }),
-        (endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: [
-          charLimit !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
-            charCount,
-            "/",
-            charLimit
-          ] }),
-          endIcon
-        ] }),
-        floatingLabel && label && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: inputId,
-            className: "absolute start-2 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground/70 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium",
-            children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
-            ]
-          }
-        )
-      ] });
-    }
-    if (hasAddOn) {
-      inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
-        startAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnNode }),
-        inputContainer,
-        endAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnNode })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
-      label && !floatingLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: inputLabelClassName, children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-        ] }),
-        hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent })
-      ] }),
-      !label && hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent }),
-      inputContainer,
-      errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
-      startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
-      endHelperContent && !errorContent && /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: helperEndId,
-          className: "text-sm text-end text-muted-foreground",
-          children: endHelperContent
-        }
-      )
-    ] });
-  }
-);
-Input.displayName = "Input";
-var InputPassword = React.forwardRef(
-  ({ className, ...props }, ref) => {
-    const [isVisible, setIsVisible] = useState(false);
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        type: isVisible ? "text" : "password",
-        className: cn("pr-9", className),
-        endIcon: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setIsVisible((prev) => !prev),
-            className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
-            tabIndex: -1,
-            children: [
-              isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: isVisible ? "Hide password" : "Show password" })
-            ]
-          }
-        ),
-        ...props
-      }
-    );
-  }
-);
-InputPassword.displayName = "InputPassword";
 var [SheetProvider, useSheet] = getStrictContext("SheetContext");
 function Sheet(props) {
   const [isOpen, setIsOpen] = useControlledState({
@@ -2789,6 +2753,215 @@ function SheetDescription2({ className, ...props }) {
     }
   );
 }
+var inputLabelClassName = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+var sizeClasses2 = {
+  sm: "h-8 px-2 text-xs",
+  default: "h-10 px-3 py-2 text-base md:text-sm",
+  lg: "h-12 px-4 text-lg"
+};
+var Input = React.forwardRef(
+  ({
+    className,
+    type,
+    label,
+    size,
+    rounded,
+    startHelperContent,
+    endHelperContent,
+    hintContent,
+    error,
+    errorContent,
+    startIcon,
+    endIcon,
+    startAddOnContent,
+    endAddOnContent,
+    startAddOn,
+    endAddOn,
+    floatingLabel,
+    charLimit,
+    onChange,
+    value,
+    defaultValue,
+    id,
+    required,
+    placeholder,
+    ...restProps
+  }, ref) => {
+    const autoId = React.useId();
+    const inputId = id || autoId;
+    const [charCount, setCharCount] = React.useState(() => {
+      if (charLimit === void 0) return 0;
+      if (typeof value === "string") return value.length;
+      if (typeof defaultValue === "string") return defaultValue.length;
+      return 0;
+    });
+    React.useEffect(() => {
+      if (charLimit !== void 0 && typeof value === "string") {
+        setCharCount(value.length);
+      }
+    }, [value, charLimit]);
+    const hasEnhancedProps = label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0;
+    if (!hasEnhancedProps) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          id,
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm",
+            className
+          ),
+          ref,
+          onChange,
+          value,
+          defaultValue,
+          required,
+          placeholder,
+          ...restProps
+        }
+      );
+    }
+    const effectiveSize = size || "default";
+    const hasError = error || !!errorContent;
+    const handleChange = (e) => {
+      if (charLimit !== void 0) {
+        setCharCount(e.target.value.length);
+      }
+      onChange?.(e);
+    };
+    const effectivePlaceholder = floatingLabel ? " " : placeholder;
+    const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
+    const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
+    const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
+    const hasAddOn = startAddOnNode != null || endAddOnNode != null;
+    const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
+    const helperStartId = `${inputId}-helper-start`;
+    const helperEndId = `${inputId}-helper-end`;
+    const describedBy = [
+      errorContent && `${inputId}-error`,
+      startHelperContent && !errorContent && helperStartId,
+      endHelperContent && !errorContent && helperEndId
+    ].filter(Boolean).join(" ") || void 0;
+    const inputClasses = cn(
+      "flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10",
+      floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses2[effectiveSize],
+      rounded ? "rounded-full" : "rounded-md",
+      hasError && "border-destructive focus-visible:ring-destructive",
+      startIcon && "ps-9",
+      endIcon && "pe-9",
+      charLimit !== void 0 && !endIcon && "pe-14",
+      charLimit !== void 0 && endIcon && "pe-20",
+      startAddOnNode != null && "rounded-s-none shadow-none",
+      endAddOnNode != null && "rounded-e-none shadow-none",
+      // `peer` is a marker only; the overlay decorators are later siblings and
+      // rely on it for `peer-disabled:` / `peer-placeholder-shown:` variants.
+      "peer",
+      floatingLabel && "placeholder:text-transparent",
+      className
+    );
+    const inputElement = /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        id: inputId,
+        ref,
+        className: inputClasses,
+        required,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        onChange: handleChange,
+        value,
+        defaultValue,
+        maxLength: charLimit,
+        placeholder: effectivePlaceholder,
+        ...restProps
+      }
+    );
+    let inputContainer = inputElement;
+    if (hasOverlay) {
+      inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
+        inputElement,
+        startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50", children: startIcon }),
+        (endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: [
+          charLimit !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+            charCount,
+            "/",
+            charLimit
+          ] }),
+          endIcon
+        ] }),
+        floatingLabel && label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: "absolute start-2 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground/70 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium",
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+            ]
+          }
+        )
+      ] });
+    }
+    if (hasAddOn) {
+      inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
+        startAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnNode }),
+        inputContainer,
+        endAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnNode })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
+      label && !floatingLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: inputLabelClassName, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent })
+      ] }),
+      !label && hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent }),
+      inputContainer,
+      errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
+      startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
+      endHelperContent && !errorContent && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: helperEndId,
+          className: "text-sm text-end text-muted-foreground",
+          children: endHelperContent
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+var InputPassword = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: isVisible ? "text" : "password",
+        className: cn("pr-9", className),
+        endIcon: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsVisible((prev) => !prev),
+            className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
+            tabIndex: -1,
+            children: [
+              isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: isVisible ? "Hide password" : "Show password" })
+            ]
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "var(--espd-sidebar-width)";
@@ -3445,7 +3618,7 @@ function ItemIcon({
 function GroupMenuItems({
   group,
   isSelected,
-  LinkComponent,
+  linkComponent: LinkComponent,
   onItemClick
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3477,7 +3650,7 @@ function GroupMenuItems({
 function CollapsedSidebarGroup({
   group,
   isSelected,
-  LinkComponent
+  linkComponent: LinkComponent
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu2, { open, onOpenChange: setOpen, children: [
@@ -3495,7 +3668,7 @@ function CollapsedSidebarGroup({
           {
             group,
             isSelected,
-            LinkComponent,
+            linkComponent: LinkComponent,
             onItemClick: () => setOpen(false)
           }
         )
@@ -3540,7 +3713,7 @@ function Sidebar2({
   header,
   headerHeight,
   footer,
-  LinkComponent,
+  linkComponent: LinkComponent,
   collapsible = "icon",
   variant = "sidebar",
   focusActiveGroup = false
@@ -3598,8 +3771,8 @@ function Sidebar2({
             // Selected-row fill spelled out here rather than left to the primitive's
             // `data-[active=true]:bg-sidebar-accent`: that rule needs `data-active` on the
             // rendered element, and `asChild` hands the data attributes to the app's
-            // LinkComponent, which need not forward them. `className` is the one prop every
-            // LinkComponent takes, so it is the only reliable channel. `isActive` above
+            // `linkComponent`, which need not forward them. `className` is the one prop every
+            // `linkComponent` takes, so it is the only reliable channel. `isActive` above
             // still sets `data-active` for apps that do forward it, and for test selectors.
             active && "bg-sidebar-accent text-sidebar-accent-foreground",
             // Reserve room for the endAction. The primitive does this with
@@ -3635,7 +3808,7 @@ function Sidebar2({
         {
           group,
           isSelected,
-          LinkComponent
+          linkComponent: LinkComponent
         },
         group.id
       );
@@ -3713,6 +3886,10 @@ var colorClasses = {
   warning: "px-2 h-8 text-sm font-medium text-warning hover:bg-warning/10",
   gray: "px-2 h-8 text-sm font-medium text-gray hover:bg-gray/10"
 };
+var variantClasses = {
+  default: "",
+  ghost: "h-auto hover:bg-transparent p-0"
+};
 var underlineClasses = "relative no-underline after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-full after:bg-current hover:after:animate-underline-slide";
 function renderIconSlot(icon) {
   if (icon == null) return null;
@@ -3725,6 +3902,7 @@ var Link = React.forwardRef(
     search,
     linkComponent,
     color = "primary",
+    variant = "default",
     underline = false,
     startIcon,
     endIcon,
@@ -3735,6 +3913,7 @@ var Link = React.forwardRef(
     const merged = cn(
       baseClasses,
       color != null && colorClasses[color],
+      variantClasses[variant],
       underline && underlineClasses,
       className
     );
@@ -4061,4 +4240,4 @@ function parseTextMarkup(text) {
   return parts;
 }
 
-export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants3 as buttonVariants, inputLabelClassName, isPathPrefixOf, isSidebarGroup, parseTextMarkup, useSidebar };
+export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, FlashButton, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants3 as buttonVariants, inputLabelClassName, isPathPrefixOf, isSidebarGroup, parseTextMarkup, useSidebar };