@bubo-squared/ui-framework 0.2.12 → 0.2.13

package/dist/index.cjs

@@ -958,56 +958,112 @@ var Divider = (props) => {
 Divider.displayName = "Divider";
 
 // src/components/Content/Progress.tsx
+var React14 = __toESM(require("react"), 1);
+
+// src/components/Inputs/Field.tsx
 var React13 = __toESM(require("react"), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var fieldBase = "flex flex-col gap-2 items-start";
+var Field = (props) => {
+  const {
+    label,
+    labelRight = false,
+    hint,
+    hideHint,
+    status = "default",
+    disabled,
+    className,
+    children
+  } = props;
+  const fieldId = React13.useId();
+  const labelId = label ? `${fieldId}-label` : void 0;
+  const hintId = hint ? `${fieldId}-hint` : void 0;
+  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
+  const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn(fieldBase, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
+      labelRight
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-full", children }),
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "p",
+      {
+        id: hint ? hintId : void 0,
+        className: cn("caption", hint ? hintColorClass : "invisible"),
+        children: hint || "\xA0"
+      }
+    )
+  ] });
+};
+Field.displayName = "Field";
+
+// src/components/Content/Progress.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var sizeToBarClasses = {
   lg: "h-4 rounded-16",
   md: "h-2 rounded-8",
   sm: "h-1 rounded-4"
 };
