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

package/dist/index.d.ts

@@ -180,8 +180,10 @@ interface SortableTableProps<T> {
     sortDirection?: SortDirection;
     onSortChange?: (key: string | null, direction: SortDirection) => void;
     highlightRow?: (row: T, index: number) => boolean;
+    /** Invoked when a row is selected. Enables pointer and keyboard row activation. */
+    onRowClick?: (row: T, index: number) => void;
 }
-declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -231,6 +233,35 @@ interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
 declare const SidebarNavItem: React.ForwardRefExoticComponent<SidebarNavItemProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
+interface SidePanelProps {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /** Panel width: sm (420px), md (540px), or lg (680px). */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function SidePanel({ open, onClose, title, description, children, footer, size, className }: SidePanelProps): React.ReactPortal | null;
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface FileDropzoneProps {
+    files: File[];
+    onFilesChange: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+}
+declare function FileDropzone({ files, onFilesChange, accept, multiple, disabled, title, description, className, }: FileDropzoneProps): React.JSX.Element;
+
 /**
  * Register an Escape-key dismiss handler with the global priority stack.
  *
@@ -242,4 +273,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, type ChipProps, type ChipTone, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, type ChipProps, type ChipTone, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };

package/dist/index.js

@@ -50,7 +50,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" }
 };
@@ -680,7 +680,8 @@ function SortableTable({
   sortKey: controlledKey,
   sortDirection: controlledDirection,
   onSortChange,
-  highlightRow
+  highlightRow,
+  onRowClick
 }) {
   const [internalKey, setInternalKey] = useState3(defaultSortKey ?? null);
   const [internalDirection, setInternalDirection] = useState3(defaultSortDirection);
@@ -781,8 +782,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__ */ jsx12(
               "td",
               {
@@ -1027,6 +1038,141 @@ var SidebarFooter = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
+
+// src/components/SidePanel/SidePanel.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { Close } from "@mirror-physics/fractal-icons";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function SidePanel({ open, onClose, title, description, children, footer, size = "md", className }) {
+  useEscapeDismiss(80, onClose, open);
+  if (!open) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx16("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs13(
+      "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__ */ jsxs13("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "fractal-side-panel__heading", children: [
+              /* @__PURE__ */ jsx16("h2", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ jsx16("p", { className: "fractal-side-panel__description", children: description })
+            ] }),
+            /* @__PURE__ */ jsx16("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx16(Close, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "fractal-side-panel__body", children }),
+          footer && /* @__PURE__ */ jsx16("footer", { className: "fractal-side-panel__footer", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/Textarea/Textarea.tsx
+import * as React11 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Textarea = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx17("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+);
+Textarea.displayName = "Textarea";
+
+// src/components/FileDropzone/FileDropzone.tsx
+import * as React12 from "react";
+import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
+import { jsx as jsx18, jsxs as jsxs14 } from "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__ */ jsxs14("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ jsx18(
+      "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__ */ jsxs14(
+      "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__ */ jsx18(FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ jsxs14("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__description", children: description })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx18("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs14("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ jsx18(
+        "button",
+        {
+          className: "fractal-file-dropzone__remove",
+          type: "button",
+          "aria-label": `Remove ${file.name}`,
+          disabled,
+          onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
+          children: /* @__PURE__ */ jsx18(Close2, { "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`;
+}
 export {
   Alert,
   AlertDescription,
@@ -1043,6 +1189,7 @@ export {
   Disclosure,
   Dropdown,
   FeatureCard,
+  FileDropzone,
   FolderCard,
   Input,
   Label,
@@ -1050,6 +1197,7 @@ export {
   Modal,
   PromptCard,
   PromptGrid,
+  SidePanel,
   Sidebar,
   SidebarBrand,
   SidebarFooter,
@@ -1059,6 +1207,7 @@ export {
   SidebarSection,
   SortableTable,
   Tabs,
+  Textarea,
   Toggle,
   cn,
   useEscapeDismiss