@mirror-physics/fractal-ui 0.2.0-next.14 → 0.2.0-next.15

package/dist/index.cjs

@@ -51,6 +51,7 @@ __export(index_exports, {
   FolderCard: () => FolderCard,
   Input: () => Input,
   Label: () => Label,
+  LatticeLoader: () => LatticeLoader,
   Link: () => Link,
   Modal: () => Modal,
   Pagination: () => Pagination,
@@ -1148,11 +1149,35 @@ function Disclosure({
   );
 }
 
+// src/components/LatticeLoader/LatticeLoader.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var LATTICE_COUNT = 48;
+function LatticeLoader({ className, label = "Loading", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "span",
+    {
+      "aria-label": label,
+      className: cn("fractal-lattice-loader", className),
+      role: "progressbar",
+      ...props,
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "fractal-lattice-loader__cell",
+          style: { "--fractal-lattice-index": index }
+        },
+        index
+      ))
+    }
+  );
+}
+
 // src/components/Sidebar/Sidebar.tsx
 var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Sidebar = React11.forwardRef(
-  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "aside",
     {
       ref,
@@ -1164,23 +1189,23 @@ var Sidebar = React11.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarBrand = React11.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 var SidebarNav = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
 var SidebarSection = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React11.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       ref,
@@ -1190,28 +1215,28 @@ var SidebarNavItem = React11.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
 var SidebarFooter = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
 var import_react_dom2 = require("react-dom");
 var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", className }) {
   useEscapeDismiss(80, onClose, open);
   if (!open) return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -1220,15 +1245,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fractal-side-panel__heading", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons6.Close, { size: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons6.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-side-panel__body", children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-side-panel__body", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
         ]
       }
     ) }),
@@ -1238,17 +1263,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 
 // src/components/Textarea/Textarea.tsx
 var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Textarea = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var TextButton = React13.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "button",
     {
       ref,
@@ -1256,9 +1281,9 @@ var TextButton = React13.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -1268,7 +1293,7 @@ TextButton.displayName = "TextButton";
 // src/components/FileDropzone/FileDropzone.tsx
 var React14 = __toESM(require("react"), 1);
 var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function FileDropzone({
   files,
   onFilesChange,
@@ -1288,8 +1313,8 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         ref: inputRef,
@@ -1305,7 +1330,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -1328,18 +1353,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fractal_icons7.FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons7.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -1347,7 +1372,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fractal_icons7.Close, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons7.Close, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -1361,7 +1386,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Pagination({
   page,
   pageSize,
@@ -1377,10 +1402,10 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Dropdown,
         {
           align: "right",
@@ -1397,7 +1422,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -1406,15 +1431,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons8.ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons8.ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -1423,7 +1448,7 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons8.ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons8.ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -1452,6 +1477,7 @@ function Pagination({
   FolderCard,
   Input,
   Label,
+  LatticeLoader,
   Link,
   Modal,
   Pagination,