-var Progress = React13.forwardRef(
+var Progress = React14.forwardRef(
   (props, ref) => {
     const {
       value,
       label,
       hint,
-      showLabel = true,
-      showHint = !!hint,
+      showProgressLabel = true,
+      hideHint,
       size = "lg",
+      status = "default",
+      disabled,
       className,
       ...rest
     } = props;
     const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
     const percentageLabel = `${Math.round(clamped)}%`;
     const barHeightClasses = sizeToBarClasses[size];
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Field,
       {
-        ref,
-        className: cn("flex flex-col gap-2 items-start w-full", className),
-        role: "progressbar",
-        "aria-valuenow": clamped,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-label": label,
-        ...rest,
-        children: [
-          showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "paragraph-sm-bold text-primary", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("w-full bg-(--chart-mono) overflow-hidden", barHeightClasses), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            "div",
-            {
-              className: cn(
-                "bg-(--chart-brand) h-full",
-                size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-[1px]"
-              ),
-              style: { width: `${clamped}%` }
-            }
-          ) }),
-          showHint && hint && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "caption text-(--color-secondary)", children: hint })
-        ]
+        label,
+        labelRight: showProgressLabel && label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        hint,
+        hideHint,
+        status,
+        disabled,
+        className: cn("w-full", className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            ref,
+            role: "progressbar",
+            "aria-valuenow": clamped,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": label,
+            ...rest,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                className: cn(
+                  "w-full bg-(--chart-mono) overflow-hidden",
+                  barHeightClasses,
+                  disabled && "opacity-50"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "bg-(--chart-brand) h-full",
+                      size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-[1px]"
+                    ),
+                    style: { width: `${clamped}%` }
+                  }
+                )
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -1015,10 +1071,10 @@ var Progress = React13.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Content/StatusAvatar.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_icons3 = require("@bubo-squared/icons");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var iconStatusVariants = (0, import_class_variance_authority10.cva)(
   "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
@@ -1043,11 +1099,11 @@ var presenceDotByVariant = {
   away: "bg-(--background-warning) border-1 border-(--color-primary-inverse)",
   busy: "bg-(--background-error) border-1 border-(--color-primary-inverse)"
 };
-var StatusAvatar = React14.forwardRef((props, ref) => {
+var StatusAvatar = React15.forwardRef((props, ref) => {
   const { variant = "verified", className, ...rest } = props;
   if (variant === "offline" || variant === "online" || variant === "away" || variant === "busy") {
     const dotClasses = presenceDotByVariant[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         ref,
@@ -1056,23 +1112,23 @@ var StatusAvatar = React14.forwardRef((props, ref) => {
           className
         ),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
       }
     );
   }
   const iconVariant = variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       ref,
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.CheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.StarIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.PlusIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.CrossIcon, { className: "size-3 text-button-white" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -1080,10 +1136,10 @@ var StatusAvatar = React14.forwardRef((props, ref) => {
 StatusAvatar.displayName = "StatusAvatar";
 
 // src/components/Content/Tag.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority11.cva)(
   "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
   {
@@ -1100,7 +1156,7 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
 );
 var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-primary-disabled";
 var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
-var Tag = React15.forwardRef(
+var Tag = React16.forwardRef(
   (props, ref) => {
     const {
       size = "sm",
@@ -1112,22 +1168,22 @@ var Tag = React15.forwardRef(
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot6.Slot : "div";
-    const leading = props.leadingIcon && React15.isValidElement(props.leadingIcon) ? React15.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
-    const trailing = props.trailingIcon && React15.isValidElement(props.trailingIcon) ? React15.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    const leading = props.leadingIcon && React16.isValidElement(props.leadingIcon) ? React16.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
+    const trailing = props.trailingIcon && React16.isValidElement(props.trailingIcon) ? React16.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       Comp,
       {
         className: cn(tagVariants({ size }), disabled && disabledTag, className),
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: iconClasses, children: leading }),
-          value ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: iconClasses, children: trailing })
+          leading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: iconClasses, children: leading }),
+          value ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
+          trailing && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: iconClasses, children: trailing })
         ]
       }
     );
@@ -1135,14 +1191,14 @@ var Tag = React15.forwardRef(
 );
 
 // src/components/Inputs/Checkbox.tsx
-var React16 = require("react");
+var React17 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_icons4 = require("@bubo-squared/icons");
 var import_icons5 = require("@bubo-squared/icons");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Checkbox({ label, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       CheckboxPrimitive.Root,
       {
         className: cn(
@@ -1158,22 +1214,21 @@ function Checkbox({ label, className, ...props }) {
           className
         ),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons5.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons5.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
 }
 
 // src/components/Inputs/Dropdown.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_icons6 = require("@bubo-squared/icons");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var dropdownWrapperBase = "flex flex-col gap-2 items-start";
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
   "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
@@ -1235,10 +1290,29 @@ var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex item
     disabled: false
   }
 });
+var dropdownItemVariants = (0, import_class_variance_authority12.cva)("", {
+  variants: {
+    size: {
+      sm: "h-8",
+      md: "h-10",
+      lg: "h-11",
+      xl: "h-14"
+    }
+  }
+});
+var dropdownButtonVariants = (0, import_class_variance_authority12.cva)("flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left paragraph-lg text-primary hover:bg-(--background-secondary)", {
+  variants: {
+    size: {
+      sm: "paragraph-sm py-(--space-4) ",
+      md: "paragraph-md py-(--space-6) ",
+      lg: "paragraph-lg py-(--space-8) ",
+      xl: "subtitle py-(--space-10) "
+    }
+  }
+});
 var Dropdown = (props) => {
   const {
     label = "Field Label",
-    showLabel = true,
     hint = "This is a hint text to help user.",
     hideHint = false,
     placeholder = "Placeholder text",
@@ -1253,12 +1327,12 @@ var Dropdown = (props) => {
     showMenu,
     ...buttonProps
   } = props;
-  const dropdownRef = React17.useRef(null);
+  const dropdownRef = React18.useRef(null);
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React17.useState(
+  const [internalValue, setInternalValue] = React18.useState(
     defaultValue
   );
-  const [open, setOpen] = React17.useState(false);
+  const [open, setOpen] = React18.useState(false);
   const currentValue = isControlled ? value : internalValue;
   const selectedOption = options.find((opt) => opt.value === currentValue);
   const hasValue = !!selectedOption;
@@ -1278,10 +1352,7 @@ var Dropdown = (props) => {
       setOpen(false);
     }
   };
-  const triggerId = React17.useId();
-  const labelId = `${triggerId}-label`;
-  const hintId = `${triggerId}-hint`;
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (showMenu !== void 0) return;
     const handleClickOutside = (event) => {
       if (!dropdownRef.current) return;
@@ -1294,144 +1365,97 @@ var Dropdown = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showMenu]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: dropdownRef, className: dropdownWrapperBase, children: [
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "label",
-      {
-        htmlFor: triggerId,
-        id: labelId,
-        className: cn(
-          "paragraph-sm",
-          disabled ? "text-primary-disabled" : "text-primary"
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Field,
+    {
+      label,
+      hint,
+      hideHint,
+      status,
+      disabled,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            disabled,
+            className: cn(dropdownTriggerVariants({ size, status }), className),
+            onClick: handleToggle,
+            "data-open": isOpen || void 0,
+            ...buttonProps,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "span",
+                {
+                  className: cn(
+                    dropdownTextVariants({
+                      size,
+                      hasValue,
+                      disabled: !!disabled
+                    })
+                  ),
+                  children: hasValue ? selectedOption?.label : placeholder
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(dropdownIconVariants({ size, disabled: !!disabled })), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons6.ChevronDownIcon, {}) })
+            ]
+          }
         ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-        "button",
-        {
-          type: "button",
-          id: triggerId,
-          "aria-haspopup": "listbox",
-          "aria-expanded": isOpen,
-          "aria-labelledby": showLabel ? labelId : void 0,
-          "aria-describedby": !hideHint ? hintId : void 0,
-          disabled,
-          className: cn(
-            dropdownTriggerVariants({ size, status }),
-            className
+        isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-secondary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-79", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: [
+          hasValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "li",
+            {
+              className: cn(
+                "bg-(--background-neutral) border-b border-(--border-secondary)",
+                dropdownItemVariants({ size })
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: cn(dropdownButtonVariants({ size }), "text-secondary"),
+                  role: "option",
+                  "aria-selected": false,
+                  onClick: () => handleSelect(""),
+                  children: "Clear"
+                }
+              )
+            }
           ),
-          onClick: handleToggle,
-          "data-open": isOpen || void 0,
-          ...buttonProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "span",
-              {
-                className: cn(
-                  dropdownTextVariants({
-                    size,
-                    hasValue,
-                    disabled: !!disabled
-                  })
-                ),
-                children: hasValue ? selectedOption?.label : placeholder
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "span",
+          options.map((opt) => {
+            const selected = opt.value === currentValue;
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "li",
               {
                 className: cn(
-                  dropdownIconVariants({ size, disabled: !!disabled })
+                  "bg-(--background-neutral) border-b border-(--border-secondary) last:border-b-0 ",
+                  selected && "bg-(--background-secondary)",
+                  dropdownItemVariants({ size })
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons6.ChevronDownIcon, {})
-              }
-            )
-          ]
-        }
-      ),
-      isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-primary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-79", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
-        const selected = opt.value === currentValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          "li",
-          {
-            className: cn(
-              "bg-(--background-neutral) border-b border-(--border-secondary) last:border-b-0",
-              selected && "bg-(--background-secondary)"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) py-(--space-8) text-left paragraph-lg text-primary hover:bg-(--background-secondary)",
-                role: "option",
-                "aria-selected": selected,
-                onClick: () => handleSelect(opt.value),
-                children: opt.label
-              }
-            )
-          },
-          opt.value
-        );
-      }) }) })
-    ] }),
-    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "p",
-      {
-        id: hintId,
-        className: cn(
-          "caption",
-          disabled ? "text-primary-disabled" : "text-(--color-secondary)"
-        ),
-        children: hint
-      }
-    )
-  ] });
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: dropdownButtonVariants({ size }),
+                    role: "option",
+                    "aria-selected": selected,
+                    onClick: () => handleSelect(opt.value),
+                    children: opt.label
+                  }
+                )
+              },
+              opt.value
+            );
+          })
+        ] }) })
+      ]
+    }
+  ) });
 };
 Dropdown.displayName = "Dropdown";
 
