@mirror-physics/fractal-ui 0.2.0-next.43 → 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 +317 -265
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +45 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +311 -260
- 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,
|
|
@@ -832,7 +882,7 @@ Chip.displayName = "Chip";
|
|
|
832
882
|
|
|
833
883
|
// src/components/Checkbox/Checkbox.tsx
|
|
834
884
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
835
|
-
import { jsx as
|
|
885
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
836
886
|
function Checkbox({
|
|
837
887
|
checked,
|
|
838
888
|
indeterminate = false,
|
|
@@ -843,7 +893,7 @@ function Checkbox({
|
|
|
843
893
|
onKeyDown,
|
|
844
894
|
...props
|
|
845
895
|
}) {
|
|
846
|
-
return /* @__PURE__ */
|
|
896
|
+
return /* @__PURE__ */ jsx16(
|
|
847
897
|
"button",
|
|
848
898
|
{
|
|
849
899
|
...props,
|
|
@@ -865,18 +915,18 @@ function Checkbox({
|
|
|
865
915
|
onKeyDown?.(event);
|
|
866
916
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
867
917
|
},
|
|
868
|
-
children: indeterminate ? /* @__PURE__ */
|
|
869
|
-
/* @__PURE__ */
|
|
870
|
-
/* @__PURE__ */
|
|
871
|
-
] }) : checked ? /* @__PURE__ */
|
|
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 })
|
|
872
922
|
}
|
|
873
923
|
);
|
|
874
924
|
}
|
|
875
925
|
|
|
876
926
|
// src/components/SortableTable/SortableTable.tsx
|
|
877
|
-
import { useMemo, useState as
|
|
927
|
+
import { useMemo, useState as useState4 } from "react";
|
|
878
928
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
879
|
-
import { jsx as
|
|
929
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
880
930
|
function SortableTable({
|
|
881
931
|
columns,
|
|
882
932
|
data,
|
|
@@ -895,8 +945,8 @@ function SortableTable({
|
|
|
895
945
|
onRowClick,
|
|
896
946
|
rowAction
|
|
897
947
|
}) {
|
|
898
|
-
const [internalKey, setInternalKey] =
|
|
899
|
-
const [internalDirection, setInternalDirection] =
|
|
948
|
+
const [internalKey, setInternalKey] = useState4(defaultSortKey ?? null);
|
|
949
|
+
const [internalDirection, setInternalDirection] = useState4(defaultSortDirection);
|
|
900
950
|
const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
|
|
901
951
|
const activeKey = isControlled ? controlledKey : internalKey;
|
|
902
952
|
const activeDirection = isControlled ? controlledDirection : internalDirection;
|
|
@@ -952,13 +1002,13 @@ function SortableTable({
|
|
|
952
1002
|
onSortChange?.(nextKey, nextDirection);
|
|
953
1003
|
}
|
|
954
1004
|
};
|
|
955
|
-
return /* @__PURE__ */
|
|
956
|
-
header && /* @__PURE__ */
|
|
957
|
-
sorted.length === 0 ? /* @__PURE__ */
|
|
958
|
-
/* @__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) => {
|
|
959
1009
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
960
1010
|
if (!col.sortable) {
|
|
961
|
-
return /* @__PURE__ */
|
|
1011
|
+
return /* @__PURE__ */ jsx17(
|
|
962
1012
|
"th",
|
|
963
1013
|
{
|
|
964
1014
|
className: "fractal-sortable-table-th",
|
|
@@ -968,12 +1018,12 @@ function SortableTable({
|
|
|
968
1018
|
col.key
|
|
969
1019
|
);
|
|
970
1020
|
}
|
|
971
|
-
return /* @__PURE__ */
|
|
1021
|
+
return /* @__PURE__ */ jsx17(
|
|
972
1022
|
"th",
|
|
973
1023
|
{
|
|
974
1024
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
975
1025
|
style: { width: col.width },
|
|
976
|
-
children: /* @__PURE__ */
|
|
1026
|
+
children: /* @__PURE__ */ jsxs14(
|
|
977
1027
|
"button",
|
|
978
1028
|
{
|
|
979
1029
|
type: "button",
|
|
@@ -984,8 +1034,8 @@ function SortableTable({
|
|
|
984
1034
|
onClick: () => handleSortClick(col.key),
|
|
985
1035
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
986
1036
|
children: [
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__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 }) })
|
|
989
1039
|
]
|
|
990
1040
|
}
|
|
991
1041
|
)
|
|
@@ -993,13 +1043,13 @@ function SortableTable({
|
|
|
993
1043
|
col.key
|
|
994
1044
|
);
|
|
995
1045
|
}) }) }),
|
|
996
|
-
/* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ jsx17("tbody", { children: sorted.map((row, rowIndex) => {
|
|
997
1047
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
998
1048
|
const action = rowAction ? {
|
|
999
1049
|
label: rowAction.label(row, rowIndex),
|
|
1000
1050
|
icon: rowAction.icon(row, rowIndex)
|
|
1001
1051
|
} : null;
|
|
1002
|
-
return /* @__PURE__ */
|
|
1052
|
+
return /* @__PURE__ */ jsx17(
|
|
1003
1053
|
"tr",
|
|
1004
1054
|
{
|
|
1005
1055
|
className: cn(
|
|
@@ -1017,7 +1067,7 @@ function SortableTable({
|
|
|
1017
1067
|
"aria-label": action?.label,
|
|
1018
1068
|
role: onRowClick ? "button" : void 0,
|
|
1019
1069
|
tabIndex: onRowClick ? 0 : void 0,
|
|
1020
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1070
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs14(
|
|
1021
1071
|
"td",
|
|
1022
1072
|
{
|
|
1023
1073
|
className: cn(
|
|
@@ -1027,7 +1077,7 @@ function SortableTable({
|
|
|
1027
1077
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1028
1078
|
children: [
|
|
1029
1079
|
col.render(row, rowIndex),
|
|
1030
|
-
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 }) })
|
|
1031
1081
|
]
|
|
1032
1082
|
},
|
|
1033
1083
|
col.key
|
|
@@ -1041,8 +1091,8 @@ function SortableTable({
|
|
|
1041
1091
|
}
|
|
1042
1092
|
|
|
1043
1093
|
// src/components/Tabs/Tabs.tsx
|
|
1044
|
-
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as
|
|
1045
|
-
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";
|
|
1046
1096
|
function Tabs({
|
|
1047
1097
|
items,
|
|
1048
1098
|
defaultValue,
|
|
@@ -1054,14 +1104,14 @@ function Tabs({
|
|
|
1054
1104
|
variant = "line"
|
|
1055
1105
|
}) {
|
|
1056
1106
|
const reactId = useId2();
|
|
1057
|
-
const [internalValue, setInternalValue] =
|
|
1107
|
+
const [internalValue, setInternalValue] = useState5(
|
|
1058
1108
|
defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
|
|
1059
1109
|
);
|
|
1060
1110
|
const isControlled = controlledValue !== void 0;
|
|
1061
1111
|
const activeId = isControlled ? controlledValue : internalValue;
|
|
1062
1112
|
const tabListRef = useRef4(null);
|
|
1063
1113
|
const tabRefs = useRef4({});
|
|
1064
|
-
const [indicator, setIndicator] =
|
|
1114
|
+
const [indicator, setIndicator] = useState5(null);
|
|
1065
1115
|
useLayoutEffect2(() => {
|
|
1066
1116
|
const updateIndicator = () => {
|
|
1067
1117
|
const activeTab = tabRefs.current[activeId];
|
|
@@ -1113,8 +1163,8 @@ function Tabs({
|
|
|
1113
1163
|
selectTab(nextId2);
|
|
1114
1164
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1115
1165
|
};
|
|
1116
|
-
return /* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1166
|
+
return /* @__PURE__ */ jsxs15("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1167
|
+
/* @__PURE__ */ jsx18(
|
|
1118
1168
|
"div",
|
|
1119
1169
|
{
|
|
1120
1170
|
ref: tabListRef,
|
|
@@ -1127,7 +1177,7 @@ function Tabs({
|
|
|
1127
1177
|
const isActive = item.id === activeId;
|
|
1128
1178
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1129
1179
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1130
|
-
return /* @__PURE__ */
|
|
1180
|
+
return /* @__PURE__ */ jsx18(
|
|
1131
1181
|
"button",
|
|
1132
1182
|
{
|
|
1133
1183
|
ref: (el) => {
|
|
@@ -1158,7 +1208,7 @@ function Tabs({
|
|
|
1158
1208
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1159
1209
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1160
1210
|
const isActive = item.id === activeId;
|
|
1161
|
-
return /* @__PURE__ */
|
|
1211
|
+
return /* @__PURE__ */ jsx18(
|
|
1162
1212
|
"div",
|
|
1163
1213
|
{
|
|
1164
1214
|
id: panelId,
|
|
@@ -1175,14 +1225,14 @@ function Tabs({
|
|
|
1175
1225
|
}
|
|
1176
1226
|
|
|
1177
1227
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1178
|
-
import * as
|
|
1179
|
-
import { jsx as
|
|
1228
|
+
import * as React12 from "react";
|
|
1229
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1180
1230
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1181
|
-
const switcherRef =
|
|
1182
|
-
const buttonRefs =
|
|
1183
|
-
const indicatorMotionReadyRef =
|
|
1231
|
+
const switcherRef = React12.useRef(null);
|
|
1232
|
+
const buttonRefs = React12.useRef([]);
|
|
1233
|
+
const indicatorMotionReadyRef = React12.useRef(false);
|
|
1184
1234
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1185
|
-
|
|
1235
|
+
React12.useLayoutEffect(() => {
|
|
1186
1236
|
const switcher = switcherRef.current;
|
|
1187
1237
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1188
1238
|
let motionFrame = 0;
|
|
@@ -1234,7 +1284,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1234
1284
|
onValueChange(items[nextIndex].value);
|
|
1235
1285
|
}
|
|
1236
1286
|
};
|
|
1237
|
-
return /* @__PURE__ */
|
|
1287
|
+
return /* @__PURE__ */ jsxs16(
|
|
1238
1288
|
"div",
|
|
1239
1289
|
{
|
|
1240
1290
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1242,10 +1292,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1242
1292
|
"aria-label": ariaLabel,
|
|
1243
1293
|
ref: switcherRef,
|
|
1244
1294
|
children: [
|
|
1245
|
-
/* @__PURE__ */
|
|
1295
|
+
/* @__PURE__ */ jsx19("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1246
1296
|
items.map((item, index) => {
|
|
1247
1297
|
const active = item.value === value;
|
|
1248
|
-
return /* @__PURE__ */
|
|
1298
|
+
return /* @__PURE__ */ jsx19(
|
|
1249
1299
|
"button",
|
|
1250
1300
|
{
|
|
1251
1301
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1277,9 +1327,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1277
1327
|
}
|
|
1278
1328
|
|
|
1279
1329
|
// src/components/Disclosure/Disclosure.tsx
|
|
1280
|
-
import { useId as useId3, useState as
|
|
1330
|
+
import { useId as useId3, useState as useState6 } from "react";
|
|
1281
1331
|
import { ChevronRight as ChevronRight2, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1282
|
-
import { jsx as
|
|
1332
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1283
1333
|
function Disclosure({
|
|
1284
1334
|
title,
|
|
1285
1335
|
meta,
|
|
@@ -1294,7 +1344,7 @@ function Disclosure({
|
|
|
1294
1344
|
const reactId = useId3();
|
|
1295
1345
|
const headerId = `${reactId}-header`;
|
|
1296
1346
|
const panelId = `${reactId}-panel`;
|
|
1297
|
-
const [internalOpen, setInternalOpen] =
|
|
1347
|
+
const [internalOpen, setInternalOpen] = useState6(defaultOpen);
|
|
1298
1348
|
const isControlled = controlledOpen !== void 0;
|
|
1299
1349
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1300
1350
|
const toggle = () => {
|
|
@@ -1307,7 +1357,7 @@ function Disclosure({
|
|
|
1307
1357
|
onOpenChange?.(next);
|
|
1308
1358
|
}
|
|
1309
1359
|
};
|
|
1310
|
-
return /* @__PURE__ */
|
|
1360
|
+
return /* @__PURE__ */ jsxs17(
|
|
1311
1361
|
"div",
|
|
1312
1362
|
{
|
|
1313
1363
|
className: cn(
|
|
@@ -1318,7 +1368,7 @@ function Disclosure({
|
|
|
1318
1368
|
className
|
|
1319
1369
|
),
|
|
1320
1370
|
children: [
|
|
1321
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ jsxs17(
|
|
1322
1372
|
"button",
|
|
1323
1373
|
{
|
|
1324
1374
|
type: "button",
|
|
@@ -1329,13 +1379,13 @@ function Disclosure({
|
|
|
1329
1379
|
disabled,
|
|
1330
1380
|
onClick: toggle,
|
|
1331
1381
|
children: [
|
|
1332
|
-
/* @__PURE__ */
|
|
1333
|
-
/* @__PURE__ */
|
|
1334
|
-
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 })
|
|
1335
1385
|
]
|
|
1336
1386
|
}
|
|
1337
1387
|
),
|
|
1338
|
-
/* @__PURE__ */
|
|
1388
|
+
/* @__PURE__ */ jsx20(
|
|
1339
1389
|
"div",
|
|
1340
1390
|
{
|
|
1341
1391
|
id: panelId,
|
|
@@ -1343,7 +1393,7 @@ function Disclosure({
|
|
|
1343
1393
|
"aria-labelledby": headerId,
|
|
1344
1394
|
className: "fractal-disclosure-panel",
|
|
1345
1395
|
hidden: !isOpen,
|
|
1346
|
-
children: /* @__PURE__ */
|
|
1396
|
+
children: /* @__PURE__ */ jsx20("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1347
1397
|
}
|
|
1348
1398
|
)
|
|
1349
1399
|
]
|
|
@@ -1352,18 +1402,18 @@ function Disclosure({
|
|
|
1352
1402
|
}
|
|
1353
1403
|
|
|
1354
1404
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1355
|
-
import { jsx as
|
|
1405
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1356
1406
|
var LATTICE_COUNT = 160;
|
|
1357
1407
|
var WAVE_PERIOD = 80;
|
|
1358
1408
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ jsx21(
|
|
1360
1410
|
"span",
|
|
1361
1411
|
{
|
|
1362
1412
|
"aria-label": label,
|
|
1363
1413
|
className: cn("fractal-lattice-loader", className),
|
|
1364
1414
|
role: "progressbar",
|
|
1365
1415
|
...props,
|
|
1366
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
1416
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx21(
|
|
1367
1417
|
"span",
|
|
1368
1418
|
{
|
|
1369
1419
|
"aria-hidden": "true",
|
|
@@ -1377,10 +1427,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1377
1427
|
}
|
|
1378
1428
|
|
|
1379
1429
|
// src/components/Ghost/Ghost.tsx
|
|
1380
|
-
import { jsx as
|
|
1430
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1381
1431
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1382
1432
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1383
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ jsx22(
|
|
1384
1434
|
"div",
|
|
1385
1435
|
{
|
|
1386
1436
|
"aria-hidden": "true",
|
|
@@ -1396,15 +1446,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1396
1446
|
);
|
|
1397
1447
|
}
|
|
1398
1448
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1399
|
-
return /* @__PURE__ */
|
|
1449
|
+
return /* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1400
1450
|
}
|
|
1401
1451
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1402
|
-
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 });
|
|
1403
1453
|
}
|
|
1404
1454
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1405
|
-
return /* @__PURE__ */
|
|
1406
|
-
showHeader && /* @__PURE__ */
|
|
1407
|
-
/* @__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)) })
|
|
1408
1458
|
] });
|
|
1409
1459
|
}
|
|
1410
1460
|
function DataTableGhost({
|
|
@@ -1418,109 +1468,109 @@ function DataTableGhost({
|
|
|
1418
1468
|
...props
|
|
1419
1469
|
}) {
|
|
1420
1470
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1421
|
-
return /* @__PURE__ */
|
|
1422
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
1423
|
-
/* @__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)) })
|
|
1424
1474
|
] }) });
|
|
1425
1475
|
}
|
|
1426
1476
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1427
|
-
return /* @__PURE__ */
|
|
1477
|
+
return /* @__PURE__ */ jsx22(FormFieldGhost, { className, labelWidth, ...props });
|
|
1428
1478
|
}
|
|
1429
1479
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1430
|
-
return /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsx22(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1431
1481
|
}
|
|
1432
1482
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1433
|
-
return /* @__PURE__ */
|
|
1483
|
+
return /* @__PURE__ */ jsx22(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1434
1484
|
}
|
|
1435
1485
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1436
|
-
return /* @__PURE__ */
|
|
1437
|
-
/* @__PURE__ */
|
|
1438
|
-
/* @__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") })
|
|
1439
1489
|
] });
|
|
1440
1490
|
}
|
|
1441
1491
|
function AlertGhost({ className, ...props }) {
|
|
1442
|
-
return /* @__PURE__ */
|
|
1443
|
-
/* @__PURE__ */
|
|
1444
|
-
/* @__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%" })
|
|
1445
1495
|
] });
|
|
1446
1496
|
}
|
|
1447
1497
|
function CheckboxGhost({ className, ...props }) {
|
|
1448
|
-
return /* @__PURE__ */
|
|
1449
|
-
/* @__PURE__ */
|
|
1450
|
-
/* @__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%" })
|
|
1451
1501
|
] });
|
|
1452
1502
|
}
|
|
1453
1503
|
var ToggleGhost = CheckboxGhost;
|
|
1454
1504
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1455
|
-
return /* @__PURE__ */
|
|
1505
|
+
return /* @__PURE__ */ jsx22(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1456
1506
|
}
|
|
1457
1507
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1458
|
-
return /* @__PURE__ */
|
|
1508
|
+
return /* @__PURE__ */ jsx22(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1459
1509
|
}
|
|
1460
1510
|
var TextButtonGhost = LinkGhost;
|
|
1461
1511
|
function DropdownGhost({ className, ...props }) {
|
|
1462
|
-
return /* @__PURE__ */
|
|
1463
|
-
/* @__PURE__ */
|
|
1464
|
-
/* @__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" })
|
|
1465
1515
|
] });
|
|
1466
1516
|
}
|
|
1467
1517
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1468
|
-
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)) });
|
|
1469
1519
|
}
|
|
1470
1520
|
var TabsGhost = ContentSwitcherGhost;
|
|
1471
1521
|
function DisclosureGhost({ className, ...props }) {
|
|
1472
|
-
return /* @__PURE__ */
|
|
1473
|
-
/* @__PURE__ */
|
|
1474
|
-
/* @__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%" })
|
|
1475
1525
|
] });
|
|
1476
1526
|
}
|
|
1477
1527
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1478
|
-
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)) });
|
|
1479
1529
|
}
|
|
1480
1530
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1481
|
-
return /* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1484
|
-
/* @__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%" })
|
|
1485
1535
|
] });
|
|
1486
1536
|
}
|
|
1487
1537
|
function PromptCardGhost({ className, ...props }) {
|
|
1488
|
-
return /* @__PURE__ */
|
|
1538
|
+
return /* @__PURE__ */ jsx22(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1489
1539
|
}
|
|
1490
1540
|
function SortableTableGhost(props) {
|
|
1491
|
-
return /* @__PURE__ */
|
|
1541
|
+
return /* @__PURE__ */ jsx22(DataTableGhost, { ...props });
|
|
1492
1542
|
}
|
|
1493
1543
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1494
|
-
return /* @__PURE__ */
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
/* @__PURE__ */
|
|
1497
|
-
/* @__PURE__ */
|
|
1498
|
-
/* @__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]}%` })
|
|
1499
1549
|
] }, index)) })
|
|
1500
1550
|
] });
|
|
1501
1551
|
}
|
|
1502
1552
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1503
|
-
return /* @__PURE__ */
|
|
1553
|
+
return /* @__PURE__ */ jsx22(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1504
1554
|
}
|
|
1505
1555
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1506
|
-
return /* @__PURE__ */
|
|
1556
|
+
return /* @__PURE__ */ jsx22(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1507
1557
|
}
|
|
1508
1558
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1509
|
-
return /* @__PURE__ */
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
/* @__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" })
|
|
1513
1563
|
] }),
|
|
1514
|
-
title && /* @__PURE__ */
|
|
1515
|
-
/* @__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)) })
|
|
1516
1566
|
] });
|
|
1517
1567
|
}
|
|
1518
1568
|
|
|
1519
1569
|
// src/components/Sidebar/Sidebar.tsx
|
|
1520
|
-
import * as
|
|
1521
|
-
import { Fragment as Fragment3, jsx as
|
|
1522
|
-
var Sidebar =
|
|
1523
|
-
({ 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(
|
|
1524
1574
|
"aside",
|
|
1525
1575
|
{
|
|
1526
1576
|
ref,
|
|
@@ -1532,12 +1582,12 @@ var Sidebar = React12.forwardRef(
|
|
|
1532
1582
|
)
|
|
1533
1583
|
);
|
|
1534
1584
|
Sidebar.displayName = "Sidebar";
|
|
1535
|
-
var SidebarHeader =
|
|
1536
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1585
|
+
var SidebarHeader = React13.forwardRef(
|
|
1586
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1537
1587
|
);
|
|
1538
1588
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1539
|
-
var SidebarBrand =
|
|
1540
|
-
({ 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 })
|
|
1541
1591
|
);
|
|
1542
1592
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1543
1593
|
function SidebarAccountMenu({
|
|
@@ -1548,7 +1598,7 @@ function SidebarAccountMenu({
|
|
|
1548
1598
|
icon,
|
|
1549
1599
|
className
|
|
1550
1600
|
}) {
|
|
1551
|
-
return /* @__PURE__ */
|
|
1601
|
+
return /* @__PURE__ */ jsx23(
|
|
1552
1602
|
Dropdown,
|
|
1553
1603
|
{
|
|
1554
1604
|
align: "left",
|
|
@@ -1558,25 +1608,25 @@ function SidebarAccountMenu({
|
|
|
1558
1608
|
panelClassName: "fractal-sidebar__account-panel",
|
|
1559
1609
|
selectedValue: "",
|
|
1560
1610
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
1561
|
-
triggerContent: /* @__PURE__ */
|
|
1562
|
-
icon && /* @__PURE__ */
|
|
1563
|
-
/* @__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 })
|
|
1564
1614
|
] }),
|
|
1565
1615
|
triggerLabel,
|
|
1566
1616
|
triggerVariant: "tertiary"
|
|
1567
1617
|
}
|
|
1568
1618
|
);
|
|
1569
1619
|
}
|
|
1570
|
-
var SidebarNav =
|
|
1571
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1620
|
+
var SidebarNav = React13.forwardRef(
|
|
1621
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
1572
1622
|
);
|
|
1573
1623
|
SidebarNav.displayName = "SidebarNav";
|
|
1574
|
-
var SidebarSection =
|
|
1575
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1624
|
+
var SidebarSection = React13.forwardRef(
|
|
1625
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
1576
1626
|
);
|
|
1577
1627
|
SidebarSection.displayName = "SidebarSection";
|
|
1578
|
-
var SidebarNavItem =
|
|
1579
|
-
({ 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(
|
|
1580
1630
|
"button",
|
|
1581
1631
|
{
|
|
1582
1632
|
ref,
|
|
@@ -1586,28 +1636,28 @@ var SidebarNavItem = React12.forwardRef(
|
|
|
1586
1636
|
"aria-current": active ? "page" : void 0,
|
|
1587
1637
|
...props,
|
|
1588
1638
|
children: [
|
|
1589
|
-
icon && /* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1591
|
-
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 })
|
|
1592
1642
|
]
|
|
1593
1643
|
}
|
|
1594
1644
|
)
|
|
1595
1645
|
);
|
|
1596
1646
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
1597
|
-
var SidebarFooter =
|
|
1598
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1647
|
+
var SidebarFooter = React13.forwardRef(
|
|
1648
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1599
1649
|
);
|
|
1600
1650
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1601
1651
|
|
|
1602
1652
|
// src/components/SidePanel/SidePanel.tsx
|
|
1603
1653
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1604
1654
|
import { Close } from "@mirror-physics/fractal-icons";
|
|
1605
|
-
import { jsx as
|
|
1655
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1606
1656
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
1607
1657
|
useEscapeDismiss(80, onClose, open);
|
|
1608
1658
|
if (!open) return null;
|
|
1609
1659
|
return createPortal2(
|
|
1610
|
-
/* @__PURE__ */
|
|
1660
|
+
/* @__PURE__ */ jsx24("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs20(
|
|
1611
1661
|
"aside",
|
|
1612
1662
|
{
|
|
1613
1663
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -1616,15 +1666,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1616
1666
|
role: "dialog",
|
|
1617
1667
|
onMouseDown: (event) => event.stopPropagation(),
|
|
1618
1668
|
children: [
|
|
1619
|
-
/* @__PURE__ */
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
1622
|
-
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 })
|
|
1623
1673
|
] }),
|
|
1624
|
-
/* @__PURE__ */
|
|
1674
|
+
/* @__PURE__ */ jsx24("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx24(Close, { size: 18 }) })
|
|
1625
1675
|
] }),
|
|
1626
|
-
/* @__PURE__ */
|
|
1627
|
-
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 })
|
|
1628
1678
|
]
|
|
1629
1679
|
}
|
|
1630
1680
|
) }),
|
|
@@ -1633,18 +1683,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1633
1683
|
}
|
|
1634
1684
|
|
|
1635
1685
|
// src/components/Textarea/Textarea.tsx
|
|
1636
|
-
import * as
|
|
1637
|
-
import { jsx as
|
|
1638
|
-
var Textarea =
|
|
1639
|
-
({ 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 })
|
|
1640
1690
|
);
|
|
1641
1691
|
Textarea.displayName = "Textarea";
|
|
1642
1692
|
|
|
1643
1693
|
// src/components/TextButton/TextButton.tsx
|
|
1644
|
-
import * as
|
|
1645
|
-
import { jsx as
|
|
1646
|
-
var TextButton =
|
|
1647
|
-
({ 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(
|
|
1648
1698
|
"button",
|
|
1649
1699
|
{
|
|
1650
1700
|
ref,
|
|
@@ -1652,9 +1702,9 @@ var TextButton = React14.forwardRef(
|
|
|
1652
1702
|
type: "button",
|
|
1653
1703
|
...props,
|
|
1654
1704
|
children: [
|
|
1655
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
1656
|
-
/* @__PURE__ */
|
|
1657
|
-
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 })
|
|
1658
1708
|
]
|
|
1659
1709
|
}
|
|
1660
1710
|
)
|
|
@@ -1662,9 +1712,9 @@ var TextButton = React14.forwardRef(
|
|
|
1662
1712
|
TextButton.displayName = "TextButton";
|
|
1663
1713
|
|
|
1664
1714
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
1665
|
-
import * as
|
|
1715
|
+
import * as React16 from "react";
|
|
1666
1716
|
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
1667
|
-
import { jsx as
|
|
1717
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1668
1718
|
function FileDropzone({
|
|
1669
1719
|
files,
|
|
1670
1720
|
onFilesChange,
|
|
@@ -1675,17 +1725,17 @@ function FileDropzone({
|
|
|
1675
1725
|
description = "Files stay attached to this record.",
|
|
1676
1726
|
className
|
|
1677
1727
|
}) {
|
|
1678
|
-
const inputId =
|
|
1679
|
-
const inputRef =
|
|
1680
|
-
const [isDragging, setIsDragging] =
|
|
1728
|
+
const inputId = React16.useId();
|
|
1729
|
+
const inputRef = React16.useRef(null);
|
|
1730
|
+
const [isDragging, setIsDragging] = React16.useState(false);
|
|
1681
1731
|
const addFiles = (nextFiles) => {
|
|
1682
1732
|
if (disabled) return;
|
|
1683
1733
|
const additions = Array.from(nextFiles);
|
|
1684
1734
|
if (additions.length === 0) return;
|
|
1685
1735
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1686
1736
|
};
|
|
1687
|
-
return /* @__PURE__ */
|
|
1688
|
-
/* @__PURE__ */
|
|
1737
|
+
return /* @__PURE__ */ jsxs22("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1738
|
+
/* @__PURE__ */ jsx27(
|
|
1689
1739
|
"input",
|
|
1690
1740
|
{
|
|
1691
1741
|
ref: inputRef,
|
|
@@ -1701,7 +1751,7 @@ function FileDropzone({
|
|
|
1701
1751
|
}
|
|
1702
1752
|
}
|
|
1703
1753
|
),
|
|
1704
|
-
/* @__PURE__ */
|
|
1754
|
+
/* @__PURE__ */ jsxs22(
|
|
1705
1755
|
"button",
|
|
1706
1756
|
{
|
|
1707
1757
|
className: "fractal-file-dropzone__target",
|
|
@@ -1724,18 +1774,18 @@ function FileDropzone({
|
|
|
1724
1774
|
addFiles(event.dataTransfer.files);
|
|
1725
1775
|
},
|
|
1726
1776
|
children: [
|
|
1727
|
-
/* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
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 })
|
|
1731
1781
|
] })
|
|
1732
1782
|
]
|
|
1733
1783
|
}
|
|
1734
1784
|
),
|
|
1735
|
-
files.length > 0 && /* @__PURE__ */
|
|
1736
|
-
/* @__PURE__ */
|
|
1737
|
-
/* @__PURE__ */
|
|
1738
|
-
/* @__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(
|
|
1739
1789
|
"button",
|
|
1740
1790
|
{
|
|
1741
1791
|
className: "fractal-file-dropzone__remove",
|
|
@@ -1743,7 +1793,7 @@ function FileDropzone({
|
|
|
1743
1793
|
"aria-label": `Remove ${file.name}`,
|
|
1744
1794
|
disabled,
|
|
1745
1795
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1746
|
-
children: /* @__PURE__ */
|
|
1796
|
+
children: /* @__PURE__ */ jsx27(Close2, { "aria-hidden": "true", size: 14 })
|
|
1747
1797
|
}
|
|
1748
1798
|
)
|
|
1749
1799
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -1757,7 +1807,7 @@ function formatFileSize(bytes) {
|
|
|
1757
1807
|
|
|
1758
1808
|
// src/components/Pagination/Pagination.tsx
|
|
1759
1809
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
1760
|
-
import { jsx as
|
|
1810
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1761
1811
|
function Pagination({
|
|
1762
1812
|
page,
|
|
1763
1813
|
pageSize,
|
|
@@ -1773,10 +1823,10 @@ function Pagination({
|
|
|
1773
1823
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
1774
1824
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
1775
1825
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
1776
|
-
return /* @__PURE__ */
|
|
1777
|
-
/* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
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(
|
|
1780
1830
|
Dropdown,
|
|
1781
1831
|
{
|
|
1782
1832
|
align: "right",
|
|
@@ -1793,7 +1843,7 @@ function Pagination({
|
|
|
1793
1843
|
triggerVariant: "tertiary"
|
|
1794
1844
|
}
|
|
1795
1845
|
),
|
|
1796
|
-
/* @__PURE__ */
|
|
1846
|
+
/* @__PURE__ */ jsx28(
|
|
1797
1847
|
"button",
|
|
1798
1848
|
{
|
|
1799
1849
|
className: "fractal-pagination__button",
|
|
@@ -1802,15 +1852,15 @@ function Pagination({
|
|
|
1802
1852
|
title: "Previous page",
|
|
1803
1853
|
disabled: currentPage === 1 || totalItems === 0,
|
|
1804
1854
|
onClick: () => onPageChange(currentPage - 1),
|
|
1805
|
-
children: /* @__PURE__ */
|
|
1855
|
+
children: /* @__PURE__ */ jsx28(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
1806
1856
|
}
|
|
1807
1857
|
),
|
|
1808
|
-
/* @__PURE__ */
|
|
1858
|
+
/* @__PURE__ */ jsxs23("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
1809
1859
|
currentPage,
|
|
1810
1860
|
" of ",
|
|
1811
1861
|
totalPages
|
|
1812
1862
|
] }),
|
|
1813
|
-
/* @__PURE__ */
|
|
1863
|
+
/* @__PURE__ */ jsx28(
|
|
1814
1864
|
"button",
|
|
1815
1865
|
{
|
|
1816
1866
|
className: "fractal-pagination__button",
|
|
@@ -1819,7 +1869,7 @@ function Pagination({
|
|
|
1819
1869
|
title: "Next page",
|
|
1820
1870
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
1821
1871
|
onClick: () => onPageChange(currentPage + 1),
|
|
1822
|
-
children: /* @__PURE__ */
|
|
1872
|
+
children: /* @__PURE__ */ jsx28(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
1823
1873
|
}
|
|
1824
1874
|
)
|
|
1825
1875
|
] })
|
|
@@ -1870,6 +1920,7 @@ export {
|
|
|
1870
1920
|
NumberInput,
|
|
1871
1921
|
Pagination,
|
|
1872
1922
|
PaginationGhost,
|
|
1923
|
+
PasswordInput,
|
|
1873
1924
|
PromptCard,
|
|
1874
1925
|
PromptCardGhost,
|
|
1875
1926
|
PromptGrid,
|