@bubo-squared/ui-framework 0.2.24 → 0.2.26

package/dist/index.d.cts

@@ -135,7 +135,7 @@ declare const badgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled" | "active";
 type BadgeSize = "sm" | "md" | "lg" | "xl";
-interface BadgeProps extends VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;
     label: React$1.ReactNode;
     value?: React$1.ReactNode;
@@ -162,7 +162,7 @@ declare const BadgeDigit: React$1.ForwardRefExoticComponent<BadgeDigitProps & Re
 declare const badgeDotVariants: (props?: ({
     status?: "error" | "disabled" | "informal" | "warning" | "success/online" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
+interface BadgeDotProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeDotVariants> {
     className?: string;
 }
 declare const BadgeDot: React$1.FC<BadgeDotProps>;
@@ -240,8 +240,10 @@ interface ProgressProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "ch
     hint?: React$1.ReactNode;
     /** Optional accessible label for the progressbar (string-only). */
     ariaLabel?: string;
-    /** Controls whether the progress percentage label is rendered. */
-    showProgressLabel?: boolean;
+    /** If true, the progress percentage label will not be rendered. */
+    hideProgressLabel?: boolean;
+    /** If true, the bar turns success color only when value reaches 100%. */
+    successBarColorOnComplete?: boolean;
     /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: ProgressStatus;

package/dist/index.d.ts

@@ -135,7 +135,7 @@ declare const badgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled" | "active";
 type BadgeSize = "sm" | "md" | "lg" | "xl";
-interface BadgeProps extends VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;
     label: React$1.ReactNode;
     value?: React$1.ReactNode;
@@ -162,7 +162,7 @@ declare const BadgeDigit: React$1.ForwardRefExoticComponent<BadgeDigitProps & Re
 declare const badgeDotVariants: (props?: ({
     status?: "error" | "disabled" | "informal" | "warning" | "success/online" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
+interface BadgeDotProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeDotVariants> {
     className?: string;
 }
 declare const BadgeDot: React$1.FC<BadgeDotProps>;
@@ -240,8 +240,10 @@ interface ProgressProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "ch
     hint?: React$1.ReactNode;
     /** Optional accessible label for the progressbar (string-only). */
     ariaLabel?: string;
-    /** Controls whether the progress percentage label is rendered. */
-    showProgressLabel?: boolean;
+    /** If true, the progress percentage label will not be rendered. */
+    hideProgressLabel?: boolean;
+    /** If true, the bar turns success color only when value reaches 100%. */
+    successBarColorOnComplete?: boolean;
     /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: ProgressStatus;

package/dist/index.js

@@ -296,7 +296,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"
@@ -473,7 +473,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__ */ jsx8(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs4(
                 AccordionPrimitive.Trigger,
@@ -507,7 +507,7 @@ import { cva as cva6 } from "class-variance-authority";
 import { UserIcon } from "@bubo-squared/icons";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var avatarVariants = cva6(
-  "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: {
@@ -656,24 +656,24 @@ import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { cva as cva7 } from "class-variance-authority";
 import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var badgeVariants = cva7(
-  "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"
       }
@@ -728,12 +728,12 @@ var badgeDigitVariants = cva8(
       },
       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: {
@@ -1071,7 +1071,8 @@ var Progress = React15.forwardRef(
       label,
       hint,
       ariaLabel,
-      showProgressLabel = true,
+      hideProgressLabel = false,
+      successBarColorOnComplete = false,
       hideHint,
       size = "lg",
       status = "default",
@@ -1087,7 +1088,7 @@ var Progress = React15.forwardRef(
       Field,
       {
         label,
-        labelRight: showProgressLabel && label != null ? /* @__PURE__ */ jsx17("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ jsx17("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
@@ -1115,7 +1116,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}%` }
@@ -1208,7 +1210,7 @@ import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var tagVariants = cva11(
-  "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: {
@@ -1221,7 +1223,7 @@ var tagVariants = cva11(
     }
   }
 );
-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) => {
@@ -1268,7 +1270,7 @@ import { ChevronRightIcon } from "@bubo-squared/icons";
 
 // src/components/ui/dropdown-styles.ts
 import { cva as cva12 } from "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 = cva12(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
@@ -1529,15 +1531,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,
@@ -1561,7 +1563,7 @@ import * as React21 from "react";
 import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var inputShellVariants = cva13(
-  "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: {
@@ -1576,7 +1578,7 @@ var inputShellVariants = cva13(
         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: {
@@ -2735,7 +2737,7 @@ function ScrollBar({
 // src/components/Inputs/PhoneInput.tsx
 import { cva as cva18 } from "class-variance-authority";
 import { jsx as jsx33, jsxs as jsxs21 } from "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 = cva18(
   "flex w-full",
   {
@@ -2758,7 +2760,7 @@ var inputTextVariants2 = cva18("", {
       xl: "h6-title"
     },
     disabled: {
-      true: "text-primary-disabled border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-secondary-disabled"
     }
   },
   defaultVariants: {
@@ -3087,24 +3089,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__ */ jsx34(
@@ -3824,8 +3826,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",
@@ -3871,9 +3873,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
           ),
@@ -4121,16 +4123,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)]",
@@ -4139,7 +4141,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)
@@ -4198,7 +4200,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(
@@ -4209,9 +4211,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(
@@ -4474,7 +4476,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__ */ jsx45(DropdownMenuGroup, { children: hiddenItems.map((hidden, hiddenIndex) => {
                 const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
                 if (React43.isValidElement(hidden)) {