-// src/components/Inputs/Field.tsx
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var fieldBase = "flex flex-col gap-2 items-start";
-var Field = (props) => {
-  const {
-    label,
-    hint,
-    hideHint,
-    status = "default",
-    disabled,
-    className,
-    children
-  } = props;
-  const fieldId = React18.useId();
-  const labelId = label ? `${fieldId}-label` : void 0;
-  const hintId = hint ? `${fieldId}-hint` : void 0;
-  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
-  const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "label",
-      {
-        id: labelId,
-        className: cn("paragraph-sm", labelColorClass),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative w-full", children }),
-    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "p",
-      {
-        id: hint ? hintId : void 0,
-        className: cn("caption", hint ? hintColorClass : "invisible"),
-        children: hint || "\xA0"
-      }
-    )
-  ] });
-};
-Field.displayName = "Field";
-
 // src/components/Inputs/PasswordInput.tsx
 var React21 = __toESM(require("react"), 1);
 var import_class_variance_authority14 = require("class-variance-authority");
@@ -1510,6 +1534,7 @@ var InputShell = React20.forwardRef(
 InputShell.displayName = "InputShell";
 
 // src/components/Inputs/PasswordInput.tsx
+var import_icons7 = require("@bubo-squared/icons");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
   variants: {
@@ -1575,13 +1600,10 @@ var PasswordInput = (props) => {
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
     size = "lg",
     status = "default",
-    variant = "icons",
+    variant = "icon",
     disabled,
     className,
     leadingIcon,
-    trailingIcon,
-    actionLabel = "Action",
-    onActionClick,
     value,
     defaultValue,
     onChange,
@@ -1591,8 +1613,10 @@ var PasswordInput = (props) => {
   const [internalValue, setInternalValue] = React21.useState(
     defaultValue ?? ""
   );
+  const [isRevealed, setIsRevealed] = React21.useState(false);
   const currentValue = (isControlled ? value : internalValue) ?? "";
   const inputRef = React21.useRef(null);
+  const showLeadingIcon = !!leadingIcon;
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -1603,9 +1627,6 @@ var PasswordInput = (props) => {
     }
     onChange?.(event);
   };
-  const showLeadingIcon = variant === "icons" && !!leadingIcon;
-  const showTrailingIcon = variant === "icons" && !!trailingIcon;
-  const showAction = variant === "action" && !!actionLabel;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Field,
     {
@@ -1636,37 +1657,33 @@ var PasswordInput = (props) => {
               Input,
               {
                 ref: inputRef,
-                type: "password",
+                type: isRevealed ? "text" : "password",
                 disabled: disabled ?? void 0,
                 placeholder,
                 value: isControlled ? value : currentValue,
                 defaultValue: isControlled ? void 0 : defaultValue,
                 onChange: handleChange,
                 variant: "bare",
-                className: cn(
-                  passwordTextVariants({ size, disabled: !!disabled })
-                ),
+                className: cn(passwordTextVariants({ size, disabled: !!disabled })),
                 ...inputProps
               }
             ),
-            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "span",
-              {
-                className: cn(
-                  iconWrapperVariants({ size, disabled: !!disabled })
-                ),
-                children: trailingIcon
-              }
-            ),
-            showAction && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "button",
               {
                 type: "button",
+                disabled: !!disabled,
+                onClick: () => {
+                  if (disabled) return;
+                  setIsRevealed((prev) => !prev);
+                  inputRef.current?.focus();
+                },
+                "aria-label": isRevealed ? "Hide password" : "Show password",
                 className: cn(
-                  actionButtonVariants({ size, disabled: !!disabled })
+                  "cursor-pointer",
+                  variant === "text" ? actionButtonVariants({ size, disabled: !!disabled }) : iconWrapperVariants({ size, disabled: !!disabled })
                 ),
-                onClick: disabled ? void 0 : onActionClick,
-                children: actionLabel
+                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons7.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons7.EyeIcon, {}) : isRevealed ? "Hide" : "Show"
               }
             )
           ]
