@bricks-toolkit/toolkit 0.1.1 → 0.1.3

package/dist/chunk-32SKYPQW.mjs

@@ -0,0 +1,156 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var variantClasses = {
+  default: "animate-pulse bg-skeleton",
+  wave: "skeleton-wave bg-skeleton",
+  pulse: "animate-pulse bg-skeleton-shine"
+};
+var shapeClasses = {
+  rectangle: "rounded-sm",
+  circle: "rounded-full",
+  rounded: "rounded-md"
+};
+var Skeleton = forwardRef(function Skeleton2({ className, variant = "wave", shape = "rectangle", width, height, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      style: {
+        width: width !== void 0 ? typeof width === "number" ? `${String(width)}px` : width : void 0,
+        height: height !== void 0 ? typeof height === "number" ? `${String(height)}px` : height : void 0,
+        ...style
+      },
+      className: cn("overflow-hidden", variantClasses[variant], shapeClasses[shape], className),
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, variant = "wave", shortLast = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-2", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: cn(isLast && shortLast ? "w-3/5" : "w-full")
+          },
+          i
+        );
+      })
+    }
+  );
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonAvatar = forwardRef(function SkeletonAvatar2({ size = 40, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      ref,
+      variant,
+      shape: "circle",
+      width: size,
+      height: size,
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+});
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonCard = forwardRef(function SkeletonCard2({ showImage = true, imageHeight = 160, lines = 3, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-surface overflow-hidden flex flex-col",
+        className
+      ),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showImage && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            shape: "rectangle",
+            height: imageHeight,
+            className: "w-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant, height: 20, className: "w-2/3" }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines, variant, className: "mt-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" }),
+            /* @__PURE__ */ jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+SkeletonCard.displayName = "SkeletonCard";
+var SkeletonTable = forwardRef(function SkeletonTable2({ rows = 5, columns = 4, variant = "wave", showHeader = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("w-full rounded-lg border border-border overflow-hidden bg-surface", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 border-b border-border px-4 py-2 bg-surface-secondary", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: cn(i === 0 ? "w-1/4" : i === columns - 1 ? "w-16" : "flex-1")
+          },
+          i
+        )) }),
+        Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-4 px-4 py-2",
+              rowIdx < rows - 1 && "border-b border-border"
+            ),
+            children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant,
+                height: 14,
+                className: cn(colIdx === 0 ? "w-1/4" : colIdx === columns - 1 ? "w-16" : "flex-1")
+              },
+              colIdx
+            ))
+          },
+          rowIdx
+        ))
+      ]
+    }
+  );
+});
+SkeletonTable.displayName = "SkeletonTable";
+
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText };

