@mirror-physics/fractal-ui 0.2.0-next.42 → 0.2.0-next.44
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 +335 -266
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +53 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +9 -2
- package/dist/index.d.ts +9 -2
- package/dist/index.js +330 -262
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -413,11 +413,61 @@ function NumberInput({
|
|
|
413
413
|
] });
|
|
414
414
|
}
|
|
415
415
|
|
|
416
|
-
// src/components/
|
|
416
|
+
// src/components/PasswordInput/PasswordInput.tsx
|
|
417
417
|
import * as React6 from "react";
|
|
418
|
-
import {
|
|
419
|
-
|
|
420
|
-
|
|
418
|
+
import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
|
|
419
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
420
|
+
var PasswordInput = React6.forwardRef(
|
|
421
|
+
({
|
|
422
|
+
className,
|
|
423
|
+
disabled,
|
|
424
|
+
showPasswordLabel = "Show password",
|
|
425
|
+
hidePasswordLabel = "Hide password",
|
|
426
|
+
...props
|
|
427
|
+
}, ref) => {
|
|
428
|
+
const [passwordVisible, setPasswordVisible] = React6.useState(false);
|
|
429
|
+
const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
|
|
430
|
+
return /* @__PURE__ */ jsxs6(
|
|
431
|
+
"div",
|
|
432
|
+
{
|
|
433
|
+
className: cn("fractal-password-input", className),
|
|
434
|
+
"data-password-visible": passwordVisible ? "" : void 0,
|
|
435
|
+
children: [
|
|
436
|
+
/* @__PURE__ */ jsx6(
|
|
437
|
+
Input,
|
|
438
|
+
{
|
|
439
|
+
...props,
|
|
440
|
+
ref,
|
|
441
|
+
className: "fractal-password-input-field",
|
|
442
|
+
disabled,
|
|
443
|
+
type: passwordVisible ? "text" : "password"
|
|
444
|
+
}
|
|
445
|
+
),
|
|
446
|
+
/* @__PURE__ */ jsx6(
|
|
447
|
+
"button",
|
|
448
|
+
{
|
|
449
|
+
type: "button",
|
|
450
|
+
className: "fractal-password-input-toggle",
|
|
451
|
+
"aria-label": toggleLabel,
|
|
452
|
+
"aria-pressed": passwordVisible,
|
|
453
|
+
disabled,
|
|
454
|
+
title: toggleLabel,
|
|
455
|
+
onClick: () => setPasswordVisible((visible) => !visible),
|
|
456
|
+
children: passwordVisible ? /* @__PURE__ */ jsx6(EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx6(Eye, { "aria-hidden": "true", size: 18 })
|
|
457
|
+
}
|
|
458
|
+
)
|
|
459
|
+
]
|
|
460
|
+
}
|
|
461
|
+
);
|
|
462
|
+
}
|
|
463
|
+
);
|
|
464
|
+
PasswordInput.displayName = "PasswordInput";
|
|
465
|
+
|
|
466
|
+
// src/components/Label/Label.tsx
|
|
467
|
+
import * as React7 from "react";
|
|
468
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
469
|
+
var Label = React7.forwardRef(
|
|
470
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
421
471
|
"label",
|
|
422
472
|
{
|
|
423
473
|
ref,
|
|
@@ -429,9 +479,9 @@ var Label = React6.forwardRef(
|
|
|
429
479
|
Label.displayName = "Label";
|
|
430
480
|
|
|
431
481
|
// src/components/Alert/Alert.tsx
|
|
432
|
-
import * as
|
|
482
|
+
import * as React8 from "react";
|
|
433
483
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
434
|
-
import { jsx as
|
|
484
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
435
485
|
var defaultIcons = {
|
|
436
486
|
default: CircleInfo,
|
|
437
487
|
info: CircleInfo,
|
|
@@ -439,10 +489,10 @@ var defaultIcons = {
|
|
|
439
489
|
warning: Warning,
|
|
440
490
|
error: CircleClose
|
|
441
491
|
};
|
|
442
|
-
var Alert =
|
|
492
|
+
var Alert = React8.forwardRef(
|
|
443
493
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
444
494
|
const DefaultIcon = defaultIcons[variant];
|
|
445
|
-
return /* @__PURE__ */
|
|
495
|
+
return /* @__PURE__ */ jsxs7(
|
|
446
496
|
"div",
|
|
447
497
|
{
|
|
448
498
|
ref,
|
|
@@ -450,27 +500,27 @@ var Alert = React7.forwardRef(
|
|
|
450
500
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
451
501
|
...props,
|
|
452
502
|
children: [
|
|
453
|
-
/* @__PURE__ */
|
|
454
|
-
/* @__PURE__ */
|
|
503
|
+
/* @__PURE__ */ jsx8("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx8(DefaultIcon, { size: 18 }) }),
|
|
504
|
+
/* @__PURE__ */ jsx8("div", { className: "fractal-alert-content", children })
|
|
455
505
|
]
|
|
456
506
|
}
|
|
457
507
|
);
|
|
458
508
|
}
|
|
459
509
|
);
|
|
460
510
|
Alert.displayName = "Alert";
|
|
461
|
-
var AlertTitle =
|
|
462
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
511
|
+
var AlertTitle = React8.forwardRef(
|
|
512
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx8("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
463
513
|
);
|
|
464
514
|
AlertTitle.displayName = "AlertTitle";
|
|
465
|
-
var AlertDescription =
|
|
466
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
515
|
+
var AlertDescription = React8.forwardRef(
|
|
516
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx8("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
467
517
|
);
|
|
468
518
|
AlertDescription.displayName = "AlertDescription";
|
|
469
519
|
|
|
470
520
|
// src/components/Toggle/Toggle.tsx
|
|
471
|
-
import { jsx as
|
|
521
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
472
522
|
function Toggle({ checked, onChange, label, className }) {
|
|
473
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ jsxs8(
|
|
474
524
|
"button",
|
|
475
525
|
{
|
|
476
526
|
type: "button",
|
|
@@ -479,8 +529,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
479
529
|
className: cn("fractal-toggle", className),
|
|
480
530
|
onClick: () => onChange(!checked),
|
|
481
531
|
children: [
|
|
482
|
-
/* @__PURE__ */
|
|
483
|
-
label && /* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ jsx9("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx9("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
533
|
+
label && /* @__PURE__ */ jsx9("span", { className: "fractal-toggle-label", children: label })
|
|
484
534
|
]
|
|
485
535
|
}
|
|
486
536
|
);
|
|
@@ -541,7 +591,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
541
591
|
|
|
542
592
|
// src/components/UILoader/UILoader.tsx
|
|
543
593
|
import { useId } from "react";
|
|
544
|
-
import { jsx as
|
|
594
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
545
595
|
var LEFT = "M0 53C0 51 1.6 49.5 3.6 49.5h16.5c1 0 1.9.4 2.5 1L42.1 69.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H23.1c-1 0-1.9-.4-2.5-1L1.1 71.7C.4 71 0 70.1 0 69.2V53Z";
|
|
546
596
|
var CENTER = "M0 3.5C0 1.6 1.6 0 3.6 0h16.5c1 0 1.9.4 2.5 1L92.5 69.6c.7.7 1 1.6 1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H73.4c-1 0-1.9-.4-2.5-1L1.1 22.2C.4 21.6 0 20.7 0 19.7V3.5Z";
|
|
547
597
|
var RIGHT = "M50.4 3.5C50.4 1.6 52 0 54 0h16.5c1 0 1.9.4 2.5 1l69.8 68.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5h-16.5c-1 0-1.9-.4-2.5-1L51.4 22.2c-.7-.6-1-1.5-1-2.5V3.5Z";
|
|
@@ -550,7 +600,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
550
600
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
551
601
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
552
602
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
553
|
-
return /* @__PURE__ */
|
|
603
|
+
return /* @__PURE__ */ jsx10(
|
|
554
604
|
"span",
|
|
555
605
|
{
|
|
556
606
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -558,52 +608,52 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
558
608
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
559
609
|
role: ariaHidden ? void 0 : "status",
|
|
560
610
|
style,
|
|
561
|
-
children: /* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
563
|
-
/* @__PURE__ */
|
|
564
|
-
/* @__PURE__ */
|
|
565
|
-
/* @__PURE__ */
|
|
611
|
+
children: /* @__PURE__ */ jsxs9("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
612
|
+
/* @__PURE__ */ jsxs9("defs", { children: [
|
|
613
|
+
/* @__PURE__ */ jsxs9("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
614
|
+
/* @__PURE__ */ jsx10("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
615
|
+
/* @__PURE__ */ jsx10("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
566
616
|
] }),
|
|
567
|
-
/* @__PURE__ */
|
|
568
|
-
/* @__PURE__ */
|
|
569
|
-
/* @__PURE__ */
|
|
570
|
-
/* @__PURE__ */
|
|
617
|
+
/* @__PURE__ */ jsxs9("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
618
|
+
/* @__PURE__ */ jsx10("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
619
|
+
/* @__PURE__ */ jsx10("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
620
|
+
/* @__PURE__ */ jsx10("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
571
621
|
] }),
|
|
572
|
-
/* @__PURE__ */
|
|
573
|
-
/* @__PURE__ */
|
|
574
|
-
/* @__PURE__ */
|
|
575
|
-
/* @__PURE__ */
|
|
622
|
+
/* @__PURE__ */ jsxs9("clipPath", { id: clipId, children: [
|
|
623
|
+
/* @__PURE__ */ jsx10("path", { d: LEFT }),
|
|
624
|
+
/* @__PURE__ */ jsx10("path", { d: CENTER }),
|
|
625
|
+
/* @__PURE__ */ jsx10("path", { d: RIGHT })
|
|
576
626
|
] })
|
|
577
627
|
] }),
|
|
578
|
-
/* @__PURE__ */
|
|
579
|
-
/* @__PURE__ */
|
|
580
|
-
/* @__PURE__ */
|
|
581
|
-
/* @__PURE__ */
|
|
628
|
+
/* @__PURE__ */ jsx10("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
629
|
+
/* @__PURE__ */ jsx10("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
630
|
+
/* @__PURE__ */ jsx10("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
631
|
+
/* @__PURE__ */ jsx10("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx10("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx10("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
582
632
|
] })
|
|
583
633
|
}
|
|
584
634
|
);
|
|
585
635
|
}
|
|
586
636
|
|
|
587
637
|
// src/components/Modal/Modal.tsx
|
|
588
|
-
import { jsx as
|
|
589
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
638
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
639
|
+
var CloseIcon = () => /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx11("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
590
640
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
591
641
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
592
642
|
if (!open) return null;
|
|
593
643
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
594
644
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
595
645
|
return createPortal(
|
|
596
|
-
/* @__PURE__ */
|
|
646
|
+
/* @__PURE__ */ jsx11("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs10(
|
|
597
647
|
"div",
|
|
598
648
|
{
|
|
599
649
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
600
650
|
onClick: (e) => e.stopPropagation(),
|
|
601
651
|
children: [
|
|
602
|
-
/* @__PURE__ */
|
|
603
|
-
/* @__PURE__ */
|
|
604
|
-
!noClose && /* @__PURE__ */
|
|
652
|
+
/* @__PURE__ */ jsxs10("div", { className: "fractal-modal-title-row", children: [
|
|
653
|
+
/* @__PURE__ */ jsx11("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
654
|
+
!noClose && /* @__PURE__ */ jsx11("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx11(CloseIcon, {}) })
|
|
605
655
|
] }),
|
|
606
|
-
/* @__PURE__ */
|
|
656
|
+
/* @__PURE__ */ jsx11(
|
|
607
657
|
"div",
|
|
608
658
|
{
|
|
609
659
|
"aria-busy": loading || void 0,
|
|
@@ -613,10 +663,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
613
663
|
loading && "fractal-modal-body--loading",
|
|
614
664
|
scrollable && "fractal-modal-body--scrollable"
|
|
615
665
|
),
|
|
616
|
-
children: loading ? /* @__PURE__ */
|
|
666
|
+
children: loading ? /* @__PURE__ */ jsx11(UILoader, { label: loadingLabel }) : children
|
|
617
667
|
}
|
|
618
668
|
),
|
|
619
|
-
footer && /* @__PURE__ */
|
|
669
|
+
footer && /* @__PURE__ */ jsx11("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
620
670
|
]
|
|
621
671
|
}
|
|
622
672
|
) }),
|
|
@@ -625,17 +675,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
625
675
|
}
|
|
626
676
|
|
|
627
677
|
// src/components/DataTable/DataTable.tsx
|
|
628
|
-
import { jsx as
|
|
678
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
629
679
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
630
|
-
return /* @__PURE__ */
|
|
631
|
-
header && /* @__PURE__ */
|
|
632
|
-
data.length === 0 ? /* @__PURE__ */
|
|
633
|
-
/* @__PURE__ */
|
|
634
|
-
/* @__PURE__ */
|
|
680
|
+
return /* @__PURE__ */ jsx12("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs11("div", { className: "fractal-datatable-surface", children: [
|
|
681
|
+
header && /* @__PURE__ */ jsx12("div", { className: "fractal-datatable-header", children: header }),
|
|
682
|
+
data.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs11("table", { className: "fractal-datatable-table", children: [
|
|
683
|
+
/* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsx12("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx12("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
684
|
+
/* @__PURE__ */ jsx12("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx12(
|
|
635
685
|
"tr",
|
|
636
686
|
{
|
|
637
687
|
className: "fractal-datatable-row",
|
|
638
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
688
|
+
children: columns.map((col) => /* @__PURE__ */ jsx12("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
639
689
|
},
|
|
640
690
|
rowIndex
|
|
641
691
|
)) })
|
|
@@ -644,9 +694,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
644
694
|
}
|
|
645
695
|
|
|
646
696
|
// src/components/Dropdown/Dropdown.tsx
|
|
647
|
-
import * as
|
|
697
|
+
import * as React9 from "react";
|
|
648
698
|
import { ChevronDown, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
649
|
-
import { Fragment as Fragment2, jsx as
|
|
699
|
+
import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
650
700
|
var MARGIN = 4;
|
|
651
701
|
function Dropdown({
|
|
652
702
|
items,
|
|
@@ -667,10 +717,10 @@ function Dropdown({
|
|
|
667
717
|
closeOnSelect = true,
|
|
668
718
|
disabled = false
|
|
669
719
|
}) {
|
|
670
|
-
const [open, setOpen] =
|
|
671
|
-
const triggerRef =
|
|
672
|
-
const panelRef =
|
|
673
|
-
const [panelStyle, setPanelStyle] =
|
|
720
|
+
const [open, setOpen] = React9.useState(false);
|
|
721
|
+
const triggerRef = React9.useRef(null);
|
|
722
|
+
const panelRef = React9.useRef(null);
|
|
723
|
+
const [panelStyle, setPanelStyle] = React9.useState({});
|
|
674
724
|
const visibleItems = items.filter(
|
|
675
725
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
676
726
|
);
|
|
@@ -679,7 +729,7 @@ function Dropdown({
|
|
|
679
729
|
const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
|
|
680
730
|
const isUp = direction === "up";
|
|
681
731
|
const ChevronIcon = isUp ? ChevronUp : ChevronDown;
|
|
682
|
-
|
|
732
|
+
React9.useLayoutEffect(() => {
|
|
683
733
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
684
734
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
685
735
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -713,7 +763,7 @@ function Dropdown({
|
|
|
713
763
|
}
|
|
714
764
|
setPanelStyle({ top, left, right });
|
|
715
765
|
}, [open, isUp, align]);
|
|
716
|
-
|
|
766
|
+
React9.useEffect(() => {
|
|
717
767
|
if (!open) return;
|
|
718
768
|
const handleClickOutside = (e) => {
|
|
719
769
|
const target = e.target;
|
|
@@ -723,8 +773,8 @@ function Dropdown({
|
|
|
723
773
|
document.addEventListener("mousedown", handleClickOutside);
|
|
724
774
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
725
775
|
}, [open]);
|
|
726
|
-
return /* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
776
|
+
return /* @__PURE__ */ jsxs12("div", { className: cn("fractal-dropdown", className), children: [
|
|
777
|
+
/* @__PURE__ */ jsxs12(
|
|
728
778
|
"button",
|
|
729
779
|
{
|
|
730
780
|
ref: triggerRef,
|
|
@@ -742,15 +792,15 @@ function Dropdown({
|
|
|
742
792
|
triggerClassName
|
|
743
793
|
),
|
|
744
794
|
children: [
|
|
745
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
746
|
-
selected.icon != null && /* @__PURE__ */
|
|
747
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */
|
|
795
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
796
|
+
selected.icon != null && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
797
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
748
798
|
] }),
|
|
749
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
799
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx13(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
750
800
|
]
|
|
751
801
|
}
|
|
752
802
|
),
|
|
753
|
-
open && /* @__PURE__ */
|
|
803
|
+
open && /* @__PURE__ */ jsxs12(
|
|
754
804
|
"div",
|
|
755
805
|
{
|
|
756
806
|
ref: panelRef,
|
|
@@ -759,21 +809,21 @@ function Dropdown({
|
|
|
759
809
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
760
810
|
style: panelStyle,
|
|
761
811
|
children: [
|
|
762
|
-
label != null && /* @__PURE__ */
|
|
812
|
+
label != null && /* @__PURE__ */ jsx13("div", { className: "fractal-dropdown-label", children: label }),
|
|
763
813
|
visibleItems.map((item, index) => {
|
|
764
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
765
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
814
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx13("div", { className: "fractal-dropdown-separator" }) : null;
|
|
815
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx13("div", { className: "fractal-dropdown-separator" }) : null;
|
|
766
816
|
if (item.kind === "header") {
|
|
767
|
-
return /* @__PURE__ */
|
|
817
|
+
return /* @__PURE__ */ jsxs12(React9.Fragment, { children: [
|
|
768
818
|
topDivider,
|
|
769
|
-
/* @__PURE__ */
|
|
819
|
+
/* @__PURE__ */ jsx13("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
770
820
|
bottomDivider
|
|
771
821
|
] }, `header-${index}`);
|
|
772
822
|
}
|
|
773
823
|
const isSelected = item.value === selectedValue;
|
|
774
|
-
return /* @__PURE__ */
|
|
824
|
+
return /* @__PURE__ */ jsxs12(React9.Fragment, { children: [
|
|
775
825
|
topDivider,
|
|
776
|
-
/* @__PURE__ */
|
|
826
|
+
/* @__PURE__ */ jsxs12(
|
|
777
827
|
"button",
|
|
778
828
|
{
|
|
779
829
|
type: "button",
|
|
@@ -785,9 +835,9 @@ function Dropdown({
|
|
|
785
835
|
},
|
|
786
836
|
className: "fractal-dropdown-option",
|
|
787
837
|
children: [
|
|
788
|
-
item.icon != null && /* @__PURE__ */
|
|
789
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
790
|
-
item.trailing != null && /* @__PURE__ */
|
|
838
|
+
item.icon != null && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
839
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
840
|
+
item.trailing != null && /* @__PURE__ */ jsx13("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
791
841
|
]
|
|
792
842
|
}
|
|
793
843
|
),
|
|
@@ -801,10 +851,10 @@ function Dropdown({
|
|
|
801
851
|
}
|
|
802
852
|
|
|
803
853
|
// src/components/Link/Link.tsx
|
|
804
|
-
import * as
|
|
805
|
-
import { jsx as
|
|
806
|
-
var Link =
|
|
807
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
854
|
+
import * as React10 from "react";
|
|
855
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
856
|
+
var Link = React10.forwardRef(
|
|
857
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx14(
|
|
808
858
|
"a",
|
|
809
859
|
{
|
|
810
860
|
ref,
|
|
@@ -816,10 +866,10 @@ var Link = React9.forwardRef(
|
|
|
816
866
|
Link.displayName = "Link";
|
|
817
867
|
|
|
818
868
|
// src/components/Chip/Chip.tsx
|
|
819
|
-
import * as
|
|
820
|
-
import { jsx as
|
|
821
|
-
var Chip =
|
|
822
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
869
|
+
import * as React11 from "react";
|
|
870
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
871
|
+
var Chip = React11.forwardRef(
|
|
872
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx15(
|
|
823
873
|
"span",
|
|
824
874
|
{
|
|
825
875
|
ref,
|
|
@@ -831,35 +881,52 @@ var Chip = React10.forwardRef(
|
|
|
831
881
|
Chip.displayName = "Chip";
|
|
832
882
|
|
|
833
883
|
// src/components/Checkbox/Checkbox.tsx
|
|
834
|
-
import { Checkbox as CheckboxIcon, CheckboxChecked } from "@mirror-physics/fractal-icons";
|
|
835
|
-
import { jsx as
|
|
836
|
-
function Checkbox({
|
|
837
|
-
|
|
884
|
+
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
885
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
886
|
+
function Checkbox({
|
|
887
|
+
checked,
|
|
888
|
+
indeterminate = false,
|
|
889
|
+
onCheckedChange,
|
|
890
|
+
className,
|
|
891
|
+
disabled,
|
|
892
|
+
onClick,
|
|
893
|
+
onKeyDown,
|
|
894
|
+
...props
|
|
895
|
+
}) {
|
|
896
|
+
return /* @__PURE__ */ jsx16(
|
|
838
897
|
"button",
|
|
839
898
|
{
|
|
840
899
|
...props,
|
|
841
|
-
className: cn(
|
|
900
|
+
className: cn(
|
|
901
|
+
"fractal-checkbox",
|
|
902
|
+
(checked || indeterminate) && "fractal-checkbox--checked",
|
|
903
|
+
indeterminate && "fractal-checkbox--indeterminate",
|
|
904
|
+
className
|
|
905
|
+
),
|
|
842
906
|
type: "button",
|
|
843
907
|
role: "checkbox",
|
|
844
|
-
"aria-checked": checked,
|
|
908
|
+
"aria-checked": indeterminate ? "mixed" : checked,
|
|
845
909
|
disabled,
|
|
846
910
|
onClick: (event) => {
|
|
847
911
|
onClick?.(event);
|
|
848
|
-
if (!event.defaultPrevented) onCheckedChange(!checked);
|
|
912
|
+
if (!event.defaultPrevented) onCheckedChange(indeterminate || !checked);
|
|
849
913
|
},
|
|
850
914
|
onKeyDown: (event) => {
|
|
851
915
|
onKeyDown?.(event);
|
|
852
916
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
853
917
|
},
|
|
854
|
-
children:
|
|
918
|
+
children: indeterminate ? /* @__PURE__ */ jsxs13("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
919
|
+
/* @__PURE__ */ jsx16(CheckboxIcon, { size: 18 }),
|
|
920
|
+
/* @__PURE__ */ jsx16(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
921
|
+
] }) : checked ? /* @__PURE__ */ jsx16(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx16(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
855
922
|
}
|
|
856
923
|
);
|
|
857
924
|
}
|
|
858
925
|
|
|
859
926
|
// src/components/SortableTable/SortableTable.tsx
|
|
860
|
-
import { useMemo, useState as
|
|
927
|
+
import { useMemo, useState as useState4 } from "react";
|
|
861
928
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
862
|
-
import { jsx as
|
|
929
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
863
930
|
function SortableTable({
|
|
864
931
|
columns,
|
|
865
932
|
data,
|
|
@@ -878,8 +945,8 @@ function SortableTable({
|
|
|
878
945
|
onRowClick,
|
|
879
946
|
rowAction
|
|
880
947
|
}) {
|
|
881
|
-
const [internalKey, setInternalKey] =
|
|
882
|
-
const [internalDirection, setInternalDirection] =
|
|
948
|
+
const [internalKey, setInternalKey] = useState4(defaultSortKey ?? null);
|
|
949
|
+
const [internalDirection, setInternalDirection] = useState4(defaultSortDirection);
|
|
883
950
|
const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
|
|
884
951
|
const activeKey = isControlled ? controlledKey : internalKey;
|
|
885
952
|
const activeDirection = isControlled ? controlledDirection : internalDirection;
|
|
@@ -935,13 +1002,13 @@ function SortableTable({
|
|
|
935
1002
|
onSortChange?.(nextKey, nextDirection);
|
|
936
1003
|
}
|
|
937
1004
|
};
|
|
938
|
-
return /* @__PURE__ */
|
|
939
|
-
header && /* @__PURE__ */
|
|
940
|
-
sorted.length === 0 ? /* @__PURE__ */
|
|
941
|
-
/* @__PURE__ */
|
|
1005
|
+
return /* @__PURE__ */ jsx17("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs14("div", { className: "fractal-sortable-table-surface", children: [
|
|
1006
|
+
header && /* @__PURE__ */ jsx17("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1007
|
+
sorted.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs14("table", { className: "fractal-sortable-table-table", children: [
|
|
1008
|
+
/* @__PURE__ */ jsx17("thead", { children: /* @__PURE__ */ jsx17("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
942
1009
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
943
1010
|
if (!col.sortable) {
|
|
944
|
-
return /* @__PURE__ */
|
|
1011
|
+
return /* @__PURE__ */ jsx17(
|
|
945
1012
|
"th",
|
|
946
1013
|
{
|
|
947
1014
|
className: "fractal-sortable-table-th",
|
|
@@ -951,12 +1018,12 @@ function SortableTable({
|
|
|
951
1018
|
col.key
|
|
952
1019
|
);
|
|
953
1020
|
}
|
|
954
|
-
return /* @__PURE__ */
|
|
1021
|
+
return /* @__PURE__ */ jsx17(
|
|
955
1022
|
"th",
|
|
956
1023
|
{
|
|
957
1024
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
958
1025
|
style: { width: col.width },
|
|
959
|
-
children: /* @__PURE__ */
|
|
1026
|
+
children: /* @__PURE__ */ jsxs14(
|
|
960
1027
|
"button",
|
|
961
1028
|
{
|
|
962
1029
|
type: "button",
|
|
@@ -967,8 +1034,8 @@ function SortableTable({
|
|
|
967
1034
|
onClick: () => handleSortClick(col.key),
|
|
968
1035
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
969
1036
|
children: [
|
|
970
|
-
/* @__PURE__ */
|
|
971
|
-
/* @__PURE__ */
|
|
1037
|
+
/* @__PURE__ */ jsx17("span", { children: col.header }),
|
|
1038
|
+
/* @__PURE__ */ jsx17("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx17(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx17(ArrowsUpDown, { size: 14 }) })
|
|
972
1039
|
]
|
|
973
1040
|
}
|
|
974
1041
|
)
|
|
@@ -976,13 +1043,13 @@ function SortableTable({
|
|
|
976
1043
|
col.key
|
|
977
1044
|
);
|
|
978
1045
|
}) }) }),
|
|
979
|
-
/* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ jsx17("tbody", { children: sorted.map((row, rowIndex) => {
|
|
980
1047
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
981
1048
|
const action = rowAction ? {
|
|
982
1049
|
label: rowAction.label(row, rowIndex),
|
|
983
1050
|
icon: rowAction.icon(row, rowIndex)
|
|
984
1051
|
} : null;
|
|
985
|
-
return /* @__PURE__ */
|
|
1052
|
+
return /* @__PURE__ */ jsx17(
|
|
986
1053
|
"tr",
|
|
987
1054
|
{
|
|
988
1055
|
className: cn(
|
|
@@ -1000,7 +1067,7 @@ function SortableTable({
|
|
|
1000
1067
|
"aria-label": action?.label,
|
|
1001
1068
|
role: onRowClick ? "button" : void 0,
|
|
1002
1069
|
tabIndex: onRowClick ? 0 : void 0,
|
|
1003
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1070
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs14(
|
|
1004
1071
|
"td",
|
|
1005
1072
|
{
|
|
1006
1073
|
className: cn(
|
|
@@ -1010,7 +1077,7 @@ function SortableTable({
|
|
|
1010
1077
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1011
1078
|
children: [
|
|
1012
1079
|
col.render(row, rowIndex),
|
|
1013
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1080
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx17("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1014
1081
|
]
|
|
1015
1082
|
},
|
|
1016
1083
|
col.key
|
|
@@ -1024,8 +1091,8 @@ function SortableTable({
|
|
|
1024
1091
|
}
|
|
1025
1092
|
|
|
1026
1093
|
// src/components/Tabs/Tabs.tsx
|
|
1027
|
-
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as
|
|
1028
|
-
import { jsx as
|
|
1094
|
+
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
|
|
1095
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1029
1096
|
function Tabs({
|
|
1030
1097
|
items,
|
|
1031
1098
|
defaultValue,
|
|
@@ -1037,14 +1104,14 @@ function Tabs({
|
|
|
1037
1104
|
variant = "line"
|
|
1038
1105
|
}) {
|
|
1039
1106
|
const reactId = useId2();
|
|
1040
|
-
const [internalValue, setInternalValue] =
|
|
1107
|
+
const [internalValue, setInternalValue] = useState5(
|
|
1041
1108
|
defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
|
|
1042
1109
|
);
|
|
1043
1110
|
const isControlled = controlledValue !== void 0;
|
|
1044
1111
|
const activeId = isControlled ? controlledValue : internalValue;
|
|
1045
1112
|
const tabListRef = useRef4(null);
|
|
1046
1113
|
const tabRefs = useRef4({});
|
|
1047
|
-
const [indicator, setIndicator] =
|
|
1114
|
+
const [indicator, setIndicator] = useState5(null);
|
|
1048
1115
|
useLayoutEffect2(() => {
|
|
1049
1116
|
const updateIndicator = () => {
|
|
1050
1117
|
const activeTab = tabRefs.current[activeId];
|
|
@@ -1096,8 +1163,8 @@ function Tabs({
|
|
|
1096
1163
|
selectTab(nextId2);
|
|
1097
1164
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1098
1165
|
};
|
|
1099
|
-
return /* @__PURE__ */
|
|
1100
|
-
/* @__PURE__ */
|
|
1166
|
+
return /* @__PURE__ */ jsxs15("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1167
|
+
/* @__PURE__ */ jsx18(
|
|
1101
1168
|
"div",
|
|
1102
1169
|
{
|
|
1103
1170
|
ref: tabListRef,
|
|
@@ -1110,7 +1177,7 @@ function Tabs({
|
|
|
1110
1177
|
const isActive = item.id === activeId;
|
|
1111
1178
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1112
1179
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1113
|
-
return /* @__PURE__ */
|
|
1180
|
+
return /* @__PURE__ */ jsx18(
|
|
1114
1181
|
"button",
|
|
1115
1182
|
{
|
|
1116
1183
|
ref: (el) => {
|
|
@@ -1141,7 +1208,7 @@ function Tabs({
|
|
|
1141
1208
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1142
1209
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1143
1210
|
const isActive = item.id === activeId;
|
|
1144
|
-
return /* @__PURE__ */
|
|
1211
|
+
return /* @__PURE__ */ jsx18(
|
|
1145
1212
|
"div",
|
|
1146
1213
|
{
|
|
1147
1214
|
id: panelId,
|
|
@@ -1158,14 +1225,14 @@ function Tabs({
|
|
|
1158
1225
|
}
|
|
1159
1226
|
|
|
1160
1227
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1161
|
-
import * as
|
|
1162
|
-
import { jsx as
|
|
1228
|
+
import * as React12 from "react";
|
|
1229
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1163
1230
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1164
|
-
const switcherRef =
|
|
1165
|
-
const buttonRefs =
|
|
1166
|
-
const indicatorMotionReadyRef =
|
|
1231
|
+
const switcherRef = React12.useRef(null);
|
|
1232
|
+
const buttonRefs = React12.useRef([]);
|
|
1233
|
+
const indicatorMotionReadyRef = React12.useRef(false);
|
|
1167
1234
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1168
|
-
|
|
1235
|
+
React12.useLayoutEffect(() => {
|
|
1169
1236
|
const switcher = switcherRef.current;
|
|
1170
1237
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1171
1238
|
let motionFrame = 0;
|
|
@@ -1217,7 +1284,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1217
1284
|
onValueChange(items[nextIndex].value);
|
|
1218
1285
|
}
|
|
1219
1286
|
};
|
|
1220
|
-
return /* @__PURE__ */
|
|
1287
|
+
return /* @__PURE__ */ jsxs16(
|
|
1221
1288
|
"div",
|
|
1222
1289
|
{
|
|
1223
1290
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1225,10 +1292,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1225
1292
|
"aria-label": ariaLabel,
|
|
1226
1293
|
ref: switcherRef,
|
|
1227
1294
|
children: [
|
|
1228
|
-
/* @__PURE__ */
|
|
1295
|
+
/* @__PURE__ */ jsx19("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1229
1296
|
items.map((item, index) => {
|
|
1230
1297
|
const active = item.value === value;
|
|
1231
|
-
return /* @__PURE__ */
|
|
1298
|
+
return /* @__PURE__ */ jsx19(
|
|
1232
1299
|
"button",
|
|
1233
1300
|
{
|
|
1234
1301
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1260,9 +1327,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1260
1327
|
}
|
|
1261
1328
|
|
|
1262
1329
|
// src/components/Disclosure/Disclosure.tsx
|
|
1263
|
-
import { useId as useId3, useState as
|
|
1330
|
+
import { useId as useId3, useState as useState6 } from "react";
|
|
1264
1331
|
import { ChevronRight as ChevronRight2, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1265
|
-
import { jsx as
|
|
1332
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1266
1333
|
function Disclosure({
|
|
1267
1334
|
title,
|
|
1268
1335
|
meta,
|
|
@@ -1277,7 +1344,7 @@ function Disclosure({
|
|
|
1277
1344
|
const reactId = useId3();
|
|
1278
1345
|
const headerId = `${reactId}-header`;
|
|
1279
1346
|
const panelId = `${reactId}-panel`;
|
|
1280
|
-
const [internalOpen, setInternalOpen] =
|
|
1347
|
+
const [internalOpen, setInternalOpen] = useState6(defaultOpen);
|
|
1281
1348
|
const isControlled = controlledOpen !== void 0;
|
|
1282
1349
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1283
1350
|
const toggle = () => {
|
|
@@ -1290,7 +1357,7 @@ function Disclosure({
|
|
|
1290
1357
|
onOpenChange?.(next);
|
|
1291
1358
|
}
|
|
1292
1359
|
};
|
|
1293
|
-
return /* @__PURE__ */
|
|
1360
|
+
return /* @__PURE__ */ jsxs17(
|
|
1294
1361
|
"div",
|
|
1295
1362
|
{
|
|
1296
1363
|
className: cn(
|
|
@@ -1301,7 +1368,7 @@ function Disclosure({
|
|
|
1301
1368
|
className
|
|
1302
1369
|
),
|
|
1303
1370
|
children: [
|
|
1304
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ jsxs17(
|
|
1305
1372
|
"button",
|
|
1306
1373
|
{
|
|
1307
1374
|
type: "button",
|
|
@@ -1312,13 +1379,13 @@ function Disclosure({
|
|
|
1312
1379
|
disabled,
|
|
1313
1380
|
onClick: toggle,
|
|
1314
1381
|
children: [
|
|
1315
|
-
/* @__PURE__ */
|
|
1316
|
-
/* @__PURE__ */
|
|
1317
|
-
meta && /* @__PURE__ */
|
|
1382
|
+
/* @__PURE__ */ jsx20("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx20(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx20(ChevronRight2, { size: 16 }) }),
|
|
1383
|
+
/* @__PURE__ */ jsx20("span", { className: "fractal-disclosure-title", children: title }),
|
|
1384
|
+
meta && /* @__PURE__ */ jsx20("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1318
1385
|
]
|
|
1319
1386
|
}
|
|
1320
1387
|
),
|
|
1321
|
-
/* @__PURE__ */
|
|
1388
|
+
/* @__PURE__ */ jsx20(
|
|
1322
1389
|
"div",
|
|
1323
1390
|
{
|
|
1324
1391
|
id: panelId,
|
|
@@ -1326,7 +1393,7 @@ function Disclosure({
|
|
|
1326
1393
|
"aria-labelledby": headerId,
|
|
1327
1394
|
className: "fractal-disclosure-panel",
|
|
1328
1395
|
hidden: !isOpen,
|
|
1329
|
-
children: /* @__PURE__ */
|
|
1396
|
+
children: /* @__PURE__ */ jsx20("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1330
1397
|
}
|
|
1331
1398
|
)
|
|
1332
1399
|
]
|
|
@@ -1335,18 +1402,18 @@ function Disclosure({
|
|
|
1335
1402
|
}
|
|
1336
1403
|
|
|
1337
1404
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1338
|
-
import { jsx as
|
|
1405
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1339
1406
|
var LATTICE_COUNT = 160;
|
|
1340
1407
|
var WAVE_PERIOD = 80;
|
|
1341
1408
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1342
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ jsx21(
|
|
1343
1410
|
"span",
|
|
1344
1411
|
{
|
|
1345
1412
|
"aria-label": label,
|
|
1346
1413
|
className: cn("fractal-lattice-loader", className),
|
|
1347
1414
|
role: "progressbar",
|
|
1348
1415
|
...props,
|
|
1349
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
1416
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx21(
|
|
1350
1417
|
"span",
|
|
1351
1418
|
{
|
|
1352
1419
|
"aria-hidden": "true",
|
|
@@ -1360,10 +1427,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1360
1427
|
}
|
|
1361
1428
|
|
|
1362
1429
|
// src/components/Ghost/Ghost.tsx
|
|
1363
|
-
import { jsx as
|
|
1430
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1364
1431
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1365
1432
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1366
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ jsx22(
|
|
1367
1434
|
"div",
|
|
1368
1435
|
{
|
|
1369
1436
|
"aria-hidden": "true",
|
|
@@ -1379,15 +1446,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1379
1446
|
);
|
|
1380
1447
|
}
|
|
1381
1448
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1382
|
-
return /* @__PURE__ */
|
|
1449
|
+
return /* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1383
1450
|
}
|
|
1384
1451
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1385
|
-
return /* @__PURE__ */
|
|
1452
|
+
return /* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1386
1453
|
}
|
|
1387
1454
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1388
|
-
return /* @__PURE__ */
|
|
1389
|
-
showHeader && /* @__PURE__ */
|
|
1390
|
-
/* @__PURE__ */
|
|
1455
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
1456
|
+
showHeader && /* @__PURE__ */ jsx22(GhostLine, { width: "38%" }),
|
|
1457
|
+
/* @__PURE__ */ jsx22("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx22(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1391
1458
|
] });
|
|
1392
1459
|
}
|
|
1393
1460
|
function DataTableGhost({
|
|
@@ -1401,109 +1468,109 @@ function DataTableGhost({
|
|
|
1401
1468
|
...props
|
|
1402
1469
|
}) {
|
|
1403
1470
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1404
|
-
return /* @__PURE__ */
|
|
1405
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1471
|
+
return /* @__PURE__ */ jsx22("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs18("table", { className: "fractal-ghost-table__table", children: [
|
|
1472
|
+
(showHeader || headers) && /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx22("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx22(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
1473
|
+
/* @__PURE__ */ jsx22("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx22("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx22("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx22(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1407
1474
|
] }) });
|
|
1408
1475
|
}
|
|
1409
1476
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1410
|
-
return /* @__PURE__ */
|
|
1477
|
+
return /* @__PURE__ */ jsx22(FormFieldGhost, { className, labelWidth, ...props });
|
|
1411
1478
|
}
|
|
1412
1479
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1413
|
-
return /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsx22(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1414
1481
|
}
|
|
1415
1482
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1416
|
-
return /* @__PURE__ */
|
|
1483
|
+
return /* @__PURE__ */ jsx22(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1417
1484
|
}
|
|
1418
1485
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1419
|
-
return /* @__PURE__ */
|
|
1420
|
-
/* @__PURE__ */
|
|
1421
|
-
/* @__PURE__ */
|
|
1486
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
1487
|
+
/* @__PURE__ */ jsx22(LabelGhost, { width: labelWidth }),
|
|
1488
|
+
/* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1422
1489
|
] });
|
|
1423
1490
|
}
|
|
1424
1491
|
function AlertGhost({ className, ...props }) {
|
|
1425
|
-
return /* @__PURE__ */
|
|
1426
|
-
/* @__PURE__ */
|
|
1427
|
-
/* @__PURE__ */
|
|
1492
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
1493
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "30%" }),
|
|
1494
|
+
/* @__PURE__ */ jsx22(GhostLine, { size: "sm", width: "78%" })
|
|
1428
1495
|
] });
|
|
1429
1496
|
}
|
|
1430
1497
|
function CheckboxGhost({ className, ...props }) {
|
|
1431
|
-
return /* @__PURE__ */
|
|
1432
|
-
/* @__PURE__ */
|
|
1433
|
-
/* @__PURE__ */
|
|
1498
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
1499
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
1500
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "42%" })
|
|
1434
1501
|
] });
|
|
1435
1502
|
}
|
|
1436
1503
|
var ToggleGhost = CheckboxGhost;
|
|
1437
1504
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1438
|
-
return /* @__PURE__ */
|
|
1505
|
+
return /* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1439
1506
|
}
|
|
1440
1507
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1441
|
-
return /* @__PURE__ */
|
|
1508
|
+
return /* @__PURE__ */ jsx22(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1442
1509
|
}
|
|
1443
1510
|
var TextButtonGhost = LinkGhost;
|
|
1444
1511
|
function DropdownGhost({ className, ...props }) {
|
|
1445
|
-
return /* @__PURE__ */
|
|
1446
|
-
/* @__PURE__ */
|
|
1447
|
-
/* @__PURE__ */
|
|
1512
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
1513
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "38%" }),
|
|
1514
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
1448
1515
|
] });
|
|
1449
1516
|
}
|
|
1450
1517
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1451
|
-
return /* @__PURE__ */
|
|
1518
|
+
return /* @__PURE__ */ jsx22("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx22(Ghost, {}, index)) });
|
|
1452
1519
|
}
|
|
1453
1520
|
var TabsGhost = ContentSwitcherGhost;
|
|
1454
1521
|
function DisclosureGhost({ className, ...props }) {
|
|
1455
|
-
return /* @__PURE__ */
|
|
1456
|
-
/* @__PURE__ */
|
|
1457
|
-
/* @__PURE__ */
|
|
1522
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
1523
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
1524
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "42%" })
|
|
1458
1525
|
] });
|
|
1459
1526
|
}
|
|
1460
1527
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1461
|
-
return /* @__PURE__ */
|
|
1528
|
+
return /* @__PURE__ */ jsx22("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx22(Ghost, {}, index)) });
|
|
1462
1529
|
}
|
|
1463
1530
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1464
|
-
return /* @__PURE__ */
|
|
1465
|
-
/* @__PURE__ */
|
|
1466
|
-
/* @__PURE__ */
|
|
1467
|
-
/* @__PURE__ */
|
|
1531
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
1532
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
1533
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "26%" }),
|
|
1534
|
+
/* @__PURE__ */ jsx22(GhostLine, { size: "sm", width: "46%" })
|
|
1468
1535
|
] });
|
|
1469
1536
|
}
|
|
1470
1537
|
function PromptCardGhost({ className, ...props }) {
|
|
1471
|
-
return /* @__PURE__ */
|
|
1538
|
+
return /* @__PURE__ */ jsx22(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1472
1539
|
}
|
|
1473
1540
|
function SortableTableGhost(props) {
|
|
1474
|
-
return /* @__PURE__ */
|
|
1541
|
+
return /* @__PURE__ */ jsx22(DataTableGhost, { ...props });
|
|
1475
1542
|
}
|
|
1476
1543
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1477
|
-
return /* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
/* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1544
|
+
return /* @__PURE__ */ jsxs18("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
1545
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
1546
|
+
/* @__PURE__ */ jsx22("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs18("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
1547
|
+
/* @__PURE__ */ jsx22(Ghost, {}),
|
|
1548
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
1482
1549
|
] }, index)) })
|
|
1483
1550
|
] });
|
|
1484
1551
|
}
|
|
1485
1552
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1486
|
-
return /* @__PURE__ */
|
|
1553
|
+
return /* @__PURE__ */ jsx22(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1487
1554
|
}
|
|
1488
1555
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1489
|
-
return /* @__PURE__ */
|
|
1556
|
+
return /* @__PURE__ */ jsx22(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1490
1557
|
}
|
|
1491
1558
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1492
|
-
return /* @__PURE__ */
|
|
1493
|
-
/* @__PURE__ */
|
|
1494
|
-
/* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1559
|
+
return /* @__PURE__ */ jsxs18("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
1560
|
+
/* @__PURE__ */ jsxs18("div", { className: "fractal-ghost-surface__header", children: [
|
|
1561
|
+
/* @__PURE__ */ jsx22(GhostLine, { width: "42%" }),
|
|
1562
|
+
/* @__PURE__ */ jsx22(Ghost, { className: "fractal-ghost-surface__close" })
|
|
1496
1563
|
] }),
|
|
1497
|
-
title && /* @__PURE__ */
|
|
1498
|
-
/* @__PURE__ */
|
|
1564
|
+
title && /* @__PURE__ */ jsx22("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
1565
|
+
/* @__PURE__ */ jsx22("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx22(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
1499
1566
|
] });
|
|
1500
1567
|
}
|
|
1501
1568
|
|
|
1502
1569
|
// src/components/Sidebar/Sidebar.tsx
|
|
1503
|
-
import * as
|
|
1504
|
-
import { Fragment as Fragment3, jsx as
|
|
1505
|
-
var Sidebar =
|
|
1506
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
1570
|
+
import * as React13 from "react";
|
|
1571
|
+
import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1572
|
+
var Sidebar = React13.forwardRef(
|
|
1573
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
1507
1574
|
"aside",
|
|
1508
1575
|
{
|
|
1509
1576
|
ref,
|
|
@@ -1515,12 +1582,12 @@ var Sidebar = React12.forwardRef(
|
|
|
1515
1582
|
)
|
|
1516
1583
|
);
|
|
1517
1584
|
Sidebar.displayName = "Sidebar";
|
|
1518
|
-
var SidebarHeader =
|
|
1519
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1585
|
+
var SidebarHeader = React13.forwardRef(
|
|
1586
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1520
1587
|
);
|
|
1521
1588
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1522
|
-
var SidebarBrand =
|
|
1523
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
1589
|
+
var SidebarBrand = React13.forwardRef(
|
|
1590
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx23("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
1524
1591
|
);
|
|
1525
1592
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1526
1593
|
function SidebarAccountMenu({
|
|
@@ -1531,7 +1598,7 @@ function SidebarAccountMenu({
|
|
|
1531
1598
|
icon,
|
|
1532
1599
|
className
|
|
1533
1600
|
}) {
|
|
1534
|
-
return /* @__PURE__ */
|
|
1601
|
+
return /* @__PURE__ */ jsx23(
|
|
1535
1602
|
Dropdown,
|
|
1536
1603
|
{
|
|
1537
1604
|
align: "left",
|
|
@@ -1541,25 +1608,25 @@ function SidebarAccountMenu({
|
|
|
1541
1608
|
panelClassName: "fractal-sidebar__account-panel",
|
|
1542
1609
|
selectedValue: "",
|
|
1543
1610
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
1544
|
-
triggerContent: /* @__PURE__ */
|
|
1545
|
-
icon && /* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1611
|
+
triggerContent: /* @__PURE__ */ jsxs19(Fragment3, { children: [
|
|
1612
|
+
icon && /* @__PURE__ */ jsx23("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
1613
|
+
/* @__PURE__ */ jsx23("span", { className: "fractal-sidebar__account-name", children: name })
|
|
1547
1614
|
] }),
|
|
1548
1615
|
triggerLabel,
|
|
1549
1616
|
triggerVariant: "tertiary"
|
|
1550
1617
|
}
|
|
1551
1618
|
);
|
|
1552
1619
|
}
|
|
1553
|
-
var SidebarNav =
|
|
1554
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1620
|
+
var SidebarNav = React13.forwardRef(
|
|
1621
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
1555
1622
|
);
|
|
1556
1623
|
SidebarNav.displayName = "SidebarNav";
|
|
1557
|
-
var SidebarSection =
|
|
1558
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1624
|
+
var SidebarSection = React13.forwardRef(
|
|
1625
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
1559
1626
|
);
|
|
1560
1627
|
SidebarSection.displayName = "SidebarSection";
|
|
1561
|
-
var SidebarNavItem =
|
|
1562
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
1628
|
+
var SidebarNavItem = React13.forwardRef(
|
|
1629
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs19(
|
|
1563
1630
|
"button",
|
|
1564
1631
|
{
|
|
1565
1632
|
ref,
|
|
@@ -1569,28 +1636,28 @@ var SidebarNavItem = React12.forwardRef(
|
|
|
1569
1636
|
"aria-current": active ? "page" : void 0,
|
|
1570
1637
|
...props,
|
|
1571
1638
|
children: [
|
|
1572
|
-
icon && /* @__PURE__ */
|
|
1573
|
-
/* @__PURE__ */
|
|
1574
|
-
endAdornment && /* @__PURE__ */
|
|
1639
|
+
icon && /* @__PURE__ */ jsx23("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
1640
|
+
/* @__PURE__ */ jsx23("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
1641
|
+
endAdornment && /* @__PURE__ */ jsx23("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
1575
1642
|
]
|
|
1576
1643
|
}
|
|
1577
1644
|
)
|
|
1578
1645
|
);
|
|
1579
1646
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
1580
|
-
var SidebarFooter =
|
|
1581
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1647
|
+
var SidebarFooter = React13.forwardRef(
|
|
1648
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1582
1649
|
);
|
|
1583
1650
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1584
1651
|
|
|
1585
1652
|
// src/components/SidePanel/SidePanel.tsx
|
|
1586
1653
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1587
1654
|
import { Close } from "@mirror-physics/fractal-icons";
|
|
1588
|
-
import { jsx as
|
|
1655
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1589
1656
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
1590
1657
|
useEscapeDismiss(80, onClose, open);
|
|
1591
1658
|
if (!open) return null;
|
|
1592
1659
|
return createPortal2(
|
|
1593
|
-
/* @__PURE__ */
|
|
1660
|
+
/* @__PURE__ */ jsx24("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs20(
|
|
1594
1661
|
"aside",
|
|
1595
1662
|
{
|
|
1596
1663
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -1599,15 +1666,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1599
1666
|
role: "dialog",
|
|
1600
1667
|
onMouseDown: (event) => event.stopPropagation(),
|
|
1601
1668
|
children: [
|
|
1602
|
-
/* @__PURE__ */
|
|
1603
|
-
/* @__PURE__ */
|
|
1604
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
1605
|
-
description && /* @__PURE__ */
|
|
1669
|
+
/* @__PURE__ */ jsxs20("header", { className: "fractal-side-panel__header", children: [
|
|
1670
|
+
/* @__PURE__ */ jsxs20("div", { className: "fractal-side-panel__heading", children: [
|
|
1671
|
+
typeof title === "string" ? /* @__PURE__ */ jsx24("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx24("div", { className: "fractal-side-panel__title", children: title }),
|
|
1672
|
+
description && /* @__PURE__ */ jsx24("p", { className: "fractal-side-panel__description", children: description })
|
|
1606
1673
|
] }),
|
|
1607
|
-
/* @__PURE__ */
|
|
1674
|
+
/* @__PURE__ */ jsx24("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx24(Close, { size: 18 }) })
|
|
1608
1675
|
] }),
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
footer && /* @__PURE__ */
|
|
1676
|
+
/* @__PURE__ */ jsx24("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx24(UILoader, { label: loadingLabel }) : children }),
|
|
1677
|
+
footer && /* @__PURE__ */ jsx24("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
1611
1678
|
]
|
|
1612
1679
|
}
|
|
1613
1680
|
) }),
|
|
@@ -1616,18 +1683,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1616
1683
|
}
|
|
1617
1684
|
|
|
1618
1685
|
// src/components/Textarea/Textarea.tsx
|
|
1619
|
-
import * as
|
|
1620
|
-
import { jsx as
|
|
1621
|
-
var Textarea =
|
|
1622
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1686
|
+
import * as React14 from "react";
|
|
1687
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1688
|
+
var Textarea = React14.forwardRef(
|
|
1689
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx25("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
1623
1690
|
);
|
|
1624
1691
|
Textarea.displayName = "Textarea";
|
|
1625
1692
|
|
|
1626
1693
|
// src/components/TextButton/TextButton.tsx
|
|
1627
|
-
import * as
|
|
1628
|
-
import { jsx as
|
|
1629
|
-
var TextButton =
|
|
1630
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
1694
|
+
import * as React15 from "react";
|
|
1695
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1696
|
+
var TextButton = React15.forwardRef(
|
|
1697
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs21(
|
|
1631
1698
|
"button",
|
|
1632
1699
|
{
|
|
1633
1700
|
ref,
|
|
@@ -1635,9 +1702,9 @@ var TextButton = React14.forwardRef(
|
|
|
1635
1702
|
type: "button",
|
|
1636
1703
|
...props,
|
|
1637
1704
|
children: [
|
|
1638
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
1639
|
-
/* @__PURE__ */
|
|
1640
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
1705
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx26("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
1706
|
+
/* @__PURE__ */ jsx26("span", { children }),
|
|
1707
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx26("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
1641
1708
|
]
|
|
1642
1709
|
}
|
|
1643
1710
|
)
|
|
@@ -1645,9 +1712,9 @@ var TextButton = React14.forwardRef(
|
|
|
1645
1712
|
TextButton.displayName = "TextButton";
|
|
1646
1713
|
|
|
1647
1714
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
1648
|
-
import * as
|
|
1715
|
+
import * as React16 from "react";
|
|
1649
1716
|
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
1650
|
-
import { jsx as
|
|
1717
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1651
1718
|
function FileDropzone({
|
|
1652
1719
|
files,
|
|
1653
1720
|
onFilesChange,
|
|
@@ -1658,17 +1725,17 @@ function FileDropzone({
|
|
|
1658
1725
|
description = "Files stay attached to this record.",
|
|
1659
1726
|
className
|
|
1660
1727
|
}) {
|
|
1661
|
-
const inputId =
|
|
1662
|
-
const inputRef =
|
|
1663
|
-
const [isDragging, setIsDragging] =
|
|
1728
|
+
const inputId = React16.useId();
|
|
1729
|
+
const inputRef = React16.useRef(null);
|
|
1730
|
+
const [isDragging, setIsDragging] = React16.useState(false);
|
|
1664
1731
|
const addFiles = (nextFiles) => {
|
|
1665
1732
|
if (disabled) return;
|
|
1666
1733
|
const additions = Array.from(nextFiles);
|
|
1667
1734
|
if (additions.length === 0) return;
|
|
1668
1735
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1669
1736
|
};
|
|
1670
|
-
return /* @__PURE__ */
|
|
1671
|
-
/* @__PURE__ */
|
|
1737
|
+
return /* @__PURE__ */ jsxs22("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1738
|
+
/* @__PURE__ */ jsx27(
|
|
1672
1739
|
"input",
|
|
1673
1740
|
{
|
|
1674
1741
|
ref: inputRef,
|
|
@@ -1684,7 +1751,7 @@ function FileDropzone({
|
|
|
1684
1751
|
}
|
|
1685
1752
|
}
|
|
1686
1753
|
),
|
|
1687
|
-
/* @__PURE__ */
|
|
1754
|
+
/* @__PURE__ */ jsxs22(
|
|
1688
1755
|
"button",
|
|
1689
1756
|
{
|
|
1690
1757
|
className: "fractal-file-dropzone__target",
|
|
@@ -1707,18 +1774,18 @@ function FileDropzone({
|
|
|
1707
1774
|
addFiles(event.dataTransfer.files);
|
|
1708
1775
|
},
|
|
1709
1776
|
children: [
|
|
1710
|
-
/* @__PURE__ */
|
|
1711
|
-
/* @__PURE__ */
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
description && /* @__PURE__ */
|
|
1777
|
+
/* @__PURE__ */ jsx27(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
1778
|
+
/* @__PURE__ */ jsxs22("span", { className: "fractal-file-dropzone__copy", children: [
|
|
1779
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
1780
|
+
description && /* @__PURE__ */ jsx27("span", { className: "fractal-file-dropzone__description", children: description })
|
|
1714
1781
|
] })
|
|
1715
1782
|
]
|
|
1716
1783
|
}
|
|
1717
1784
|
),
|
|
1718
|
-
files.length > 0 && /* @__PURE__ */
|
|
1719
|
-
/* @__PURE__ */
|
|
1720
|
-
/* @__PURE__ */
|
|
1721
|
-
/* @__PURE__ */
|
|
1785
|
+
files.length > 0 && /* @__PURE__ */ jsx27("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs22("li", { className: "fractal-file-dropzone__file", children: [
|
|
1786
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
1787
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
1788
|
+
/* @__PURE__ */ jsx27(
|
|
1722
1789
|
"button",
|
|
1723
1790
|
{
|
|
1724
1791
|
className: "fractal-file-dropzone__remove",
|
|
@@ -1726,7 +1793,7 @@ function FileDropzone({
|
|
|
1726
1793
|
"aria-label": `Remove ${file.name}`,
|
|
1727
1794
|
disabled,
|
|
1728
1795
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1729
|
-
children: /* @__PURE__ */
|
|
1796
|
+
children: /* @__PURE__ */ jsx27(Close2, { "aria-hidden": "true", size: 14 })
|
|
1730
1797
|
}
|
|
1731
1798
|
)
|
|
1732
1799
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -1740,7 +1807,7 @@ function formatFileSize(bytes) {
|
|
|
1740
1807
|
|
|
1741
1808
|
// src/components/Pagination/Pagination.tsx
|
|
1742
1809
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
1743
|
-
import { jsx as
|
|
1810
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1744
1811
|
function Pagination({
|
|
1745
1812
|
page,
|
|
1746
1813
|
pageSize,
|
|
@@ -1756,10 +1823,10 @@ function Pagination({
|
|
|
1756
1823
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
1757
1824
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
1758
1825
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
1759
|
-
return /* @__PURE__ */
|
|
1760
|
-
/* @__PURE__ */
|
|
1761
|
-
/* @__PURE__ */
|
|
1762
|
-
canChangePageSize && /* @__PURE__ */
|
|
1826
|
+
return /* @__PURE__ */ jsxs23("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
1827
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
1828
|
+
/* @__PURE__ */ jsxs23("div", { className: "fractal-pagination__controls", children: [
|
|
1829
|
+
canChangePageSize && /* @__PURE__ */ jsx28(
|
|
1763
1830
|
Dropdown,
|
|
1764
1831
|
{
|
|
1765
1832
|
align: "right",
|
|
@@ -1776,7 +1843,7 @@ function Pagination({
|
|
|
1776
1843
|
triggerVariant: "tertiary"
|
|
1777
1844
|
}
|
|
1778
1845
|
),
|
|
1779
|
-
/* @__PURE__ */
|
|
1846
|
+
/* @__PURE__ */ jsx28(
|
|
1780
1847
|
"button",
|
|
1781
1848
|
{
|
|
1782
1849
|
className: "fractal-pagination__button",
|
|
@@ -1785,15 +1852,15 @@ function Pagination({
|
|
|
1785
1852
|
title: "Previous page",
|
|
1786
1853
|
disabled: currentPage === 1 || totalItems === 0,
|
|
1787
1854
|
onClick: () => onPageChange(currentPage - 1),
|
|
1788
|
-
children: /* @__PURE__ */
|
|
1855
|
+
children: /* @__PURE__ */ jsx28(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
1789
1856
|
}
|
|
1790
1857
|
),
|
|
1791
|
-
/* @__PURE__ */
|
|
1858
|
+
/* @__PURE__ */ jsxs23("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
1792
1859
|
currentPage,
|
|
1793
1860
|
" of ",
|
|
1794
1861
|
totalPages
|
|
1795
1862
|
] }),
|
|
1796
|
-
/* @__PURE__ */
|
|
1863
|
+
/* @__PURE__ */ jsx28(
|
|
1797
1864
|
"button",
|
|
1798
1865
|
{
|
|
1799
1866
|
className: "fractal-pagination__button",
|
|
@@ -1802,7 +1869,7 @@ function Pagination({
|
|
|
1802
1869
|
title: "Next page",
|
|
1803
1870
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
1804
1871
|
onClick: () => onPageChange(currentPage + 1),
|
|
1805
|
-
children: /* @__PURE__ */
|
|
1872
|
+
children: /* @__PURE__ */ jsx28(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
1806
1873
|
}
|
|
1807
1874
|
)
|
|
1808
1875
|
] })
|
|
@@ -1853,6 +1920,7 @@ export {
|
|
|
1853
1920
|
NumberInput,
|
|
1854
1921
|
Pagination,
|
|
1855
1922
|
PaginationGhost,
|
|
1923
|
+
PasswordInput,
|
|
1856
1924
|
PromptCard,
|
|
1857
1925
|
PromptCardGhost,
|
|
1858
1926
|
PromptGrid,
|