@mirror-physics/fractal-ui 0.2.0-next.1 → 0.2.0-next.10

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   Disclosure: () => Disclosure,
   Dropdown: () => Dropdown,
   FeatureCard: () => FeatureCard,
+  FileDropzone: () => FileDropzone,
   FolderCard: () => FolderCard,
   Input: () => Input,
   Label: () => Label,
@@ -52,6 +53,7 @@ __export(index_exports, {
   Modal: () => Modal,
   PromptCard: () => PromptCard,
   PromptGrid: () => PromptGrid,
+  SidePanel: () => SidePanel,
   Sidebar: () => Sidebar,
   SidebarBrand: () => SidebarBrand,
   SidebarFooter: () => SidebarFooter,
@@ -61,6 +63,7 @@ __export(index_exports, {
   SidebarSection: () => SidebarSection,
   SortableTable: () => SortableTable,
   Tabs: () => Tabs,
+  Textarea: () => Textarea,
   Toggle: () => Toggle,
   cn: () => cn,
   useEscapeDismiss: () => useEscapeDismiss
@@ -119,7 +122,7 @@ var colorPalette = {
 var sizeConfig = {
   xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
   sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
-  md: { height: "38px", padding: "8px 16px", iconOnly: "38px", fontSize: "0.875rem" },
+  md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
   lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
   xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
 };
@@ -749,7 +752,8 @@ function SortableTable({
   sortKey: controlledKey,
   sortDirection: controlledDirection,
   onSortChange,
-  highlightRow
+  highlightRow,
+  onRowClick
 }) {
   const [internalKey, setInternalKey] = (0, import_react2.useState)(defaultSortKey ?? null);
   const [internalDirection, setInternalDirection] = (0, import_react2.useState)(defaultSortDirection);
@@ -850,8 +854,18 @@ function SortableTable({
           {
             className: cn(
               "fractal-sortable-table-row",
-              highlighted && "fractal-sortable-table-row--highlighted"
+              highlighted && "fractal-sortable-table-row--highlighted",
+              onRowClick && "fractal-sortable-table-row--interactive"
             ),
+            onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+            onKeyDown: onRowClick ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onRowClick(row, rowIndex);
+              }
+            } : void 0,
+            role: onRowClick ? "button" : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
             children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "td",
               {
@@ -1096,6 +1110,141 @@ var SidebarFooter = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.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_icons5 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime17 = 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_runtime17.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "aside",
+      {
+        className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
+        "aria-modal": "true",
+        "aria-label": typeof title === "string" ? title : "Side panel",
+        role: "dialog",
+        onMouseDown: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "fractal-side-panel__description", children: description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons5.Close, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-side-panel__body", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/Textarea/Textarea.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Textarea = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+);
+Textarea.displayName = "Textarea";
+
+// src/components/FileDropzone/FileDropzone.tsx
+var React12 = __toESM(require("react"), 1);
+var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FileDropzone({
+  files,
+  onFilesChange,
+  accept,
+  multiple = true,
+  disabled = false,
+  title = "Drop files here or click to browse",
+  description = "Files stay attached to this record.",
+  className
+}) {
+  const inputId = React12.useId();
+  const inputRef = React12.useRef(null);
+  const [isDragging, setIsDragging] = React12.useState(false);
+  const addFiles = (nextFiles) => {
+    if (disabled) return;
+    const additions = Array.from(nextFiles);
+    if (additions.length === 0) return;
+    onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id: inputId,
+        className: "fractal-file-dropzone__input",
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        onChange: (event) => {
+          if (event.target.files) addFiles(event.target.files);
+          event.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        className: "fractal-file-dropzone__target",
+        "data-dragging": isDragging || void 0,
+        type: "button",
+        disabled,
+        onClick: () => inputRef.current?.click(),
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!disabled) setIsDragging(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: (event) => {
+          event.preventDefault();
+          setIsDragging(false);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          setIsDragging(false);
+          addFiles(event.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons6.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          className: "fractal-file-dropzone__remove",
+          type: "button",
+          "aria-label": `Remove ${file.name}`,
+          disabled,
+          onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons6.Close, { "aria-hidden": "true", size: 14 })
+        }
+      )
+    ] }, `${file.name}-${file.size}-${index}`)) })
+  ] });
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1113,6 +1262,7 @@ SidebarFooter.displayName = "SidebarFooter";
   Disclosure,
   Dropdown,
   FeatureCard,
+  FileDropzone,
   FolderCard,
   Input,
   Label,
@@ -1120,6 +1270,7 @@ SidebarFooter.displayName = "SidebarFooter";
   Modal,
   PromptCard,
   PromptGrid,
+  SidePanel,
   Sidebar,
   SidebarBrand,
   SidebarFooter,
@@ -1129,6 +1280,7 @@ SidebarFooter.displayName = "SidebarFooter";
   SidebarSection,
   SortableTable,
   Tabs,
+  Textarea,
   Toggle,
   cn,
   useEscapeDismiss