@usefragments/ui 1.5.3 → 1.6.0

package/dist/components/ScrollArea/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const ScrollArea_module = require("./ScrollArea.module.scss.cjs");
+const scrollState = require("./scroll-state.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -27,57 +28,80 @@ function ScrollAreaRoot({
   scrollbarVisibility = "auto",
   showFades = false,
   className,
+  dir,
   ...htmlProps
 }) {
   const viewportRef = React__namespace.useRef(null);
-  const [canScrollStart, setCanScrollStart] = React__namespace.useState(false);
-  const [canScrollEnd, setCanScrollEnd] = React__namespace.useState(false);
-  const updateScrollState = React__namespace.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__namespace.useState({ x: "none", y: "none" });
   React__namespace.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 = scrollState.readScrollAxes(viewport, {
+        orientation,
+        direction,
+        rtlModel: direction === "rtl" ? scrollState.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 = [
-    ScrollArea_module.default.root,
-    className
-  ].filter(Boolean).join(" ");
-  const fadeMask = showFades ? canScrollStart && canScrollEnd ? ScrollArea_module.default.fadeMaskBoth : canScrollStart ? ScrollArea_module.default.fadeMaskStart : canScrollEnd ? ScrollArea_module.default.fadeMaskEnd : void 0 : void 0;
-  const viewportClasses = [
-    ScrollArea_module.default.viewport,
-    ScrollArea_module.default[orientation],
-    scrollbarVisibility === "always" && ScrollArea_module.default.scrollbarAlways,
-    scrollbarVisibility === "hover" && ScrollArea_module.default.scrollbarHover,
-    fadeMask
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  }, [dir, orientation, showFades]);
+  const rootClasses = [ScrollArea_module.default.root, className].filter(Boolean).join(" ");
+  const visibleAxes = showFades ? axes : { x: "none", y: "none" };
+  const viewportClasses = [ScrollArea_module.default.viewport, ScrollArea_module.default[orientation]].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: rootClasses, "data-orientation": orientation, dir, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ...htmlProps,
-      className: rootClasses,
-      "data-orientation": orientation,
-      children: /* @__PURE__ */ jsxRuntime.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/index.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { type ScrollOrientation } from './scroll-state';
 export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /** Scroll direction */
-    orientation?: 'horizontal' | 'vertical' | 'both';
+    orientation?: ScrollOrientation;
     /** Scrollbar visibility behavior */
     scrollbarVisibility?: 'auto' | 'always' | 'hover';
     /** Whether to show fade indicators at scroll edges */
@@ -16,7 +17,7 @@ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
  * Provides thin, unobtrusive scrollbars that appear on hover or scroll,
  * with optional fade indicators to hint at overflowing content.
  */
-declare function ScrollAreaRoot({ children, orientation, scrollbarVisibility, showFades, className, ...htmlProps }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function ScrollAreaRoot({ children, orientation, scrollbarVisibility, showFades, className, dir, ...htmlProps }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
 export declare const ScrollArea: typeof ScrollAreaRoot & {
     Root: typeof ScrollAreaRoot;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,WAAwB,EACxB,mBAA4B,EAC5B,SAAiB,EACjB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,2CA2EjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,WAAwB,EACxB,mBAA4B,EAC5B,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACb,EAAE,eAAe,2CAsFjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC"}

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_2nxw7_1";
+const label = "_label_2nxw7_8";
+const helper = "_helper_2nxw7_17";
+const helperError = "_helperError_2nxw7_27";
+const errorMessage = "_errorMessage_2nxw7_28";
+const trigger = "_trigger_2nxw7_38";
+const triggerSm = "_triggerSm_2nxw7_90";
+const triggerLg = "_triggerLg_2nxw7_102";
+const triggerGhost = "_triggerGhost_2nxw7_114";
+const wrapperGhost = "_wrapperGhost_2nxw7_140";
+const triggerIcon = "_triggerIcon_2nxw7_145";
+const value = "_value_2nxw7_153";
+const placeholder = "_placeholder_2nxw7_166";
+const hint = "_hint_2nxw7_170";
+const icon = "_icon_2nxw7_176";
+const positioner = "_positioner_2nxw7_204";
+const popup = "_popup_2nxw7_209";
+const item = "_item_2nxw7_257";
+const itemIndicator = "_itemIndicator_2nxw7_286";
+const group = "_group_2nxw7_300";
+const groupLabel = "_groupLabel_2nxw7_308";
 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_2nxw7_1";
+const label = "_label_2nxw7_8";
+const helper = "_helper_2nxw7_17";
+const helperError = "_helperError_2nxw7_27";
+const errorMessage = "_errorMessage_2nxw7_28";
+const trigger = "_trigger_2nxw7_38";
+const triggerSm = "_triggerSm_2nxw7_90";
+const triggerLg = "_triggerLg_2nxw7_102";
+const triggerGhost = "_triggerGhost_2nxw7_114";
+const wrapperGhost = "_wrapperGhost_2nxw7_140";
+const triggerIcon = "_triggerIcon_2nxw7_145";
+const value = "_value_2nxw7_153";
+const placeholder = "_placeholder_2nxw7_166";
+const hint = "_hint_2nxw7_170";
+const icon = "_icon_2nxw7_176";
+const positioner = "_positioner_2nxw7_204";
+const popup = "_popup_2nxw7_209";
+const item = "_item_2nxw7_257";
+const itemIndicator = "_itemIndicator_2nxw7_286";
+const group = "_group_2nxw7_300";
+const groupLabel = "_groupLabel_2nxw7_308";
 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_1g93x_1";
+const horizontal = "_horizontal_1g93x_6";
+const line = "_line_1g93x_9";
+const vertical = "_vertical_1g93x_16";
+const withLabel = "_withLabel_1g93x_27";
+const label = "_label_1g93x_40";
+const spacingNone = "_spacingNone_1g93x_51";
+const spacingSm = "_spacingSm_1g93x_55";
+const spacingMd = "_spacingMd_1g93x_62";
+const spacingLg = "_spacingLg_1g93x_69";
+const soft = "_soft_1g93x_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;