beacon-ui 3.5.4 → 3.5.5

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.5.5] - 2026-01-16
+
+### Added
+- New Divider component for visually separating content
+  - Supports horizontal and vertical orientations
+  - Optional slot for icons or custom content with configurable positions (default, center, left, right, top, bottom)
+  - Custom color and width props for flexible styling
+  - Slot automatically shows/hides based on slotPosition selection (default = no slot, others = slot shown)
+
+### Fixed
+- Divider component default state now properly displays when no slot is present
+- Vertical dividers in preview container no longer overflow outside boundaries
+- Divider anatomy diagram no longer shows primary color background
+
 ## [3.5.4] - 2026-01-15
 
 ### Changed

package/dist/components/Divider.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from "react";
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerSlotPosition = "default" | "center" | "left" | "right" | "top" | "bottom";
+export interface DividerProps extends Omit<ComponentPropsWithRef<"div">, "slot"> {
+    orientation?: DividerOrientation;
+    slot?: boolean;
+    slotPosition?: DividerSlotPosition;
+    slotContent?: React.ReactNode;
+    color?: string;
+    width?: string | "100%";
+}
+export declare function Divider({ orientation, slot, slotPosition, slotContent, color, width, className, style, ref, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9E,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,IAAY,EACZ,YAAwB,EACxB,WAAW,EACX,KAAK,EACL,KAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,2CA6Jd"}

package/dist/components/Divider.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useThemeSafe } from "../providers/ThemeProvider";
+import { ArrowDownFallSlotIcon } from "../icons";
+export function Divider({ orientation = "horizontal", slot = false, slotPosition = "default", slotContent, color, width = "100%", className, style, ref, ...rest }) {
+    useThemeSafe();
+    const dividerStyles = useMemo(() => {
+        const baseStyles = {
+            display: "flex",
+            alignItems: "center",
+        };
+        if (orientation === "horizontal") {
+            baseStyles.flexDirection = "row";
+            baseStyles.width = width;
+            baseStyles.gap = slot ? "var(--spacing-100)" : "0";
+        }
+        else {
+            baseStyles.flexDirection = "column";
+            baseStyles.height = width; // For vertical, width prop controls height
+            baseStyles.gap = slot ? "var(--spacing-100)" : "0";
+        }
+        return { ...baseStyles, ...style };
+    }, [orientation, slot, width, style]);
+    const lineStyles = useMemo(() => {
+        const baseStyles = {
+            backgroundColor: color || "var(--border-neutral-secondary)",
+        };
+        if (orientation === "horizontal") {
+            baseStyles.height = "1px";
+            baseStyles.minHeight = "1px";
+            baseStyles.width = "100%";
+        }
+        else {
+            baseStyles.width = "1px";
+            baseStyles.minWidth = "1px";
+            baseStyles.height = "100%";
+        }
+        return baseStyles;
+    }, [orientation, color]);
+    const slotStyles = useMemo(() => {
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "24px",
+            height: "24px",
+            minWidth: "24px",
+            minHeight: "24px",
+            flexShrink: 0,
+            backgroundColor: "var(--bg-warning-tonal)",
+            border: "var(--border-width-25) dashed var(--border-warning)",
+            borderRadius: "var(--corner-radius-100)",
+            padding: "var(--spacing-200)",
+        };
+    }, []);
+    const iconContainerStyles = useMemo(() => {
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "16px",
+            height: "16px",
+            flexShrink: 0,
+            color: "var(--fg-warning-on-tonal)",
+        };
+    }, []);
+    const renderSlot = () => {
+        if (!slot)
+            return null;
+        const defaultSlotContent = (_jsx("div", { style: iconContainerStyles, children: _jsx(ArrowDownFallSlotIcon, { size: 16 }) }));
+        return (_jsx("div", { style: slotStyles, children: slotContent || defaultSlotContent }));
+    };
+    const renderDivider = () => {
+        if (!slot) {
+            return _jsx("div", { style: lineStyles });
+        }
+        // With slot, need to handle different positions
+        const flexLineStyles = {
+            ...lineStyles,
+            flexGrow: 1,
+            flexShrink: 0,
+            flexBasis: 0,
+        };
+        if (orientation === "horizontal") {
+            if (slotPosition === "left") {
+                return (_jsxs(_Fragment, { children: [renderSlot(), _jsx("div", { style: flexLineStyles })] }));
+            }
+            else if (slotPosition === "right") {
+                return (_jsxs(_Fragment, { children: [_jsx("div", { style: flexLineStyles }), renderSlot()] }));
+            }
+            else {
+                // center or default
+                return (_jsxs(_Fragment, { children: [_jsx("div", { style: flexLineStyles }), renderSlot(), _jsx("div", { style: flexLineStyles })] }));
+            }
+        }
+        else {
+            // vertical
+            if (slotPosition === "top") {
+                return (_jsxs(_Fragment, { children: [renderSlot(), _jsx("div", { style: flexLineStyles })] }));
+            }
+            else if (slotPosition === "bottom") {
+                return (_jsxs(_Fragment, { children: [_jsx("div", { style: flexLineStyles }), renderSlot()] }));
+            }
+            else {
+                // center or default
+                return (_jsxs(_Fragment, { children: [_jsx("div", { style: flexLineStyles }), renderSlot(), _jsx("div", { style: flexLineStyles })] }));
+            }
+        }
+    };
+    return (_jsx("div", { ref: ref, className: className, style: dividerStyles, ...rest, children: renderDivider() }));
+}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Input } from "./components/Input";
 export { Select } from "./components/Select";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
+export { Divider } from "./components/Divider";
 export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
 export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
@@ -23,6 +24,7 @@ export type { InputProps, InputSize, InputStatus } from "./components/Input";
 export type { SelectProps, SelectSize, SelectStatus, SelectOption } from "./components/Select";
 export type { AvatarProps, AvatarSize, AvatarType, AvatarColor, AvatarVariant } from "./components/Avatar";
 export type { ChipProps, ChipSize, ChipColor } from "./components/Chip";
+export type { DividerProps, DividerOrientation, DividerSlotPosition } from "./components/Divider";
 export type { MenuProps } from "./components/Menu";
 export type { RadioButtonProps, RadioButtonStatus } from "./components/RadioButton";
 export type { SliderProps, SliderStatus } from "./components/Slider";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGlG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAClG,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGlG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -8,6 +8,7 @@ export { Input } from "./components/Input";
 export { Select } from "./components/Select";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
+export { Divider } from "./components/Divider";
 export { Menu } from "./components/Menu";
 export { MenuItem } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-ui",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",