@mirror-physics/fractal-ui 0.2.0-next.64 → 0.2.0-next.66

package/dist/index.js

@@ -927,6 +927,7 @@ function Toggle({ checked, onChange, label, className }) {
 }
 
 // src/components/Modal/Modal.tsx
+import * as React10 from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/useEscapeDismiss.ts
@@ -1028,7 +1029,11 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var CloseIcon = () => /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
+  const [bodyScrolled, setBodyScrolled] = React10.useState(false);
   useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
+  React10.useEffect(() => {
+    if (open) setBodyScrolled(false);
+  }, [open]);
   if (!open) return null;
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
@@ -1039,10 +1044,20 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
         className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "fractal-modal-title-row", children: [
-            /* @__PURE__ */ jsx13("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-            !noClose && /* @__PURE__ */ jsx13("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx13(CloseIcon, {}) })
-          ] }),
+          /* @__PURE__ */ jsxs12(
+            "div",
+            {
+              className: cn(
+                "fractal-modal-title-row",
+                scrollable && "fractal-modal-title-row--scrollable",
+                scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
+              ),
+              children: [
+                /* @__PURE__ */ jsx13("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+                !noClose && /* @__PURE__ */ jsx13("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx13(CloseIcon, {}) })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx13(
             "div",
             {
@@ -1053,6 +1068,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
                 loading && "fractal-modal-body--loading",
                 scrollable && "fractal-modal-body--scrollable"
               ),
+              onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
               children: loading ? /* @__PURE__ */ jsx13(UILoader, { label: loadingLabel }) : children
             }
           ),
@@ -1084,7 +1100,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var MARGIN = 4;
@@ -1108,10 +1124,10 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const triggerRef = React10.useRef(null);
-  const panelRef = React10.useRef(null);
-  const [panelStyle, setPanelStyle] = React10.useState({});
+  const [open, setOpen] = React11.useState(false);
+  const triggerRef = React11.useRef(null);
+  const panelRef = React11.useRef(null);
+  const [panelStyle, setPanelStyle] = React11.useState({});
   const visibleItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
@@ -1121,7 +1137,7 @@ function Dropdown({
   const isUp = direction === "up";
   const isHorizontalDirection = direction === "left" || direction === "right";
   const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     if (!open || !triggerRef.current || !panelRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const panelRect = panelRef.current.getBoundingClientRect();
@@ -1172,7 +1188,7 @@ function Dropdown({
     }
     setPanelStyle({ top, left, right });
   }, [open, direction, isHorizontalDirection, isUp, align]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -1224,14 +1240,14 @@ function Dropdown({
             const topDivider = item.border === "top" ? /* @__PURE__ */ jsx15("div", { className: "fractal-dropdown-separator" }) : null;
             const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx15("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ jsxs14(React10.Fragment, { children: [
+              return /* @__PURE__ */ jsxs14(React11.Fragment, { children: [
                 topDivider,
                 /* @__PURE__ */ jsx15("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ jsxs14(React10.Fragment, { children: [
+            return /* @__PURE__ */ jsxs14(React11.Fragment, { children: [
               topDivider,
               /* @__PURE__ */ jsxs14(
                 "button",
@@ -1261,9 +1277,9 @@ function Dropdown({
 }
 
 // src/components/Link/Link.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var Link = React11.forwardRef(
+var Link = React12.forwardRef(
   ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx16(
     "a",
     {
@@ -1276,9 +1292,9 @@ var Link = React11.forwardRef(
 Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var Chip = React12.forwardRef(
+var Chip = React13.forwardRef(
   ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx17(
     "span",
     {
@@ -1334,12 +1350,13 @@ function Checkbox({
 }
 
 // src/components/SortableTable/SortableTable.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState6 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
+  "aria-label": ariaLabel,
   emptyMessage,
   header,
   size = "md",
@@ -1359,8 +1376,8 @@ function SortableTable({
   onRowDoubleClick,
   rowAction
 }) {
-  const [internalKey, setInternalKey] = useState5(defaultSortKey ?? null);
-  const [internalDirection, setInternalDirection] = useState5(defaultSortDirection);
+  const [internalKey, setInternalKey] = useState6(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = useState6(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
@@ -1430,7 +1447,7 @@ function SortableTable({
   };
   return /* @__PURE__ */ jsx19("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs16("div", { className: "fractal-sortable-table-surface", children: [
     header && /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs16("table", { className: "fractal-sortable-table-table", children: [
+    visibleRows.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs16("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
       /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "fractal-sortable-table-thead-row", children: [
         selection && /* @__PURE__ */ jsx19(
           "th",
@@ -1462,6 +1479,7 @@ function SortableTable({
               "th",
               {
                 className: "fractal-sortable-table-th",
+                scope: "col",
                 style: { width: col.width },
                 children: col.header
               },
@@ -1472,6 +1490,7 @@ function SortableTable({
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
+              scope: "col",
               style: { width: col.width },
               children: /* @__PURE__ */ jsxs16(
                 "button",
@@ -1563,7 +1582,7 @@ function SortableTable({
 }
 
 // src/components/Tabs/Tabs.tsx
-import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState6 } from "react";
+import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState7 } from "react";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function Tabs({
   items,
@@ -1576,14 +1595,14 @@ function Tabs({
   variant = "line"
 }) {
   const reactId = useId2();
-  const [internalValue, setInternalValue] = useState6(
+  const [internalValue, setInternalValue] = useState7(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
   const tabListRef = useRef5(null);
   const tabRefs = useRef5({});
-  const [indicator, setIndicator] = useState6(null);
+  const [indicator, setIndicator] = useState7(null);
   useLayoutEffect2(() => {
     const updateIndicator = () => {
       const activeTab = tabRefs.current[activeId];
@@ -1697,14 +1716,14 @@ function Tabs({
 }
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
-  const switcherRef = React13.useRef(null);
-  const buttonRefs = React13.useRef([]);
-  const indicatorMotionReadyRef = React13.useRef(false);
+  const switcherRef = React14.useRef(null);
+  const buttonRefs = React14.useRef([]);
+  const indicatorMotionReadyRef = React14.useRef(false);
   const activeIndex = items.findIndex((item) => item.value === value);
-  React13.useLayoutEffect(() => {
+  React14.useLayoutEffect(() => {
     const switcher = switcherRef.current;
     const activeButton = buttonRefs.current[activeIndex];
     let motionFrame = 0;
@@ -1799,7 +1818,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 }
 
 // src/components/Disclosure/Disclosure.tsx
-import { useId as useId3, useState as useState7 } from "react";
+import { useId as useId3, useState as useState8 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function Disclosure({
@@ -1816,7 +1835,7 @@ function Disclosure({
   const reactId = useId3();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
-  const [internalOpen, setInternalOpen] = useState7(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState8(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2067,9 +2086,9 @@ function SurfaceGhost({ className, title, lines = 3, ...props }) {
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
-var Sidebar = React14.forwardRef(
+var Sidebar = React15.forwardRef(
   ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx25(
     "aside",
     {
@@ -2082,11 +2101,11 @@ var Sidebar = React14.forwardRef(
   )
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React14.forwardRef(
+var SidebarHeader = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarBrand = React14.forwardRef(
+var SidebarBrand = React15.forwardRef(
   ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx25("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
@@ -2117,15 +2136,15 @@ function SidebarAccountMenu({
     }
   );
 }
-var SidebarNav = React14.forwardRef(
+var SidebarNav = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarSection = React14.forwardRef(
+var SidebarSection = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
-var SidebarNavItem = React14.forwardRef(
+var SidebarNavItem = React15.forwardRef(
   ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs21(
     "button",
     {
@@ -2144,7 +2163,7 @@ var SidebarNavItem = React14.forwardRef(
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
-var SidebarFooter = React14.forwardRef(
+var SidebarFooter = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
@@ -2183,17 +2202,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-var Textarea = React15.forwardRef(
+var Textarea = React16.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
-var TextButton = React16.forwardRef(
+var TextButton = React17.forwardRef(
   ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "button",
     {
@@ -2212,7 +2231,7 @@ var TextButton = React16.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
 import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function FileDropzone({
@@ -2225,9 +2244,9 @@ function FileDropzone({
   description = "Files stay attached to this record.",
   className
 }) {
-  const inputId = React17.useId();
-  const inputRef = React17.useRef(null);
-  const [isDragging, setIsDragging] = React17.useState(false);
+  const inputId = React18.useId();
+  const inputRef = React18.useRef(null);
+  const [isDragging, setIsDragging] = React18.useState(false);
   const addFiles = (nextFiles) => {
     if (disabled) return;
     const additions = Array.from(nextFiles);