@bubo-squared/ui-framework 0.2.24 → 0.2.26

package/dist/index.cjs

@@ -378,7 +378,7 @@ var IconButtonGroup = (props) => {
           "aria-label": item.ariaLabel,
           disabled: item.disabled,
           className: cn(
-            "rounded-none border-1 border-(--border-secondary) text-primary ",
+            "rounded-none border-1 border-secondary text-primary ",
             index === 0 && "rounded-l-6",
             index === items.length - 1 && "rounded-r-6",
             index > 0 && "-ml-px"
@@ -555,7 +555,7 @@ var Accordion = React6.forwardRef(
           AccordionPrimitive.Item,
           {
             value: "item",
-            className: cn(bordered ? "border rounded-4" : "border-b", "border-(--border-secondary) px-4"),
+            className: cn(bordered ? "border rounded-4" : "border-b", "border-secondary px-4"),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AccordionPrimitive.Trigger,
@@ -589,7 +589,7 @@ var import_class_variance_authority6 = require("class-variance-authority");
 var import_icons2 = require("@bubo-squared/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)(
-  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
+  "relative inline-flex items-center justify-center rounded-full border-secondary border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
     variants: {
       size: {
@@ -738,24 +738,24 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority7.cva)(
-  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 px-1 py-0",
+  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
   {
     variants: {
       size: {
-        sm: "px-1 paragraph-sm",
-        md: "px-1 paragraph-md",
-        lg: "px-1.5 subtitle",
-        xl: "px-2 h6-title"
+        sm: "px-1.5 paragraph-sm",
+        md: "px-2 paragraph-md",
+        lg: "px-2 subtitle",
+        xl: "px-2.5 h6-title"
       },
       variant: {
         primary: "bg-(--background-secondary) text-primary",
-        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-primary",
+        secondary: "bg-(--background-primary) border-1 border-primary text-primary",
         active: "bg-ac-lilac text-badge-black",
         informal: "bg-ac-neon-blue text-badge-black",
         success: "bg-ac-neon-green text-badge-black",
         warning: "bg-ac-light-orange text-badge-black",
         error: "bg-s-error-300 text-badge-black",
-        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-primary-disabled",
+        disabled: "bg-(--background-primary-disabled) border-1 border-primary-disabled text-primary-disabled",
         "double-default": "bg-(--background-secondary) text-primary",
         "double-current": "bg-color-ac-lilac text-badge-black"
       }
@@ -810,12 +810,12 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
       },
       variant: {
         primary: "bg-(--background-brand)",
-        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--color-secondary)",
+        secondary: "bg-(--background-primary) border-1 border-secondary text-primary",
         informal: "bg-(--background-informal)",
         success: "bg-(--background-success)",
         warning: "bg-(--background-warning)",
         error: "bg-(--background-error)",
-        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-primary-disabled"
+        disabled: "bg-(--background-primary) border-1 border-primary-disabled text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -1153,7 +1153,8 @@ var Progress = React15.forwardRef(
       label,
       hint,
       ariaLabel,
-      showProgressLabel = true,
+      hideProgressLabel = false,
+      successBarColorOnComplete = false,
       hideHint,
       size = "lg",
       status = "default",
@@ -1169,7 +1170,7 @@ var Progress = React15.forwardRef(
       Field,
       {
         label,
-        labelRight: showProgressLabel && label != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
@@ -1197,7 +1198,8 @@ var Progress = React15.forwardRef(
                   "div",
                   {
                     className: cn(
-                      "bg-(--chart-brand) h-full",
+                      "h-full",
+                      successBarColorOnComplete && clamped === 100 ? "bg-(--color-success)" : "bg-(--chart-brand)",
                       size === "lg" ? "rounded-4" : size === "md" ? "rounded-2" : "rounded-[1px]"
                     ),
                     style: { width: `${clamped}%` }
@@ -1284,7 +1286,7 @@ var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime19 = 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) focus:border-(--border-brand) focus-ring-primary ",
+  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-secondary bg-(--background-neutral) focus:border-brand focus-ring-primary ",
   {
     variants: {
       size: {
@@ -1297,7 +1299,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 disabledTag = "pointer-events-none 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 = React17.forwardRef(
   (props, ref) => {
@@ -1344,7 +1346,7 @@ var import_icons5 = require("@bubo-squared/icons");
 
 // src/components/ui/dropdown-styles.ts
 var import_class_variance_authority12 = require("class-variance-authority");
-var dropdownSurfaceClass = "z-50 rounded-4 border border-(--border-secondary-hover) bg-(--background-neutral) shadow-card-md";
+var dropdownSurfaceClass = "z-50 rounded-4 border border-secondary-hover bg-(--background-neutral) shadow-card-md";
 var dropdownScrollClass = "max-h-79 overflow-y-auto dropdown-scrollbar";
 var dropdownRowVariants = (0, import_class_variance_authority12.cva)(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
@@ -1605,15 +1607,15 @@ var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef)
       {
         ref: forwardedRef,
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-primary-inverse",
+          "group flex h-5 w-5 items-center justify-center rounded-2 border border-secondary bg-(--background-neutral) text-primary-inverse",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
           "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-button-white data-[state=indeterminate]:border-none",
           "data-[state=checked]:hover:bg-(--background-brand-hover) data-[state=indeterminate]:hover:bg-(--background-brand-hover)",
-          "focus-visible:border-(--border-brand)",
+          "focus-visible:border-brand",
           "disabled:bg-(--background-primary-disabled) disabled:border-none disabled:text-(--icon-primary-disabled)",
           "data-[state=checked]:disabled:bg-(--background-primary-disabled) data-[state=checked]:disabled:border-none data-[state=checked]:disabled:text-(--icon-primary-disabled)",
           "data-[state=indeterminate]:disabled:bg-(--background-primary-disabled) data-[state=indeterminate]:disabled:border-none data-[state=indeterminate]:disabled:text-(--icon-primary-disabled)",
-          "focus-ring-primary hover:cursor-pointer hover:border-(--border-secondary-hover)",
+          "focus-ring-primary hover:cursor-pointer hover:border-secondary-hover",
           className
         ),
         ...props,
@@ -1637,7 +1639,7 @@ var React21 = __toESM(require("react"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var inputShellVariants = (0, import_class_variance_authority13.cva)(
-  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
+  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-secondary",
   {
     variants: {
       size: {
@@ -1652,7 +1654,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
         error: "input-error"
       },
       disabled: {
-        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
+        true: "bg-(--background-primary-disabled) border-secondary-disabled text-primary-disabled cursor-default"
       }
     },
     defaultVariants: {
@@ -2811,7 +2813,7 @@ function ScrollBar({
 // src/components/Inputs/PhoneInput.tsx
 var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var inputBase = "h-full rounded-4 border-(--border-secondary) bg-(--background-primary) hover:border-(--border-secondary-hover)";
+var inputBase = "h-full rounded-4 border-secondary bg-(--background-primary) hover:border-secondary-hover";
 var sizeBase = (0, import_class_variance_authority18.cva)(
   "flex w-full",
   {
@@ -2834,7 +2836,7 @@ var inputTextVariants2 = (0, import_class_variance_authority18.cva)("", {
       xl: "h6-title"
     },
     disabled: {
-      true: "text-primary-disabled border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-secondary-disabled"
     }
   },
   defaultVariants: {
@@ -3163,24 +3165,24 @@ var RadioGroup = React32.forwardRef((props, forwardedRef) => {
                     className: cn(
                       "flex items-center justify-center shrink-0 h-5 w-5 rounded-full border bg-(--background-primary) transition-all",
                       // 1: enabled, unchecked, unfocused, unhovered
-                      "group-data-[state=unchecked]:border-(--border-secondary)",
+                      "group-data-[state=unchecked]:border-secondary",
                       // 2: enabled, checked, unfocused, unhovered
-                      "group-data-[state=checked]:border-(--border-brand)",
+                      "group-data-[state=checked]:border-brand",
                       // 3: enabled, unchecked, hovered, unfocused
-                      "group-data-[state=unchecked]:group-hover:border-(--border-secondary-hover)",
+                      "group-data-[state=unchecked]:group-hover:border-secondary-hover",
                       // 4: enabled, checked, hovered, unfocused
-                      "group-data-[state=checked]:group-hover:border-(--border-brand-hover)",
+                      "group-data-[state=checked]:group-hover:border-brand-hover",
                       "group-data-[state=checked]:group-hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
                       // 5: enabled, unchecked, focused (override 1/3)
-                      "group-data-[state=unchecked]:group-focus-visible:border-(--border-secondary-hover)",
+                      "group-data-[state=unchecked]:group-focus-visible:border-secondary-hover",
                       // 6: enabled, checked, focused (override 2/4)
-                      "group-data-[state=checked]:group-focus-visible:border-(--border-brand-focus)",
+                      "group-data-[state=checked]:group-focus-visible:border-brand-focus",
                       "group-data-[state=checked]:group-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
                       // 7: disabled, unchecked (override everything above)
                       "group-[&[data-disabled][data-state=unchecked]]:border-none",
                       "group-[&[data-disabled][data-state=unchecked]]:bg-(--background-primary-disabled)",
                       // 8: disabled, checked (override everything above)
-                      "group-[&[data-disabled][data-state=checked]]:border-(--border-primary-disabled)",
+                      "group-[&[data-disabled][data-state=checked]]:border-primary-disabled",
                       "group-[&[data-disabled][data-state=checked]]:bg-(--background-primary-disabled)"
                     ),
                     children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3900,8 +3902,8 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
   const textareaId = id ?? generatedId;
   const statusBorderClass = {
     default: "",
-    success: "border-(--border-success)",
-    error: "border-(--border-error)"
+    success: "border-success",
+    error: "border-error"
   };
   const statusShellClass = {
     default: "input-default",
@@ -3947,9 +3949,9 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
         {
           className: cn(
             "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text",
-            "border-(--border-secondary)",
+            "border-secondary",
             statusShellClass[status],
-            disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
+            disabled && "bg-(--background-primary-disabled) border-secondary-disabled cursor-default",
             statusBorderClass[status],
             className
           ),
@@ -4197,16 +4199,16 @@ var Toggle = React38.forwardRef((props, forwardedRef) => {
                 // Knob position
                 "justify-start peer-checked:justify-end",
                 // 1: enabled, unchecked, unhovered, unfocused
-                "border-(--border-secondary)",
+                "border-secondary",
                 // 3: enabled, unchecked, hovered, unfocused
-                "hover:border-(--border-secondary-hover)",
+                "hover:border-secondary-hover",
                 // 2: enabled, checked, unhovered, unfocused
-                "peer-checked:border-(--border-brand)",
+                "peer-checked:border-brand",
                 // 4: enabled, checked, hovered, unfocused
-                "peer-checked:hover:border-(--border-brand-hover)",
+                "peer-checked:hover:border-brand-hover",
                 "peer-checked:hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
                 // 5: enabled, unchecked, unhovered, focused
-                "peer-focus-visible:border-(--border-brand-focus)",
+                "peer-focus-visible:border-brand-focus",
                 // 6: enabled, checked, unhovered, focused
                 "peer-checked:peer-focus-visible:bg-(--background-brand-focus)",
                 "peer-checked:peer-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
@@ -4215,7 +4217,7 @@ var Toggle = React38.forwardRef((props, forwardedRef) => {
                 "peer-disabled:border-none",
                 "peer-disabled:shadow-none",
                 // 8: disabled, checked (override)
-                "peer-disabled:peer-checked:border-(--border-primary-disabled)",
+                "peer-disabled:peer-checked:border-primary-disabled",
                 // Disable hover when disabled
                 "peer-disabled:pointer-events-none",
                 // Knob on (enabled)
@@ -4274,7 +4276,7 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const baseClass = cn(
     "[&>span]:w-[unset] hover:bg-[unset]",
     !disabled && "[&:not(:focus-within):hover]:shadow-[0_0_0_var(--focus-ring-spread)_var(--background-secondary-hover)]",
-    disabled && "bg-[unset] hover:shadow-none hover:border-(--border-secondary-disabled) border-(--border-secondary-disabled)",
+    disabled && "bg-[unset] hover:shadow-none hover:border-secondary-disabled border-secondary-disabled",
     spanHeightClass
   );
   const addonTextClass = cn(
@@ -4285,9 +4287,9 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const baseAddonClass = cn(
     "flex items-center gap-2 px-2 h-full",
     // layout + padding
-    "border-(--border-secondary)",
+    "border-secondary",
     // divider color
-    disabled && "border-(--border-secondary-disabled) hover:border-(--border-secondary-disabled)",
+    disabled && "border-secondary-disabled hover:border-secondary-disabled",
     isLeading ? "border-r" : "border-l"
   );
   const iconWrapperClass = cn(
@@ -4550,7 +4552,7 @@ var Breadcrumbs = React43.forwardRef(
             DropdownMenuContent,
             {
               align: "start",
-              className: "bg-(--background-neutral) border-(--border-secondary-hover) shadow-card-md rounded-4",
+              className: "bg-(--background-neutral) border-secondary-hover shadow-card-md rounded-4",
               children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuGroup, { children: hiddenItems.map((hidden, hiddenIndex) => {
                 const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
                 if (React43.isValidElement(hidden)) {