@bubo-squared/ui-framework 0.2.30 → 0.2.32

package/dist/index.cjs

@@ -123,7 +123,7 @@ function spawnRipple(target, clientX, clientY, options = {}) {
 }
 
 // src/components/ui/button.tsx
-var React = require("react");
+var React = __toESM(require("react"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -154,17 +154,12 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
+var Button = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot.Slot : "button";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Comp,
     {
+      ref,
       "data-slot": "button",
       "data-variant": variant,
       "data-size": size,
@@ -172,7 +167,8 @@ function Button({
       ...props
     }
   );
-}
+});
+Button.displayName = "Button";
 
 // src/components/Buttons/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -789,26 +785,25 @@ var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority8 = require("class-variance-authority");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority8.cva)(
-  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
+  "inline-flex items-center justify-center rounded-full leading-none whitespace-nowrap gap-1 py-0 font-normal",
   {
     variants: {
       size: {
-        sm: "px-1.5 paragraph-sm",
-        md: "px-2 paragraph-md",
-        lg: "px-2 subtitle",
-        xl: "px-2.5 h6-title"
+        sm: "px-2.5 paragraph-sm",
+        md: "px-3 paragraph-md",
+        lg: "px-3.5 subtitle",
+        xl: "px-4 h6-title"
       },
       variant: {
-        primary: "bg-(--background-secondary) text-primary",
-        secondary: "bg-(--background-primary) border-1 border-primary text-primary",
+        primary: "bg-(--color-primary) text-(--color-primary-inverse)",
+        secondary: "bg-(--background-secondary) text-primary",
+        outline: "bg-(--background-primary) text-primary shadow-[inset_0_0_0_1px_var(--border-secondary)]",
         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-primary-disabled text-primary-disabled",
-        "double-default": "bg-(--background-secondary) text-primary",
-        "double-current": "bg-color-ac-lilac text-badge-black"
+        error: "bg-(--color-s-error-500)/15 text-error",
+        disabled: "bg-(--background-primary-disabled) shadow-[inset_0_0_0_1px_var(--color-primary-disabled)] text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -822,25 +817,20 @@ var Badge = React10.forwardRef(
     const {
       asChild = false,
       label,
-      value,
       size = "sm",
       variant = "primary",
       className,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot4.Slot : "div";
-    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
+    const Comp = asChild ? import_react_slot4.Slot : "span";
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Comp,
       {
+        "data-slot": "badge",
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-medium", children: value })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: label })
+        children: label
       }
     );
   }
@@ -1337,21 +1327,75 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority12.cva)(
-  "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 ",
+  "inline-flex flex-row items-center justify-center gap-1.5 overflow-hidden border border-secondary bg-tag focus:border-brand focus-ring-primary ",
   {
     variants: {
       size: {
-        sm: "py-0.5",
-        md: "py-1.5"
+        sm: "h-6",
+        md: "h-7",
+        lg: "h-8",
+        xl: "h-9"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-8"
       }
     },
     defaultVariants: {
-      size: "sm"
+      size: "sm",
+      rounded: false
     }
   }
 );
-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 calculateXPadding = (size, hasTrailing, hasLeading) => {
+  if (!hasTrailing && !hasLeading) {
+    return size === "sm" ? "px-2.5" : "px-3";
+  } else if (hasTrailing && !hasLeading) {
+    return size === "sm" ? "pl-2.5 pr-1.25" : "pl-3 pr-1.5";
+  } else if (!hasTrailing && hasLeading) {
+    return size === "sm" ? "pl-1.25 pr-2.5" : "pl-1.5 pr-3";
+  } else {
+    return size === "sm" ? "px-1.25" : "px-1.5";
+  }
+};
+var disabledTag = "pointer-events-none border-secondary-disabled bg-tag-disabled text-primary-disabled";
+var calculateIconClasses = (size) => {
+  switch (size) {
+    case "sm":
+      return "flex items-center justify-center size-4 [&>*]:size-4 shrink-0";
+    case "md":
+      return "flex items-center justify-center size-5 [&>*]:size-5 shrink-0";
+    case "lg":
+      return "flex items-center justify-center size-5 [&>*]:size-5 shrink-0";
+    case "xl":
+      return "flex items-center justify-center size-6 [&>*]:size-6 shrink-0";
+  }
+};
+var keyTextClassBySize = {
+  sm: "paragraph-sm cursor-default",
+  md: "paragraph-md cursor-default",
+  lg: "paragraph-lg cursor-default",
+  xl: "subtitle cursor-default"
+};
+var valueTextClassBySize = {
+  sm: "paragraph-sm-medium cursor-default",
+  md: "paragraph-md-medium cursor-default",
+  lg: "paragraph-lg-medium cursor-default",
+  xl: "subtitle-medium cursor-default"
+};
+var labelTextClassBySize = {
+  sm: "paragraph-sm cursor-default",
+  md: "paragraph-md cursor-default",
+  lg: "paragraph-lg cursor-default",
+  xl: "subtitle cursor-default"
+};
+var getTextColor = (type, disabled) => {
+  if (disabled) return "";
+  else if (type === "key") return "text-secondary";
+  else if (type === "value") return "text-primary";
+  else if (type === "label") return "text-primary";
+  return "text-primary";
+};
 var Tag = React18.forwardRef(
   (props, ref) => {
     const {
@@ -1370,17 +1414,18 @@ var Tag = React18.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Comp,
       {
-        className: cn(tagVariants({ size }), disabled && disabledTag, className),
+        className: cn(tagVariants({ size, rounded: props.rounded }), calculateXPadding(size, !!trailing, !!leading), disabled && disabledTag, className),
+        "data-slot": "tag",
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: iconClasses, children: leading }),
-          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: iconClasses, children: trailing })
+          leading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(disabled ? "text-primary-disabled" : "text-primary", calculateIconClasses(size)), children: leading }),
+          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(keyTextClassBySize[size], getTextColor("key", disabled)), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(keyTextClassBySize[size], getTextColor("key", disabled)), children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(valueTextClassBySize[size], getTextColor("value", disabled)), children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(labelTextClassBySize[size], getTextColor("label", disabled)), children: label }),
+          trailing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(disabled ? "text-primary-disabled" : "text-primary", calculateIconClasses(size)), children: trailing })
         ]
       }
     );
@@ -2599,14 +2644,6 @@ var createLucideIcon = (iconName, iconNode) => {
 var __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 var ChevronRight = createLucideIcon("chevron-right", __iconNode);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.js
-var __iconNode2 = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
-  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
-];
-var Ellipsis = createLucideIcon("ellipsis", __iconNode2);
-
 // src/components/ui/dialog.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 
@@ -4450,7 +4487,7 @@ var React43 = __toESM(require("react"), 1);
 var React42 = require("react");
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var breadcrumbItemClasses = "h6-title inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
+var breadcrumbItemClasses = "inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
 var disabledItemClasses = "text-primary-disabled cursor-default pointer-events-none";
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -4474,7 +4511,6 @@ function BreadcrumbItem({ className, disabled, ...props }) {
     {
       "data-slot": "breadcrumb-item",
       className: cn(breadcrumbItemClasses, disabled && disabledItemClasses, className),
-      style: { marginBottom: "7px" },
       ...props
     }
   );
@@ -4503,36 +4539,16 @@ function BreadcrumbSeparator({
       "data-slot": "breadcrumb-separator",
       role: "presentation",
       "aria-hidden": "true",
-      className: cn("[&>svg]:size-6 [&>svg]:text-(--color-secondary)", className),
+      className: cn("text-secondary", className),
       ...props,
       children: children ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronRight, {})
     }
   );
 }
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    "span",
-    {
-      "data-slot": "breadcrumb-ellipsis",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn("flex size-9 items-center justify-center", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sr-only", children: "More" })
-      ]
-    }
-  );
-}
 
 // src/components/Navigation/Breadcrumbs.tsx
+var import_icons14 = require("@bubo-squared/icons");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var breadcrumbSeparatorVariants = "size-5 relative bottom-1 [&>svg]:text-secondary group-disabled:text-secondary";
-var breadcrumbItemBase = "h6-title text-secondary hover:text-primary-hover";
 var Breadcrumbs = React43.forwardRef(
   (props, ref) => {
     const {
@@ -4543,40 +4559,53 @@ var Breadcrumbs = React43.forwardRef(
       breadcrumbItemClassName,
       breadcrumbPageClassName,
       separatorClassName,
+      breadcrumbListClassName,
+      ellipsisItemClassName,
+      ellipsisTriggerClassName,
+      ellipsisContentClassName,
+      ellipsisGroupClassName,
+      ellipsisMenuItemClassName,
+      ellipsisAriaLabel = "Open breadcrumb menu",
       ...rest
     } = props;
     const items = React43.Children.toArray(children).filter(Boolean);
     const shouldCollapse = Boolean(ellipsis) && items.length >= 5;
     const hiddenItems = shouldCollapse ? items.slice(1, -2) : [];
     const displayItems = shouldCollapse ? [items[0], "__ELLIPSIS__", items[items.length - 2], items[items.length - 1]] : items;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbList, { children: displayItems.map((child, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Breadcrumb, { ref, className: cn("mb-1.75", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbList, { className: breadcrumbListClassName, children: displayItems.map((child, index) => {
       const isEllipsis = child === "__ELLIPSIS__";
       const key = isEllipsis ? "__ellipsis" : React43.isValidElement(child) && child.key != null ? String(child.key) : String(index);
       const isLast = index === displayItems.length - 1;
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(React43.Fragment, { children: [
-        isEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
+        isEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemClassName, ellipsisItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            "button",
+            Button,
             {
-              type: "button",
-              className: "inline-flex size-8 items-center justify-center rounded-4 hover:bg-(--background-secondary) focus-ring-primary text-secondary",
-              "aria-label": "Open breadcrumb menu",
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbEllipsis, {})
+              variant: "ghost",
+              className: cn(
+                "inline-flex text-secondary hover:text-primary &[aria-expanded=true]:text-primary-focus items-center justify-center",
+                ellipsisTriggerClassName
+              ),
+              "aria-label": ellipsisAriaLabel,
+              "data-slot": "breadcrumb-ellipsis",
+              role: "presentation",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons14.MoreHorizFullIcon, {})
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             DropdownMenuContent,
             {
               align: "start",
-              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) => {
+              className: ellipsisContentClassName,
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuGroup, { className: ellipsisGroupClassName, children: hiddenItems.map((hidden, hiddenIndex) => {
                 const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
                 if (React43.isValidElement(hidden)) {
                   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     DropdownMenuItem,
                     {
                       asChild: true,
-                      className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                      className: ellipsisMenuItemClassName,
                       children: hidden
                     },
                     hiddenKey
@@ -4585,7 +4614,7 @@ var Breadcrumbs = React43.forwardRef(
                 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                   DropdownMenuItem,
                   {
-                    className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                    className: ellipsisMenuItemClassName,
                     children: String(hidden)
                   },
                   hiddenKey
@@ -4593,14 +4622,8 @@ var Breadcrumbs = React43.forwardRef(
               }) })
             }
           )
-        ] }) }) : isLast ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          BreadcrumbPage,
-          {
-            className: cn("h6-title-medium cursor-pointer", breadcrumbPageClassName),
-            children: child
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: child }),
-        !isLast && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, separatorClassName), children: separator })
+        ] }) }) : isLast ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: breadcrumbItemClassName, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbPage, { className: breadcrumbPageClassName, children: child }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: breadcrumbItemClassName, children: child }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { className: separatorClassName, children: separator })
       ] }, key);
     }) }) });
   }
@@ -4763,7 +4786,6 @@ lucide-react/dist/esm/defaultAttributes.js:
 lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/chevron-right.js:
-lucide-react/dist/esm/icons/ellipsis.js:
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.555.0 - ISC