@usefragments/ui 1.5.4 → 1.7.0

package/dist/components/ScrollArea/index.js

@@ -2,63 +2,87 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./ScrollArea.module.scss.js";
+import { readScrollAxes, detectRtlScrollModel } from "./scroll-state.js";
 function ScrollAreaRoot({
   children,
   orientation = "vertical",
   scrollbarVisibility = "auto",
   showFades = false,
   className,
+  dir,
   ...htmlProps
 }) {
   const viewportRef = React.useRef(null);
-  const [canScrollStart, setCanScrollStart] = React.useState(false);
-  const [canScrollEnd, setCanScrollEnd] = React.useState(false);
-  const updateScrollState = React.useCallback(() => {
-    const el = viewportRef.current;
-    if (!el || !showFades) return;
-    if (orientation === "horizontal") {
-      setCanScrollStart(el.scrollLeft > 1);
-      setCanScrollEnd(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
-    } else {
-      setCanScrollStart(el.scrollTop > 1);
-      setCanScrollEnd(el.scrollTop < el.scrollHeight - el.clientHeight - 1);
-    }
-  }, [orientation, showFades]);
+  const [axes, setAxes] = React.useState({ x: "none", y: "none" });
   React.useEffect(() => {
-    const el = viewportRef.current;
-    if (!el || !showFades) return;
-    const raf = requestAnimationFrame(updateScrollState);
-    el.addEventListener("scroll", updateScrollState, { passive: true });
-    const observer = new ResizeObserver(updateScrollState);
-    observer.observe(el);
-    Array.from(el.children).forEach((child) => observer.observe(child));
+    const viewport = viewportRef.current;
+    if (!viewport || !showFades) return;
+    let frame = null;
+    const observedChildren = /* @__PURE__ */ new Set();
+    const readAndCommit = () => {
+      frame = null;
+      const view = viewport.ownerDocument.defaultView;
+      const computedDirection = view == null ? void 0 : view.getComputedStyle(viewport).direction;
+      const direction = (computedDirection || dir) === "rtl" ? "rtl" : "ltr";
+      const nextAxes = readScrollAxes(viewport, {
+        orientation,
+        direction,
+        rtlModel: direction === "rtl" ? detectRtlScrollModel(viewport.ownerDocument) : void 0
+      });
+      setAxes(
+        (currentAxes) => currentAxes.x === nextAxes.x && currentAxes.y === nextAxes.y ? currentAxes : nextAxes
+      );
+    };
+    const schedule = () => {
+      if (frame === null) frame = requestAnimationFrame(readAndCommit);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    const syncObservedChildren = () => {
+      const currentChildren = new Set(Array.from(viewport.children));
+      observedChildren.forEach((child) => {
+        if (!currentChildren.has(child)) {
+          resizeObserver.unobserve(child);
+          observedChildren.delete(child);
+        }
+      });
+      currentChildren.forEach((child) => {
+        if (!observedChildren.has(child)) {
+          resizeObserver.observe(child);
+          observedChildren.add(child);
+        }
+      });
+    };
+    const mutationObserver = new MutationObserver(() => {
+      syncObservedChildren();
+      schedule();
+    });
+    resizeObserver.observe(viewport);
+    syncObservedChildren();
+    mutationObserver.observe(viewport, { childList: true, subtree: true });
+    viewport.addEventListener("scroll", schedule, { passive: true });
+    schedule();
     return () => {
-      cancelAnimationFrame(raf);
-      el.removeEventListener("scroll", updateScrollState);
-      observer.disconnect();
+      if (frame !== null) cancelAnimationFrame(frame);
+      viewport.removeEventListener("scroll", schedule);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      observedChildren.clear();
     };
-  }, [showFades, updateScrollState]);
-  const rootClasses = [
-    styles.root,
-    className
-  ].filter(Boolean).join(" ");
-  const fadeMask = showFades ? canScrollStart && canScrollEnd ? styles.fadeMaskBoth : canScrollStart ? styles.fadeMaskStart : canScrollEnd ? styles.fadeMaskEnd : void 0 : void 0;
-  const viewportClasses = [
-    styles.viewport,
-    styles[orientation],
-    scrollbarVisibility === "always" && styles.scrollbarAlways,
-    scrollbarVisibility === "hover" && styles.scrollbarHover,
-    fadeMask
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
+  }, [dir, orientation, showFades]);
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
+  const visibleAxes = showFades ? axes : { x: "none", y: "none" };
+  const viewportClasses = [styles.viewport, styles[orientation]].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: rootClasses, "data-orientation": orientation, dir, children: /* @__PURE__ */ jsx(
     "div",
     {
-      ...htmlProps,
-      className: rootClasses,
-      "data-orientation": orientation,
-      children: /* @__PURE__ */ jsx("div", { ref: viewportRef, className: viewportClasses, children })
+      ref: viewportRef,
+      className: viewportClasses,
+      "data-scroll-x": visibleAxes.x,
+      "data-scroll-y": visibleAxes.y,
+      "data-scrollbar-visibility": scrollbarVisibility,
+      children
     }
-  );
+  ) });
 }
 const ScrollArea = Object.assign(ScrollAreaRoot, {
   Root: ScrollAreaRoot

package/dist/components/ScrollArea/scroll-state.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SCROLL_EDGE_EPSILON_PX = 1;
+const rtlScrollModels = /* @__PURE__ */ new WeakMap();
+function detectRtlScrollModel(document) {
+  const cachedModel = rtlScrollModels.get(document);
+  if (cachedModel) return cachedModel;
+  const viewport = document.createElement("div");
+  const content = document.createElement("div");
+  viewport.dir = "rtl";
+  viewport.style.cssText = "position:absolute;inset-block-start:-9999px;inline-size:4px;block-size:1px;overflow:scroll;visibility:hidden";
+  content.style.cssText = "inline-size:8px;block-size:1px";
+  viewport.append(content);
+  (document.body ?? document.documentElement).append(viewport);
+  let model;
+  if (viewport.scrollLeft > 0) {
+    model = "positive-descending";
+  } else {
+    viewport.scrollLeft = 1;
+    model = viewport.scrollLeft === 0 ? "negative" : "positive-ascending";
+  }
+  viewport.remove();
+  rtlScrollModels.set(document, model);
+  return model;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function resolveEdgeState(distanceFromStart, maxScroll) {
+  if (maxScroll <= SCROLL_EDGE_EPSILON_PX) return "none";
+  if (distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "end";
+  if (maxScroll - distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "start";
+  return "both";
+}
+function readScrollAxes(element, options) {
+  const allowX = options.orientation === "horizontal" || options.orientation === "both";
+  const allowY = options.orientation === "vertical" || options.orientation === "both";
+  const maxX = Math.max(0, element.scrollWidth - element.clientWidth);
+  const maxY = Math.max(0, element.scrollHeight - element.clientHeight);
+  let x = "none";
+  if (allowX) {
+    let logicalScrollLeft = element.scrollLeft;
+    if (options.direction === "rtl") {
+      const rtlModel = options.rtlModel ?? "negative";
+      if (rtlModel === "negative") {
+        logicalScrollLeft = -element.scrollLeft;
+      } else if (rtlModel === "positive-descending") {
+        logicalScrollLeft = maxX - element.scrollLeft;
+      }
+    }
+    x = resolveEdgeState(clamp(logicalScrollLeft, 0, maxX), maxX);
+  }
+  const y = allowY ? resolveEdgeState(clamp(element.scrollTop, 0, maxY), maxY) : "none";
+  return { x, y };
+}
+exports.SCROLL_EDGE_EPSILON_PX = SCROLL_EDGE_EPSILON_PX;
+exports.detectRtlScrollModel = detectRtlScrollModel;
+exports.readScrollAxes = readScrollAxes;

package/dist/components/ScrollArea/scroll-state.d.ts

@@ -0,0 +1,16 @@
+export type ScrollOrientation = "horizontal" | "vertical" | "both";
+export type ScrollEdgeState = "none" | "start" | "end" | "both";
+export type RtlScrollModel = "negative" | "positive-descending" | "positive-ascending";
+export interface ScrollAxesState {
+    x: ScrollEdgeState;
+    y: ScrollEdgeState;
+}
+export declare const SCROLL_EDGE_EPSILON_PX = 1;
+/** Detect the browser's RTL scrollLeft model without retaining probe elements. */
+export declare function detectRtlScrollModel(document: Document): RtlScrollModel;
+export declare function readScrollAxes(element: Pick<HTMLElement, "clientWidth" | "clientHeight" | "scrollWidth" | "scrollHeight" | "scrollLeft" | "scrollTop">, options: {
+    orientation: ScrollOrientation;
+    direction: "ltr" | "rtl";
+    rtlModel?: RtlScrollModel;
+}): ScrollAxesState;
+//# sourceMappingURL=scroll-state.d.ts.map

package/dist/components/ScrollArea/scroll-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-state.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/scroll-state.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAEvF,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,eAAe,CAAC;IACnB,CAAC,EAAE,eAAe,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAIxC,kFAAkF;AAClF,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,GAAG,cAAc,CAwBvE;AAaD,wBAAgB,cAAc,CAC5B,OAAO,EAAE,IAAI,CACX,WAAW,EACX,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,CAC7F,EACD,OAAO,EAAE;IACP,WAAW,EAAE,iBAAiB,CAAC;IAC/B,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,GACA,eAAe,CAyBjB"}

package/dist/components/ScrollArea/scroll-state.js

@@ -0,0 +1,58 @@
+const SCROLL_EDGE_EPSILON_PX = 1;
+const rtlScrollModels = /* @__PURE__ */ new WeakMap();
+function detectRtlScrollModel(document) {
+  const cachedModel = rtlScrollModels.get(document);
+  if (cachedModel) return cachedModel;
+  const viewport = document.createElement("div");
+  const content = document.createElement("div");
+  viewport.dir = "rtl";
+  viewport.style.cssText = "position:absolute;inset-block-start:-9999px;inline-size:4px;block-size:1px;overflow:scroll;visibility:hidden";
+  content.style.cssText = "inline-size:8px;block-size:1px";
+  viewport.append(content);
+  (document.body ?? document.documentElement).append(viewport);
+  let model;
+  if (viewport.scrollLeft > 0) {
+    model = "positive-descending";
+  } else {
+    viewport.scrollLeft = 1;
+    model = viewport.scrollLeft === 0 ? "negative" : "positive-ascending";
+  }
+  viewport.remove();
+  rtlScrollModels.set(document, model);
+  return model;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function resolveEdgeState(distanceFromStart, maxScroll) {
+  if (maxScroll <= SCROLL_EDGE_EPSILON_PX) return "none";
+  if (distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "end";
+  if (maxScroll - distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "start";
+  return "both";
+}
+function readScrollAxes(element, options) {
+  const allowX = options.orientation === "horizontal" || options.orientation === "both";
+  const allowY = options.orientation === "vertical" || options.orientation === "both";
+  const maxX = Math.max(0, element.scrollWidth - element.clientWidth);
+  const maxY = Math.max(0, element.scrollHeight - element.clientHeight);
+  let x = "none";
+  if (allowX) {
+    let logicalScrollLeft = element.scrollLeft;
+    if (options.direction === "rtl") {
+      const rtlModel = options.rtlModel ?? "negative";
+      if (rtlModel === "negative") {
+        logicalScrollLeft = -element.scrollLeft;
+      } else if (rtlModel === "positive-descending") {
+        logicalScrollLeft = maxX - element.scrollLeft;
+      }
+    }
+    x = resolveEdgeState(clamp(logicalScrollLeft, 0, maxX), maxX);
+  }
+  const y = allowY ? resolveEdgeState(clamp(element.scrollTop, 0, maxY), maxY) : "none";
+  return { x, y };
+}
+export {
+  SCROLL_EDGE_EPSILON_PX,
+  detectRtlScrollModel,
+  readScrollAxes
+};

package/dist/components/Select/Select.module.scss.cjs

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_9zaqb_1";
-const label = "_label_9zaqb_6";
-const helper = "_helper_9zaqb_19";
-const helperError = "_helperError_9zaqb_26";
-const errorMessage = "_errorMessage_9zaqb_30";
-const trigger = "_trigger_9zaqb_36";
-const triggerSm = "_triggerSm_9zaqb_99";
-const triggerLg = "_triggerLg_9zaqb_106";
-const triggerGhost = "_triggerGhost_9zaqb_113";
-const wrapperGhost = "_wrapperGhost_9zaqb_144";
-const triggerIcon = "_triggerIcon_9zaqb_149";
-const value = "_value_9zaqb_157";
-const placeholder = "_placeholder_9zaqb_170";
-const hint = "_hint_9zaqb_174";
-const icon = "_icon_9zaqb_180";
-const positioner = "_positioner_9zaqb_195";
-const popup = "_popup_9zaqb_200";
-const item = "_item_9zaqb_238";
-const itemIndicator = "_itemIndicator_9zaqb_287";
-const group = "_group_9zaqb_301";
-const groupLabel = "_groupLabel_9zaqb_307";
+const wrapper = "_wrapper_aykjj_1";
+const label = "_label_aykjj_8";
+const helper = "_helper_aykjj_17";
+const helperError = "_helperError_aykjj_27";
+const errorMessage = "_errorMessage_aykjj_28";
+const trigger = "_trigger_aykjj_38";
+const triggerSm = "_triggerSm_aykjj_92";
+const triggerLg = "_triggerLg_aykjj_104";
+const triggerGhost = "_triggerGhost_aykjj_116";
+const wrapperGhost = "_wrapperGhost_aykjj_142";
+const triggerIcon = "_triggerIcon_aykjj_147";
+const value = "_value_aykjj_155";
+const placeholder = "_placeholder_aykjj_168";
+const hint = "_hint_aykjj_172";
+const icon = "_icon_aykjj_178";
+const positioner = "_positioner_aykjj_206";
+const popup = "_popup_aykjj_211";
+const item = "_item_aykjj_262";
+const itemIndicator = "_itemIndicator_aykjj_293";
+const group = "_group_aykjj_307";
+const groupLabel = "_groupLabel_aykjj_315";
 const styles = {
   wrapper,
   label,

package/dist/components/Select/Select.module.scss.js

@@ -1,24 +1,24 @@
-const wrapper = "_wrapper_9zaqb_1";
-const label = "_label_9zaqb_6";
-const helper = "_helper_9zaqb_19";
-const helperError = "_helperError_9zaqb_26";
-const errorMessage = "_errorMessage_9zaqb_30";
-const trigger = "_trigger_9zaqb_36";
-const triggerSm = "_triggerSm_9zaqb_99";
-const triggerLg = "_triggerLg_9zaqb_106";
-const triggerGhost = "_triggerGhost_9zaqb_113";
-const wrapperGhost = "_wrapperGhost_9zaqb_144";
-const triggerIcon = "_triggerIcon_9zaqb_149";
-const value = "_value_9zaqb_157";
-const placeholder = "_placeholder_9zaqb_170";
-const hint = "_hint_9zaqb_174";
-const icon = "_icon_9zaqb_180";
-const positioner = "_positioner_9zaqb_195";
-const popup = "_popup_9zaqb_200";
-const item = "_item_9zaqb_238";
-const itemIndicator = "_itemIndicator_9zaqb_287";
-const group = "_group_9zaqb_301";
-const groupLabel = "_groupLabel_9zaqb_307";
+const wrapper = "_wrapper_aykjj_1";
+const label = "_label_aykjj_8";
+const helper = "_helper_aykjj_17";
+const helperError = "_helperError_aykjj_27";
+const errorMessage = "_errorMessage_aykjj_28";
+const trigger = "_trigger_aykjj_38";
+const triggerSm = "_triggerSm_aykjj_92";
+const triggerLg = "_triggerLg_aykjj_104";
+const triggerGhost = "_triggerGhost_aykjj_116";
+const wrapperGhost = "_wrapperGhost_aykjj_142";
+const triggerIcon = "_triggerIcon_aykjj_147";
+const value = "_value_aykjj_155";
+const placeholder = "_placeholder_aykjj_168";
+const hint = "_hint_aykjj_172";
+const icon = "_icon_aykjj_178";
+const positioner = "_positioner_aykjj_206";
+const popup = "_popup_aykjj_211";
+const item = "_item_aykjj_262";
+const itemIndicator = "_itemIndicator_aykjj_293";
+const group = "_group_aykjj_307";
+const groupLabel = "_groupLabel_aykjj_315";
 const styles = {
   wrapper,
   label,

package/dist/components/Select/index.cjs

@@ -6,6 +6,7 @@ const React = require("react");
 const select = require("@base-ui/react/select");
 const index = require("../ComponentDefaults/index.cjs");
 const aria = require("../../utils/aria.cjs");
+const popup = require("../../recipes/popup.cjs");
 const Select_module = require("./Select.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -263,7 +264,7 @@ function SelectTrigger({
 function SelectContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = popup.POPUP_OFFSET_PX,
   align = "start",
   maxVisibleItems,
   ...htmlProps
@@ -271,7 +272,7 @@ function SelectContent({
   const { optionItems } = React__namespace.useContext(SelectContext);
   const popupClasses = [Select_module.default.popup, className].filter(Boolean).join(" ");
   const popupStyle = maxVisibleItems != null ? {
-    "--fui-select-max-items": maxVisibleItems + 0.5,
+    "--fui-popup-viewport-rows": popup.resolvePopupViewportRows(maxVisibleItems),
     ...htmlProps.style
   } : htmlProps.style;
   return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { sideOffset, align, className: Select_module.default.positioner, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children: children ?? optionItems }) }) });

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";
 import { useFormFieldIds, mergeAriaIds } from "../../utils/aria.js";
+import { POPUP_OFFSET_PX, resolvePopupViewportRows } from "../../recipes/popup.js";
 import styles from "./Select.module.scss.js";
 function ChevronDownIcon() {
   return /* @__PURE__ */ jsx(
@@ -244,7 +245,7 @@ function SelectTrigger({
 function SelectContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = POPUP_OFFSET_PX,
   align = "start",
   maxVisibleItems,
   ...htmlProps
@@ -252,7 +253,7 @@ function SelectContent({
   const { optionItems } = React.useContext(SelectContext);
   const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
   const popupStyle = maxVisibleItems != null ? {
-    "--fui-select-max-items": maxVisibleItems + 0.5,
+    "--fui-popup-viewport-rows": resolvePopupViewportRows(maxVisibleItems),
     ...htmlProps.style
   } : htmlProps.style;
   return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { sideOffset, align, className: styles.positioner, children: /* @__PURE__ */ jsx(Select$1.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children: children ?? optionItems }) }) });

package/dist/components/Separator/Separator.module.scss.cjs

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const separator = "_separator_4fkwq_1";
-const horizontal = "_horizontal_4fkwq_6";
-const vertical = "_vertical_4fkwq_11";
-const withLabel = "_withLabel_4fkwq_17";
-const label = "_label_4fkwq_30";
-const spacingNone = "_spacingNone_4fkwq_40";
-const spacingSm = "_spacingSm_4fkwq_44";
-const spacingMd = "_spacingMd_4fkwq_51";
-const spacingLg = "_spacingLg_4fkwq_58";
-const soft = "_soft_4fkwq_65";
+const separator = "_separator_ddx8o_1";
+const horizontal = "_horizontal_ddx8o_6";
+const line = "_line_ddx8o_9";
+const vertical = "_vertical_ddx8o_16";
+const withLabel = "_withLabel_ddx8o_27";
+const label = "_label_ddx8o_40";
+const spacingNone = "_spacingNone_ddx8o_51";
+const spacingSm = "_spacingSm_ddx8o_55";
+const spacingMd = "_spacingMd_ddx8o_62";
+const spacingLg = "_spacingLg_ddx8o_69";
+const soft = "_soft_ddx8o_76";
 const styles = {
   separator,
   horizontal,
+  line,
   vertical,
   withLabel,
   label,
@@ -25,6 +27,7 @@ const styles = {
 exports.default = styles;
 exports.horizontal = horizontal;
 exports.label = label;
+exports.line = line;
 exports.separator = separator;
 exports.soft = soft;
 exports.spacingLg = spacingLg;

package/dist/components/Separator/Separator.module.scss.js

@@ -1,16 +1,18 @@
-const separator = "_separator_4fkwq_1";
-const horizontal = "_horizontal_4fkwq_6";
-const vertical = "_vertical_4fkwq_11";
-const withLabel = "_withLabel_4fkwq_17";
-const label = "_label_4fkwq_30";
-const spacingNone = "_spacingNone_4fkwq_40";
-const spacingSm = "_spacingSm_4fkwq_44";
-const spacingMd = "_spacingMd_4fkwq_51";
-const spacingLg = "_spacingLg_4fkwq_58";
-const soft = "_soft_4fkwq_65";
+const separator = "_separator_ddx8o_1";
+const horizontal = "_horizontal_ddx8o_6";
+const line = "_line_ddx8o_9";
+const vertical = "_vertical_ddx8o_16";
+const withLabel = "_withLabel_ddx8o_27";
+const label = "_label_ddx8o_40";
+const spacingNone = "_spacingNone_ddx8o_51";
+const spacingSm = "_spacingSm_ddx8o_55";
+const spacingMd = "_spacingMd_ddx8o_62";
+const spacingLg = "_spacingLg_ddx8o_69";
+const soft = "_soft_ddx8o_76";
 const styles = {
   separator,
   horizontal,
+  line,
   vertical,
   withLabel,
   label,
@@ -24,6 +26,7 @@ export {
   styles as default,
   horizontal,
   label,
+  line,
   separator,
   soft,
   spacingLg,

package/dist/components/Separator/index.cjs

@@ -28,56 +28,55 @@ const spacingClasses = {
   md: Separator_module.default.spacingMd,
   lg: Separator_module.default.spacingLg
 };
-const SeparatorRoot = React__namespace.forwardRef(
-  function Separator2({
-    orientation = "horizontal",
-    spacing = "none",
-    soft = false,
-    label,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    if (label && orientation === "horizontal") {
-      const classes2 = [
-        Separator_module.default.separator,
-        Separator_module.default.withLabel,
-        spacingClasses[spacing],
-        soft && Separator_module.default.soft,
-        className
-      ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref,
-          role: "separator",
-          "aria-orientation": "horizontal",
-          className: classes2,
-          style,
-          ...htmlProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Separator_module.default.label, children: label })
-        }
-      );
-    }
-    const classes = [
+const SeparatorRoot = React__namespace.forwardRef(function Separator2({
+  orientation = "horizontal",
+  spacing = "none",
+  soft = false,
+  label,
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  if (label && orientation === "horizontal") {
+    const classes2 = [
       Separator_module.default.separator,
-      orientation === "horizontal" ? Separator_module.default.horizontal : Separator_module.default.vertical,
+      Separator_module.default.withLabel,
       spacingClasses[spacing],
       soft && Separator_module.default.soft,
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      separator.Separator,
+      "div",
       {
         ref,
-        orientation,
-        className: classes,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: classes2,
         style,
-        ...htmlProps
+        ...htmlProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Separator_module.default.label, children: label })
       }
     );
   }
-);
+  const classes = [
+    Separator_module.default.separator,
+    orientation === "horizontal" ? Separator_module.default.horizontal : Separator_module.default.vertical,
+    spacingClasses[spacing],
+    soft && Separator_module.default.soft,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    separator.Separator,
+    {
+      ref,
+      orientation,
+      className: classes,
+      style,
+      ...htmlProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Separator_module.default.line, "aria-hidden": "true" })
+    }
+  );
+});
 const Separator = Object.assign(SeparatorRoot, {
   Root: SeparatorRoot
 });

package/dist/components/Separator/index.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+import * as React from "react";
+export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /** Orientation of the separator */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: "horizontal" | "vertical";
     /** Spacing around the separator */
-    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    spacing?: "none" | "sm" | "md" | "lg";
     /** Softer visual appearance */
     soft?: boolean;
     /** Optional label text (creates a labeled divider) */

package/dist/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2ED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+ED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}