@bubo-squared/ui-framework 0.1.95 → 0.1.97

package/README.md

@@ -1,47 +1,47 @@
-## @bubo-squared/ui-framework
-
-Styled React UI components used across Bubo Squared frontend applications.
-
-This library is loosely based on shadcn/ui patterns and uses Radix UI primitives for several interactive components.
-
-### Installation
-
-```bash
-npm install @bubo-squared/ui-framework @bubo-squared/icons
-# or
-pnpm add @bubo-squared/ui-framework @bubo-squared/icons
-```
-
-### Peer dependencies
-
-- React 18 or 19
-- React DOM 18 or 19
-
-Make sure these are installed in your app:
-
-```bash
-npm install react react-dom
-# or
-pnpm add react react-dom
-```
-
-### Basic usage
-
-```tsx
-import { Button } from '@bubo-squared/ui-framework'
-
-export function Example() {
-	return <Button variant="primary">Click me</Button>
-}
-```
-
-The design system exposes multiple components (buttons, inputs, navigation, feedback, etc.) with a consistent API and styling suitable for Bubo Squared products.
-
-### Styling
-
-Components are built to work well with modern Tailwind-based setups and utility-first styling. You can extend or override styles via `className` props and your existing design tokens.
-
-### License
-
-This package is intended for use within Bubo Squared projects and related applications.
-
+## @bubo-squared/ui-framework
+
+Styled React UI components used across Bubo Squared frontend applications.
+
+This library is loosely based on shadcn/ui patterns and uses Radix UI primitives for several interactive components.
+
+### Installation
+
+```bash
+npm install @bubo-squared/ui-framework @bubo-squared/icons
+# or
+pnpm add @bubo-squared/ui-framework @bubo-squared/icons
+```
+
+### Peer dependencies
+
+- React 18 or 19
+- React DOM 18 or 19
+
+Make sure these are installed in your app:
+
+```bash
+npm install react react-dom
+# or
+pnpm add react react-dom
+```
+
+### Basic usage
+
+```tsx
+import { Button } from '@bubo-squared/ui-framework'
+
+export function Example() {
+	return <Button variant="primary">Click me</Button>
+}
+```
+
+The design system exposes multiple components (buttons, inputs, navigation, feedback, etc.) with a consistent API and styling suitable for Bubo Squared products.
+
+### Styling
+
+Components are built to work well with modern Tailwind-based setups and utility-first styling. You can extend or override styles via `className` props and your existing design tokens.
+
+### License
+
+This package is intended for use within Bubo Squared projects and related applications.
+

package/dist/index.cjs

@@ -723,7 +723,6 @@ BadgeStatus.displayName = "BadgeStatus";
 var React11 = require("react");
 var import_icons2 = require("@bubo-squared/icons");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var lineClassBase = "flex-1 bg-(--border-secondary) h-px";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -739,50 +738,74 @@ var textClassBySize = {
 var Divider = (props) => {
   const resolvedType = props.type ?? "default";
   const resolvedSize = props.size ?? "sm";
+  const resolvedOrientation = props.orientation ?? "horizontal";
+  const ariaOrientation = resolvedOrientation === "vertical" ? "vertical" : "horizontal";
   const showCenter = resolvedType !== "default";
-  const lineClass = lineClassBase;
+  const lineClass = resolvedOrientation === "vertical" ? "flex-1 bg-(--border-secondary) w-px" : "flex-1 bg-(--border-secondary) h-px";
   const wrapperClass = cn(
-    "flex w-full items-center",
+    "flex items-center",
+    resolvedOrientation === "vertical" ? "h-full flex-col" : "w-full",
     showCenter ? gapBySize[resolvedSize] : "gap-0",
     props.className
   );
   if (props.type === void 0 || props.type === "default") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       label: _label,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: wrapperClass, ...divProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+      }
+    );
   }
   if (props.type === "text") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       label,
       className: _className,
       ...divProps
     } = props;
     const textLabel = label ? label : "OR";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "span",
-        {
-          className: cn(
-            textClassBySize[resolvedSize],
-            "text-(--color-secondary)"
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              className: cn(
+                textClassBySize[resolvedSize],
+                "text-(--color-secondary)"
+              ),
+              children: textLabel
+            }
           ),
-          children: textLabel
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButton") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       icon,
       iconButtonVariant,
@@ -791,38 +814,65 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        IconButton,
-        {
-          variant: iconButtonVariant ?? "secondary",
-          size: resolvedSize,
-          "aria-label": ariaLabel ?? "More options",
-          icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
-          onClick: onIconClick
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            IconButton,
+            {
+              variant: iconButtonVariant ?? "secondary",
+              size: resolvedSize,
+              "aria-label": ariaLabel ?? "More options",
+              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons2.TargetIcon, {}),
+              onClick: onIconClick
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButtonGroup") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       iconGroupItems,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconButtonGroup, { items: iconGroupItems, size: resolvedSize }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            IconButtonGroup,
+            {
+              className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+              items: iconGroupItems,
+              size: resolvedSize
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "button") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       buttonLabel,
       onButtonClick,
@@ -830,19 +880,28 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Button,
-        {
-          variant: buttonVariant ?? "secondary",
-          size: resolvedSize,
-          onClick: onButtonClick,
-          children: buttonLabel
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Button,
+            {
+              variant: buttonVariant ?? "secondary",
+              size: resolvedSize,
+              onClick: onButtonClick,
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: lineClass })
+        ]
+      }
+    );
   }
   return null;
 };
