@bmsuisse/ui 0.16.1 → 0.16.2

package/dist/index.d.ts

@@ -55,7 +55,7 @@ declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitiv
 declare const DialogHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ReactElement;
 declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
-declare const DialogBody: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ReactElement;
+declare const DialogBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 declare const DialogFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ReactElement;
 
 declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;

package/dist/index.js

@@ -168,7 +168,7 @@ var Badge = ({ className, variant, ...props }) => /* @__PURE__ */ jsx6("div", {
 // src/primitives/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef5, useCallback, useLayoutEffect, useRef } from "react";
 import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -188,7 +188,7 @@ var DialogContent = forwardRef5(({ className, children, showCloseButton = true,
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 flex max-h-[85vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-lg",
+        "fixed left-1/2 top-1/2 z-50 flex max-h-[85vh] [--dialog-divider:color-mix(in_oklab,var(--color-foreground)_12%,transparent)] dark:[--dialog-divider:var(--color-border)] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-lg",
         className
       ),
       ...props,
@@ -213,7 +213,17 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx7("div", { className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6", className), ...props });
+}) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      "flex shrink-0 flex-col gap-1.5 bg-background px-6 pb-3 pt-6 transition-shadow [&:has(+[data-overflow-top])]:shadow-[inset_0_-1px_0_var(--dialog-divider)]",
+      className
+    ),
+    ...props
+  }
+);
 var DialogTitle = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
 var DialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
@@ -225,17 +235,77 @@ var DialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx7("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-6 pb-6", className), ...props });
+function useScrollEdges(ref) {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const update = () => {
+      el.toggleAttribute("data-overflow-top", el.scrollTop > 0.5);
+      el.toggleAttribute(
+        "data-overflow-bottom",
+        el.scrollTop + el.clientHeight < el.scrollHeight - 0.5
+      );
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    const observeChildren = () => {
+      if (!resizeObserver) return;
+      resizeObserver.disconnect();
+      resizeObserver.observe(el);
+      for (const child of Array.from(el.children)) resizeObserver.observe(child);
+    };
+    observeChildren();
+    const mutationObserver = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(() => {
+      observeChildren();
+      update();
+    });
+    mutationObserver?.observe(el, { childList: true });
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, [ref]);
+}
+var DialogBody = forwardRef5(
+  ({ className, ...props }, forwardedRef) => {
+    const ref = useRef(null);
+    useScrollEdges(ref);
+    const setRefs = useCallback(
+      (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: setRefs,
+        "data-slot": "dialog-body",
+        className: cn(
+          "min-h-0 flex-1 overflow-y-auto px-6 pb-6 pt-1 empty:pb-3 empty:pt-0 [&:empty:has(+[data-slot=dialog-footer])]:hidden [&:has(+[data-slot=dialog-footer])]:pb-1",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
 var DialogFooter = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx7(
   "div",
   {
-    className: cn("-mt-6 flex shrink-0 justify-end gap-2 px-6 pb-6 pt-4", className),
+    "data-slot": "dialog-footer",
+    className: cn(
+      "flex shrink-0 justify-end gap-2 bg-background px-6 pb-6 pt-3 transition-shadow [[data-overflow-bottom]+&]:shadow-[inset_0_1px_0_var(--dialog-divider)] [[data-slot=dialog-body]:empty+&]:pt-1 [[data-slot=dialog-header]+&]:pt-1",
+      className
+    ),
     ...props
   }
 );
@@ -644,7 +714,7 @@ DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 import { cva as cva3 } from "class-variance-authority";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import { X as X2 } from "lucide-react";
-import { forwardRef as forwardRef15, useEffect, useRef, useState } from "react";
+import { forwardRef as forwardRef15, useEffect, useRef as useRef2, useState } from "react";
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 var Sheet = DialogPrimitive2.Root;
 var SheetTrigger = DialogPrimitive2.Trigger;
@@ -695,7 +765,7 @@ var SheetContent = forwardRef15(
     }, []);
     const [dragHeight, setDragHeight] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
-    const dragStart = useRef(null);
+    const dragStart = useRef2(null);
     const canResize = resizable && side === "bottom";
     const onHandlePointerDown = (e) => {
       const popup = e.currentTarget.closest('[data-slot="sheet-content"]');
@@ -966,7 +1036,7 @@ var FormModal = ({
 };
 
 // src/patterns/modal/ResponsivePanel.tsx
-import { useRef as useRef2, useState as useState6 } from "react";
+import { useRef as useRef3, useState as useState6 } from "react";
 
 // src/lib/useMediaQuery.ts
 import { useEffect as useEffect2, useState as useState5 } from "react";
@@ -1022,8 +1092,8 @@ var cornerGripPosition = {
 function useDesktopPanelGeometry() {
   const [style, setStyle] = useState6(void 0);
   const [isDragging, setIsDragging] = useState6(false);
-  const drag = useRef2(null);
-  const lastRect = useRef2(null);
+  const drag = useRef3(null);
+  const lastRect = useRef3(null);
   const beginDrag = (mode, corner) => (e) => {
     const content = e.currentTarget.closest('[data-slot="dialog-content"]');
     if (!(content instanceof HTMLElement)) return;
@@ -1287,7 +1357,7 @@ function FormField({
 
 // src/patterns/combobox/Combobox.tsx
 import { Check as Check4, ChevronsUpDown, X as X3 } from "lucide-react";
-import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef4, useState as useState8 } from "react";
 
 // src/lib/optionGrouping.ts
 function groupMembers(options, group) {
@@ -1428,7 +1498,7 @@ function Combobox(props) {
   const [open, setOpen] = useState8(false);
   const [search, setSearch] = useState8("");
   const [activeIndex, setActiveIndex] = useState8(0);
-  const inputRef = useRef3(null);
+  const inputRef = useRef4(null);
   const selectedValues = useMemo(
     () => props.multiple ? props.value : props.value ? [props.value] : [],
     [props.multiple, props.value]
@@ -1646,7 +1716,7 @@ function Combobox(props) {
 
 // src/patterns/tag-combobox/TagCombobox.tsx
 import { X as X4 } from "lucide-react";
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState9 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState9 } from "react";
 import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function TagCombobox({
   options,
@@ -1669,8 +1739,8 @@ function TagCombobox({
   const [open, setOpen] = useState9(false);
   const [search, setSearch] = useState9("");
   const [activeIndex, setActiveIndex] = useState9(0);
-  const inputRef = useRef4(null);
-  const fieldRef = useRef4(null);
+  const inputRef = useRef5(null);
+  const fieldRef = useRef5(null);
   const selectedOptions = useMemo2(
     () => value.map((v) => options.find((o) => o.value === v) ?? { value: v, label: v }),
     [options, value]
@@ -2570,9 +2640,9 @@ function NavGroup({
 // src/patterns/sidebar/Sidebar.tsx
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import {
-  useCallback,
+  useCallback as useCallback2,
   useEffect as useEffect5,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState11
 } from "react";
 import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -2597,7 +2667,7 @@ function Sidebar({
   const [internalWidth, setInternalWidth] = useState11(defaultWidth);
   const currentWidth = width ?? internalWidth;
   const [isDragging, setIsDragging] = useState11(false);
-  const setWidth = useCallback(
+  const setWidth = useCallback2(
     (next) => {
       const clamped = Math.min(maxWidth, Math.max(minWidth, next));
       onWidthChange?.(clamped);
@@ -2605,7 +2675,7 @@ function Sidebar({
     },
     [maxWidth, minWidth, onWidthChange, width]
   );
-  const dragStartRef = useRef5(null);
+  const dragStartRef = useRef6(null);
   const handlePointerDown = (event) => {
     event.currentTarget.setPointerCapture(event.pointerId);
     dragStartRef.current = { x: event.clientX, width: currentWidth };
@@ -2687,7 +2757,7 @@ function Sidebar({
   ) }) });
 }
 function SidebarNav({ children, className, ...rest }) {
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   const [showFade, setShowFade] = useState11(false);
   useEffect5(() => {
     const el = ref.current;
@@ -2799,7 +2869,7 @@ import { Mic, MicOff } from "lucide-react";
 import { forwardRef as forwardRef18 } from "react";
 
 // src/patterns/ai/useSpeechRecognition.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef6, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef7, useState as useState13 } from "react";
 function getCtor() {
   if (typeof window === "undefined") return void 0;
   const w = window;
@@ -2835,18 +2905,18 @@ function useSpeechRecognition({
   const [listening, setListening] = useState13(false);
   const [interim, setInterim] = useState13("");
   const [error, setError] = useState13(null);
-  const recognitionRef = useRef6(null);
-  const onResultRef = useRef6(onResult);
-  const onErrorRef = useRef6(onError);
-  const engineRef = useRef6(engine);
+  const recognitionRef = useRef7(null);
+  const onResultRef = useRef7(onResult);
+  const onErrorRef = useRef7(onError);
+  const engineRef = useRef7(engine);
   onResultRef.current = onResult;
   onErrorRef.current = onError;
   engineRef.current = engine;
   const supported = engine !== void 0 || getCtor() !== void 0;
-  const stop = useCallback2(() => {
+  const stop = useCallback3(() => {
     recognitionRef.current?.stop();
   }, []);
-  const start = useCallback2(() => {
+  const start = useCallback3(() => {
     if (recognitionRef.current) return;
     const recognition = engineRef.current ? engineRef.current() : browserEngine();
     if (!recognition) return;
@@ -2879,7 +2949,7 @@ function useSpeechRecognition({
     setListening(true);
     recognition.start();
   }, [lang]);
-  const toggle = useCallback2(() => {
+  const toggle = useCallback3(() => {
     if (recognitionRef.current) stop();
     else start();
   }, [start, stop]);
@@ -3039,7 +3109,7 @@ function VoiceTranscript({
 }
 
 // src/patterns/stepper/Stepper.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
 import { Check as Check5, Plus } from "lucide-react";
 import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function Stepper({
@@ -3053,7 +3123,7 @@ function Stepper({
   scrollTestId = "stepper-scroll",
   newTestId
 }) {
-  const stepRefs = useRef7(/* @__PURE__ */ new Map());
+  const stepRefs = useRef8(/* @__PURE__ */ new Map());
   useEffect7(() => {
     const activeStep = stepRefs.current.get(step);
     activeStep?.scrollIntoView({ block: "nearest", inline: "center" });