package/dist/chunk-3IPWW66F.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+var chunkTNGW5YHA_cjs = require('./chunk-TNGW5YHA.cjs');
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "h-8 px-3 text-xs tracking-tight",
+  sm: "h-9 px-4 text-sm tracking-tight",
+  md: "h-10 px-5 text-sm font-medium tracking-tight",
+  lg: "h-11 px-6 text-base font-medium tracking-tight",
+  xl: "h-12 px-8 text-lg font-medium tracking-tight"
+};
+var variantListClasses = {
+  default: "border-b border-border/60 bg-transparent gap-2",
+  filled: "bg-surface-secondary/80 p-1.5 rounded-xl gap-1.5 border border-border/40 shadow-inner backdrop-blur-sm",
+  flushed: "border-b border-border/60 bg-transparent gap-8",
+  unstyled: "gap-4"
+};
+var variantTabClasses = {
+  default: {
+    default: "border border-transparent text-text-muted hover:text-text hover:bg-hover/5 rounded-t-lg mb-[-1px] transition-all duration-normal",
+    selected: "border border-border border-b-surface text-primary rounded-t-lg mb-[-1px] bg-surface font-bold shadow-[0_-4px_12px_-4px_rgba(0,0,0,0.08)]"
+  },
+  filled: {
+    default: "text-text-muted hover:text-text rounded-lg hover:bg-hover/30 transition-all duration-normal px-4",
+    selected: "bg-surface text-primary shadow-md rounded-lg font-bold scale-[1.02] px-4"
+  },
+  flushed: {
+    default: "border-b-2 border-transparent text-text-muted hover:text-text hover:border-border/40 mb-[-1px] transition-all duration-normal px-1",
+    selected: "border-b-2 border-primary text-primary mb-[-1px] font-bold px-1 tracking-normal"
+  },
+  unstyled: {
+    default: "text-text-muted hover:text-text transition-all duration-normal opacity-70 hover:opacity-100",
+    selected: "text-primary font-bold"
+  }
+};
+var Tabs = react.forwardRef(function Tabs2({
+  items,
+  defaultSelectedId,
+  selectedId: externalSelectedId,
+  onChange,
+  variant = "default",
+  size = "md",
+  fullWidth = false,
+  className,
+  tabListClassName,
+  tabClassName,
+  tabPanelClassName,
+  ...rest
+}, ref) {
+  const [internalSelectedId, setInternalSelectedId] = react.useState(() => {
+    if (externalSelectedId !== void 0) return externalSelectedId;
+    if (defaultSelectedId !== void 0) return defaultSelectedId;
+    return items.length > 0 ? items[0]?.id ?? "" : "";
+  });
+  const scrollContainerRef = react.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = react.useState(false);
+  const [canScrollRight, setCanScrollRight] = react.useState(false);
+  const isControlled = externalSelectedId !== void 0;
+  const currentSelectedId = isControlled ? externalSelectedId : internalSelectedId;
+  const handleTabClick = (id, disabled) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalSelectedId(id);
+    }
+    onChange?.(id);
+  };
+  const checkScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+      setCanScrollLeft(scrollLeft > 5);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+    }
+  };
+  react.useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    checkScroll();
+    container.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    const timer = setTimeout(checkScroll, 100);
+    return () => {
+      container.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+      clearTimeout(timer);
+    };
+  }, [items, fullWidth]);
+  const scroll = (direction) => {
+    if (scrollContainerRef.current) {
+      const scrollAmount = scrollContainerRef.current.clientWidth / 2;
+      scrollContainerRef.current.scrollBy({
+        left: direction === "left" ? -scrollAmount : scrollAmount,
+        behavior: "smooth"
+      });
+    }
+  };
+  react.useEffect(() => {
+    if (scrollContainerRef.current) {
+      const activeTab = scrollContainerRef.current.querySelector('[aria-selected="true"]');
+      if (activeTab) {
+        activeTab.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      }
+    }
+  }, [currentSelectedId]);
+  const selectedItem = items.find((item) => item.id === currentSelectedId);
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkL5VQZZVR_cjs.cn("w-full", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group/tabs flex items-center", children: [
+      canScrollLeft && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 z-20 flex h-full items-center pl-1 lg:hidden pointer-events-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkTNGW5YHA_cjs.IconButton,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-4 h-4" }),
+            "aria-label": "Scroll left",
+            variant: "ghost",
+            size: "xs",
+            isRound: true,
+            onClick: () => {
+              scroll("left");
+            },
+            className: "pointer-events-auto shadow-xl border border-border/20 bg-surface/98 backdrop-blur-xl hover:bg-primary hover:text-surface transition-all duration-300"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-full bg-gradient-to-r from-surface/80 to-transparent pointer-events-none -ml-6" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: chunkL5VQZZVR_cjs.cn(
+            "flex-1 overflow-x-auto scrollbar-none scroll-smooth",
+            variant === "filled" ? "py-1" : "",
+            fullWidth && "w-full"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "tablist",
+              className: chunkL5VQZZVR_cjs.cn(
+                "flex flex-nowrap",
+                (fullWidth || variant !== "filled") && "min-w-full",
+                variant === "filled" && "w-max mx-auto lg:mx-0",
+                variantListClasses[variant],
+                tabListClassName
+              ),
+              children: items.map((item) => {
+                const isSelected = item.id === currentSelectedId;
+                const isDisabled = item.disabled;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": isSelected,
+                    "aria-disabled": isDisabled,
+                    disabled: isDisabled,
+                    onClick: () => {
+                      handleTabClick(item.id, isDisabled);
+                    },
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "flex items-center justify-center font-medium transition-all duration-normal outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface whitespace-nowrap shrink-0",
+                      sizeClasses[size],
+                      variantTabClasses[variant][isSelected ? "selected" : "default"],
+                      fullWidth && "flex-1",
+                      isDisabled && "opacity-50 cursor-not-allowed pointer-events-none",
+                      tabClassName
+                    ),
+                    children: item.label
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        }
+      ),
+      canScrollRight && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-20 flex h-full items-center pr-1 hidden pointer-events-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-full bg-gradient-to-l from-surface to-transparent pointer-events-none -mr-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkTNGW5YHA_cjs.IconButton,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-4 h-4" }),
+            "aria-label": "Scroll right",
+            variant: "ghost",
+            size: "xs",
+            isRound: true,
+            onClick: () => {
+              scroll("right");
+            },
+            className: "pointer-events-auto shadow-xl border border-border/20 bg-surface/98 backdrop-blur-xl hover:bg-primary hover:text-surface transition-all duration-300"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tabpanel", className: chunkL5VQZZVR_cjs.cn("pt-4", tabPanelClassName), tabIndex: 0, children: selectedItem?.content })
+  ] });
+});
+Tabs.displayName = "Tabs";
+
+exports.Tabs = Tabs;

package/dist/chunk-446OJWC6.mjs

@@ -0,0 +1,285 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useState } from 'react';
+import { EyeSlashIcon, EyeIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base",
+  xl: "h-12 px-4 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",
+  unstyled: "border-0 bg-transparent p-0 focus:outline-none focus:ring-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus:border-primary focus:ring-primary/40",
+    filled: "focus:border-primary focus:ring-primary/40",
+    flushed: "border-border focus:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus:border-error focus:ring-error/20",
+    filled: "bg-error/5 focus:border-error focus:ring-error/20",
+    flushed: "border-error focus:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus:border-success focus:ring-success/20",
+    filled: "bg-success/5 focus:border-success focus:ring-success/20",
+    flushed: "border-success focus:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus:border-warning focus:ring-warning/20",
+    filled: "bg-warning/5 focus:border-warning focus:ring-warning/20",
+    flushed: "border-warning focus:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning"
+};
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
+        side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
+      ),
+      children
+    }
+  );
+}
+var PasswordInput = forwardRef(function PasswordInput2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  className,
+  isLoading,
+  showPasswordToggle = true,
+  value,
+  onChange,
+  onKeyUp,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const capsLockId = `${inputId}-capslock`;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [capsLockActive, setCapsLockActive] = useState(false);
+  const handleKeyUp = (e) => {
+    setCapsLockActive(e.getModifierState("CapsLock"));
+    if (onKeyUp) onKeyUp(e);
+  };
+  const handleKeyDown = (e) => {
+    setCapsLockActive(e.getModifierState("CapsLock"));
+    if (onKeyDown) onKeyDown(e);
+  };
+  const hasLeftElement = leftElement !== void 0;
+  const hasRightElement = rightElement !== void 0 || Boolean(isLoading) || showPasswordToggle;
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [
+    helperText ? helperId : null,
+    stateMessage ? stateMessageId : null,
+    capsLockActive ? capsLockId : null
+  ].filter(Boolean).join(" ") || void 0;
+  const renderRightIcon = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "animate-spin h-5 w-5 text-text-muted",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (showPasswordToggle) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          onClick: () => {
+            setIsPasswordVisible((prev) => !prev);
+          },
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text transition focus:outline-none w-6 h-6",
+          "aria-label": isPasswordVisible ? "Hide password" : "Show password",
+          children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeSlashIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
+        }
+      );
+    }
+    return rightElement;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "font-black leading-none mb-2 text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-stretch transition-all duration-150 overflow-hidden",
+              variantClasses[variant],
+              stateVariantClasses[state][variant],
+              fullWidth ? "w-full" : "w-fit",
+              "focus-within:ring-4 focus-within:ring-primary/20 focus-within:border-primary",
+              disabled && "opacity-50 cursor-not-allowed bg-surface-secondary",
+              inputGroupClassName
+            ),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "left", children: prefix }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center min-w-0", children: [
+                hasLeftElement && /* @__PURE__ */ jsx("div", { className: "pl-3 flex-shrink-0 flex items-center justify-center", children: leftElement }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 h-full", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    ...rest,
+                    id: inputId,
+                    disabled: Boolean(disabled) || Boolean(isLoading),
+                    type: isPasswordVisible ? "text" : "password",
+                    value,
+                    onChange,
+                    onKeyUp: handleKeyUp,
+                    onKeyDown: handleKeyDown,
+                    "aria-invalid": state === "error" ? true : void 0,
+                    "aria-describedby": describedBy,
+                    "aria-required": required,
+                    className: cn(
+                      "w-full bg-transparent border-0 focus:outline-none focus:ring-0 outline-none h-full",
+                      sizeClasses[size],
+                      inputClassName
+                    ),
+                    style: {
+                      paddingLeft: hasLeftElement ? "0.5rem" : void 0,
+                      paddingRight: hasRightElement ? "0.5rem" : void 0
+                    }
+                  }
+                ) }),
+                hasRightElement && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "pr-3 flex-shrink-0 flex items-center justify-center text-text-secondary",
+                    style: { width: "2.5rem" },
+                    children: renderRightIcon()
+                  }
+                )
+              ] }),
+              suffix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "right", children: suffix })
+            ]
+          }
+        ),
+        helperText !== void 0 && /* @__PURE__ */ jsx("p", { id: helperId, className: cn("text-xs leading-tight text-text-muted", helperClassName), children: helperText }),
+        capsLockActive && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: capsLockId,
+            className: "text-xs leading-tight text-warning font-black uppercase tracking-widest",
+            children: "Caps Lock is on"
+          }
+        ),
+        stateMessage !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: cn("text-xs leading-tight mt-1", stateMessageClasses[state], helperClassName),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };