@mirror-physics/fractal-ui 0.2.0-next.10 → 0.2.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -155
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +3 -274
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +2 -33
- package/dist/index.d.ts +2 -33
- package/dist/index.js +3 -152
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -180,10 +180,8 @@ interface SortableTableProps<T> {
|
|
|
180
180
|
sortDirection?: SortDirection;
|
|
181
181
|
onSortChange?: (key: string | null, direction: SortDirection) => void;
|
|
182
182
|
highlightRow?: (row: T, index: number) => boolean;
|
|
183
|
-
/** Invoked when a row is selected. Enables pointer and keyboard row activation. */
|
|
184
|
-
onRowClick?: (row: T, index: number) => void;
|
|
185
183
|
}
|
|
186
|
-
declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow,
|
|
184
|
+
declare function SortableTable<T>({ columns, data, emptyMessage, header, size, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, }: SortableTableProps<T>): React.JSX.Element;
|
|
187
185
|
|
|
188
186
|
interface TabItem {
|
|
189
187
|
id: string;
|
|
@@ -233,35 +231,6 @@ interface SidebarNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
233
231
|
declare const SidebarNavItem: React.ForwardRefExoticComponent<SidebarNavItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
234
232
|
declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
235
233
|
|
|
236
|
-
interface SidePanelProps {
|
|
237
|
-
open: boolean;
|
|
238
|
-
onClose: () => void;
|
|
239
|
-
title: React.ReactNode;
|
|
240
|
-
description?: React.ReactNode;
|
|
241
|
-
children: React.ReactNode;
|
|
242
|
-
footer?: React.ReactNode;
|
|
243
|
-
/** Panel width: sm (420px), md (540px), or lg (680px). */
|
|
244
|
-
size?: 'sm' | 'md' | 'lg';
|
|
245
|
-
className?: string;
|
|
246
|
-
}
|
|
247
|
-
declare function SidePanel({ open, onClose, title, description, children, footer, size, className }: SidePanelProps): React.ReactPortal | null;
|
|
248
|
-
|
|
249
|
-
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
250
|
-
}
|
|
251
|
-
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
252
|
-
|
|
253
|
-
interface FileDropzoneProps {
|
|
254
|
-
files: File[];
|
|
255
|
-
onFilesChange: (files: File[]) => void;
|
|
256
|
-
accept?: string;
|
|
257
|
-
multiple?: boolean;
|
|
258
|
-
disabled?: boolean;
|
|
259
|
-
title?: React.ReactNode;
|
|
260
|
-
description?: React.ReactNode;
|
|
261
|
-
className?: string;
|
|
262
|
-
}
|
|
263
|
-
declare function FileDropzone({ files, onFilesChange, accept, multiple, disabled, title, description, className, }: FileDropzoneProps): React.JSX.Element;
|
|
264
|
-
|
|
265
234
|
/**
|
|
266
235
|
* Register an Escape-key dismiss handler with the global priority stack.
|
|
267
236
|
*
|
|
@@ -273,4 +242,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
|
|
|
273
242
|
|
|
274
243
|
declare function cn(...inputs: ClassValue[]): string;
|
|
275
244
|
|
|
276
|
-
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,
|
|
245
|
+
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 };
|
package/dist/index.js
CHANGED
|
@@ -50,7 +50,7 @@ var colorPalette = {
|
|
|
50
50
|
var sizeConfig = {
|
|
51
51
|
xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
|
|
52
52
|
sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
|
|
53
|
-
md: { height: "
|
|
53
|
+
md: { height: "38px", padding: "8px 16px", iconOnly: "38px", fontSize: "0.875rem" },
|
|
54
54
|
lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
|
|
55
55
|
xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
|
|
56
56
|
};
|
|
@@ -680,8 +680,7 @@ function SortableTable({
|
|
|
680
680
|
sortKey: controlledKey,
|
|
681
681
|
sortDirection: controlledDirection,
|
|
682
682
|
onSortChange,
|
|
683
|
-
highlightRow
|
|
684
|
-
onRowClick
|
|
683
|
+
highlightRow
|
|
685
684
|
}) {
|
|
686
685
|
const [internalKey, setInternalKey] = useState3(defaultSortKey ?? null);
|
|
687
686
|
const [internalDirection, setInternalDirection] = useState3(defaultSortDirection);
|
|
@@ -782,18 +781,8 @@ function SortableTable({
|
|
|
782
781
|
{
|
|
783
782
|
className: cn(
|
|
784
783
|
"fractal-sortable-table-row",
|
|
785
|
-
highlighted && "fractal-sortable-table-row--highlighted"
|
|
786
|
-
onRowClick && "fractal-sortable-table-row--interactive"
|
|
784
|
+
highlighted && "fractal-sortable-table-row--highlighted"
|
|
787
785
|
),
|
|
788
|
-
onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
|
|
789
|
-
onKeyDown: onRowClick ? (event) => {
|
|
790
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
791
|
-
event.preventDefault();
|
|
792
|
-
onRowClick(row, rowIndex);
|
|
793
|
-
}
|
|
794
|
-
} : void 0,
|
|
795
|
-
role: onRowClick ? "button" : void 0,
|
|
796
|
-
tabIndex: onRowClick ? 0 : void 0,
|
|
797
786
|
children: columns.map((col) => /* @__PURE__ */ jsx12(
|
|
798
787
|
"td",
|
|
799
788
|
{
|
|
@@ -1038,141 +1027,6 @@ var SidebarFooter = React10.forwardRef(
|
|
|
1038
1027
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1039
1028
|
);
|
|
1040
1029
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1041
|
-
|
|
1042
|
-
// src/components/SidePanel/SidePanel.tsx
|
|
1043
|
-
import { createPortal as createPortal2 } from "react-dom";
|
|
1044
|
-
import { Close } from "@mirror-physics/fractal-icons";
|
|
1045
|
-
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1046
|
-
function SidePanel({ open, onClose, title, description, children, footer, size = "md", className }) {
|
|
1047
|
-
useEscapeDismiss(80, onClose, open);
|
|
1048
|
-
if (!open) return null;
|
|
1049
|
-
return createPortal2(
|
|
1050
|
-
/* @__PURE__ */ jsx16("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs13(
|
|
1051
|
-
"aside",
|
|
1052
|
-
{
|
|
1053
|
-
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
1054
|
-
"aria-modal": "true",
|
|
1055
|
-
"aria-label": typeof title === "string" ? title : "Side panel",
|
|
1056
|
-
role: "dialog",
|
|
1057
|
-
onMouseDown: (event) => event.stopPropagation(),
|
|
1058
|
-
children: [
|
|
1059
|
-
/* @__PURE__ */ jsxs13("header", { className: "fractal-side-panel__header", children: [
|
|
1060
|
-
/* @__PURE__ */ jsxs13("div", { className: "fractal-side-panel__heading", children: [
|
|
1061
|
-
/* @__PURE__ */ jsx16("h2", { className: "fractal-side-panel__title", children: title }),
|
|
1062
|
-
description && /* @__PURE__ */ jsx16("p", { className: "fractal-side-panel__description", children: description })
|
|
1063
|
-
] }),
|
|
1064
|
-
/* @__PURE__ */ jsx16("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx16(Close, { size: 18 }) })
|
|
1065
|
-
] }),
|
|
1066
|
-
/* @__PURE__ */ jsx16("div", { className: "fractal-side-panel__body", children }),
|
|
1067
|
-
footer && /* @__PURE__ */ jsx16("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
1068
|
-
]
|
|
1069
|
-
}
|
|
1070
|
-
) }),
|
|
1071
|
-
document.body
|
|
1072
|
-
);
|
|
1073
|
-
}
|
|
1074
|
-
|
|
1075
|
-
// src/components/Textarea/Textarea.tsx
|
|
1076
|
-
import * as React11 from "react";
|
|
1077
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1078
|
-
var Textarea = React11.forwardRef(
|
|
1079
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx17("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
1080
|
-
);
|
|
1081
|
-
Textarea.displayName = "Textarea";
|
|
1082
|
-
|
|
1083
|
-
// src/components/FileDropzone/FileDropzone.tsx
|
|
1084
|
-
import * as React12 from "react";
|
|
1085
|
-
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
1086
|
-
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1087
|
-
function FileDropzone({
|
|
1088
|
-
files,
|
|
1089
|
-
onFilesChange,
|
|
1090
|
-
accept,
|
|
1091
|
-
multiple = true,
|
|
1092
|
-
disabled = false,
|
|
1093
|
-
title = "Drop files here or click to browse",
|
|
1094
|
-
description = "Files stay attached to this record.",
|
|
1095
|
-
className
|
|
1096
|
-
}) {
|
|
1097
|
-
const inputId = React12.useId();
|
|
1098
|
-
const inputRef = React12.useRef(null);
|
|
1099
|
-
const [isDragging, setIsDragging] = React12.useState(false);
|
|
1100
|
-
const addFiles = (nextFiles) => {
|
|
1101
|
-
if (disabled) return;
|
|
1102
|
-
const additions = Array.from(nextFiles);
|
|
1103
|
-
if (additions.length === 0) return;
|
|
1104
|
-
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1105
|
-
};
|
|
1106
|
-
return /* @__PURE__ */ jsxs14("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1107
|
-
/* @__PURE__ */ jsx18(
|
|
1108
|
-
"input",
|
|
1109
|
-
{
|
|
1110
|
-
ref: inputRef,
|
|
1111
|
-
id: inputId,
|
|
1112
|
-
className: "fractal-file-dropzone__input",
|
|
1113
|
-
type: "file",
|
|
1114
|
-
accept,
|
|
1115
|
-
multiple,
|
|
1116
|
-
disabled,
|
|
1117
|
-
onChange: (event) => {
|
|
1118
|
-
if (event.target.files) addFiles(event.target.files);
|
|
1119
|
-
event.target.value = "";
|
|
1120
|
-
}
|
|
1121
|
-
}
|
|
1122
|
-
),
|
|
1123
|
-
/* @__PURE__ */ jsxs14(
|
|
1124
|
-
"button",
|
|
1125
|
-
{
|
|
1126
|
-
className: "fractal-file-dropzone__target",
|
|
1127
|
-
"data-dragging": isDragging || void 0,
|
|
1128
|
-
type: "button",
|
|
1129
|
-
disabled,
|
|
1130
|
-
onClick: () => inputRef.current?.click(),
|
|
1131
|
-
onDragEnter: (event) => {
|
|
1132
|
-
event.preventDefault();
|
|
1133
|
-
if (!disabled) setIsDragging(true);
|
|
1134
|
-
},
|
|
1135
|
-
onDragOver: (event) => event.preventDefault(),
|
|
1136
|
-
onDragLeave: (event) => {
|
|
1137
|
-
event.preventDefault();
|
|
1138
|
-
setIsDragging(false);
|
|
1139
|
-
},
|
|
1140
|
-
onDrop: (event) => {
|
|
1141
|
-
event.preventDefault();
|
|
1142
|
-
setIsDragging(false);
|
|
1143
|
-
addFiles(event.dataTransfer.files);
|
|
1144
|
-
},
|
|
1145
|
-
children: [
|
|
1146
|
-
/* @__PURE__ */ jsx18(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
1147
|
-
/* @__PURE__ */ jsxs14("span", { className: "fractal-file-dropzone__copy", children: [
|
|
1148
|
-
/* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
1149
|
-
description && /* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__description", children: description })
|
|
1150
|
-
] })
|
|
1151
|
-
]
|
|
1152
|
-
}
|
|
1153
|
-
),
|
|
1154
|
-
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: [
|
|
1155
|
-
/* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
1156
|
-
/* @__PURE__ */ jsx18("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
1157
|
-
/* @__PURE__ */ jsx18(
|
|
1158
|
-
"button",
|
|
1159
|
-
{
|
|
1160
|
-
className: "fractal-file-dropzone__remove",
|
|
1161
|
-
type: "button",
|
|
1162
|
-
"aria-label": `Remove ${file.name}`,
|
|
1163
|
-
disabled,
|
|
1164
|
-
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1165
|
-
children: /* @__PURE__ */ jsx18(Close2, { "aria-hidden": "true", size: 14 })
|
|
1166
|
-
}
|
|
1167
|
-
)
|
|
1168
|
-
] }, `${file.name}-${file.size}-${index}`)) })
|
|
1169
|
-
] });
|
|
1170
|
-
}
|
|
1171
|
-
function formatFileSize(bytes) {
|
|
1172
|
-
if (bytes < 1024) return `${bytes} B`;
|
|
1173
|
-
if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
|
|
1174
|
-
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
1175
|
-
}
|
|
1176
1030
|
export {
|
|
1177
1031
|
Alert,
|
|
1178
1032
|
AlertDescription,
|
|
@@ -1189,7 +1043,6 @@ export {
|
|
|
1189
1043
|
Disclosure,
|
|
1190
1044
|
Dropdown,
|
|
1191
1045
|
FeatureCard,
|
|
1192
|
-
FileDropzone,
|
|
1193
1046
|
FolderCard,
|
|
1194
1047
|
Input,
|
|
1195
1048
|
Label,
|
|
@@ -1197,7 +1050,6 @@ export {
|
|
|
1197
1050
|
Modal,
|
|
1198
1051
|
PromptCard,
|
|
1199
1052
|
PromptGrid,
|
|
1200
|
-
SidePanel,
|
|
1201
1053
|
Sidebar,
|
|
1202
1054
|
SidebarBrand,
|
|
1203
1055
|
SidebarFooter,
|
|
@@ -1207,7 +1059,6 @@ export {
|
|
|
1207
1059
|
SidebarSection,
|
|
1208
1060
|
SortableTable,
|
|
1209
1061
|
Tabs,
|
|
1210
|
-
Textarea,
|
|
1211
1062
|
Toggle,
|
|
1212
1063
|
cn,
|
|
1213
1064
|
useEscapeDismiss
|