@bubo-squared/ui-framework 0.1.95 → 0.1.96

package/dist/index.d.cts

@@ -146,9 +146,12 @@ interface BadgeStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const BadgeStatus: React$1.ForwardRefExoticComponent<BadgeStatusProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type DividerType = "default" | "text" | "iconButton" | "iconButtonGroup" | "button";
+type DividerOrientation = "horizontal" | "vertical";
 type SimpleDividerType = Exclude<DividerType, "button" | "iconButton" | "iconButtonGroup">;
 interface BaseDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type?: SimpleDividerType;
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + center element sizing). */
     size?: DividerSize;
     /** Label shown for text variant (e.g. "OR"). */
@@ -159,6 +162,8 @@ type IconButtonVariant = ButtonProps["variant"];
 type DividerSize = IconButtonGroupProps["size"];
 interface IconLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "iconButton";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + icon button size). */
     size?: DividerSize;
     /** Icon rendered between the lines. */
@@ -172,6 +177,8 @@ interface IconLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "button";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + button size). */
     size?: DividerSize;
     /** Text inside the button between the lines. */
@@ -183,6 +190,8 @@ interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement>
 }
 interface IconGroupLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "iconButtonGroup";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + icon group size). */
     size?: DividerSize;
     /** Items rendered as a segmented icon group between the lines. */

package/dist/index.d.ts

@@ -146,9 +146,12 @@ interface BadgeStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const BadgeStatus: React$1.ForwardRefExoticComponent<BadgeStatusProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type DividerType = "default" | "text" | "iconButton" | "iconButtonGroup" | "button";
+type DividerOrientation = "horizontal" | "vertical";
 type SimpleDividerType = Exclude<DividerType, "button" | "iconButton" | "iconButtonGroup">;
 interface BaseDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type?: SimpleDividerType;
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + center element sizing). */
     size?: DividerSize;
     /** Label shown for text variant (e.g. "OR"). */
@@ -159,6 +162,8 @@ type IconButtonVariant = ButtonProps["variant"];
 type DividerSize = IconButtonGroupProps["size"];
 interface IconLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "iconButton";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + icon button size). */
     size?: DividerSize;
     /** Icon rendered between the lines. */
@@ -172,6 +177,8 @@ interface IconLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "button";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + button size). */
     size?: DividerSize;
     /** Text inside the button between the lines. */
@@ -183,6 +190,8 @@ interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement>
 }
 interface IconGroupLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     type: "iconButtonGroup";
+    /** Orientation of the divider lines. Defaults to "horizontal". */
+    orientation?: DividerOrientation;
     /** Size variant for the divider (affects line thickness + icon group size). */
     size?: DividerSize;
     /** Items rendered as a segmented icon group between the lines. */

package/dist/index.js

@@ -656,7 +656,6 @@ BadgeStatus.displayName = "BadgeStatus";
 import "react";
 import { TargetIcon } from "@bubo-squared/icons";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var lineClassBase = "flex-1 bg-(--border-secondary) h-px";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -672,50 +671,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__ */ jsx13("div", { className: wrapperClass, ...divProps, children: /* @__PURE__ */ jsx13("div", { className: lineClass }) });
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: /* @__PURE__ */ jsx13("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__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        "span",
-        {
-          className: cn(
-            textClassBySize[resolvedSize],
-            "text-(--color-secondary)"
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: cn(
+                textClassBySize[resolvedSize],
+                "text-(--color-secondary)"
+              ),
+              children: textLabel
+            }
           ),
-          children: textLabel
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButton") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       icon,
       iconButtonVariant,
@@ -724,38 +747,65 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        IconButton,
-        {
-          variant: iconButtonVariant ?? "secondary",
-          size: resolvedSize,
-          "aria-label": ariaLabel ?? "More options",
-          icon: icon ?? /* @__PURE__ */ jsx13(TargetIcon, {}),
-          onClick: onIconClick
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            IconButton,
+            {
+              variant: iconButtonVariant ?? "secondary",
+              size: resolvedSize,
+              "aria-label": ariaLabel ?? "More options",
+              icon: icon ?? /* @__PURE__ */ jsx13(TargetIcon, {}),
+              onClick: onIconClick
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "iconButtonGroup") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       iconGroupItems,
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(IconButtonGroup, { items: iconGroupItems, size: resolvedSize }),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            IconButtonGroup,
+            {
+              className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+              items: iconGroupItems,
+              size: resolvedSize
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   if (props.type === "button") {
     const {
       type: _type,
+      orientation: _orientation,
       size: _size,
       buttonLabel,
       onButtonClick,
@@ -763,19 +813,28 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs7("div", { className: wrapperClass, ...divProps, children: [
-      /* @__PURE__ */ jsx13("div", { className: lineClass }),
-      /* @__PURE__ */ jsx13(
-        Button,
-        {
-          variant: buttonVariant ?? "secondary",
-          size: resolvedSize,
-          onClick: onButtonClick,
-          children: buttonLabel
-        }
-      ),
-      /* @__PURE__ */ jsx13("div", { className: lineClass })
-    ] });
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: wrapperClass,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
+        ...divProps,
+        children: [
+          /* @__PURE__ */ jsx13("div", { className: lineClass }),
+          /* @__PURE__ */ jsx13(
+            Button,
+            {
+              variant: buttonVariant ?? "secondary",
+              size: resolvedSize,
+              onClick: onButtonClick,
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: lineClass })
+        ]
+      }
+    );
   }
   return null;
 };