@@ -1070,8 +1129,10 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
   {
     variants: {
       size: {
-        large: "h-11",
-        "extra-large": "h-14"
+        sm: "h-8 py-1",
+        md: "h-10 py-2",
+        lg: "h-11",
+        xl: "h-14"
       },
       status: {
         default: "border-(--border-secondary)",
@@ -1080,7 +1141,7 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1088,8 +1149,10 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
 var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     hasValue: {
       false: "text-(--color-secondary)",
@@ -1100,15 +1163,17 @@ var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate"
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     hasValue: false
   }
 });
 var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex items-center justify-center shrink-0", {
   variants: {
     size: {
-      large: "w-5 h-5",
-      "extra-large": "w-6 h-6"
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-5 h-5",
+      xl: "w-6 h-6"
     },
     disabled: {
       false: "text-(--icon-primary)",
@@ -1116,7 +1181,7 @@ var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex item
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1127,7 +1192,7 @@ var Dropdown = (props) => {
     hint = "This is a hint text to help user.",
     hideHint = false,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled,
     options,
@@ -1356,8 +1421,10 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
   {
     variants: {
       size: {
-        large: "gap-2 px-2 py-2 h-11",
-        "extra-large": "gap-2 px-[10px] py-2 h-14"
+        sm: "gap-2 px-2 py-1 h-8",
+        md: "gap-2 px-2 py-2 h-10",
+        lg: "gap-2 px-2 py-2 h-11",
+        xl: "gap-2 px-[10px] py-2 h-14"
       },
       status: {
         default: "input-default",
@@ -1369,7 +1436,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1397,8 +1464,10 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled",
@@ -1406,7 +1475,7 @@ var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate"
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1415,15 +1484,17 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1432,15 +1503,17 @@ var actionButtonVariants = (0, import_class_variance_authority14.cva)(
   {
     variants: {
       size: {
-        large: "paragraph-s",
-        "extra-large": "paragraph-m"
+        sm: "paragraph-s",
+        md: "paragraph-s",
+        lg: "paragraph-s",
+        xl: "paragraph-m"
       },
       disabled: {
         true: "cursor-default text-primary-disabled hover:text-primary-disabled"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1450,7 +1523,7 @@ var PasswordInput = (props) => {
     hint,
     hideHint,
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    size = "large",
+    size = "lg",
     status = "default",
     variant = "icons",
     disabled,
@@ -1830,8 +1903,10 @@ var sizeBase = (0, import_class_variance_authority16.cva)(
   {
     variants: {
       size: {
-        large: "h-11 [&_button]:gap-2",
-        "extra-large": "h-14 [&_button]:gap-3"
+        sm: "h-8 [&_button]:gap-2",
+        md: "h-10 [&_button]:gap-2",
+        lg: "h-11 [&_button]:gap-2",
+        xl: "h-14 [&_button]:gap-3"
       }
     }
   }
@@ -1839,15 +1914,17 @@ var sizeBase = (0, import_class_variance_authority16.cva)(
 var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var wrapperStatusClass = {
@@ -1865,7 +1942,7 @@ var PhoneInput = React26.forwardRef(
       hint,
       hideHint,
       placeholder,
-      size = "large",
+      size = "lg",
       disabled = false,
       status = "default",
       ...rest
@@ -2194,32 +2271,36 @@ var import_jsx_runtime30 = require("react/jsx-runtime");
 var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants2 = (0, import_class_variance_authority17.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
-      large: "size-5 [&>svg]:size-5",
-      "extra-large": "size-6 [&>svg]:size-6"
+      sm: "size-4 [&>svg]:size-4",
+      md: "size-5 [&>svg]:size-5",
+      lg: "size-5 [&>svg]:size-5",
+      xl: "size-6 [&>svg]:size-6"
     },
     disabled: {
       true: "text-(--icon-primary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var SearchInput = (props) => {
   const {
     placeholder = "Search...",
-    size = "large",
+    size = "lg",
     disabled,
     className,
     leadingIcon,
@@ -2822,12 +2903,14 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 var inputTextVariants2 = (0, import_class_variance_authority18.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
@@ -2835,15 +2918,17 @@ var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -2853,7 +2938,7 @@ var TextInput = (props) => {
     hint,
     hideHint,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled = false,
     className,
@@ -3042,21 +3127,22 @@ var WebsiteInput = (props) => {
     hierarchy = "leading",
     protocolLabel = "http://",
     icon,
-    size = "large",
+    size = "lg",
     disabled,
     className,
     ...rest
   } = props;
   const isLeading = hierarchy === "leading";
+  const spanHeightClass = size === "xl" ? "[&>span]:h-14!" : size === "lg" ? "[&>span]:h-11!" : size === "md" ? "[&>span]:h-10!" : "[&>span]:h-8!";
   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)",
-    size === "extra-large" ? "[&>span]:h-14!" : "[&>span]:h-11!"
+    spanHeightClass
   );
   const addonTextClass = cn(
     "flex mb-0!",
-    size === "extra-large" ? "paragraph-m" : "paragraph-s",
+    size === "xl" ? "paragraph-m" : size === "sm" ? "paragraph-m" : "paragraph-s",
     disabled ? "text-primary-disabled" : "text-primary group-hover:text-(--color-primary-hover) group-focus-within:text-(--color-primary-focus)"
   );
   const baseAddonClass = cn(
@@ -3069,7 +3155,7 @@ var WebsiteInput = (props) => {
   );
   const iconWrapperClass = cn(
     "flex items-center justify-center shrink-0",
-    size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>svg]:w-5 [&>svg]:h-5",
+    size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
   const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [