@mirror-physics/fractal-ui 0.2.0-next.86 → 0.2.0-next.88
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/README.md +1 -1
- package/dist/index.cjs +338 -324
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +51 -6
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +263 -249
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -508,13 +508,21 @@ PromptGrid.displayName = "PromptGrid";
|
|
|
508
508
|
|
|
509
509
|
// src/components/Input/Input.tsx
|
|
510
510
|
import * as React3 from "react";
|
|
511
|
-
|
|
511
|
+
|
|
512
|
+
// src/utils/FloatingFieldBorder.tsx
|
|
513
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
514
|
+
function FloatingFieldBorder({ label }) {
|
|
515
|
+
return /* @__PURE__ */ jsx5("fieldset", { className: "fractal-floating-field__border", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("legend", { children: /* @__PURE__ */ jsx5("span", { children: label }) }) });
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
// src/components/Input/Input.tsx
|
|
519
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
512
520
|
var Input = React3.forwardRef(
|
|
513
521
|
({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
|
|
514
522
|
const generatedId = React3.useId();
|
|
515
523
|
const fieldId = id ?? generatedId;
|
|
516
524
|
const floatingLabel = type === "search" ? void 0 : fieldLabel;
|
|
517
|
-
const input = /* @__PURE__ */
|
|
525
|
+
const input = /* @__PURE__ */ jsx6(
|
|
518
526
|
"input",
|
|
519
527
|
{
|
|
520
528
|
type,
|
|
@@ -536,7 +544,8 @@ var Input = React3.forwardRef(
|
|
|
536
544
|
"data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
|
|
537
545
|
children: [
|
|
538
546
|
input,
|
|
539
|
-
/* @__PURE__ */
|
|
547
|
+
/* @__PURE__ */ jsx6(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
548
|
+
/* @__PURE__ */ jsx6("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
540
549
|
]
|
|
541
550
|
}
|
|
542
551
|
);
|
|
@@ -547,7 +556,7 @@ Input.displayName = "Input";
|
|
|
547
556
|
// src/components/TableSearch/TableSearch.tsx
|
|
548
557
|
import * as React4 from "react";
|
|
549
558
|
import { MagnifyingGlass, MagnifyingGlassLines } from "@mirror-physics/fractal-icons";
|
|
550
|
-
import { jsx as
|
|
559
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
551
560
|
var TableSearch = React4.forwardRef(
|
|
552
561
|
({
|
|
553
562
|
searchType = "text",
|
|
@@ -567,8 +576,8 @@ var TableSearch = React4.forwardRef(
|
|
|
567
576
|
"data-search-type": searchType,
|
|
568
577
|
"data-control-size": controlSize,
|
|
569
578
|
children: [
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
/* @__PURE__ */
|
|
579
|
+
/* @__PURE__ */ jsx7(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
|
|
580
|
+
/* @__PURE__ */ jsx7(
|
|
572
581
|
Input,
|
|
573
582
|
{
|
|
574
583
|
...props,
|
|
@@ -590,7 +599,7 @@ TableSearch.displayName = "TableSearch";
|
|
|
590
599
|
// src/components/NumberInput/NumberInput.tsx
|
|
591
600
|
import * as React5 from "react";
|
|
592
601
|
import { Minus, Plus } from "@mirror-physics/fractal-icons";
|
|
593
|
-
import { jsx as
|
|
602
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
594
603
|
function NumberInput({
|
|
595
604
|
unit,
|
|
596
605
|
controlSize = "lg",
|
|
@@ -618,7 +627,7 @@ function NumberInput({
|
|
|
618
627
|
input.focus();
|
|
619
628
|
};
|
|
620
629
|
return /* @__PURE__ */ jsxs7("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
621
|
-
/* @__PURE__ */
|
|
630
|
+
/* @__PURE__ */ jsx8(
|
|
622
631
|
Input,
|
|
623
632
|
{
|
|
624
633
|
ref: inputRef,
|
|
@@ -633,7 +642,7 @@ function NumberInput({
|
|
|
633
642
|
...props
|
|
634
643
|
}
|
|
635
644
|
),
|
|
636
|
-
unit && /* @__PURE__ */
|
|
645
|
+
unit && /* @__PURE__ */ jsx8(
|
|
637
646
|
"span",
|
|
638
647
|
{
|
|
639
648
|
className: "fractal-number-input-unit",
|
|
@@ -643,7 +652,7 @@ function NumberInput({
|
|
|
643
652
|
}
|
|
644
653
|
),
|
|
645
654
|
/* @__PURE__ */ jsxs7("div", { className: "fractal-number-input-controls", children: [
|
|
646
|
-
/* @__PURE__ */
|
|
655
|
+
/* @__PURE__ */ jsx8(
|
|
647
656
|
"button",
|
|
648
657
|
{
|
|
649
658
|
type: "button",
|
|
@@ -651,10 +660,10 @@ function NumberInput({
|
|
|
651
660
|
"aria-label": `Decrease ${controlLabel}`,
|
|
652
661
|
disabled: decrementDisabled,
|
|
653
662
|
onClick: () => changeByStep(-1),
|
|
654
|
-
children: /* @__PURE__ */
|
|
663
|
+
children: /* @__PURE__ */ jsx8(Minus, { "aria-hidden": "true", size: 16 })
|
|
655
664
|
}
|
|
656
665
|
),
|
|
657
|
-
/* @__PURE__ */
|
|
666
|
+
/* @__PURE__ */ jsx8(
|
|
658
667
|
"button",
|
|
659
668
|
{
|
|
660
669
|
type: "button",
|
|
@@ -662,7 +671,7 @@ function NumberInput({
|
|
|
662
671
|
"aria-label": `Increase ${controlLabel}`,
|
|
663
672
|
disabled: incrementDisabled,
|
|
664
673
|
onClick: () => changeByStep(1),
|
|
665
|
-
children: /* @__PURE__ */
|
|
674
|
+
children: /* @__PURE__ */ jsx8(Plus, { "aria-hidden": "true", size: 16 })
|
|
666
675
|
}
|
|
667
676
|
)
|
|
668
677
|
] })
|
|
@@ -670,7 +679,7 @@ function NumberInput({
|
|
|
670
679
|
}
|
|
671
680
|
|
|
672
681
|
// src/components/Slider/Slider.tsx
|
|
673
|
-
import { jsx as
|
|
682
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
674
683
|
function Slider(props) {
|
|
675
684
|
const {
|
|
676
685
|
min = 0,
|
|
@@ -724,8 +733,8 @@ function Slider(props) {
|
|
|
724
733
|
"data-knobs": knobs,
|
|
725
734
|
children: [
|
|
726
735
|
showValues && /* @__PURE__ */ jsxs8("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
knobs === 2 && /* @__PURE__ */
|
|
736
|
+
/* @__PURE__ */ jsx9("output", { children: formatValue(firstValue) }),
|
|
737
|
+
knobs === 2 && /* @__PURE__ */ jsx9("output", { children: formatValue(secondValue) })
|
|
729
738
|
] }),
|
|
730
739
|
/* @__PURE__ */ jsxs8(
|
|
731
740
|
"div",
|
|
@@ -736,9 +745,9 @@ function Slider(props) {
|
|
|
736
745
|
"--fractal-slider-selection-end": `${selectionEndPercent}%`
|
|
737
746
|
},
|
|
738
747
|
children: [
|
|
739
|
-
/* @__PURE__ */
|
|
740
|
-
/* @__PURE__ */
|
|
741
|
-
/* @__PURE__ */
|
|
748
|
+
/* @__PURE__ */ jsx9("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
|
|
749
|
+
/* @__PURE__ */ jsx9("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
|
|
750
|
+
/* @__PURE__ */ jsx9(
|
|
742
751
|
"input",
|
|
743
752
|
{
|
|
744
753
|
"aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
|
|
@@ -762,7 +771,7 @@ function Slider(props) {
|
|
|
762
771
|
value: firstValue
|
|
763
772
|
}
|
|
764
773
|
),
|
|
765
|
-
knobs === 2 && /* @__PURE__ */
|
|
774
|
+
knobs === 2 && /* @__PURE__ */ jsx9(
|
|
766
775
|
"input",
|
|
767
776
|
{
|
|
768
777
|
"aria-label": props.upperAriaLabel ?? "Upper value",
|
|
@@ -798,7 +807,7 @@ function clamp(value, minimum, maximum) {
|
|
|
798
807
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
799
808
|
import * as React6 from "react";
|
|
800
809
|
import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
|
|
801
|
-
import { jsx as
|
|
810
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
802
811
|
var PasswordInput = React6.forwardRef(
|
|
803
812
|
({
|
|
804
813
|
className,
|
|
@@ -817,7 +826,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
817
826
|
"data-control-size": controlSize,
|
|
818
827
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
819
828
|
children: [
|
|
820
|
-
/* @__PURE__ */
|
|
829
|
+
/* @__PURE__ */ jsx10(
|
|
821
830
|
Input,
|
|
822
831
|
{
|
|
823
832
|
...props,
|
|
@@ -828,7 +837,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
828
837
|
type: passwordVisible ? "text" : "password"
|
|
829
838
|
}
|
|
830
839
|
),
|
|
831
|
-
/* @__PURE__ */
|
|
840
|
+
/* @__PURE__ */ jsx10(
|
|
832
841
|
"button",
|
|
833
842
|
{
|
|
834
843
|
type: "button",
|
|
@@ -838,7 +847,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
838
847
|
disabled,
|
|
839
848
|
title: toggleLabel,
|
|
840
849
|
onClick: () => setPasswordVisible((visible) => !visible),
|
|
841
|
-
children: passwordVisible ? /* @__PURE__ */
|
|
850
|
+
children: passwordVisible ? /* @__PURE__ */ jsx10(EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx10(Eye, { "aria-hidden": "true", size: 18 })
|
|
842
851
|
}
|
|
843
852
|
)
|
|
844
853
|
]
|
|
@@ -850,9 +859,9 @@ PasswordInput.displayName = "PasswordInput";
|
|
|
850
859
|
|
|
851
860
|
// src/components/Label/Label.tsx
|
|
852
861
|
import * as React7 from "react";
|
|
853
|
-
import { jsx as
|
|
862
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
854
863
|
var Label = React7.forwardRef(
|
|
855
|
-
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */
|
|
864
|
+
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
856
865
|
"label",
|
|
857
866
|
{
|
|
858
867
|
ref,
|
|
@@ -867,7 +876,7 @@ Label.displayName = "Label";
|
|
|
867
876
|
// src/components/Alert/Alert.tsx
|
|
868
877
|
import * as React8 from "react";
|
|
869
878
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
870
|
-
import { jsx as
|
|
879
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
871
880
|
var defaultIcons = {
|
|
872
881
|
default: CircleInfo,
|
|
873
882
|
info: CircleInfo,
|
|
@@ -886,8 +895,8 @@ var Alert = React8.forwardRef(
|
|
|
886
895
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
887
896
|
...props,
|
|
888
897
|
children: [
|
|
889
|
-
/* @__PURE__ */
|
|
890
|
-
/* @__PURE__ */
|
|
898
|
+
/* @__PURE__ */ jsx12("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) }),
|
|
899
|
+
/* @__PURE__ */ jsx12("div", { className: "fractal-alert-content", children })
|
|
891
900
|
]
|
|
892
901
|
}
|
|
893
902
|
);
|
|
@@ -895,11 +904,11 @@ var Alert = React8.forwardRef(
|
|
|
895
904
|
);
|
|
896
905
|
Alert.displayName = "Alert";
|
|
897
906
|
var AlertTitle = React8.forwardRef(
|
|
898
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
907
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx12("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
899
908
|
);
|
|
900
909
|
AlertTitle.displayName = "AlertTitle";
|
|
901
910
|
var AlertDescription = React8.forwardRef(
|
|
902
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
911
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
903
912
|
);
|
|
904
913
|
AlertDescription.displayName = "AlertDescription";
|
|
905
914
|
|
|
@@ -907,7 +916,7 @@ AlertDescription.displayName = "AlertDescription";
|
|
|
907
916
|
import * as React9 from "react";
|
|
908
917
|
import { createPortal } from "react-dom";
|
|
909
918
|
import { CircleCheck as CircleCheck2, CircleClose as CircleClose2, CircleInfo as CircleInfo2, Close, Warning as Warning2 } from "@mirror-physics/fractal-icons";
|
|
910
|
-
import { jsx as
|
|
919
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
911
920
|
var defaultIcons2 = {
|
|
912
921
|
default: CircleInfo2,
|
|
913
922
|
info: CircleInfo2,
|
|
@@ -970,17 +979,17 @@ var Toast = React9.forwardRef(function Toast2({
|
|
|
970
979
|
},
|
|
971
980
|
...props,
|
|
972
981
|
children: [
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
action && /* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ jsx13(DefaultIcon, { size: 18 }) }),
|
|
983
|
+
/* @__PURE__ */ jsx13("div", { className: "fractal-toast__content", children }),
|
|
984
|
+
action && /* @__PURE__ */ jsx13("div", { className: "fractal-toast__action", children: action }),
|
|
985
|
+
/* @__PURE__ */ jsx13(
|
|
977
986
|
"button",
|
|
978
987
|
{
|
|
979
988
|
"aria-label": dismissLabel,
|
|
980
989
|
className: "fractal-toast__dismiss",
|
|
981
990
|
onClick: onDismiss,
|
|
982
991
|
type: "button",
|
|
983
|
-
children: /* @__PURE__ */
|
|
992
|
+
children: /* @__PURE__ */ jsx13(Close, { "aria-hidden": "true", size: 14 })
|
|
984
993
|
}
|
|
985
994
|
)
|
|
986
995
|
]
|
|
@@ -988,7 +997,7 @@ var Toast = React9.forwardRef(function Toast2({
|
|
|
988
997
|
);
|
|
989
998
|
});
|
|
990
999
|
var ToastViewport = React9.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
|
|
991
|
-
const viewport = /* @__PURE__ */
|
|
1000
|
+
const viewport = /* @__PURE__ */ jsx13(
|
|
992
1001
|
"div",
|
|
993
1002
|
{
|
|
994
1003
|
ref,
|
|
@@ -1003,7 +1012,7 @@ var ToastViewport = React9.forwardRef(function ToastViewport2({ children, classN
|
|
|
1003
1012
|
});
|
|
1004
1013
|
|
|
1005
1014
|
// src/components/Toggle/Toggle.tsx
|
|
1006
|
-
import { jsx as
|
|
1015
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1007
1016
|
function Toggle({ checked, onChange, label, className }) {
|
|
1008
1017
|
return /* @__PURE__ */ jsxs12(
|
|
1009
1018
|
"button",
|
|
@@ -1014,8 +1023,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
1014
1023
|
className: cn("fractal-toggle", className),
|
|
1015
1024
|
onClick: () => onChange(!checked),
|
|
1016
1025
|
children: [
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
label && /* @__PURE__ */
|
|
1026
|
+
/* @__PURE__ */ jsx14("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx14("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
1027
|
+
label && /* @__PURE__ */ jsx14("span", { className: "fractal-toggle-label", children: label })
|
|
1019
1028
|
]
|
|
1020
1029
|
}
|
|
1021
1030
|
);
|
|
@@ -1077,7 +1086,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
1077
1086
|
|
|
1078
1087
|
// src/components/UILoader/UILoader.tsx
|
|
1079
1088
|
import { useId as useId2 } from "react";
|
|
1080
|
-
import { jsx as
|
|
1089
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1081
1090
|
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";
|
|
1082
1091
|
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";
|
|
1083
1092
|
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";
|
|
@@ -1086,7 +1095,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1086
1095
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
1087
1096
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
1088
1097
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
1089
|
-
return /* @__PURE__ */
|
|
1098
|
+
return /* @__PURE__ */ jsx15(
|
|
1090
1099
|
"span",
|
|
1091
1100
|
{
|
|
1092
1101
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -1097,32 +1106,32 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1097
1106
|
children: /* @__PURE__ */ jsxs13("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1098
1107
|
/* @__PURE__ */ jsxs13("defs", { children: [
|
|
1099
1108
|
/* @__PURE__ */ jsxs13("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1100
|
-
/* @__PURE__ */
|
|
1101
|
-
/* @__PURE__ */
|
|
1109
|
+
/* @__PURE__ */ jsx15("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1110
|
+
/* @__PURE__ */ jsx15("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
1102
1111
|
] }),
|
|
1103
1112
|
/* @__PURE__ */ jsxs13("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1104
|
-
/* @__PURE__ */
|
|
1105
|
-
/* @__PURE__ */
|
|
1106
|
-
/* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1114
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1115
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
1107
1116
|
] }),
|
|
1108
1117
|
/* @__PURE__ */ jsxs13("clipPath", { id: clipId, children: [
|
|
1109
|
-
/* @__PURE__ */
|
|
1110
|
-
/* @__PURE__ */
|
|
1111
|
-
/* @__PURE__ */
|
|
1118
|
+
/* @__PURE__ */ jsx15("path", { d: LEFT }),
|
|
1119
|
+
/* @__PURE__ */ jsx15("path", { d: CENTER }),
|
|
1120
|
+
/* @__PURE__ */ jsx15("path", { d: RIGHT })
|
|
1112
1121
|
] })
|
|
1113
1122
|
] }),
|
|
1114
|
-
/* @__PURE__ */
|
|
1115
|
-
/* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1123
|
+
/* @__PURE__ */ jsx15("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1124
|
+
/* @__PURE__ */ jsx15("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1125
|
+
/* @__PURE__ */ jsx15("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1126
|
+
/* @__PURE__ */ jsx15("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx15("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx15("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
1118
1127
|
] })
|
|
1119
1128
|
}
|
|
1120
1129
|
);
|
|
1121
1130
|
}
|
|
1122
1131
|
|
|
1123
1132
|
// src/components/Modal/Modal.tsx
|
|
1124
|
-
import { jsx as
|
|
1125
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1133
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1134
|
+
var CloseIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1126
1135
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
1127
1136
|
const [bodyScrolled, setBodyScrolled] = React10.useState(false);
|
|
1128
1137
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
@@ -1133,7 +1142,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1133
1142
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
1134
1143
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
1135
1144
|
return createPortal2(
|
|
1136
|
-
/* @__PURE__ */
|
|
1145
|
+
/* @__PURE__ */ jsx16("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs14(
|
|
1137
1146
|
"div",
|
|
1138
1147
|
{
|
|
1139
1148
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
@@ -1148,12 +1157,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1148
1157
|
scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
|
|
1149
1158
|
),
|
|
1150
1159
|
children: [
|
|
1151
|
-
/* @__PURE__ */
|
|
1152
|
-
!noClose && /* @__PURE__ */
|
|
1160
|
+
/* @__PURE__ */ jsx16("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1161
|
+
!noClose && /* @__PURE__ */ jsx16("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx16(CloseIcon, {}) })
|
|
1153
1162
|
]
|
|
1154
1163
|
}
|
|
1155
1164
|
),
|
|
1156
|
-
/* @__PURE__ */
|
|
1165
|
+
/* @__PURE__ */ jsx16(
|
|
1157
1166
|
"div",
|
|
1158
1167
|
{
|
|
1159
1168
|
"aria-busy": loading || void 0,
|
|
@@ -1164,10 +1173,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1164
1173
|
scrollable && "fractal-modal-body--scrollable"
|
|
1165
1174
|
),
|
|
1166
1175
|
onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
|
|
1167
|
-
children: loading ? /* @__PURE__ */
|
|
1176
|
+
children: loading ? /* @__PURE__ */ jsx16(UILoader, { label: loadingLabel }) : children
|
|
1168
1177
|
}
|
|
1169
1178
|
),
|
|
1170
|
-
footer && /* @__PURE__ */
|
|
1179
|
+
footer && /* @__PURE__ */ jsx16("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1171
1180
|
]
|
|
1172
1181
|
}
|
|
1173
1182
|
) }),
|
|
@@ -1179,7 +1188,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1179
1188
|
import { useId as useId3, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
|
|
1180
1189
|
import { createPortal as createPortal3 } from "react-dom";
|
|
1181
1190
|
import { Ellipsis } from "@mirror-physics/fractal-icons";
|
|
1182
|
-
import { jsx as
|
|
1191
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1183
1192
|
function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
1184
1193
|
const id = useId3();
|
|
1185
1194
|
const trigger = useRef5(null);
|
|
@@ -1231,14 +1240,14 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1231
1240
|
}, [disabled, items.length]);
|
|
1232
1241
|
if (items.length === 0) return null;
|
|
1233
1242
|
return /* @__PURE__ */ jsxs15("div", { className: "fractal-table-overflow-trigger", children: [
|
|
1234
|
-
/* @__PURE__ */
|
|
1243
|
+
/* @__PURE__ */ jsx17(
|
|
1235
1244
|
Button,
|
|
1236
1245
|
{
|
|
1237
1246
|
ref: trigger,
|
|
1238
1247
|
buttonType: "ghost",
|
|
1239
1248
|
controlSize: "sm",
|
|
1240
1249
|
hasIconOnly: true,
|
|
1241
|
-
icon: /* @__PURE__ */
|
|
1250
|
+
icon: /* @__PURE__ */ jsx17(Ellipsis, { "aria-hidden": true }),
|
|
1242
1251
|
"aria-label": label,
|
|
1243
1252
|
"aria-haspopup": "menu",
|
|
1244
1253
|
"aria-expanded": open,
|
|
@@ -1257,7 +1266,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1257
1266
|
}
|
|
1258
1267
|
}
|
|
1259
1268
|
),
|
|
1260
|
-
open && createPortal3(/* @__PURE__ */
|
|
1269
|
+
open && createPortal3(/* @__PURE__ */ jsx17(
|
|
1261
1270
|
"div",
|
|
1262
1271
|
{
|
|
1263
1272
|
ref: panel,
|
|
@@ -1297,7 +1306,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1297
1306
|
close();
|
|
1298
1307
|
},
|
|
1299
1308
|
children: [
|
|
1300
|
-
item.icon && /* @__PURE__ */
|
|
1309
|
+
item.icon && /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: item.icon }),
|
|
1301
1310
|
item.label
|
|
1302
1311
|
]
|
|
1303
1312
|
},
|
|
@@ -1310,7 +1319,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1310
1319
|
|
|
1311
1320
|
// src/components/TableLayout/TableLayout.tsx
|
|
1312
1321
|
import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState6 } from "react";
|
|
1313
|
-
import { jsx as
|
|
1322
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1314
1323
|
var length = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1315
1324
|
function columnStyle(column) {
|
|
1316
1325
|
return {
|
|
@@ -1346,7 +1355,7 @@ function useOverflow() {
|
|
|
1346
1355
|
}
|
|
1347
1356
|
function TableViewport({ children, maxHeight, label }) {
|
|
1348
1357
|
const { ref, overflow } = useOverflow();
|
|
1349
|
-
return /* @__PURE__ */
|
|
1358
|
+
return /* @__PURE__ */ jsx18("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
|
|
1350
1359
|
}
|
|
1351
1360
|
function TableCellContent({ children, label }) {
|
|
1352
1361
|
const { ref, overflow } = useOverflow();
|
|
@@ -1373,7 +1382,7 @@ function TableCellContent({ children, label }) {
|
|
|
1373
1382
|
cell.addEventListener("wheel", wheel, { passive: false });
|
|
1374
1383
|
return () => cell.removeEventListener("wheel", wheel);
|
|
1375
1384
|
}, [ref]);
|
|
1376
|
-
return /* @__PURE__ */
|
|
1385
|
+
return /* @__PURE__ */ jsx18(
|
|
1377
1386
|
"div",
|
|
1378
1387
|
{
|
|
1379
1388
|
ref,
|
|
@@ -1392,28 +1401,28 @@ function TableCellContent({ children, label }) {
|
|
|
1392
1401
|
else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
|
|
1393
1402
|
} else if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1394
1403
|
},
|
|
1395
|
-
children: /* @__PURE__ */
|
|
1404
|
+
children: /* @__PURE__ */ jsx18("div", { className: "fractal-table-cell-content", children })
|
|
1396
1405
|
}
|
|
1397
1406
|
);
|
|
1398
1407
|
}
|
|
1399
1408
|
|
|
1400
1409
|
// src/components/DataTable/DataTable.tsx
|
|
1401
|
-
import { jsx as
|
|
1410
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1402
1411
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
|
|
1403
|
-
return /* @__PURE__ */
|
|
1404
|
-
header && /* @__PURE__ */
|
|
1405
|
-
data.length === 0 ? /* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1407
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1408
|
-
overflowMenu && /* @__PURE__ */
|
|
1412
|
+
return /* @__PURE__ */ jsx19("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ jsxs16("div", { className: "fractal-datatable-surface", children: [
|
|
1413
|
+
header && /* @__PURE__ */ jsx19("div", { className: "fractal-datatable-header", children: header }),
|
|
1414
|
+
data.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx19(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ jsxs16("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
|
|
1415
|
+
/* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "fractal-datatable-thead-row", children: [
|
|
1416
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsx19("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ jsx19(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
|
|
1417
|
+
overflowMenu && /* @__PURE__ */ jsx19("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
1409
1418
|
] }) }),
|
|
1410
|
-
/* @__PURE__ */
|
|
1419
|
+
/* @__PURE__ */ jsx19("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs16(
|
|
1411
1420
|
"tr",
|
|
1412
1421
|
{
|
|
1413
1422
|
className: "fractal-datatable-row",
|
|
1414
1423
|
children: [
|
|
1415
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1416
|
-
overflowMenu && /* @__PURE__ */
|
|
1424
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsx19("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ jsx19(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
|
|
1425
|
+
overflowMenu && /* @__PURE__ */ jsx19("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ jsx19(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
|
|
1417
1426
|
]
|
|
1418
1427
|
},
|
|
1419
1428
|
rowIndex
|
|
@@ -1465,7 +1474,7 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
|
|
|
1465
1474
|
}
|
|
1466
1475
|
|
|
1467
1476
|
// src/components/Dropdown/Dropdown.tsx
|
|
1468
|
-
import { Fragment as Fragment2, jsx as
|
|
1477
|
+
import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1469
1478
|
function Dropdown({
|
|
1470
1479
|
items,
|
|
1471
1480
|
selectedValue = "",
|
|
@@ -1677,22 +1686,23 @@ function Dropdown({
|
|
|
1677
1686
|
triggerClassName
|
|
1678
1687
|
),
|
|
1679
1688
|
children: [
|
|
1680
|
-
/* @__PURE__ */
|
|
1681
|
-
selected?.icon != null && /* @__PURE__ */
|
|
1682
|
-
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */
|
|
1689
|
+
/* @__PURE__ */ jsx20("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
1690
|
+
selected?.icon != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
|
|
1691
|
+
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
|
|
1683
1692
|
] }) }),
|
|
1684
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
1693
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx20(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1685
1694
|
]
|
|
1686
1695
|
}
|
|
1687
1696
|
),
|
|
1688
|
-
canClear && /* @__PURE__ */
|
|
1697
|
+
canClear && /* @__PURE__ */ jsx20("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
|
|
1689
1698
|
if (multiple) onSelectionChange?.([]);
|
|
1690
1699
|
else onSelect?.("");
|
|
1691
1700
|
setOpen(false);
|
|
1692
1701
|
setQuery("");
|
|
1693
1702
|
triggerRef.current?.focus();
|
|
1694
|
-
}, children: /* @__PURE__ */
|
|
1695
|
-
fieldLabel ? /* @__PURE__ */
|
|
1703
|
+
}, children: /* @__PURE__ */ jsx20(Close2, { "aria-hidden": "true" }) }),
|
|
1704
|
+
fieldLabel ? /* @__PURE__ */ jsx20(FloatingFieldBorder, { label: fieldLabel }) : null,
|
|
1705
|
+
fieldLabel ? /* @__PURE__ */ jsx20("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
|
|
1696
1706
|
open && /* @__PURE__ */ jsxs17(
|
|
1697
1707
|
"div",
|
|
1698
1708
|
{
|
|
@@ -1713,19 +1723,19 @@ function Dropdown({
|
|
|
1713
1723
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1714
1724
|
style: panelStyle,
|
|
1715
1725
|
children: [
|
|
1716
|
-
searchable && /* @__PURE__ */
|
|
1717
|
-
/* @__PURE__ */
|
|
1718
|
-
/* @__PURE__ */
|
|
1726
|
+
searchable && /* @__PURE__ */ jsx20("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
|
|
1727
|
+
/* @__PURE__ */ jsx20(MagnifyingGlass2, { "aria-hidden": "true" }),
|
|
1728
|
+
/* @__PURE__ */ jsx20("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
|
|
1719
1729
|
] }) }),
|
|
1720
1730
|
/* @__PURE__ */ jsxs17("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
|
|
1721
|
-
label != null && /* @__PURE__ */
|
|
1731
|
+
label != null && /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-label", children: label }),
|
|
1722
1732
|
visibleItems.map((item, index) => {
|
|
1723
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
1724
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
1733
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1734
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1725
1735
|
if (item.kind === "header") {
|
|
1726
1736
|
return /* @__PURE__ */ jsxs17(React11.Fragment, { children: [
|
|
1727
1737
|
topDivider,
|
|
1728
|
-
/* @__PURE__ */
|
|
1738
|
+
/* @__PURE__ */ jsx20("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1729
1739
|
bottomDivider
|
|
1730
1740
|
] }, `header-${index}`);
|
|
1731
1741
|
}
|
|
@@ -1748,17 +1758,17 @@ function Dropdown({
|
|
|
1748
1758
|
},
|
|
1749
1759
|
className: "fractal-dropdown-option",
|
|
1750
1760
|
children: [
|
|
1751
|
-
multiple && /* @__PURE__ */
|
|
1752
|
-
item.icon != null && /* @__PURE__ */
|
|
1753
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
1754
|
-
item.trailing != null && /* @__PURE__ */
|
|
1761
|
+
multiple && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ jsx20(Check2, {}) }),
|
|
1762
|
+
item.icon != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
1763
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
1764
|
+
item.trailing != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
1755
1765
|
]
|
|
1756
1766
|
}
|
|
1757
1767
|
),
|
|
1758
1768
|
bottomDivider
|
|
1759
1769
|
] }, item.value);
|
|
1760
1770
|
}),
|
|
1761
|
-
!selectableItems.length && /* @__PURE__ */
|
|
1771
|
+
!selectableItems.length && /* @__PURE__ */ jsx20("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
|
|
1762
1772
|
] })
|
|
1763
1773
|
]
|
|
1764
1774
|
}
|
|
@@ -1768,9 +1778,9 @@ function Dropdown({
|
|
|
1768
1778
|
|
|
1769
1779
|
// src/components/Link/Link.tsx
|
|
1770
1780
|
import * as React12 from "react";
|
|
1771
|
-
import { jsx as
|
|
1781
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1772
1782
|
var Link = React12.forwardRef(
|
|
1773
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
1783
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
1774
1784
|
"a",
|
|
1775
1785
|
{
|
|
1776
1786
|
ref,
|
|
@@ -1783,9 +1793,9 @@ Link.displayName = "Link";
|
|
|
1783
1793
|
|
|
1784
1794
|
// src/components/Chip/Chip.tsx
|
|
1785
1795
|
import * as React13 from "react";
|
|
1786
|
-
import { jsx as
|
|
1796
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
1787
1797
|
var Chip = React13.forwardRef(
|
|
1788
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
1798
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1789
1799
|
"span",
|
|
1790
1800
|
{
|
|
1791
1801
|
ref,
|
|
@@ -1798,7 +1808,7 @@ Chip.displayName = "Chip";
|
|
|
1798
1808
|
|
|
1799
1809
|
// src/components/Checkbox/Checkbox.tsx
|
|
1800
1810
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
1801
|
-
import { jsx as
|
|
1811
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1802
1812
|
function Checkbox({
|
|
1803
1813
|
checked,
|
|
1804
1814
|
indeterminate = false,
|
|
@@ -1809,7 +1819,7 @@ function Checkbox({
|
|
|
1809
1819
|
onKeyDown,
|
|
1810
1820
|
...props
|
|
1811
1821
|
}) {
|
|
1812
|
-
return /* @__PURE__ */
|
|
1822
|
+
return /* @__PURE__ */ jsx23(
|
|
1813
1823
|
"button",
|
|
1814
1824
|
{
|
|
1815
1825
|
...props,
|
|
@@ -1832,15 +1842,15 @@ function Checkbox({
|
|
|
1832
1842
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1833
1843
|
},
|
|
1834
1844
|
children: indeterminate ? /* @__PURE__ */ jsxs18("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1835
|
-
/* @__PURE__ */
|
|
1836
|
-
/* @__PURE__ */
|
|
1837
|
-
] }) : checked ? /* @__PURE__ */
|
|
1845
|
+
/* @__PURE__ */ jsx23(CheckboxIcon, { size: 18 }),
|
|
1846
|
+
/* @__PURE__ */ jsx23(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1847
|
+
] }) : checked ? /* @__PURE__ */ jsx23(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx23(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
1838
1848
|
}
|
|
1839
1849
|
);
|
|
1840
1850
|
}
|
|
1841
1851
|
|
|
1842
1852
|
// src/components/Radio/Radio.tsx
|
|
1843
|
-
import { jsx as
|
|
1853
|
+
import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1844
1854
|
function Radio({
|
|
1845
1855
|
checked,
|
|
1846
1856
|
className,
|
|
@@ -1851,7 +1861,7 @@ function Radio({
|
|
|
1851
1861
|
...props
|
|
1852
1862
|
}) {
|
|
1853
1863
|
return /* @__PURE__ */ jsxs19("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1854
|
-
/* @__PURE__ */
|
|
1864
|
+
/* @__PURE__ */ jsx24(
|
|
1855
1865
|
"input",
|
|
1856
1866
|
{
|
|
1857
1867
|
...props,
|
|
@@ -1862,10 +1872,10 @@ function Radio({
|
|
|
1862
1872
|
type: "radio"
|
|
1863
1873
|
}
|
|
1864
1874
|
),
|
|
1865
|
-
/* @__PURE__ */
|
|
1875
|
+
/* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx24("span", { className: "fractal-radio__dot" }) }),
|
|
1866
1876
|
/* @__PURE__ */ jsxs19("span", { className: "fractal-radio__content", children: [
|
|
1867
|
-
/* @__PURE__ */
|
|
1868
|
-
description && /* @__PURE__ */
|
|
1877
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-radio__label", children: label }),
|
|
1878
|
+
description && /* @__PURE__ */ jsx24("span", { className: "fractal-radio__description", children: description })
|
|
1869
1879
|
] })
|
|
1870
1880
|
] });
|
|
1871
1881
|
}
|
|
@@ -1873,7 +1883,7 @@ function Radio({
|
|
|
1873
1883
|
// src/components/SortableTable/SortableTable.tsx
|
|
1874
1884
|
import { useMemo as useMemo2, useState as useState8 } from "react";
|
|
1875
1885
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1876
|
-
import { jsx as
|
|
1886
|
+
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1877
1887
|
function SortableTable({
|
|
1878
1888
|
columns,
|
|
1879
1889
|
data,
|
|
@@ -1973,17 +1983,17 @@ function SortableTable({
|
|
|
1973
1983
|
onSortChange?.(nextKey, nextDirection);
|
|
1974
1984
|
}
|
|
1975
1985
|
};
|
|
1976
|
-
return /* @__PURE__ */
|
|
1977
|
-
header && /* @__PURE__ */
|
|
1978
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1979
|
-
/* @__PURE__ */
|
|
1980
|
-
selection && /* @__PURE__ */
|
|
1986
|
+
return /* @__PURE__ */ jsx25("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ jsxs20("div", { className: "fractal-sortable-table-surface", children: [
|
|
1987
|
+
header && /* @__PURE__ */ jsx25("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1988
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx25("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx25(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ jsxs20("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1989
|
+
/* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1990
|
+
selection && /* @__PURE__ */ jsx25(
|
|
1981
1991
|
"th",
|
|
1982
1992
|
{
|
|
1983
1993
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1984
1994
|
"data-pinned-column": "selection",
|
|
1985
1995
|
scope: "col",
|
|
1986
|
-
children: /* @__PURE__ */
|
|
1996
|
+
children: /* @__PURE__ */ jsx25(
|
|
1987
1997
|
Checkbox,
|
|
1988
1998
|
{
|
|
1989
1999
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -2009,26 +2019,26 @@ function SortableTable({
|
|
|
2009
2019
|
columns.map((col, columnIndex) => {
|
|
2010
2020
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
2011
2021
|
if (!col.sortable) {
|
|
2012
|
-
return /* @__PURE__ */
|
|
2022
|
+
return /* @__PURE__ */ jsx25(
|
|
2013
2023
|
"th",
|
|
2014
2024
|
{
|
|
2015
2025
|
className: "fractal-sortable-table-th",
|
|
2016
2026
|
scope: "col",
|
|
2017
2027
|
style: columnStyle(col),
|
|
2018
2028
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2019
|
-
children: /* @__PURE__ */
|
|
2029
|
+
children: /* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header} column`, children: col.header })
|
|
2020
2030
|
},
|
|
2021
2031
|
col.key
|
|
2022
2032
|
);
|
|
2023
2033
|
}
|
|
2024
|
-
return /* @__PURE__ */
|
|
2034
|
+
return /* @__PURE__ */ jsx25(
|
|
2025
2035
|
"th",
|
|
2026
2036
|
{
|
|
2027
2037
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
2028
2038
|
scope: "col",
|
|
2029
2039
|
style: columnStyle(col),
|
|
2030
2040
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2031
|
-
children: /* @__PURE__ */
|
|
2041
|
+
children: /* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ jsxs20(
|
|
2032
2042
|
"button",
|
|
2033
2043
|
{
|
|
2034
2044
|
type: "button",
|
|
@@ -2039,8 +2049,8 @@ function SortableTable({
|
|
|
2039
2049
|
onClick: () => handleSortClick(col.key),
|
|
2040
2050
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
2041
2051
|
children: [
|
|
2042
|
-
/* @__PURE__ */
|
|
2043
|
-
/* @__PURE__ */
|
|
2052
|
+
/* @__PURE__ */ jsx25("span", { children: col.header }),
|
|
2053
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx25(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx25(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx25(ArrowsUpDown, { size: 14 }) })
|
|
2044
2054
|
]
|
|
2045
2055
|
}
|
|
2046
2056
|
) })
|
|
@@ -2048,9 +2058,9 @@ function SortableTable({
|
|
|
2048
2058
|
col.key
|
|
2049
2059
|
);
|
|
2050
2060
|
}),
|
|
2051
|
-
overflowMenu && /* @__PURE__ */
|
|
2061
|
+
overflowMenu && /* @__PURE__ */ jsx25("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
2052
2062
|
] }) }),
|
|
2053
|
-
/* @__PURE__ */
|
|
2063
|
+
/* @__PURE__ */ jsx25("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
2054
2064
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
2055
2065
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
2056
2066
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -2083,7 +2093,7 @@ function SortableTable({
|
|
|
2083
2093
|
role: interactive ? "button" : void 0,
|
|
2084
2094
|
tabIndex: interactive ? 0 : void 0,
|
|
2085
2095
|
children: [
|
|
2086
|
-
selection && /* @__PURE__ */
|
|
2096
|
+
selection && /* @__PURE__ */ jsx25("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ jsx25(
|
|
2087
2097
|
Checkbox,
|
|
2088
2098
|
{
|
|
2089
2099
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -2106,13 +2116,13 @@ function SortableTable({
|
|
|
2106
2116
|
"data-column-align": col.align,
|
|
2107
2117
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2108
2118
|
children: [
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
2119
|
+
/* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
|
|
2120
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
2111
2121
|
]
|
|
2112
2122
|
},
|
|
2113
2123
|
col.key
|
|
2114
2124
|
)),
|
|
2115
|
-
overflowMenu && /* @__PURE__ */
|
|
2125
|
+
overflowMenu && /* @__PURE__ */ jsx25(
|
|
2116
2126
|
"td",
|
|
2117
2127
|
{
|
|
2118
2128
|
className: "fractal-sortable-table-td fractal-table-overflow-cell",
|
|
@@ -2120,7 +2130,7 @@ function SortableTable({
|
|
|
2120
2130
|
onClick: (event) => event.stopPropagation(),
|
|
2121
2131
|
onDoubleClick: (event) => event.stopPropagation(),
|
|
2122
2132
|
onKeyDown: (event) => event.stopPropagation(),
|
|
2123
|
-
children: /* @__PURE__ */
|
|
2133
|
+
children: /* @__PURE__ */ jsx25(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
|
|
2124
2134
|
}
|
|
2125
2135
|
)
|
|
2126
2136
|
]
|
|
@@ -2134,7 +2144,7 @@ function SortableTable({
|
|
|
2134
2144
|
|
|
2135
2145
|
// src/components/Tabs/Tabs.tsx
|
|
2136
2146
|
import { useId as useId5, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState9 } from "react";
|
|
2137
|
-
import { jsx as
|
|
2147
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2138
2148
|
function Tabs({
|
|
2139
2149
|
items,
|
|
2140
2150
|
defaultValue,
|
|
@@ -2206,7 +2216,7 @@ function Tabs({
|
|
|
2206
2216
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
2207
2217
|
};
|
|
2208
2218
|
return /* @__PURE__ */ jsxs21("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
2209
|
-
/* @__PURE__ */
|
|
2219
|
+
/* @__PURE__ */ jsx26(
|
|
2210
2220
|
"div",
|
|
2211
2221
|
{
|
|
2212
2222
|
ref: tabListRef,
|
|
@@ -2219,7 +2229,7 @@ function Tabs({
|
|
|
2219
2229
|
const isActive = item.id === activeId;
|
|
2220
2230
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2221
2231
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2222
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx26(
|
|
2223
2233
|
"button",
|
|
2224
2234
|
{
|
|
2225
2235
|
ref: (el) => {
|
|
@@ -2250,7 +2260,7 @@ function Tabs({
|
|
|
2250
2260
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2251
2261
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2252
2262
|
const isActive = item.id === activeId;
|
|
2253
|
-
return /* @__PURE__ */
|
|
2263
|
+
return /* @__PURE__ */ jsx26(
|
|
2254
2264
|
"div",
|
|
2255
2265
|
{
|
|
2256
2266
|
id: panelId,
|
|
@@ -2268,7 +2278,7 @@ function Tabs({
|
|
|
2268
2278
|
|
|
2269
2279
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
2270
2280
|
import * as React14 from "react";
|
|
2271
|
-
import { jsx as
|
|
2281
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2272
2282
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
2273
2283
|
const switcherRef = React14.useRef(null);
|
|
2274
2284
|
const buttonRefs = React14.useRef([]);
|
|
@@ -2334,10 +2344,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2334
2344
|
"aria-label": ariaLabel,
|
|
2335
2345
|
ref: switcherRef,
|
|
2336
2346
|
children: [
|
|
2337
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2338
2348
|
items.map((item, index) => {
|
|
2339
2349
|
const active = item.value === value;
|
|
2340
|
-
return /* @__PURE__ */
|
|
2350
|
+
return /* @__PURE__ */ jsx27(
|
|
2341
2351
|
"button",
|
|
2342
2352
|
{
|
|
2343
2353
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2371,7 +2381,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2371
2381
|
// src/components/Disclosure/Disclosure.tsx
|
|
2372
2382
|
import { useId as useId6, useState as useState10 } from "react";
|
|
2373
2383
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
2374
|
-
import { jsx as
|
|
2384
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2375
2385
|
function Disclosure({
|
|
2376
2386
|
title,
|
|
2377
2387
|
meta,
|
|
@@ -2421,13 +2431,13 @@ function Disclosure({
|
|
|
2421
2431
|
disabled,
|
|
2422
2432
|
onClick: toggle,
|
|
2423
2433
|
children: [
|
|
2424
|
-
/* @__PURE__ */
|
|
2425
|
-
/* @__PURE__ */
|
|
2426
|
-
meta && /* @__PURE__ */
|
|
2434
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx28(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx28(ChevronRight3, { size: 16 }) }),
|
|
2435
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-title", children: title }),
|
|
2436
|
+
meta && /* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2427
2437
|
]
|
|
2428
2438
|
}
|
|
2429
2439
|
),
|
|
2430
|
-
/* @__PURE__ */
|
|
2440
|
+
/* @__PURE__ */ jsx28(
|
|
2431
2441
|
"div",
|
|
2432
2442
|
{
|
|
2433
2443
|
id: panelId,
|
|
@@ -2435,7 +2445,7 @@ function Disclosure({
|
|
|
2435
2445
|
"aria-labelledby": headerId,
|
|
2436
2446
|
className: "fractal-disclosure-panel",
|
|
2437
2447
|
hidden: !isOpen,
|
|
2438
|
-
children: /* @__PURE__ */
|
|
2448
|
+
children: /* @__PURE__ */ jsx28("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2439
2449
|
}
|
|
2440
2450
|
)
|
|
2441
2451
|
]
|
|
@@ -2444,18 +2454,18 @@ function Disclosure({
|
|
|
2444
2454
|
}
|
|
2445
2455
|
|
|
2446
2456
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2447
|
-
import { jsx as
|
|
2457
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
2448
2458
|
var LATTICE_COUNT = 160;
|
|
2449
2459
|
var WAVE_PERIOD = 80;
|
|
2450
2460
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2451
|
-
return /* @__PURE__ */
|
|
2461
|
+
return /* @__PURE__ */ jsx29(
|
|
2452
2462
|
"span",
|
|
2453
2463
|
{
|
|
2454
2464
|
"aria-label": label,
|
|
2455
2465
|
className: cn("fractal-lattice-loader", className),
|
|
2456
2466
|
role: "progressbar",
|
|
2457
2467
|
...props,
|
|
2458
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2468
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx29(
|
|
2459
2469
|
"span",
|
|
2460
2470
|
{
|
|
2461
2471
|
"aria-hidden": "true",
|
|
@@ -2469,10 +2479,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2469
2479
|
}
|
|
2470
2480
|
|
|
2471
2481
|
// src/components/Ghost/Ghost.tsx
|
|
2472
|
-
import { jsx as
|
|
2482
|
+
import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2473
2483
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2474
2484
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2475
|
-
return /* @__PURE__ */
|
|
2485
|
+
return /* @__PURE__ */ jsx30(
|
|
2476
2486
|
"div",
|
|
2477
2487
|
{
|
|
2478
2488
|
"aria-hidden": "true",
|
|
@@ -2488,15 +2498,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2488
2498
|
);
|
|
2489
2499
|
}
|
|
2490
2500
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2491
|
-
return /* @__PURE__ */
|
|
2501
|
+
return /* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2492
2502
|
}
|
|
2493
2503
|
function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
|
|
2494
|
-
return /* @__PURE__ */
|
|
2504
|
+
return /* @__PURE__ */ jsx30(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2495
2505
|
}
|
|
2496
2506
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2497
2507
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2498
|
-
showHeader && /* @__PURE__ */
|
|
2499
|
-
/* @__PURE__ */
|
|
2508
|
+
showHeader && /* @__PURE__ */ jsx30(GhostLine, { width: "38%" }),
|
|
2509
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx30(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2500
2510
|
] });
|
|
2501
2511
|
}
|
|
2502
2512
|
function DataTableGhost({
|
|
@@ -2510,74 +2520,74 @@ function DataTableGhost({
|
|
|
2510
2520
|
...props
|
|
2511
2521
|
}) {
|
|
2512
2522
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2513
|
-
return /* @__PURE__ */
|
|
2514
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
2515
|
-
/* @__PURE__ */
|
|
2523
|
+
return /* @__PURE__ */ jsx30("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs24("table", { className: "fractal-ghost-table__table", children: [
|
|
2524
|
+
(showHeader || headers) && /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsx30("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx30("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2525
|
+
/* @__PURE__ */ jsx30("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx30("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx30("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx30(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2516
2526
|
] }) });
|
|
2517
2527
|
}
|
|
2518
2528
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2519
|
-
return /* @__PURE__ */
|
|
2529
|
+
return /* @__PURE__ */ jsx30(FormFieldGhost, { className, labelWidth, ...props });
|
|
2520
2530
|
}
|
|
2521
2531
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2522
|
-
return /* @__PURE__ */
|
|
2532
|
+
return /* @__PURE__ */ jsx30(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2523
2533
|
}
|
|
2524
2534
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2525
|
-
return /* @__PURE__ */
|
|
2535
|
+
return /* @__PURE__ */ jsx30(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2526
2536
|
}
|
|
2527
2537
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
|
|
2528
2538
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2529
|
-
/* @__PURE__ */
|
|
2530
|
-
/* @__PURE__ */
|
|
2539
|
+
/* @__PURE__ */ jsx30(LabelGhost, { width: labelWidth }),
|
|
2540
|
+
/* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2531
2541
|
] });
|
|
2532
2542
|
}
|
|
2533
2543
|
function AlertGhost({ className, ...props }) {
|
|
2534
2544
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2535
|
-
/* @__PURE__ */
|
|
2536
|
-
/* @__PURE__ */
|
|
2545
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "30%" }),
|
|
2546
|
+
/* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: "78%" })
|
|
2537
2547
|
] });
|
|
2538
2548
|
}
|
|
2539
2549
|
function CheckboxGhost({ className, ...props }) {
|
|
2540
2550
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2541
|
-
/* @__PURE__ */
|
|
2542
|
-
/* @__PURE__ */
|
|
2551
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2552
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" })
|
|
2543
2553
|
] });
|
|
2544
2554
|
}
|
|
2545
2555
|
var ToggleGhost = CheckboxGhost;
|
|
2546
2556
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2547
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2548
2558
|
}
|
|
2549
2559
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2550
|
-
return /* @__PURE__ */
|
|
2560
|
+
return /* @__PURE__ */ jsx30(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2551
2561
|
}
|
|
2552
2562
|
var TextButtonGhost = LinkGhost;
|
|
2553
2563
|
function DropdownGhost({ className, controlSize = "lg", ...props }) {
|
|
2554
2564
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2555
|
-
/* @__PURE__ */
|
|
2556
|
-
/* @__PURE__ */
|
|
2565
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "38%" }),
|
|
2566
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2557
2567
|
] });
|
|
2558
2568
|
}
|
|
2559
2569
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2560
|
-
return /* @__PURE__ */
|
|
2570
|
+
return /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx30(Ghost, {}, index)) });
|
|
2561
2571
|
}
|
|
2562
2572
|
var TabsGhost = ContentSwitcherGhost;
|
|
2563
2573
|
function DisclosureGhost({ className, ...props }) {
|
|
2564
2574
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2565
|
-
/* @__PURE__ */
|
|
2566
|
-
/* @__PURE__ */
|
|
2575
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2576
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" })
|
|
2567
2577
|
] });
|
|
2568
2578
|
}
|
|
2569
2579
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2570
|
-
return /* @__PURE__ */
|
|
2580
|
+
return /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx30(Ghost, {}, index)) });
|
|
2571
2581
|
}
|
|
2572
2582
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2573
2583
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2574
|
-
/* @__PURE__ */
|
|
2575
|
-
/* @__PURE__ */
|
|
2576
|
-
/* @__PURE__ */
|
|
2584
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2585
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "26%" }),
|
|
2586
|
+
/* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: "46%" })
|
|
2577
2587
|
] });
|
|
2578
2588
|
}
|
|
2579
2589
|
function PromptCardGhost({ className, ...props }) {
|
|
2580
|
-
return /* @__PURE__ */
|
|
2590
|
+
return /* @__PURE__ */ jsx30(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2581
2591
|
}
|
|
2582
2592
|
function ConversationGhost({
|
|
2583
2593
|
className,
|
|
@@ -2593,54 +2603,54 @@ function ConversationGhost({
|
|
|
2593
2603
|
role: "status",
|
|
2594
2604
|
...props,
|
|
2595
2605
|
children: [
|
|
2596
|
-
/* @__PURE__ */
|
|
2597
|
-
/* @__PURE__ */
|
|
2598
|
-
/* @__PURE__ */
|
|
2599
|
-
/* @__PURE__ */
|
|
2606
|
+
/* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2607
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "100%" }),
|
|
2608
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "86%" }),
|
|
2609
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "64%" })
|
|
2600
2610
|
] }) }),
|
|
2601
2611
|
/* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2602
|
-
/* @__PURE__ */
|
|
2603
|
-
/* @__PURE__ */
|
|
2604
|
-
/* @__PURE__ */
|
|
2612
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "92%" }),
|
|
2613
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "78%" }),
|
|
2614
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "58%" })
|
|
2605
2615
|
] })
|
|
2606
2616
|
]
|
|
2607
2617
|
}
|
|
2608
2618
|
);
|
|
2609
2619
|
}
|
|
2610
2620
|
function SortableTableGhost(props) {
|
|
2611
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ jsx30(DataTableGhost, { ...props });
|
|
2612
2622
|
}
|
|
2613
2623
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2614
2624
|
return /* @__PURE__ */ jsxs24("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2615
|
-
/* @__PURE__ */
|
|
2616
|
-
/* @__PURE__ */
|
|
2617
|
-
/* @__PURE__ */
|
|
2618
|
-
/* @__PURE__ */
|
|
2625
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2626
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2627
|
+
/* @__PURE__ */ jsx30(Ghost, {}),
|
|
2628
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2619
2629
|
] }, index)) })
|
|
2620
2630
|
] });
|
|
2621
2631
|
}
|
|
2622
2632
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2623
|
-
return /* @__PURE__ */
|
|
2633
|
+
return /* @__PURE__ */ jsx30(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2624
2634
|
}
|
|
2625
2635
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2626
|
-
return /* @__PURE__ */
|
|
2636
|
+
return /* @__PURE__ */ jsx30(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2627
2637
|
}
|
|
2628
2638
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2629
2639
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2630
2640
|
/* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-surface__header", children: [
|
|
2631
|
-
/* @__PURE__ */
|
|
2632
|
-
/* @__PURE__ */
|
|
2641
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" }),
|
|
2642
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2633
2643
|
] }),
|
|
2634
|
-
title && /* @__PURE__ */
|
|
2635
|
-
/* @__PURE__ */
|
|
2644
|
+
title && /* @__PURE__ */ jsx30("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2645
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx30(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2636
2646
|
] });
|
|
2637
2647
|
}
|
|
2638
2648
|
|
|
2639
2649
|
// src/components/Sidebar/Sidebar.tsx
|
|
2640
2650
|
import * as React15 from "react";
|
|
2641
|
-
import { Fragment as Fragment3, jsx as
|
|
2651
|
+
import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2642
2652
|
var Sidebar = React15.forwardRef(
|
|
2643
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2653
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2644
2654
|
"aside",
|
|
2645
2655
|
{
|
|
2646
2656
|
ref,
|
|
@@ -2653,11 +2663,11 @@ var Sidebar = React15.forwardRef(
|
|
|
2653
2663
|
);
|
|
2654
2664
|
Sidebar.displayName = "Sidebar";
|
|
2655
2665
|
var SidebarHeader = React15.forwardRef(
|
|
2656
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2666
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2657
2667
|
);
|
|
2658
2668
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2659
2669
|
var SidebarBrand = React15.forwardRef(
|
|
2660
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2670
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx31("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2661
2671
|
);
|
|
2662
2672
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2663
2673
|
function SidebarAccountMenu({
|
|
@@ -2668,7 +2678,7 @@ function SidebarAccountMenu({
|
|
|
2668
2678
|
icon,
|
|
2669
2679
|
className
|
|
2670
2680
|
}) {
|
|
2671
|
-
return /* @__PURE__ */
|
|
2681
|
+
return /* @__PURE__ */ jsx31(
|
|
2672
2682
|
Dropdown,
|
|
2673
2683
|
{
|
|
2674
2684
|
align: "left",
|
|
@@ -2679,8 +2689,8 @@ function SidebarAccountMenu({
|
|
|
2679
2689
|
selectedValue: "",
|
|
2680
2690
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2681
2691
|
triggerContent: /* @__PURE__ */ jsxs25(Fragment3, { children: [
|
|
2682
|
-
icon && /* @__PURE__ */
|
|
2683
|
-
/* @__PURE__ */
|
|
2692
|
+
icon && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2693
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2684
2694
|
] }),
|
|
2685
2695
|
triggerLabel,
|
|
2686
2696
|
triggerVariant: "tertiary"
|
|
@@ -2688,11 +2698,11 @@ function SidebarAccountMenu({
|
|
|
2688
2698
|
);
|
|
2689
2699
|
}
|
|
2690
2700
|
var SidebarNav = React15.forwardRef(
|
|
2691
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2701
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2692
2702
|
);
|
|
2693
2703
|
SidebarNav.displayName = "SidebarNav";
|
|
2694
2704
|
var SidebarSection = React15.forwardRef(
|
|
2695
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2705
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2696
2706
|
);
|
|
2697
2707
|
SidebarSection.displayName = "SidebarSection";
|
|
2698
2708
|
var SidebarNavItem = React15.forwardRef(
|
|
@@ -2706,16 +2716,16 @@ var SidebarNavItem = React15.forwardRef(
|
|
|
2706
2716
|
"aria-current": active ? "page" : void 0,
|
|
2707
2717
|
...props,
|
|
2708
2718
|
children: [
|
|
2709
|
-
icon && /* @__PURE__ */
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
endAdornment && /* @__PURE__ */
|
|
2719
|
+
icon && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2720
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2721
|
+
endAdornment && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2712
2722
|
]
|
|
2713
2723
|
}
|
|
2714
2724
|
)
|
|
2715
2725
|
);
|
|
2716
2726
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2717
2727
|
var SidebarFooter = React15.forwardRef(
|
|
2718
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2728
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2719
2729
|
);
|
|
2720
2730
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2721
2731
|
|
|
@@ -2723,7 +2733,7 @@ SidebarFooter.displayName = "SidebarFooter";
|
|
|
2723
2733
|
import * as React16 from "react";
|
|
2724
2734
|
import { createPortal as createPortal4 } from "react-dom";
|
|
2725
2735
|
import { Close as Close3 } from "@mirror-physics/fractal-icons";
|
|
2726
|
-
import { jsx as
|
|
2736
|
+
import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2727
2737
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2728
2738
|
useEscapeDismiss(80, onClose, open);
|
|
2729
2739
|
const bodyRef = React16.useRef(null);
|
|
@@ -2759,7 +2769,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2759
2769
|
}, [open, loading]);
|
|
2760
2770
|
if (!open) return null;
|
|
2761
2771
|
return createPortal4(
|
|
2762
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsx32("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs26(
|
|
2763
2773
|
"aside",
|
|
2764
2774
|
{
|
|
2765
2775
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2770,13 +2780,13 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2770
2780
|
children: [
|
|
2771
2781
|
/* @__PURE__ */ jsxs26("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
|
|
2772
2782
|
/* @__PURE__ */ jsxs26("div", { className: "fractal-side-panel__heading", children: [
|
|
2773
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2774
|
-
description && /* @__PURE__ */
|
|
2783
|
+
typeof title === "string" ? /* @__PURE__ */ jsx32("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx32("div", { className: "fractal-side-panel__title", children: title }),
|
|
2784
|
+
description && /* @__PURE__ */ jsx32("p", { className: "fractal-side-panel__description", children: description })
|
|
2775
2785
|
] }),
|
|
2776
|
-
/* @__PURE__ */
|
|
2786
|
+
/* @__PURE__ */ jsx32("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx32(Close3, { size: 18 }) })
|
|
2777
2787
|
] }),
|
|
2778
|
-
/* @__PURE__ */
|
|
2779
|
-
footer && /* @__PURE__ */
|
|
2788
|
+
/* @__PURE__ */ jsx32("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx32(UILoader, { label: loadingLabel }) : children }),
|
|
2789
|
+
footer && /* @__PURE__ */ jsx32("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
|
|
2780
2790
|
]
|
|
2781
2791
|
}
|
|
2782
2792
|
) }),
|
|
@@ -2786,12 +2796,12 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2786
2796
|
|
|
2787
2797
|
// src/components/Textarea/Textarea.tsx
|
|
2788
2798
|
import * as React17 from "react";
|
|
2789
|
-
import { jsx as
|
|
2799
|
+
import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2790
2800
|
var Textarea = React17.forwardRef(
|
|
2791
2801
|
({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
|
|
2792
2802
|
const generatedId = React17.useId();
|
|
2793
2803
|
const fieldId = id ?? generatedId;
|
|
2794
|
-
const input = /* @__PURE__ */
|
|
2804
|
+
const input = /* @__PURE__ */ jsx33(
|
|
2795
2805
|
"textarea",
|
|
2796
2806
|
{
|
|
2797
2807
|
ref,
|
|
@@ -2804,7 +2814,8 @@ var Textarea = React17.forwardRef(
|
|
|
2804
2814
|
);
|
|
2805
2815
|
return fieldLabel ? /* @__PURE__ */ jsxs27("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
|
|
2806
2816
|
input,
|
|
2807
|
-
/* @__PURE__ */
|
|
2817
|
+
/* @__PURE__ */ jsx33(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
2818
|
+
/* @__PURE__ */ jsx33("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
2808
2819
|
] }) : input;
|
|
2809
2820
|
}
|
|
2810
2821
|
);
|
|
@@ -2812,7 +2823,7 @@ Textarea.displayName = "Textarea";
|
|
|
2812
2823
|
|
|
2813
2824
|
// src/components/TextButton/TextButton.tsx
|
|
2814
2825
|
import * as React18 from "react";
|
|
2815
|
-
import { jsx as
|
|
2826
|
+
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2816
2827
|
var TextButton = React18.forwardRef(
|
|
2817
2828
|
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs28(
|
|
2818
2829
|
"button",
|
|
@@ -2822,9 +2833,9 @@ var TextButton = React18.forwardRef(
|
|
|
2822
2833
|
type: "button",
|
|
2823
2834
|
...props,
|
|
2824
2835
|
children: [
|
|
2825
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2826
|
-
/* @__PURE__ */
|
|
2827
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2836
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx34("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2837
|
+
/* @__PURE__ */ jsx34("span", { children }),
|
|
2838
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx34("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2828
2839
|
]
|
|
2829
2840
|
}
|
|
2830
2841
|
)
|
|
@@ -2834,7 +2845,7 @@ TextButton.displayName = "TextButton";
|
|
|
2834
2845
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2835
2846
|
import * as React19 from "react";
|
|
2836
2847
|
import { Close as Close4, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2837
|
-
import { jsx as
|
|
2848
|
+
import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2838
2849
|
function FileDropzone({
|
|
2839
2850
|
files,
|
|
2840
2851
|
onFilesChange,
|
|
@@ -2855,7 +2866,7 @@ function FileDropzone({
|
|
|
2855
2866
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2856
2867
|
};
|
|
2857
2868
|
return /* @__PURE__ */ jsxs29("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2858
|
-
/* @__PURE__ */
|
|
2869
|
+
/* @__PURE__ */ jsx35(
|
|
2859
2870
|
"input",
|
|
2860
2871
|
{
|
|
2861
2872
|
ref: inputRef,
|
|
@@ -2894,18 +2905,18 @@ function FileDropzone({
|
|
|
2894
2905
|
addFiles(event.dataTransfer.files);
|
|
2895
2906
|
},
|
|
2896
2907
|
children: [
|
|
2897
|
-
/* @__PURE__ */
|
|
2908
|
+
/* @__PURE__ */ jsx35(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2898
2909
|
/* @__PURE__ */ jsxs29("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2899
|
-
/* @__PURE__ */
|
|
2900
|
-
description && /* @__PURE__ */
|
|
2910
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2911
|
+
description && /* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2901
2912
|
] })
|
|
2902
2913
|
]
|
|
2903
2914
|
}
|
|
2904
2915
|
),
|
|
2905
|
-
files.length > 0 && /* @__PURE__ */
|
|
2906
|
-
/* @__PURE__ */
|
|
2907
|
-
/* @__PURE__ */
|
|
2908
|
-
/* @__PURE__ */
|
|
2916
|
+
files.length > 0 && /* @__PURE__ */ jsx35("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs29("li", { className: "fractal-file-dropzone__file", children: [
|
|
2917
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2918
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2919
|
+
/* @__PURE__ */ jsx35(
|
|
2909
2920
|
"button",
|
|
2910
2921
|
{
|
|
2911
2922
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2913,7 +2924,7 @@ function FileDropzone({
|
|
|
2913
2924
|
"aria-label": `Remove ${file.name}`,
|
|
2914
2925
|
disabled,
|
|
2915
2926
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2916
|
-
children: /* @__PURE__ */
|
|
2927
|
+
children: /* @__PURE__ */ jsx35(Close4, { "aria-hidden": "true", size: 14 })
|
|
2917
2928
|
}
|
|
2918
2929
|
)
|
|
2919
2930
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2927,7 +2938,7 @@ function formatFileSize(bytes) {
|
|
|
2927
2938
|
|
|
2928
2939
|
// src/components/Pagination/Pagination.tsx
|
|
2929
2940
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2930
|
-
import { jsx as
|
|
2941
|
+
import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2931
2942
|
function Pagination({
|
|
2932
2943
|
page,
|
|
2933
2944
|
pageSize,
|
|
@@ -2944,9 +2955,9 @@ function Pagination({
|
|
|
2944
2955
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2945
2956
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2946
2957
|
return /* @__PURE__ */ jsxs30("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2947
|
-
/* @__PURE__ */
|
|
2958
|
+
/* @__PURE__ */ jsx36("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2948
2959
|
/* @__PURE__ */ jsxs30("div", { className: "fractal-pagination__controls", children: [
|
|
2949
|
-
canChangePageSize && /* @__PURE__ */
|
|
2960
|
+
canChangePageSize && /* @__PURE__ */ jsx36(
|
|
2950
2961
|
Dropdown,
|
|
2951
2962
|
{
|
|
2952
2963
|
align: "right",
|
|
@@ -2963,7 +2974,7 @@ function Pagination({
|
|
|
2963
2974
|
triggerVariant: "tertiary"
|
|
2964
2975
|
}
|
|
2965
2976
|
),
|
|
2966
|
-
/* @__PURE__ */
|
|
2977
|
+
/* @__PURE__ */ jsx36(
|
|
2967
2978
|
"button",
|
|
2968
2979
|
{
|
|
2969
2980
|
className: "fractal-pagination__button",
|
|
@@ -2972,7 +2983,7 @@ function Pagination({
|
|
|
2972
2983
|
title: "Previous page",
|
|
2973
2984
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2974
2985
|
onClick: () => onPageChange(currentPage - 1),
|
|
2975
|
-
children: /* @__PURE__ */
|
|
2986
|
+
children: /* @__PURE__ */ jsx36(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2976
2987
|
}
|
|
2977
2988
|
),
|
|
2978
2989
|
/* @__PURE__ */ jsxs30("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
@@ -2980,7 +2991,7 @@ function Pagination({
|
|
|
2980
2991
|
" of ",
|
|
2981
2992
|
totalPages
|
|
2982
2993
|
] }),
|
|
2983
|
-
/* @__PURE__ */
|
|
2994
|
+
/* @__PURE__ */ jsx36(
|
|
2984
2995
|
"button",
|
|
2985
2996
|
{
|
|
2986
2997
|
className: "fractal-pagination__button",
|
|
@@ -2989,7 +3000,7 @@ function Pagination({
|
|
|
2989
3000
|
title: "Next page",
|
|
2990
3001
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2991
3002
|
onClick: () => onPageChange(currentPage + 1),
|
|
2992
|
-
children: /* @__PURE__ */
|
|
3003
|
+
children: /* @__PURE__ */ jsx36(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2993
3004
|
}
|
|
2994
3005
|
)
|
|
2995
3006
|
] })
|
|
@@ -2998,7 +3009,7 @@ function Pagination({
|
|
|
2998
3009
|
|
|
2999
3010
|
// src/components/Tooltip/Tooltip.tsx
|
|
3000
3011
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3001
|
-
import { jsx as
|
|
3012
|
+
import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3002
3013
|
function Tooltip({
|
|
3003
3014
|
content,
|
|
3004
3015
|
children,
|
|
@@ -3009,9 +3020,9 @@ function Tooltip({
|
|
|
3009
3020
|
className
|
|
3010
3021
|
}) {
|
|
3011
3022
|
if (disabled || content == null || content === "") return children;
|
|
3012
|
-
return /* @__PURE__ */
|
|
3013
|
-
/* @__PURE__ */
|
|
3014
|
-
/* @__PURE__ */
|
|
3023
|
+
return /* @__PURE__ */ jsx37(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs31(TooltipPrimitive.Root, { children: [
|
|
3024
|
+
/* @__PURE__ */ jsx37(TooltipPrimitive.Trigger, { asChild: true, children }),
|
|
3025
|
+
/* @__PURE__ */ jsx37(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs31(
|
|
3015
3026
|
TooltipPrimitive.Content,
|
|
3016
3027
|
{
|
|
3017
3028
|
side: placement,
|
|
@@ -3019,7 +3030,10 @@ function Tooltip({
|
|
|
3019
3030
|
collisionPadding: 8,
|
|
3020
3031
|
className: cn("fractal-tooltip", className),
|
|
3021
3032
|
style: { "--tooltip-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
|
|
3022
|
-
children:
|
|
3033
|
+
children: [
|
|
3034
|
+
content,
|
|
3035
|
+
/* @__PURE__ */ jsx37(TooltipPrimitive.Arrow, { className: "fractal-tooltip-arrow", width: 8, height: 4, "aria-hidden": "true" })
|
|
3036
|
+
]
|
|
3023
3037
|
}
|
|
3024
3038
|
) })
|
|
3025
3039
|
] }) });
|