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

package/dist/index.cjs

@@ -1031,6 +1031,7 @@ function Toggle({ checked, onChange, label, className }) {
 }
 
 // src/components/Modal/Modal.tsx
+var React10 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/hooks/useEscapeDismiss.ts
@@ -1132,7 +1133,11 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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" : "";
@@ -1143,10 +1148,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__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fractal-modal-title-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-            !noClose && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, {}) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              className: cn(
+                "fractal-modal-title-row",
+                scrollable && "fractal-modal-title-row--scrollable",
+                scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+                !noClose && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, {}) })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
@@ -1157,6 +1172,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__ */ (0, import_jsx_runtime14.jsx)(UILoader, { label: loadingLabel }) : children
             }
           ),
@@ -1188,7 +1204,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 }
 
 // src/components/Dropdown/Dropdown.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var MARGIN = 4;
@@ -1212,10 +1228,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)
   );
@@ -1225,7 +1241,7 @@ function Dropdown({
   const isUp = direction === "up";
   const isHorizontalDirection = direction === "left" || direction === "right";
   const ChevronIcon = direction === "up" ? import_fractal_icons8.ChevronUp : direction === "left" ? import_fractal_icons8.ChevronLeft : direction === "right" ? import_fractal_icons8.ChevronRight : import_fractal_icons8.ChevronDown;
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     if (!open || !triggerRef.current || !panelRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const panelRect = panelRef.current.getBoundingClientRect();
@@ -1276,7 +1292,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;
@@ -1328,14 +1344,14 @@ function Dropdown({
             const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
             const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React10.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React11.Fragment, { children: [
                 topDivider,
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React10.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React11.Fragment, { children: [
               topDivider,
               /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "button",
@@ -1365,9 +1381,9 @@ function Dropdown({
 }
 
 // src/components/Link/Link.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Link = React11.forwardRef(
+var Link = React12.forwardRef(
   ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "a",
     {
@@ -1380,9 +1396,9 @@ var Link = React11.forwardRef(
 Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Chip = React12.forwardRef(
+var Chip = React13.forwardRef(
   ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
@@ -1444,6 +1460,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
+  "aria-label": ariaLabel,
   emptyMessage,
   header,
   size = "md",
@@ -1534,7 +1551,7 @@ function SortableTable({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { className: "fractal-sortable-table-table", children: [
+    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
         selection && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "th",
@@ -1566,6 +1583,7 @@ function SortableTable({
               "th",
               {
                 className: "fractal-sortable-table-th",
+                scope: "col",
                 style: { width: col.width },
                 children: col.header
               },
@@ -1576,6 +1594,7 @@ function SortableTable({
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
+              scope: "col",
               style: { width: col.width },
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "button",
@@ -1801,14 +1820,14 @@ function Tabs({
 }
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_jsx_runtime22 = require("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;
@@ -2171,9 +2190,9 @@ function SurfaceGhost({ className, title, lines = 3, ...props }) {
 }
 
 // src/components/Sidebar/Sidebar.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Sidebar = React14.forwardRef(
+var Sidebar = React15.forwardRef(
   ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "aside",
     {
@@ -2186,11 +2205,11 @@ var Sidebar = React14.forwardRef(
   )
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React14.forwardRef(
+var SidebarHeader = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
@@ -2221,15 +2240,15 @@ function SidebarAccountMenu({
     }
   );
 }
-var SidebarNav = React14.forwardRef(
+var SidebarNav = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarSection = React14.forwardRef(
+var SidebarSection = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsxs)(
     "button",
     {
@@ -2248,7 +2267,7 @@ var SidebarNavItem = React14.forwardRef(
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
-var SidebarFooter = React14.forwardRef(
+var SidebarFooter = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
@@ -2287,17 +2306,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Textarea = React15.forwardRef(
+var Textarea = React16.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var TextButton = React16.forwardRef(
+var TextButton = React17.forwardRef(
   ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "button",
     {
@@ -2316,7 +2335,7 @@ var TextButton = React16.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function FileDropzone({
@@ -2329,9 +2348,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);