@bubo-squared/ui-framework 0.2.23 → 0.2.25

package/dist/index.d.cts

@@ -11,7 +11,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "destructive-outline" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -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>;
@@ -540,10 +540,13 @@ type SliderBaseProps = {
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
-     * Receives the current slider value and should return a display string.
+      * Receives the current slider value and should return display content.
      * If provided, it takes precedence over `showPercentage`.
+      *
+      * Accessibility note: when the formatter returns non-text content,
+      * `aria-valuetext` falls back to the default numeric/percentage string.
      */
-    tooltipFormatter?: (value: number) => string;
+    tooltipFormatter?: (value: number) => React$1.ReactNode;
     /**
      * When true (default), values are rendered as percentages (e.g. "30%").
      * When false, raw numbers are shown instead.

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "destructive-outline" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -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>;
@@ -540,10 +540,13 @@ type SliderBaseProps = {
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
-     * Receives the current slider value and should return a display string.
+      * Receives the current slider value and should return display content.
      * If provided, it takes precedence over `showPercentage`.
+      *
+      * Accessibility note: when the formatter returns non-text content,
+      * `aria-valuetext` falls back to the default numeric/percentage string.
      */
-    tooltipFormatter?: (value: number) => string;
+    tooltipFormatter?: (value: number) => React$1.ReactNode;
     /**
      * When true (default), values are rendered as percentages (e.g. "30%").
      * When false, raw numbers are shown instead.

package/dist/index.js

@@ -66,6 +66,10 @@ var buttonVariants = cva(
         destructive: [
           "btn-destructive",
           "focus-ring-error"
+        ],
+        "destructive-outline": [
+          "btn-destructive-outline",
+          "focus-ring-error-outline"
         ]
       },
       size: {
@@ -292,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"
@@ -469,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,
@@ -503,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: {
@@ -652,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"
       }
@@ -724,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: {
@@ -1204,7 +1208,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: {
@@ -1217,7 +1221,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) => {
@@ -1264,7 +1268,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)",
@@ -1525,15 +1529,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,
@@ -1557,7 +1561,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: {
@@ -1572,7 +1576,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: {
@@ -1956,7 +1960,7 @@ import { cva as cva15 } from "class-variance-authority";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bubo-squared/icons";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var selectTriggerVariants = cva15(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-colors cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -2731,7 +2735,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",
   {
@@ -2754,7 +2758,7 @@ var inputTextVariants2 = cva18("", {
       xl: "h6-title"
     },
     disabled: {
-      true: "text-primary-disabled border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-secondary-disabled"
     }
   },
   defaultVariants: {
@@ -2796,7 +2800,7 @@ var countryOptionVariants = cva18(
   }
 );
 var PhoneInput = React31.forwardRef(
-  (props, ref) => {
+  (props, forwardedRef) => {
     const {
       className,
       onChange,
@@ -2810,6 +2814,11 @@ var PhoneInput = React31.forwardRef(
       status = "default",
       ...rest
     } = props;
+    const wrapperRef = React31.useRef(null);
+    const focusNumberInput = React31.useCallback(() => {
+      const el = wrapperRef.current?.querySelector("input");
+      el?.focus();
+    }, []);
     return /* @__PURE__ */ jsx33(
       Field,
       {
@@ -2819,16 +2828,29 @@ var PhoneInput = React31.forwardRef(
         status,
         disabled,
         className,
-        children: /* @__PURE__ */ jsx33("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx33("div", { ref: wrapperRef, className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ jsx33(
           RPNInput.default,
           {
-            ref,
+            ref: forwardedRef,
             className: cn(
               sizeBase({ size }),
               inputTextVariants2({ size, disabled })
             ),
             flagComponent: FlagComponent,
-            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ jsx33(CountrySelect, { ...countrySelectProps, size }),
+            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ jsx33(
+              CountrySelect,
+              {
+                ...countrySelectProps,
+                size,
+                onAfterSelect: () => {
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      focusNumberInput();
+                    });
+                  });
+                }
+              }
+            ),
             inputComponent: InputComponent,
             smartCaret: false,
             value: value || void 0,
@@ -2863,7 +2885,8 @@ var CountrySelect = ({
   value: selectedCountry,
   options: countryList,
   onChange,
-  size = "md"
+  size = "md",
+  onAfterSelect
 }) => {
   const scrollAreaRef = React31.useRef(null);
   const [searchValue, setSearchValue] = React31.useState("");
@@ -2947,7 +2970,10 @@ var CountrySelect = ({
                       countryName: label,
                       selectedCountry,
                       onChange,
-                      onSelectComplete: () => setIsOpen(false),
+                      onSelectComplete: () => {
+                        setIsOpen(false);
+                        onAfterSelect?.();
+                      },
                       size
                     },
                     value
@@ -3061,24 +3087,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(
@@ -3549,15 +3575,27 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
     }
     return rounded.toFixed(2);
   };
-  const formatDisplayValue = (val) => {
+  const formatFallbackText = (val) => {
     const value2 = val ?? min;
-    if (tooltipFormatter) return tooltipFormatter(value2);
     if (showPercentage) {
       const percent = valueToPercent(value2);
       return `${formatNumber(percent)}%`;
     }
     return formatNumber(value2);
   };
+  const formatDisplayNode = (val) => {
+    const value2 = val ?? min;
+    if (tooltipFormatter) return tooltipFormatter(value2);
+    return formatFallbackText(value2);
+  };
+  const formatAriaValueText = (val) => {
+    const fallback = formatFallbackText(val);
+    if (!tooltipFormatter) return fallback;
+    const node = tooltipFormatter(val ?? min);
+    if (typeof node === "string") return node;
+    if (typeof node === "number") return String(node);
+    return fallback;
+  };
   const formatNumericLabel = () => {
     if (isRange && secondary !== void 0) {
       if (!tooltipFormatter && showPercentage && display === "numeric") {
@@ -3565,14 +3603,18 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
         const second = formatNumber(valueToPercent(secondary));
         return `${first} - ${second}`;
       }
-      return `${formatDisplayValue(primary)} - ${formatDisplayValue(secondary)}`;
+      return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+        formatDisplayNode(primary),
+        " - ",
+        formatDisplayNode(secondary)
+      ] });
     }
-    return formatDisplayValue(primary);
+    return formatDisplayNode(primary);
   };
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderHandle = (index, percent, ariaValueText) => {
+  const renderHandle = (index, percent, tooltipContent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
     const isDragging = draggingThumbIndex === index;
     const isTooltipVisible = showTooltip && (hoveredThumbIndex === index || draggingThumbIndex === index || focusedThumbIndex === index);
@@ -3625,7 +3667,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
     return /* @__PURE__ */ jsx37(
       Tooltip,
       {
-        title: ariaValueText,
+        title: tooltipContent,
         placement: tooltipPlacement === "top" ? "top" : "bottom",
         offset: 8,
         open: isTooltipVisible,
@@ -3687,8 +3729,18 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
                     }
                   }
                 ),
-                renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-                isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+                renderHandle(
+                  0,
+                  primaryPercent,
+                  formatDisplayNode(primary),
+                  formatAriaValueText(primary)
+                ),
+                isRange && secondary !== void 0 && renderHandle(
+                  1,
+                  secondaryPercent,
+                  formatDisplayNode(secondary),
+                  formatAriaValueText(secondary)
+                )
               ]
             }
           ) }),
@@ -3772,8 +3824,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",
@@ -3819,9 +3871,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
           ),
@@ -4069,16 +4121,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)]",
@@ -4087,7 +4139,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)
@@ -4146,7 +4198,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(
@@ -4157,9 +4209,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(
@@ -4422,7 +4474,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)) {