@mirror-physics/fractal-ui 0.2.0-next.58 → 0.2.0-next.59
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 +336 -294
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +21 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +321 -280
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -683,10 +683,50 @@ var Input = React4.forwardRef(
|
|
|
683
683
|
);
|
|
684
684
|
Input.displayName = "Input";
|
|
685
685
|
|
|
686
|
-
// src/components/
|
|
686
|
+
// src/components/TableSearch/TableSearch.tsx
|
|
687
687
|
import * as React5 from "react";
|
|
688
|
-
import {
|
|
688
|
+
import { MagnifyingGlass, MagnifyingGlassLines } from "@mirror-physics/fractal-icons";
|
|
689
689
|
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
690
|
+
var TableSearch = React5.forwardRef(
|
|
691
|
+
({
|
|
692
|
+
searchType = "text",
|
|
693
|
+
className,
|
|
694
|
+
inputClassName,
|
|
695
|
+
placeholder,
|
|
696
|
+
title,
|
|
697
|
+
...props
|
|
698
|
+
}, ref) => {
|
|
699
|
+
const isGlob = searchType === "glob";
|
|
700
|
+
const SearchIcon = isGlob ? MagnifyingGlassLines : MagnifyingGlass;
|
|
701
|
+
return /* @__PURE__ */ jsxs6(
|
|
702
|
+
"div",
|
|
703
|
+
{
|
|
704
|
+
className: cn("fractal-table-search", className),
|
|
705
|
+
"data-search-type": searchType,
|
|
706
|
+
children: [
|
|
707
|
+
/* @__PURE__ */ jsx6(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
|
|
708
|
+
/* @__PURE__ */ jsx6(
|
|
709
|
+
Input,
|
|
710
|
+
{
|
|
711
|
+
...props,
|
|
712
|
+
ref,
|
|
713
|
+
type: "search",
|
|
714
|
+
className: cn("fractal-table-search__input", inputClassName),
|
|
715
|
+
placeholder: placeholder ?? (isGlob ? "Glob search \u2014 use *, ?, or [a-z]" : "Search"),
|
|
716
|
+
title: title ?? (isGlob ? "Glob pattern: *, **, ?, [abc], [a-z], and [!abc]" : void 0)
|
|
717
|
+
}
|
|
718
|
+
)
|
|
719
|
+
]
|
|
720
|
+
}
|
|
721
|
+
);
|
|
722
|
+
}
|
|
723
|
+
);
|
|
724
|
+
TableSearch.displayName = "TableSearch";
|
|
725
|
+
|
|
726
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
727
|
+
import * as React6 from "react";
|
|
728
|
+
import { Minus, Plus } from "@mirror-physics/fractal-icons";
|
|
729
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
690
730
|
function NumberInput({
|
|
691
731
|
unit,
|
|
692
732
|
className,
|
|
@@ -698,7 +738,7 @@ function NumberInput({
|
|
|
698
738
|
max,
|
|
699
739
|
...props
|
|
700
740
|
}) {
|
|
701
|
-
const inputRef =
|
|
741
|
+
const inputRef = React6.useRef(null);
|
|
702
742
|
const numericValue = Number(value ?? defaultValue);
|
|
703
743
|
const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
|
|
704
744
|
const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : "value";
|
|
@@ -712,8 +752,8 @@ function NumberInput({
|
|
|
712
752
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
713
753
|
input.focus();
|
|
714
754
|
};
|
|
715
|
-
return /* @__PURE__ */
|
|
716
|
-
/* @__PURE__ */
|
|
755
|
+
return /* @__PURE__ */ jsxs7("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
756
|
+
/* @__PURE__ */ jsx7(
|
|
717
757
|
Input,
|
|
718
758
|
{
|
|
719
759
|
ref: inputRef,
|
|
@@ -727,7 +767,7 @@ function NumberInput({
|
|
|
727
767
|
...props
|
|
728
768
|
}
|
|
729
769
|
),
|
|
730
|
-
unit && /* @__PURE__ */
|
|
770
|
+
unit && /* @__PURE__ */ jsx7(
|
|
731
771
|
"span",
|
|
732
772
|
{
|
|
733
773
|
className: "fractal-number-input-unit",
|
|
@@ -736,8 +776,8 @@ function NumberInput({
|
|
|
736
776
|
children: unit
|
|
737
777
|
}
|
|
738
778
|
),
|
|
739
|
-
/* @__PURE__ */
|
|
740
|
-
/* @__PURE__ */
|
|
779
|
+
/* @__PURE__ */ jsxs7("div", { className: "fractal-number-input-controls", children: [
|
|
780
|
+
/* @__PURE__ */ jsx7(
|
|
741
781
|
"button",
|
|
742
782
|
{
|
|
743
783
|
type: "button",
|
|
@@ -745,10 +785,10 @@ function NumberInput({
|
|
|
745
785
|
"aria-label": `Decrease ${controlLabel}`,
|
|
746
786
|
disabled: decrementDisabled,
|
|
747
787
|
onClick: () => changeByStep(-1),
|
|
748
|
-
children: /* @__PURE__ */
|
|
788
|
+
children: /* @__PURE__ */ jsx7(Minus, { "aria-hidden": "true", size: 16 })
|
|
749
789
|
}
|
|
750
790
|
),
|
|
751
|
-
/* @__PURE__ */
|
|
791
|
+
/* @__PURE__ */ jsx7(
|
|
752
792
|
"button",
|
|
753
793
|
{
|
|
754
794
|
type: "button",
|
|
@@ -756,7 +796,7 @@ function NumberInput({
|
|
|
756
796
|
"aria-label": `Increase ${controlLabel}`,
|
|
757
797
|
disabled: incrementDisabled,
|
|
758
798
|
onClick: () => changeByStep(1),
|
|
759
|
-
children: /* @__PURE__ */
|
|
799
|
+
children: /* @__PURE__ */ jsx7(Plus, { "aria-hidden": "true", size: 16 })
|
|
760
800
|
}
|
|
761
801
|
)
|
|
762
802
|
] })
|
|
@@ -764,10 +804,10 @@ function NumberInput({
|
|
|
764
804
|
}
|
|
765
805
|
|
|
766
806
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
767
|
-
import * as
|
|
807
|
+
import * as React7 from "react";
|
|
768
808
|
import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
|
|
769
|
-
import { jsx as
|
|
770
|
-
var PasswordInput =
|
|
809
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
810
|
+
var PasswordInput = React7.forwardRef(
|
|
771
811
|
({
|
|
772
812
|
className,
|
|
773
813
|
disabled,
|
|
@@ -775,15 +815,15 @@ var PasswordInput = React6.forwardRef(
|
|
|
775
815
|
hidePasswordLabel = "Hide password",
|
|
776
816
|
...props
|
|
777
817
|
}, ref) => {
|
|
778
|
-
const [passwordVisible, setPasswordVisible] =
|
|
818
|
+
const [passwordVisible, setPasswordVisible] = React7.useState(false);
|
|
779
819
|
const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
|
|
780
|
-
return /* @__PURE__ */
|
|
820
|
+
return /* @__PURE__ */ jsxs8(
|
|
781
821
|
"div",
|
|
782
822
|
{
|
|
783
823
|
className: cn("fractal-password-input", className),
|
|
784
824
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
785
825
|
children: [
|
|
786
|
-
/* @__PURE__ */
|
|
826
|
+
/* @__PURE__ */ jsx8(
|
|
787
827
|
Input,
|
|
788
828
|
{
|
|
789
829
|
...props,
|
|
@@ -793,7 +833,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
793
833
|
type: passwordVisible ? "text" : "password"
|
|
794
834
|
}
|
|
795
835
|
),
|
|
796
|
-
/* @__PURE__ */
|
|
836
|
+
/* @__PURE__ */ jsx8(
|
|
797
837
|
"button",
|
|
798
838
|
{
|
|
799
839
|
type: "button",
|
|
@@ -803,7 +843,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
803
843
|
disabled,
|
|
804
844
|
title: toggleLabel,
|
|
805
845
|
onClick: () => setPasswordVisible((visible) => !visible),
|
|
806
|
-
children: passwordVisible ? /* @__PURE__ */
|
|
846
|
+
children: passwordVisible ? /* @__PURE__ */ jsx8(EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx8(Eye, { "aria-hidden": "true", size: 18 })
|
|
807
847
|
}
|
|
808
848
|
)
|
|
809
849
|
]
|
|
@@ -814,10 +854,10 @@ var PasswordInput = React6.forwardRef(
|
|
|
814
854
|
PasswordInput.displayName = "PasswordInput";
|
|
815
855
|
|
|
816
856
|
// src/components/Label/Label.tsx
|
|
817
|
-
import * as
|
|
818
|
-
import { jsx as
|
|
819
|
-
var Label =
|
|
820
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
857
|
+
import * as React8 from "react";
|
|
858
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
859
|
+
var Label = React8.forwardRef(
|
|
860
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
|
|
821
861
|
"label",
|
|
822
862
|
{
|
|
823
863
|
ref,
|
|
@@ -829,9 +869,9 @@ var Label = React7.forwardRef(
|
|
|
829
869
|
Label.displayName = "Label";
|
|
830
870
|
|
|
831
871
|
// src/components/Alert/Alert.tsx
|
|
832
|
-
import * as
|
|
872
|
+
import * as React9 from "react";
|
|
833
873
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
834
|
-
import { jsx as
|
|
874
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
835
875
|
var defaultIcons = {
|
|
836
876
|
default: CircleInfo,
|
|
837
877
|
info: CircleInfo,
|
|
@@ -839,10 +879,10 @@ var defaultIcons = {
|
|
|
839
879
|
warning: Warning,
|
|
840
880
|
error: CircleClose
|
|
841
881
|
};
|
|
842
|
-
var Alert =
|
|
882
|
+
var Alert = React9.forwardRef(
|
|
843
883
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
844
884
|
const DefaultIcon = defaultIcons[variant];
|
|
845
|
-
return /* @__PURE__ */
|
|
885
|
+
return /* @__PURE__ */ jsxs9(
|
|
846
886
|
"div",
|
|
847
887
|
{
|
|
848
888
|
ref,
|
|
@@ -850,27 +890,27 @@ var Alert = React8.forwardRef(
|
|
|
850
890
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
851
891
|
...props,
|
|
852
892
|
children: [
|
|
853
|
-
/* @__PURE__ */
|
|
854
|
-
/* @__PURE__ */
|
|
893
|
+
/* @__PURE__ */ jsx10("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx10(DefaultIcon, { size: 18 }) }),
|
|
894
|
+
/* @__PURE__ */ jsx10("div", { className: "fractal-alert-content", children })
|
|
855
895
|
]
|
|
856
896
|
}
|
|
857
897
|
);
|
|
858
898
|
}
|
|
859
899
|
);
|
|
860
900
|
Alert.displayName = "Alert";
|
|
861
|
-
var AlertTitle =
|
|
862
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
901
|
+
var AlertTitle = React9.forwardRef(
|
|
902
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx10("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
863
903
|
);
|
|
864
904
|
AlertTitle.displayName = "AlertTitle";
|
|
865
|
-
var AlertDescription =
|
|
866
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
905
|
+
var AlertDescription = React9.forwardRef(
|
|
906
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
867
907
|
);
|
|
868
908
|
AlertDescription.displayName = "AlertDescription";
|
|
869
909
|
|
|
870
910
|
// src/components/Toggle/Toggle.tsx
|
|
871
|
-
import { jsx as
|
|
911
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
872
912
|
function Toggle({ checked, onChange, label, className }) {
|
|
873
|
-
return /* @__PURE__ */
|
|
913
|
+
return /* @__PURE__ */ jsxs10(
|
|
874
914
|
"button",
|
|
875
915
|
{
|
|
876
916
|
type: "button",
|
|
@@ -879,8 +919,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
879
919
|
className: cn("fractal-toggle", className),
|
|
880
920
|
onClick: () => onChange(!checked),
|
|
881
921
|
children: [
|
|
882
|
-
/* @__PURE__ */
|
|
883
|
-
label && /* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ jsx11("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx11("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
923
|
+
label && /* @__PURE__ */ jsx11("span", { className: "fractal-toggle-label", children: label })
|
|
884
924
|
]
|
|
885
925
|
}
|
|
886
926
|
);
|
|
@@ -941,7 +981,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
941
981
|
|
|
942
982
|
// src/components/UILoader/UILoader.tsx
|
|
943
983
|
import { useId } from "react";
|
|
944
|
-
import { jsx as
|
|
984
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
945
985
|
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";
|
|
946
986
|
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";
|
|
947
987
|
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";
|
|
@@ -950,7 +990,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
950
990
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
951
991
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
952
992
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
953
|
-
return /* @__PURE__ */
|
|
993
|
+
return /* @__PURE__ */ jsx12(
|
|
954
994
|
"span",
|
|
955
995
|
{
|
|
956
996
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -958,52 +998,52 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
958
998
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
959
999
|
role: ariaHidden ? void 0 : "status",
|
|
960
1000
|
style,
|
|
961
|
-
children: /* @__PURE__ */
|
|
962
|
-
/* @__PURE__ */
|
|
963
|
-
/* @__PURE__ */
|
|
964
|
-
/* @__PURE__ */
|
|
965
|
-
/* @__PURE__ */
|
|
1001
|
+
children: /* @__PURE__ */ jsxs11("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1002
|
+
/* @__PURE__ */ jsxs11("defs", { children: [
|
|
1003
|
+
/* @__PURE__ */ jsxs11("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1004
|
+
/* @__PURE__ */ jsx12("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1005
|
+
/* @__PURE__ */ jsx12("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
966
1006
|
] }),
|
|
967
|
-
/* @__PURE__ */
|
|
968
|
-
/* @__PURE__ */
|
|
969
|
-
/* @__PURE__ */
|
|
970
|
-
/* @__PURE__ */
|
|
1007
|
+
/* @__PURE__ */ jsxs11("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1008
|
+
/* @__PURE__ */ jsx12("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1009
|
+
/* @__PURE__ */ jsx12("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1010
|
+
/* @__PURE__ */ jsx12("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
971
1011
|
] }),
|
|
972
|
-
/* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
/* @__PURE__ */
|
|
1012
|
+
/* @__PURE__ */ jsxs11("clipPath", { id: clipId, children: [
|
|
1013
|
+
/* @__PURE__ */ jsx12("path", { d: LEFT }),
|
|
1014
|
+
/* @__PURE__ */ jsx12("path", { d: CENTER }),
|
|
1015
|
+
/* @__PURE__ */ jsx12("path", { d: RIGHT })
|
|
976
1016
|
] })
|
|
977
1017
|
] }),
|
|
978
|
-
/* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
980
|
-
/* @__PURE__ */
|
|
981
|
-
/* @__PURE__ */
|
|
1018
|
+
/* @__PURE__ */ jsx12("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1019
|
+
/* @__PURE__ */ jsx12("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1020
|
+
/* @__PURE__ */ jsx12("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1021
|
+
/* @__PURE__ */ jsx12("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx12("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx12("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
982
1022
|
] })
|
|
983
1023
|
}
|
|
984
1024
|
);
|
|
985
1025
|
}
|
|
986
1026
|
|
|
987
1027
|
// src/components/Modal/Modal.tsx
|
|
988
|
-
import { jsx as
|
|
989
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1028
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1029
|
+
var CloseIcon = () => /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
990
1030
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
991
1031
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
992
1032
|
if (!open) return null;
|
|
993
1033
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
994
1034
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
995
1035
|
return createPortal(
|
|
996
|
-
/* @__PURE__ */
|
|
1036
|
+
/* @__PURE__ */ jsx13("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs12(
|
|
997
1037
|
"div",
|
|
998
1038
|
{
|
|
999
1039
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
1000
1040
|
onClick: (e) => e.stopPropagation(),
|
|
1001
1041
|
children: [
|
|
1002
|
-
/* @__PURE__ */
|
|
1003
|
-
/* @__PURE__ */
|
|
1004
|
-
!noClose && /* @__PURE__ */
|
|
1042
|
+
/* @__PURE__ */ jsxs12("div", { className: "fractal-modal-title-row", children: [
|
|
1043
|
+
/* @__PURE__ */ jsx13("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1044
|
+
!noClose && /* @__PURE__ */ jsx13("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx13(CloseIcon, {}) })
|
|
1005
1045
|
] }),
|
|
1006
|
-
/* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ jsx13(
|
|
1007
1047
|
"div",
|
|
1008
1048
|
{
|
|
1009
1049
|
"aria-busy": loading || void 0,
|
|
@@ -1013,10 +1053,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1013
1053
|
loading && "fractal-modal-body--loading",
|
|
1014
1054
|
scrollable && "fractal-modal-body--scrollable"
|
|
1015
1055
|
),
|
|
1016
|
-
children: loading ? /* @__PURE__ */
|
|
1056
|
+
children: loading ? /* @__PURE__ */ jsx13(UILoader, { label: loadingLabel }) : children
|
|
1017
1057
|
}
|
|
1018
1058
|
),
|
|
1019
|
-
footer && /* @__PURE__ */
|
|
1059
|
+
footer && /* @__PURE__ */ jsx13("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1020
1060
|
]
|
|
1021
1061
|
}
|
|
1022
1062
|
) }),
|
|
@@ -1025,17 +1065,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1025
1065
|
}
|
|
1026
1066
|
|
|
1027
1067
|
// src/components/DataTable/DataTable.tsx
|
|
1028
|
-
import { jsx as
|
|
1068
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1029
1069
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
1030
|
-
return /* @__PURE__ */
|
|
1031
|
-
header && /* @__PURE__ */
|
|
1032
|
-
data.length === 0 ? /* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1070
|
+
return /* @__PURE__ */ jsx14("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs13("div", { className: "fractal-datatable-surface", children: [
|
|
1071
|
+
header && /* @__PURE__ */ jsx14("div", { className: "fractal-datatable-header", children: header }),
|
|
1072
|
+
data.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs13("table", { className: "fractal-datatable-table", children: [
|
|
1073
|
+
/* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx14("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
1074
|
+
/* @__PURE__ */ jsx14("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx14(
|
|
1035
1075
|
"tr",
|
|
1036
1076
|
{
|
|
1037
1077
|
className: "fractal-datatable-row",
|
|
1038
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
1078
|
+
children: columns.map((col) => /* @__PURE__ */ jsx14("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
1039
1079
|
},
|
|
1040
1080
|
rowIndex
|
|
1041
1081
|
)) })
|
|
@@ -1044,9 +1084,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
1044
1084
|
}
|
|
1045
1085
|
|
|
1046
1086
|
// src/components/Dropdown/Dropdown.tsx
|
|
1047
|
-
import * as
|
|
1087
|
+
import * as React10 from "react";
|
|
1048
1088
|
import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
1049
|
-
import { Fragment as Fragment2, jsx as
|
|
1089
|
+
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1050
1090
|
var MARGIN = 4;
|
|
1051
1091
|
function Dropdown({
|
|
1052
1092
|
items,
|
|
@@ -1068,10 +1108,10 @@ function Dropdown({
|
|
|
1068
1108
|
closeOnSelect = true,
|
|
1069
1109
|
disabled = false
|
|
1070
1110
|
}) {
|
|
1071
|
-
const [open, setOpen] =
|
|
1072
|
-
const triggerRef =
|
|
1073
|
-
const panelRef =
|
|
1074
|
-
const [panelStyle, setPanelStyle] =
|
|
1111
|
+
const [open, setOpen] = React10.useState(false);
|
|
1112
|
+
const triggerRef = React10.useRef(null);
|
|
1113
|
+
const panelRef = React10.useRef(null);
|
|
1114
|
+
const [panelStyle, setPanelStyle] = React10.useState({});
|
|
1075
1115
|
const visibleItems = items.filter(
|
|
1076
1116
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
1077
1117
|
);
|
|
@@ -1081,7 +1121,7 @@ function Dropdown({
|
|
|
1081
1121
|
const isUp = direction === "up";
|
|
1082
1122
|
const isHorizontalDirection = direction === "left" || direction === "right";
|
|
1083
1123
|
const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
|
|
1084
|
-
|
|
1124
|
+
React10.useLayoutEffect(() => {
|
|
1085
1125
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
1086
1126
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1087
1127
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -1132,7 +1172,7 @@ function Dropdown({
|
|
|
1132
1172
|
}
|
|
1133
1173
|
setPanelStyle({ top, left, right });
|
|
1134
1174
|
}, [open, direction, isHorizontalDirection, isUp, align]);
|
|
1135
|
-
|
|
1175
|
+
React10.useEffect(() => {
|
|
1136
1176
|
if (!open) return;
|
|
1137
1177
|
const handleClickOutside = (e) => {
|
|
1138
1178
|
const target = e.target;
|
|
@@ -1142,8 +1182,8 @@ function Dropdown({
|
|
|
1142
1182
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1143
1183
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1144
1184
|
}, [open]);
|
|
1145
|
-
return /* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
1185
|
+
return /* @__PURE__ */ jsxs14("div", { className: cn("fractal-dropdown", className), children: [
|
|
1186
|
+
/* @__PURE__ */ jsxs14(
|
|
1147
1187
|
"button",
|
|
1148
1188
|
{
|
|
1149
1189
|
ref: triggerRef,
|
|
@@ -1162,15 +1202,15 @@ function Dropdown({
|
|
|
1162
1202
|
triggerClassName
|
|
1163
1203
|
),
|
|
1164
1204
|
children: [
|
|
1165
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
1166
|
-
selected.icon != null && /* @__PURE__ */
|
|
1167
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */
|
|
1205
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs14(Fragment2, { children: [
|
|
1206
|
+
selected.icon != null && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
1207
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
1168
1208
|
] }),
|
|
1169
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
1209
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx15(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1170
1210
|
]
|
|
1171
1211
|
}
|
|
1172
1212
|
),
|
|
1173
|
-
open && /* @__PURE__ */
|
|
1213
|
+
open && /* @__PURE__ */ jsxs14(
|
|
1174
1214
|
"div",
|
|
1175
1215
|
{
|
|
1176
1216
|
ref: panelRef,
|
|
@@ -1179,21 +1219,21 @@ function Dropdown({
|
|
|
1179
1219
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1180
1220
|
style: panelStyle,
|
|
1181
1221
|
children: [
|
|
1182
|
-
label != null && /* @__PURE__ */
|
|
1222
|
+
label != null && /* @__PURE__ */ jsx15("div", { className: "fractal-dropdown-label", children: label }),
|
|
1183
1223
|
visibleItems.map((item, index) => {
|
|
1184
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
1185
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
1224
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx15("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1225
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx15("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1186
1226
|
if (item.kind === "header") {
|
|
1187
|
-
return /* @__PURE__ */
|
|
1227
|
+
return /* @__PURE__ */ jsxs14(React10.Fragment, { children: [
|
|
1188
1228
|
topDivider,
|
|
1189
|
-
/* @__PURE__ */
|
|
1229
|
+
/* @__PURE__ */ jsx15("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1190
1230
|
bottomDivider
|
|
1191
1231
|
] }, `header-${index}`);
|
|
1192
1232
|
}
|
|
1193
1233
|
const isSelected = item.value === selectedValue;
|
|
1194
|
-
return /* @__PURE__ */
|
|
1234
|
+
return /* @__PURE__ */ jsxs14(React10.Fragment, { children: [
|
|
1195
1235
|
topDivider,
|
|
1196
|
-
/* @__PURE__ */
|
|
1236
|
+
/* @__PURE__ */ jsxs14(
|
|
1197
1237
|
"button",
|
|
1198
1238
|
{
|
|
1199
1239
|
type: "button",
|
|
@@ -1205,9 +1245,9 @@ function Dropdown({
|
|
|
1205
1245
|
},
|
|
1206
1246
|
className: "fractal-dropdown-option",
|
|
1207
1247
|
children: [
|
|
1208
|
-
item.icon != null && /* @__PURE__ */
|
|
1209
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
1210
|
-
item.trailing != null && /* @__PURE__ */
|
|
1248
|
+
item.icon != null && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
1249
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
1250
|
+
item.trailing != null && /* @__PURE__ */ jsx15("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
1211
1251
|
]
|
|
1212
1252
|
}
|
|
1213
1253
|
),
|
|
@@ -1221,10 +1261,10 @@ function Dropdown({
|
|
|
1221
1261
|
}
|
|
1222
1262
|
|
|
1223
1263
|
// src/components/Link/Link.tsx
|
|
1224
|
-
import * as
|
|
1225
|
-
import { jsx as
|
|
1226
|
-
var Link =
|
|
1227
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
1264
|
+
import * as React11 from "react";
|
|
1265
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1266
|
+
var Link = React11.forwardRef(
|
|
1267
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx16(
|
|
1228
1268
|
"a",
|
|
1229
1269
|
{
|
|
1230
1270
|
ref,
|
|
@@ -1236,10 +1276,10 @@ var Link = React10.forwardRef(
|
|
|
1236
1276
|
Link.displayName = "Link";
|
|
1237
1277
|
|
|
1238
1278
|
// src/components/Chip/Chip.tsx
|
|
1239
|
-
import * as
|
|
1240
|
-
import { jsx as
|
|
1241
|
-
var Chip =
|
|
1242
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
1279
|
+
import * as React12 from "react";
|
|
1280
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1281
|
+
var Chip = React12.forwardRef(
|
|
1282
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx17(
|
|
1243
1283
|
"span",
|
|
1244
1284
|
{
|
|
1245
1285
|
ref,
|
|
@@ -1252,7 +1292,7 @@ Chip.displayName = "Chip";
|
|
|
1252
1292
|
|
|
1253
1293
|
// src/components/Checkbox/Checkbox.tsx
|
|
1254
1294
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
1255
|
-
import { jsx as
|
|
1295
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1256
1296
|
function Checkbox({
|
|
1257
1297
|
checked,
|
|
1258
1298
|
indeterminate = false,
|
|
@@ -1263,7 +1303,7 @@ function Checkbox({
|
|
|
1263
1303
|
onKeyDown,
|
|
1264
1304
|
...props
|
|
1265
1305
|
}) {
|
|
1266
|
-
return /* @__PURE__ */
|
|
1306
|
+
return /* @__PURE__ */ jsx18(
|
|
1267
1307
|
"button",
|
|
1268
1308
|
{
|
|
1269
1309
|
...props,
|
|
@@ -1285,10 +1325,10 @@ function Checkbox({
|
|
|
1285
1325
|
onKeyDown?.(event);
|
|
1286
1326
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1287
1327
|
},
|
|
1288
|
-
children: indeterminate ? /* @__PURE__ */
|
|
1289
|
-
/* @__PURE__ */
|
|
1290
|
-
/* @__PURE__ */
|
|
1291
|
-
] }) : checked ? /* @__PURE__ */
|
|
1328
|
+
children: indeterminate ? /* @__PURE__ */ jsxs15("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1329
|
+
/* @__PURE__ */ jsx18(CheckboxIcon, { size: 18 }),
|
|
1330
|
+
/* @__PURE__ */ jsx18(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1331
|
+
] }) : checked ? /* @__PURE__ */ jsx18(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx18(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
1292
1332
|
}
|
|
1293
1333
|
);
|
|
1294
1334
|
}
|
|
@@ -1296,7 +1336,7 @@ function Checkbox({
|
|
|
1296
1336
|
// src/components/SortableTable/SortableTable.tsx
|
|
1297
1337
|
import { useMemo as useMemo2, useState as useState5 } from "react";
|
|
1298
1338
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1299
|
-
import { jsx as
|
|
1339
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1300
1340
|
function SortableTable({
|
|
1301
1341
|
columns,
|
|
1302
1342
|
data,
|
|
@@ -1372,13 +1412,13 @@ function SortableTable({
|
|
|
1372
1412
|
onSortChange?.(nextKey, nextDirection);
|
|
1373
1413
|
}
|
|
1374
1414
|
};
|
|
1375
|
-
return /* @__PURE__ */
|
|
1376
|
-
header && /* @__PURE__ */
|
|
1377
|
-
sorted.length === 0 ? /* @__PURE__ */
|
|
1378
|
-
/* @__PURE__ */
|
|
1415
|
+
return /* @__PURE__ */ jsx19("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs16("div", { className: "fractal-sortable-table-surface", children: [
|
|
1416
|
+
header && /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1417
|
+
sorted.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs16("table", { className: "fractal-sortable-table-table", children: [
|
|
1418
|
+
/* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
1379
1419
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1380
1420
|
if (!col.sortable) {
|
|
1381
|
-
return /* @__PURE__ */
|
|
1421
|
+
return /* @__PURE__ */ jsx19(
|
|
1382
1422
|
"th",
|
|
1383
1423
|
{
|
|
1384
1424
|
className: "fractal-sortable-table-th",
|
|
@@ -1388,12 +1428,12 @@ function SortableTable({
|
|
|
1388
1428
|
col.key
|
|
1389
1429
|
);
|
|
1390
1430
|
}
|
|
1391
|
-
return /* @__PURE__ */
|
|
1431
|
+
return /* @__PURE__ */ jsx19(
|
|
1392
1432
|
"th",
|
|
1393
1433
|
{
|
|
1394
1434
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1395
1435
|
style: { width: col.width },
|
|
1396
|
-
children: /* @__PURE__ */
|
|
1436
|
+
children: /* @__PURE__ */ jsxs16(
|
|
1397
1437
|
"button",
|
|
1398
1438
|
{
|
|
1399
1439
|
type: "button",
|
|
@@ -1404,8 +1444,8 @@ function SortableTable({
|
|
|
1404
1444
|
onClick: () => handleSortClick(col.key),
|
|
1405
1445
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1406
1446
|
children: [
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1447
|
+
/* @__PURE__ */ jsx19("span", { children: col.header }),
|
|
1448
|
+
/* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx19(ArrowsUpDown, { size: 14 }) })
|
|
1409
1449
|
]
|
|
1410
1450
|
}
|
|
1411
1451
|
)
|
|
@@ -1413,13 +1453,13 @@ function SortableTable({
|
|
|
1413
1453
|
col.key
|
|
1414
1454
|
);
|
|
1415
1455
|
}) }) }),
|
|
1416
|
-
/* @__PURE__ */
|
|
1456
|
+
/* @__PURE__ */ jsx19("tbody", { children: sorted.map((row, rowIndex) => {
|
|
1417
1457
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1418
1458
|
const action = rowAction ? {
|
|
1419
1459
|
label: rowAction.label(row, rowIndex),
|
|
1420
1460
|
icon: rowAction.icon(row, rowIndex)
|
|
1421
1461
|
} : null;
|
|
1422
|
-
return /* @__PURE__ */
|
|
1462
|
+
return /* @__PURE__ */ jsx19(
|
|
1423
1463
|
"tr",
|
|
1424
1464
|
{
|
|
1425
1465
|
className: cn(
|
|
@@ -1437,7 +1477,7 @@ function SortableTable({
|
|
|
1437
1477
|
"aria-label": action?.label,
|
|
1438
1478
|
role: onRowClick ? "button" : void 0,
|
|
1439
1479
|
tabIndex: onRowClick ? 0 : void 0,
|
|
1440
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1480
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs16(
|
|
1441
1481
|
"td",
|
|
1442
1482
|
{
|
|
1443
1483
|
className: cn(
|
|
@@ -1447,7 +1487,7 @@ function SortableTable({
|
|
|
1447
1487
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1448
1488
|
children: [
|
|
1449
1489
|
col.render(row, rowIndex),
|
|
1450
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1490
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1451
1491
|
]
|
|
1452
1492
|
},
|
|
1453
1493
|
col.key
|
|
@@ -1462,7 +1502,7 @@ function SortableTable({
|
|
|
1462
1502
|
|
|
1463
1503
|
// src/components/Tabs/Tabs.tsx
|
|
1464
1504
|
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState6 } from "react";
|
|
1465
|
-
import { jsx as
|
|
1505
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1466
1506
|
function Tabs({
|
|
1467
1507
|
items,
|
|
1468
1508
|
defaultValue,
|
|
@@ -1533,8 +1573,8 @@ function Tabs({
|
|
|
1533
1573
|
selectTab(nextId2);
|
|
1534
1574
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1535
1575
|
};
|
|
1536
|
-
return /* @__PURE__ */
|
|
1537
|
-
/* @__PURE__ */
|
|
1576
|
+
return /* @__PURE__ */ jsxs17("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1577
|
+
/* @__PURE__ */ jsx20(
|
|
1538
1578
|
"div",
|
|
1539
1579
|
{
|
|
1540
1580
|
ref: tabListRef,
|
|
@@ -1547,7 +1587,7 @@ function Tabs({
|
|
|
1547
1587
|
const isActive = item.id === activeId;
|
|
1548
1588
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1549
1589
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1550
|
-
return /* @__PURE__ */
|
|
1590
|
+
return /* @__PURE__ */ jsx20(
|
|
1551
1591
|
"button",
|
|
1552
1592
|
{
|
|
1553
1593
|
ref: (el) => {
|
|
@@ -1578,7 +1618,7 @@ function Tabs({
|
|
|
1578
1618
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1579
1619
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1580
1620
|
const isActive = item.id === activeId;
|
|
1581
|
-
return /* @__PURE__ */
|
|
1621
|
+
return /* @__PURE__ */ jsx20(
|
|
1582
1622
|
"div",
|
|
1583
1623
|
{
|
|
1584
1624
|
id: panelId,
|
|
@@ -1595,14 +1635,14 @@ function Tabs({
|
|
|
1595
1635
|
}
|
|
1596
1636
|
|
|
1597
1637
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1598
|
-
import * as
|
|
1599
|
-
import { jsx as
|
|
1638
|
+
import * as React13 from "react";
|
|
1639
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1600
1640
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1601
|
-
const switcherRef =
|
|
1602
|
-
const buttonRefs =
|
|
1603
|
-
const indicatorMotionReadyRef =
|
|
1641
|
+
const switcherRef = React13.useRef(null);
|
|
1642
|
+
const buttonRefs = React13.useRef([]);
|
|
1643
|
+
const indicatorMotionReadyRef = React13.useRef(false);
|
|
1604
1644
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1605
|
-
|
|
1645
|
+
React13.useLayoutEffect(() => {
|
|
1606
1646
|
const switcher = switcherRef.current;
|
|
1607
1647
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1608
1648
|
let motionFrame = 0;
|
|
@@ -1654,7 +1694,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1654
1694
|
onValueChange(items[nextIndex].value);
|
|
1655
1695
|
}
|
|
1656
1696
|
};
|
|
1657
|
-
return /* @__PURE__ */
|
|
1697
|
+
return /* @__PURE__ */ jsxs18(
|
|
1658
1698
|
"div",
|
|
1659
1699
|
{
|
|
1660
1700
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1662,10 +1702,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1662
1702
|
"aria-label": ariaLabel,
|
|
1663
1703
|
ref: switcherRef,
|
|
1664
1704
|
children: [
|
|
1665
|
-
/* @__PURE__ */
|
|
1705
|
+
/* @__PURE__ */ jsx21("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1666
1706
|
items.map((item, index) => {
|
|
1667
1707
|
const active = item.value === value;
|
|
1668
|
-
return /* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ jsx21(
|
|
1669
1709
|
"button",
|
|
1670
1710
|
{
|
|
1671
1711
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1699,7 +1739,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1699
1739
|
// src/components/Disclosure/Disclosure.tsx
|
|
1700
1740
|
import { useId as useId3, useState as useState7 } from "react";
|
|
1701
1741
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1702
|
-
import { jsx as
|
|
1742
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1703
1743
|
function Disclosure({
|
|
1704
1744
|
title,
|
|
1705
1745
|
meta,
|
|
@@ -1727,7 +1767,7 @@ function Disclosure({
|
|
|
1727
1767
|
onOpenChange?.(next);
|
|
1728
1768
|
}
|
|
1729
1769
|
};
|
|
1730
|
-
return /* @__PURE__ */
|
|
1770
|
+
return /* @__PURE__ */ jsxs19(
|
|
1731
1771
|
"div",
|
|
1732
1772
|
{
|
|
1733
1773
|
className: cn(
|
|
@@ -1738,7 +1778,7 @@ function Disclosure({
|
|
|
1738
1778
|
className
|
|
1739
1779
|
),
|
|
1740
1780
|
children: [
|
|
1741
|
-
/* @__PURE__ */
|
|
1781
|
+
/* @__PURE__ */ jsxs19(
|
|
1742
1782
|
"button",
|
|
1743
1783
|
{
|
|
1744
1784
|
type: "button",
|
|
@@ -1749,13 +1789,13 @@ function Disclosure({
|
|
|
1749
1789
|
disabled,
|
|
1750
1790
|
onClick: toggle,
|
|
1751
1791
|
children: [
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
meta && /* @__PURE__ */
|
|
1792
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx22(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx22(ChevronRight3, { size: 16 }) }),
|
|
1793
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-disclosure-title", children: title }),
|
|
1794
|
+
meta && /* @__PURE__ */ jsx22("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1755
1795
|
]
|
|
1756
1796
|
}
|
|
1757
1797
|
),
|
|
1758
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsx22(
|
|
1759
1799
|
"div",
|
|
1760
1800
|
{
|
|
1761
1801
|
id: panelId,
|
|
@@ -1763,7 +1803,7 @@ function Disclosure({
|
|
|
1763
1803
|
"aria-labelledby": headerId,
|
|
1764
1804
|
className: "fractal-disclosure-panel",
|
|
1765
1805
|
hidden: !isOpen,
|
|
1766
|
-
children: /* @__PURE__ */
|
|
1806
|
+
children: /* @__PURE__ */ jsx22("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1767
1807
|
}
|
|
1768
1808
|
)
|
|
1769
1809
|
]
|
|
@@ -1772,18 +1812,18 @@ function Disclosure({
|
|
|
1772
1812
|
}
|
|
1773
1813
|
|
|
1774
1814
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1775
|
-
import { jsx as
|
|
1815
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1776
1816
|
var LATTICE_COUNT = 160;
|
|
1777
1817
|
var WAVE_PERIOD = 80;
|
|
1778
1818
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1779
|
-
return /* @__PURE__ */
|
|
1819
|
+
return /* @__PURE__ */ jsx23(
|
|
1780
1820
|
"span",
|
|
1781
1821
|
{
|
|
1782
1822
|
"aria-label": label,
|
|
1783
1823
|
className: cn("fractal-lattice-loader", className),
|
|
1784
1824
|
role: "progressbar",
|
|
1785
1825
|
...props,
|
|
1786
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
1826
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx23(
|
|
1787
1827
|
"span",
|
|
1788
1828
|
{
|
|
1789
1829
|
"aria-hidden": "true",
|
|
@@ -1797,10 +1837,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1797
1837
|
}
|
|
1798
1838
|
|
|
1799
1839
|
// src/components/Ghost/Ghost.tsx
|
|
1800
|
-
import { jsx as
|
|
1840
|
+
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1801
1841
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1802
1842
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1803
|
-
return /* @__PURE__ */
|
|
1843
|
+
return /* @__PURE__ */ jsx24(
|
|
1804
1844
|
"div",
|
|
1805
1845
|
{
|
|
1806
1846
|
"aria-hidden": "true",
|
|
@@ -1816,15 +1856,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1816
1856
|
);
|
|
1817
1857
|
}
|
|
1818
1858
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1819
|
-
return /* @__PURE__ */
|
|
1859
|
+
return /* @__PURE__ */ jsx24(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1820
1860
|
}
|
|
1821
1861
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1822
|
-
return /* @__PURE__ */
|
|
1862
|
+
return /* @__PURE__ */ jsx24(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1823
1863
|
}
|
|
1824
1864
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1825
|
-
return /* @__PURE__ */
|
|
1826
|
-
showHeader && /* @__PURE__ */
|
|
1827
|
-
/* @__PURE__ */
|
|
1865
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
1866
|
+
showHeader && /* @__PURE__ */ jsx24(GhostLine, { width: "38%" }),
|
|
1867
|
+
/* @__PURE__ */ jsx24("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx24(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1828
1868
|
] });
|
|
1829
1869
|
}
|
|
1830
1870
|
function DataTableGhost({
|
|
@@ -1838,81 +1878,81 @@ function DataTableGhost({
|
|
|
1838
1878
|
...props
|
|
1839
1879
|
}) {
|
|
1840
1880
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1841
|
-
return /* @__PURE__ */
|
|
1842
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
1843
|
-
/* @__PURE__ */
|
|
1881
|
+
return /* @__PURE__ */ jsx24("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs20("table", { className: "fractal-ghost-table__table", children: [
|
|
1882
|
+
(showHeader || headers) && /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsx24("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx24("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx24(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
1883
|
+
/* @__PURE__ */ jsx24("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx24("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx24("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx24(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1844
1884
|
] }) });
|
|
1845
1885
|
}
|
|
1846
1886
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1847
|
-
return /* @__PURE__ */
|
|
1887
|
+
return /* @__PURE__ */ jsx24(FormFieldGhost, { className, labelWidth, ...props });
|
|
1848
1888
|
}
|
|
1849
1889
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1850
|
-
return /* @__PURE__ */
|
|
1890
|
+
return /* @__PURE__ */ jsx24(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1851
1891
|
}
|
|
1852
1892
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1853
|
-
return /* @__PURE__ */
|
|
1893
|
+
return /* @__PURE__ */ jsx24(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1854
1894
|
}
|
|
1855
1895
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1856
|
-
return /* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1896
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
1897
|
+
/* @__PURE__ */ jsx24(LabelGhost, { width: labelWidth }),
|
|
1898
|
+
/* @__PURE__ */ jsx24(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1859
1899
|
] });
|
|
1860
1900
|
}
|
|
1861
1901
|
function AlertGhost({ className, ...props }) {
|
|
1862
|
-
return /* @__PURE__ */
|
|
1863
|
-
/* @__PURE__ */
|
|
1864
|
-
/* @__PURE__ */
|
|
1902
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
1903
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "30%" }),
|
|
1904
|
+
/* @__PURE__ */ jsx24(GhostLine, { size: "sm", width: "78%" })
|
|
1865
1905
|
] });
|
|
1866
1906
|
}
|
|
1867
1907
|
function CheckboxGhost({ className, ...props }) {
|
|
1868
|
-
return /* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1908
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
1909
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
1910
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "42%" })
|
|
1871
1911
|
] });
|
|
1872
1912
|
}
|
|
1873
1913
|
var ToggleGhost = CheckboxGhost;
|
|
1874
1914
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1875
|
-
return /* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ jsx24(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1876
1916
|
}
|
|
1877
1917
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1878
|
-
return /* @__PURE__ */
|
|
1918
|
+
return /* @__PURE__ */ jsx24(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1879
1919
|
}
|
|
1880
1920
|
var TextButtonGhost = LinkGhost;
|
|
1881
1921
|
function DropdownGhost({ className, ...props }) {
|
|
1882
|
-
return /* @__PURE__ */
|
|
1883
|
-
/* @__PURE__ */
|
|
1884
|
-
/* @__PURE__ */
|
|
1922
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
1923
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "38%" }),
|
|
1924
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
1885
1925
|
] });
|
|
1886
1926
|
}
|
|
1887
1927
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1888
|
-
return /* @__PURE__ */
|
|
1928
|
+
return /* @__PURE__ */ jsx24("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx24(Ghost, {}, index)) });
|
|
1889
1929
|
}
|
|
1890
1930
|
var TabsGhost = ContentSwitcherGhost;
|
|
1891
1931
|
function DisclosureGhost({ className, ...props }) {
|
|
1892
|
-
return /* @__PURE__ */
|
|
1893
|
-
/* @__PURE__ */
|
|
1894
|
-
/* @__PURE__ */
|
|
1932
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
1933
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
1934
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "42%" })
|
|
1895
1935
|
] });
|
|
1896
1936
|
}
|
|
1897
1937
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1898
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ jsx24("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx24(Ghost, {}, index)) });
|
|
1899
1939
|
}
|
|
1900
1940
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1901
|
-
return /* @__PURE__ */
|
|
1902
|
-
/* @__PURE__ */
|
|
1903
|
-
/* @__PURE__ */
|
|
1904
|
-
/* @__PURE__ */
|
|
1941
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
1942
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
1943
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "26%" }),
|
|
1944
|
+
/* @__PURE__ */ jsx24(GhostLine, { size: "sm", width: "46%" })
|
|
1905
1945
|
] });
|
|
1906
1946
|
}
|
|
1907
1947
|
function PromptCardGhost({ className, ...props }) {
|
|
1908
|
-
return /* @__PURE__ */
|
|
1948
|
+
return /* @__PURE__ */ jsx24(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1909
1949
|
}
|
|
1910
1950
|
function ConversationGhost({
|
|
1911
1951
|
className,
|
|
1912
1952
|
"aria-label": ariaLabel = "Loading conversation",
|
|
1913
1953
|
...props
|
|
1914
1954
|
}) {
|
|
1915
|
-
return /* @__PURE__ */
|
|
1955
|
+
return /* @__PURE__ */ jsxs20(
|
|
1916
1956
|
"div",
|
|
1917
1957
|
{
|
|
1918
1958
|
"aria-busy": "true",
|
|
@@ -1921,54 +1961,54 @@ function ConversationGhost({
|
|
|
1921
1961
|
role: "status",
|
|
1922
1962
|
...props,
|
|
1923
1963
|
children: [
|
|
1924
|
-
/* @__PURE__ */
|
|
1925
|
-
/* @__PURE__ */
|
|
1926
|
-
/* @__PURE__ */
|
|
1927
|
-
/* @__PURE__ */
|
|
1964
|
+
/* @__PURE__ */ jsx24("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs20("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
1965
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "100%" }),
|
|
1966
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "86%" }),
|
|
1967
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "64%" })
|
|
1928
1968
|
] }) }),
|
|
1929
|
-
/* @__PURE__ */
|
|
1930
|
-
/* @__PURE__ */
|
|
1931
|
-
/* @__PURE__ */
|
|
1932
|
-
/* @__PURE__ */
|
|
1969
|
+
/* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
1970
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "92%" }),
|
|
1971
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "78%" }),
|
|
1972
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "58%" })
|
|
1933
1973
|
] })
|
|
1934
1974
|
]
|
|
1935
1975
|
}
|
|
1936
1976
|
);
|
|
1937
1977
|
}
|
|
1938
1978
|
function SortableTableGhost(props) {
|
|
1939
|
-
return /* @__PURE__ */
|
|
1979
|
+
return /* @__PURE__ */ jsx24(DataTableGhost, { ...props });
|
|
1940
1980
|
}
|
|
1941
1981
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1942
|
-
return /* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1944
|
-
/* @__PURE__ */
|
|
1945
|
-
/* @__PURE__ */
|
|
1946
|
-
/* @__PURE__ */
|
|
1982
|
+
return /* @__PURE__ */ jsxs20("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
1983
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
1984
|
+
/* @__PURE__ */ jsx24("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs20("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
1985
|
+
/* @__PURE__ */ jsx24(Ghost, {}),
|
|
1986
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
1947
1987
|
] }, index)) })
|
|
1948
1988
|
] });
|
|
1949
1989
|
}
|
|
1950
1990
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1951
|
-
return /* @__PURE__ */
|
|
1991
|
+
return /* @__PURE__ */ jsx24(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1952
1992
|
}
|
|
1953
1993
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1954
|
-
return /* @__PURE__ */
|
|
1994
|
+
return /* @__PURE__ */ jsx24(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1955
1995
|
}
|
|
1956
1996
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1957
|
-
return /* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1959
|
-
/* @__PURE__ */
|
|
1960
|
-
/* @__PURE__ */
|
|
1997
|
+
return /* @__PURE__ */ jsxs20("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
1998
|
+
/* @__PURE__ */ jsxs20("div", { className: "fractal-ghost-surface__header", children: [
|
|
1999
|
+
/* @__PURE__ */ jsx24(GhostLine, { width: "42%" }),
|
|
2000
|
+
/* @__PURE__ */ jsx24(Ghost, { className: "fractal-ghost-surface__close" })
|
|
1961
2001
|
] }),
|
|
1962
|
-
title && /* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
2002
|
+
title && /* @__PURE__ */ jsx24("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2003
|
+
/* @__PURE__ */ jsx24("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx24(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
1964
2004
|
] });
|
|
1965
2005
|
}
|
|
1966
2006
|
|
|
1967
2007
|
// src/components/Sidebar/Sidebar.tsx
|
|
1968
|
-
import * as
|
|
1969
|
-
import { Fragment as Fragment3, jsx as
|
|
1970
|
-
var Sidebar =
|
|
1971
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2008
|
+
import * as React14 from "react";
|
|
2009
|
+
import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2010
|
+
var Sidebar = React14.forwardRef(
|
|
2011
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1972
2012
|
"aside",
|
|
1973
2013
|
{
|
|
1974
2014
|
ref,
|
|
@@ -1980,12 +2020,12 @@ var Sidebar = React13.forwardRef(
|
|
|
1980
2020
|
)
|
|
1981
2021
|
);
|
|
1982
2022
|
Sidebar.displayName = "Sidebar";
|
|
1983
|
-
var SidebarHeader =
|
|
1984
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2023
|
+
var SidebarHeader = React14.forwardRef(
|
|
2024
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1985
2025
|
);
|
|
1986
2026
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1987
|
-
var SidebarBrand =
|
|
1988
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2027
|
+
var SidebarBrand = React14.forwardRef(
|
|
2028
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx25("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
1989
2029
|
);
|
|
1990
2030
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1991
2031
|
function SidebarAccountMenu({
|
|
@@ -1996,7 +2036,7 @@ function SidebarAccountMenu({
|
|
|
1996
2036
|
icon,
|
|
1997
2037
|
className
|
|
1998
2038
|
}) {
|
|
1999
|
-
return /* @__PURE__ */
|
|
2039
|
+
return /* @__PURE__ */ jsx25(
|
|
2000
2040
|
Dropdown,
|
|
2001
2041
|
{
|
|
2002
2042
|
align: "left",
|
|
@@ -2006,25 +2046,25 @@ function SidebarAccountMenu({
|
|
|
2006
2046
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2007
2047
|
selectedValue: "",
|
|
2008
2048
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2009
|
-
triggerContent: /* @__PURE__ */
|
|
2010
|
-
icon && /* @__PURE__ */
|
|
2011
|
-
/* @__PURE__ */
|
|
2049
|
+
triggerContent: /* @__PURE__ */ jsxs21(Fragment3, { children: [
|
|
2050
|
+
icon && /* @__PURE__ */ jsx25("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2051
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2012
2052
|
] }),
|
|
2013
2053
|
triggerLabel,
|
|
2014
2054
|
triggerVariant: "tertiary"
|
|
2015
2055
|
}
|
|
2016
2056
|
);
|
|
2017
2057
|
}
|
|
2018
|
-
var SidebarNav =
|
|
2019
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2058
|
+
var SidebarNav = React14.forwardRef(
|
|
2059
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx25("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2020
2060
|
);
|
|
2021
2061
|
SidebarNav.displayName = "SidebarNav";
|
|
2022
|
-
var SidebarSection =
|
|
2023
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2062
|
+
var SidebarSection = React14.forwardRef(
|
|
2063
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2024
2064
|
);
|
|
2025
2065
|
SidebarSection.displayName = "SidebarSection";
|
|
2026
|
-
var SidebarNavItem =
|
|
2027
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
2066
|
+
var SidebarNavItem = React14.forwardRef(
|
|
2067
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs21(
|
|
2028
2068
|
"button",
|
|
2029
2069
|
{
|
|
2030
2070
|
ref,
|
|
@@ -2034,28 +2074,28 @@ var SidebarNavItem = React13.forwardRef(
|
|
|
2034
2074
|
"aria-current": active ? "page" : void 0,
|
|
2035
2075
|
...props,
|
|
2036
2076
|
children: [
|
|
2037
|
-
icon && /* @__PURE__ */
|
|
2038
|
-
/* @__PURE__ */
|
|
2039
|
-
endAdornment && /* @__PURE__ */
|
|
2077
|
+
icon && /* @__PURE__ */ jsx25("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2078
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2079
|
+
endAdornment && /* @__PURE__ */ jsx25("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2040
2080
|
]
|
|
2041
2081
|
}
|
|
2042
2082
|
)
|
|
2043
2083
|
);
|
|
2044
2084
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2045
|
-
var SidebarFooter =
|
|
2046
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2085
|
+
var SidebarFooter = React14.forwardRef(
|
|
2086
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx25("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2047
2087
|
);
|
|
2048
2088
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2049
2089
|
|
|
2050
2090
|
// src/components/SidePanel/SidePanel.tsx
|
|
2051
2091
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2052
2092
|
import { Close } from "@mirror-physics/fractal-icons";
|
|
2053
|
-
import { jsx as
|
|
2093
|
+
import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2054
2094
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2055
2095
|
useEscapeDismiss(80, onClose, open);
|
|
2056
2096
|
if (!open) return null;
|
|
2057
2097
|
return createPortal2(
|
|
2058
|
-
/* @__PURE__ */
|
|
2098
|
+
/* @__PURE__ */ jsx26("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs22(
|
|
2059
2099
|
"aside",
|
|
2060
2100
|
{
|
|
2061
2101
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2064,15 +2104,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2064
2104
|
role: "dialog",
|
|
2065
2105
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2066
2106
|
children: [
|
|
2067
|
-
/* @__PURE__ */
|
|
2068
|
-
/* @__PURE__ */
|
|
2069
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2070
|
-
description && /* @__PURE__ */
|
|
2107
|
+
/* @__PURE__ */ jsxs22("header", { className: "fractal-side-panel__header", children: [
|
|
2108
|
+
/* @__PURE__ */ jsxs22("div", { className: "fractal-side-panel__heading", children: [
|
|
2109
|
+
typeof title === "string" ? /* @__PURE__ */ jsx26("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx26("div", { className: "fractal-side-panel__title", children: title }),
|
|
2110
|
+
description && /* @__PURE__ */ jsx26("p", { className: "fractal-side-panel__description", children: description })
|
|
2071
2111
|
] }),
|
|
2072
|
-
/* @__PURE__ */
|
|
2112
|
+
/* @__PURE__ */ jsx26("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx26(Close, { size: 18 }) })
|
|
2073
2113
|
] }),
|
|
2074
|
-
/* @__PURE__ */
|
|
2075
|
-
footer && /* @__PURE__ */
|
|
2114
|
+
/* @__PURE__ */ jsx26("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx26(UILoader, { label: loadingLabel }) : children }),
|
|
2115
|
+
footer && /* @__PURE__ */ jsx26("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2076
2116
|
]
|
|
2077
2117
|
}
|
|
2078
2118
|
) }),
|
|
@@ -2081,18 +2121,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2081
2121
|
}
|
|
2082
2122
|
|
|
2083
2123
|
// src/components/Textarea/Textarea.tsx
|
|
2084
|
-
import * as
|
|
2085
|
-
import { jsx as
|
|
2086
|
-
var Textarea =
|
|
2087
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2124
|
+
import * as React15 from "react";
|
|
2125
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
2126
|
+
var Textarea = React15.forwardRef(
|
|
2127
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx27("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2088
2128
|
);
|
|
2089
2129
|
Textarea.displayName = "Textarea";
|
|
2090
2130
|
|
|
2091
2131
|
// src/components/TextButton/TextButton.tsx
|
|
2092
|
-
import * as
|
|
2093
|
-
import { jsx as
|
|
2094
|
-
var TextButton =
|
|
2095
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
2132
|
+
import * as React16 from "react";
|
|
2133
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2134
|
+
var TextButton = React16.forwardRef(
|
|
2135
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs23(
|
|
2096
2136
|
"button",
|
|
2097
2137
|
{
|
|
2098
2138
|
ref,
|
|
@@ -2100,9 +2140,9 @@ var TextButton = React15.forwardRef(
|
|
|
2100
2140
|
type: "button",
|
|
2101
2141
|
...props,
|
|
2102
2142
|
children: [
|
|
2103
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2105
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2143
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx28("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2144
|
+
/* @__PURE__ */ jsx28("span", { children }),
|
|
2145
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx28("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2106
2146
|
]
|
|
2107
2147
|
}
|
|
2108
2148
|
)
|
|
@@ -2110,9 +2150,9 @@ var TextButton = React15.forwardRef(
|
|
|
2110
2150
|
TextButton.displayName = "TextButton";
|
|
2111
2151
|
|
|
2112
2152
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2113
|
-
import * as
|
|
2153
|
+
import * as React17 from "react";
|
|
2114
2154
|
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2115
|
-
import { jsx as
|
|
2155
|
+
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2116
2156
|
function FileDropzone({
|
|
2117
2157
|
files,
|
|
2118
2158
|
onFilesChange,
|
|
@@ -2123,17 +2163,17 @@ function FileDropzone({
|
|
|
2123
2163
|
description = "Files stay attached to this record.",
|
|
2124
2164
|
className
|
|
2125
2165
|
}) {
|
|
2126
|
-
const inputId =
|
|
2127
|
-
const inputRef =
|
|
2128
|
-
const [isDragging, setIsDragging] =
|
|
2166
|
+
const inputId = React17.useId();
|
|
2167
|
+
const inputRef = React17.useRef(null);
|
|
2168
|
+
const [isDragging, setIsDragging] = React17.useState(false);
|
|
2129
2169
|
const addFiles = (nextFiles) => {
|
|
2130
2170
|
if (disabled) return;
|
|
2131
2171
|
const additions = Array.from(nextFiles);
|
|
2132
2172
|
if (additions.length === 0) return;
|
|
2133
2173
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2134
2174
|
};
|
|
2135
|
-
return /* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2175
|
+
return /* @__PURE__ */ jsxs24("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2176
|
+
/* @__PURE__ */ jsx29(
|
|
2137
2177
|
"input",
|
|
2138
2178
|
{
|
|
2139
2179
|
ref: inputRef,
|
|
@@ -2149,7 +2189,7 @@ function FileDropzone({
|
|
|
2149
2189
|
}
|
|
2150
2190
|
}
|
|
2151
2191
|
),
|
|
2152
|
-
/* @__PURE__ */
|
|
2192
|
+
/* @__PURE__ */ jsxs24(
|
|
2153
2193
|
"button",
|
|
2154
2194
|
{
|
|
2155
2195
|
className: "fractal-file-dropzone__target",
|
|
@@ -2172,18 +2212,18 @@ function FileDropzone({
|
|
|
2172
2212
|
addFiles(event.dataTransfer.files);
|
|
2173
2213
|
},
|
|
2174
2214
|
children: [
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2177
|
-
/* @__PURE__ */
|
|
2178
|
-
description && /* @__PURE__ */
|
|
2215
|
+
/* @__PURE__ */ jsx29(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2216
|
+
/* @__PURE__ */ jsxs24("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2217
|
+
/* @__PURE__ */ jsx29("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2218
|
+
description && /* @__PURE__ */ jsx29("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2179
2219
|
] })
|
|
2180
2220
|
]
|
|
2181
2221
|
}
|
|
2182
2222
|
),
|
|
2183
|
-
files.length > 0 && /* @__PURE__ */
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2223
|
+
files.length > 0 && /* @__PURE__ */ jsx29("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs24("li", { className: "fractal-file-dropzone__file", children: [
|
|
2224
|
+
/* @__PURE__ */ jsx29("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2225
|
+
/* @__PURE__ */ jsx29("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2226
|
+
/* @__PURE__ */ jsx29(
|
|
2187
2227
|
"button",
|
|
2188
2228
|
{
|
|
2189
2229
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2191,7 +2231,7 @@ function FileDropzone({
|
|
|
2191
2231
|
"aria-label": `Remove ${file.name}`,
|
|
2192
2232
|
disabled,
|
|
2193
2233
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2194
|
-
children: /* @__PURE__ */
|
|
2234
|
+
children: /* @__PURE__ */ jsx29(Close2, { "aria-hidden": "true", size: 14 })
|
|
2195
2235
|
}
|
|
2196
2236
|
)
|
|
2197
2237
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2205,7 +2245,7 @@ function formatFileSize(bytes) {
|
|
|
2205
2245
|
|
|
2206
2246
|
// src/components/Pagination/Pagination.tsx
|
|
2207
2247
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2208
|
-
import { jsx as
|
|
2248
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2209
2249
|
function Pagination({
|
|
2210
2250
|
page,
|
|
2211
2251
|
pageSize,
|
|
@@ -2221,10 +2261,10 @@ function Pagination({
|
|
|
2221
2261
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2222
2262
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2223
2263
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2224
|
-
return /* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
/* @__PURE__ */
|
|
2227
|
-
canChangePageSize && /* @__PURE__ */
|
|
2264
|
+
return /* @__PURE__ */ jsxs25("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2265
|
+
/* @__PURE__ */ jsx30("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2266
|
+
/* @__PURE__ */ jsxs25("div", { className: "fractal-pagination__controls", children: [
|
|
2267
|
+
canChangePageSize && /* @__PURE__ */ jsx30(
|
|
2228
2268
|
Dropdown,
|
|
2229
2269
|
{
|
|
2230
2270
|
align: "right",
|
|
@@ -2241,7 +2281,7 @@ function Pagination({
|
|
|
2241
2281
|
triggerVariant: "tertiary"
|
|
2242
2282
|
}
|
|
2243
2283
|
),
|
|
2244
|
-
/* @__PURE__ */
|
|
2284
|
+
/* @__PURE__ */ jsx30(
|
|
2245
2285
|
"button",
|
|
2246
2286
|
{
|
|
2247
2287
|
className: "fractal-pagination__button",
|
|
@@ -2250,15 +2290,15 @@ function Pagination({
|
|
|
2250
2290
|
title: "Previous page",
|
|
2251
2291
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2252
2292
|
onClick: () => onPageChange(currentPage - 1),
|
|
2253
|
-
children: /* @__PURE__ */
|
|
2293
|
+
children: /* @__PURE__ */ jsx30(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2254
2294
|
}
|
|
2255
2295
|
),
|
|
2256
|
-
/* @__PURE__ */
|
|
2296
|
+
/* @__PURE__ */ jsxs25("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2257
2297
|
currentPage,
|
|
2258
2298
|
" of ",
|
|
2259
2299
|
totalPages
|
|
2260
2300
|
] }),
|
|
2261
|
-
/* @__PURE__ */
|
|
2301
|
+
/* @__PURE__ */ jsx30(
|
|
2262
2302
|
"button",
|
|
2263
2303
|
{
|
|
2264
2304
|
className: "fractal-pagination__button",
|
|
@@ -2267,7 +2307,7 @@ function Pagination({
|
|
|
2267
2307
|
title: "Next page",
|
|
2268
2308
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2269
2309
|
onClick: () => onPageChange(currentPage + 1),
|
|
2270
|
-
children: /* @__PURE__ */
|
|
2310
|
+
children: /* @__PURE__ */ jsx30(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2271
2311
|
}
|
|
2272
2312
|
)
|
|
2273
2313
|
] })
|
|
@@ -2337,6 +2377,7 @@ export {
|
|
|
2337
2377
|
SidebarSection,
|
|
2338
2378
|
SortableTable,
|
|
2339
2379
|
SortableTableGhost,
|
|
2380
|
+
TableSearch,
|
|
2340
2381
|
Tabs,
|
|
2341
2382
|
TabsGhost,
|
|
2342
2383
|
TextButton,
|