@@ -1679,7 +1696,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Inputs/PhoneInput.tsx
 var React27 = __toESM(require("react"), 1);
-var import_icons8 = require("@bubo-squared/icons");
+var import_icons9 = require("@bubo-squared/icons");
 var RPNInput = __toESM(require("react-phone-number-input"), 1);
 var import_flags = __toESM(require("react-phone-number-input/flags"), 1);
 
@@ -1738,7 +1755,7 @@ function Button2({
 // src/components/ui/command.tsx
 var React24 = require("react");
 var import_cmdk = require("cmdk");
-var import_icons7 = require("@bubo-squared/icons");
+var import_icons8 = require("@bubo-squared/icons");
 
 // src/components/ui/dialog.tsx
 var React23 = require("react");
@@ -1773,7 +1790,7 @@ function CommandInput({
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons8.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_cmdk.Command.Input,
           {
@@ -2080,7 +2097,7 @@ var CountrySelect = ({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                import_icons8.CodeIcon,
+                import_icons9.CodeIcon,
                 {
                   className: cn(
                     "-mr-2 size-4 opacity-50 rotate-90",
@@ -2162,7 +2179,7 @@ var CountrySelectOption = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "flex-1 text-sm", children: countryName }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_icons8.CheckIcon,
+          import_icons9.CheckIcon,
           {
             className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
           }
@@ -2316,7 +2333,7 @@ var RadioGroup = ({
 // src/components/Inputs/SearchInput.tsx
 var React29 = __toESM(require("react"), 1);
 var import_class_variance_authority17 = require("class-variance-authority");
-var import_icons9 = require("@bubo-squared/icons");
+var import_icons10 = require("@bubo-squared/icons");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
   variants: {
@@ -2373,7 +2390,7 @@ var SearchInput = (props) => {
       className,
       onClick: handleContainerClick,
       children: [
-        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons9.SearchIcon, {}) }),
+        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons10.SearchIcon, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Input,
           {
@@ -2808,7 +2825,7 @@ Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
 var React31 = __toESM(require("react"), 1);
-var import_icons10 = require("@bubo-squared/icons");
+var import_icons11 = require("@bubo-squared/icons");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var wrapperBase3 = "flex flex-col gap-2 items-start w-full";
 var TextArea = (props) => {
@@ -2970,7 +2987,7 @@ var TextArea = (props) => {
                     "absolute bottom-0 right-0 flex h-4 w-4 items-center justify-center text-(--icon-primary)",
                     disabled && "text-(--icon-primary-disabled)"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons10.MaximizeIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons11.MaximizeIcon, {})
                 }
               )
             }
@@ -3369,7 +3386,7 @@ Popover2.displayName = "Popover";
 var React36 = __toESM(require("react"), 1);
 var import_react_slot8 = require("@radix-ui/react-slot");
 var import_class_variance_authority19 = require("class-variance-authority");
-var import_icons11 = require("@bubo-squared/icons");
+var import_icons12 = require("@bubo-squared/icons");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var breadcrumbBase = "group inline-flex items-center gap-[var(--space-8)] pl-0 pr-[var(--space-8)] py-[6px] rounded-full transition-colors select-none disabled:cursor-default disabled:pointer-events-none";
 var breadcrumbIconVariants = (0, import_class_variance_authority19.cva)(
@@ -3422,7 +3439,7 @@ var Breadcrumb = React36.forwardRef((props, ref) => {
       ref,
       ...rest,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(breadcrumbIconVariants({ variant })), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons11.ChevronRightIcon, {}) }),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(breadcrumbIconVariants({ variant })), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons12.ChevronRightIcon, {}) }),
         content && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(breadcrumbTextVariants({ variant })), children: content })
       ]
     }