@ship-it-ui/ui 0.0.5 → 0.0.7
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 +963 -769
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +69 -8
- package/dist/index.d.ts +69 -8
- package/dist/index.js +970 -770
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -93,6 +93,7 @@ __export(index_exports, {
|
|
|
93
93
|
HoverCardRoot: () => HoverCardRoot,
|
|
94
94
|
HoverCardTrigger: () => HoverCardTrigger,
|
|
95
95
|
IconButton: () => IconButton,
|
|
96
|
+
InlineEdit: () => InlineEdit,
|
|
96
97
|
Input: () => Input,
|
|
97
98
|
Kbd: () => Kbd,
|
|
98
99
|
LargeTitle: () => LargeTitle,
|
|
@@ -136,6 +137,7 @@ __export(index_exports, {
|
|
|
136
137
|
SelectValue: () => SelectValue,
|
|
137
138
|
Sheet: () => Sheet,
|
|
138
139
|
Sidebar: () => Sidebar,
|
|
140
|
+
SimpleTooltip: () => SimpleTooltip,
|
|
139
141
|
Skeleton: () => Skeleton,
|
|
140
142
|
SkeletonGroup: () => SkeletonGroup,
|
|
141
143
|
Slider: () => Slider,
|
|
@@ -162,7 +164,6 @@ __export(index_exports, {
|
|
|
162
164
|
TooltipContent: () => TooltipContent,
|
|
163
165
|
TooltipPortal: () => TooltipPortal,
|
|
164
166
|
TooltipProvider: () => TooltipProvider,
|
|
165
|
-
TooltipRoot: () => TooltipRoot,
|
|
166
167
|
TooltipTrigger: () => TooltipTrigger,
|
|
167
168
|
Topbar: () => Topbar,
|
|
168
169
|
Tree: () => Tree,
|
|
@@ -717,11 +718,198 @@ function Field({ label, hint, error, required, className, children, ...props })
|
|
|
717
718
|
] });
|
|
718
719
|
}
|
|
719
720
|
|
|
720
|
-
// src/components/
|
|
721
|
+
// src/components/InlineEdit/InlineEdit.tsx
|
|
721
722
|
var import_class_variance_authority3 = require("class-variance-authority");
|
|
722
723
|
var import_react15 = require("react");
|
|
723
724
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
724
|
-
var
|
|
725
|
+
var displayStyles = (0, import_class_variance_authority3.cva)(
|
|
726
|
+
[
|
|
727
|
+
"inline-block cursor-text rounded-[3px] px-[2px] -mx-[2px]",
|
|
728
|
+
"outline-none transition-[background,box-shadow] duration-(--duration-micro)",
|
|
729
|
+
"hover:bg-panel-2",
|
|
730
|
+
"focus-visible:ring-[2px] focus-visible:ring-accent-dim"
|
|
731
|
+
],
|
|
732
|
+
{
|
|
733
|
+
variants: {
|
|
734
|
+
size: {
|
|
735
|
+
sm: "text-[12px]",
|
|
736
|
+
md: "text-[13px]",
|
|
737
|
+
lg: "text-[14px]"
|
|
738
|
+
}
|
|
739
|
+
},
|
|
740
|
+
defaultVariants: { size: "md" }
|
|
741
|
+
}
|
|
742
|
+
);
|
|
743
|
+
var inputStyles = (0, import_class_variance_authority3.cva)(
|
|
744
|
+
[
|
|
745
|
+
"border bg-panel text-text font-sans outline-none",
|
|
746
|
+
"transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
747
|
+
"focus:ring-[3px] focus:ring-accent-dim focus:border-accent",
|
|
748
|
+
"placeholder:text-text-dim"
|
|
749
|
+
],
|
|
750
|
+
{
|
|
751
|
+
variants: {
|
|
752
|
+
size: {
|
|
753
|
+
sm: "h-6 px-2 text-[12px] rounded-md",
|
|
754
|
+
md: "h-[28px] px-[8px] text-[13px] rounded-md",
|
|
755
|
+
lg: "h-8 px-[10px] text-[14px] rounded-md"
|
|
756
|
+
},
|
|
757
|
+
tone: {
|
|
758
|
+
default: "border-border",
|
|
759
|
+
err: "border-err focus:border-err focus:ring-err/30"
|
|
760
|
+
}
|
|
761
|
+
},
|
|
762
|
+
defaultVariants: { size: "md", tone: "default" }
|
|
763
|
+
}
|
|
764
|
+
);
|
|
765
|
+
var InlineEdit = (0, import_react15.forwardRef)(function InlineEdit2({
|
|
766
|
+
value,
|
|
767
|
+
onValueChange,
|
|
768
|
+
as = "span",
|
|
769
|
+
activate = "dblclick",
|
|
770
|
+
commitOnBlur = true,
|
|
771
|
+
validate,
|
|
772
|
+
placeholder = "Empty",
|
|
773
|
+
disabled = false,
|
|
774
|
+
editing: editingProp,
|
|
775
|
+
onEditingChange,
|
|
776
|
+
size,
|
|
777
|
+
className,
|
|
778
|
+
inputClassName,
|
|
779
|
+
"aria-label": ariaLabel,
|
|
780
|
+
...rest
|
|
781
|
+
}, forwardedRef) {
|
|
782
|
+
const [editing, setEditing] = useControllableState({
|
|
783
|
+
value: editingProp,
|
|
784
|
+
defaultValue: false,
|
|
785
|
+
onChange: onEditingChange
|
|
786
|
+
});
|
|
787
|
+
const [draft, setDraft] = (0, import_react15.useState)(value);
|
|
788
|
+
const [error, setError] = (0, import_react15.useState)(null);
|
|
789
|
+
const inputRef = (0, import_react15.useRef)(null);
|
|
790
|
+
(0, import_react15.useEffect)(() => {
|
|
791
|
+
if (!editing) {
|
|
792
|
+
setDraft(value);
|
|
793
|
+
setError(null);
|
|
794
|
+
}
|
|
795
|
+
}, [editing, value]);
|
|
796
|
+
(0, import_react15.useEffect)(() => {
|
|
797
|
+
if (!editing) return;
|
|
798
|
+
const el = inputRef.current;
|
|
799
|
+
if (!el) return;
|
|
800
|
+
el.focus();
|
|
801
|
+
el.select();
|
|
802
|
+
}, [editing]);
|
|
803
|
+
const commit = (0, import_react15.useCallback)(() => {
|
|
804
|
+
const next = draft;
|
|
805
|
+
if (validate) {
|
|
806
|
+
const msg = validate(next);
|
|
807
|
+
if (msg !== null) {
|
|
808
|
+
setError(msg);
|
|
809
|
+
return;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
setError(null);
|
|
813
|
+
setEditing(false);
|
|
814
|
+
if (next !== value) onValueChange(next);
|
|
815
|
+
}, [draft, validate, value, onValueChange, setEditing]);
|
|
816
|
+
const cancel = (0, import_react15.useCallback)(() => {
|
|
817
|
+
setDraft(value);
|
|
818
|
+
setError(null);
|
|
819
|
+
setEditing(false);
|
|
820
|
+
}, [value, setEditing]);
|
|
821
|
+
const beginEdit = (0, import_react15.useCallback)(() => {
|
|
822
|
+
if (disabled) return;
|
|
823
|
+
setDraft(value);
|
|
824
|
+
setError(null);
|
|
825
|
+
setEditing(true);
|
|
826
|
+
}, [disabled, value, setEditing]);
|
|
827
|
+
(0, import_react15.useImperativeHandle)(forwardedRef, () => ({ edit: beginEdit, cancel }), [beginEdit, cancel]);
|
|
828
|
+
const onDisplayKeyDown = (e) => {
|
|
829
|
+
if (disabled) return;
|
|
830
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
831
|
+
e.preventDefault();
|
|
832
|
+
beginEdit();
|
|
833
|
+
}
|
|
834
|
+
};
|
|
835
|
+
const onDisplayActivate = (e) => {
|
|
836
|
+
if (disabled) return;
|
|
837
|
+
if (activate === "dblclick" && e.detail >= 2 || activate === "click" && e.detail >= 1) {
|
|
838
|
+
e.preventDefault();
|
|
839
|
+
beginEdit();
|
|
840
|
+
}
|
|
841
|
+
};
|
|
842
|
+
const onInputKeyDown = (e) => {
|
|
843
|
+
if (e.key === "Enter") {
|
|
844
|
+
e.preventDefault();
|
|
845
|
+
commit();
|
|
846
|
+
} else if (e.key === "Escape") {
|
|
847
|
+
e.preventDefault();
|
|
848
|
+
cancel();
|
|
849
|
+
}
|
|
850
|
+
};
|
|
851
|
+
if (editing) {
|
|
852
|
+
const errorId = `${rest.id ?? "inline-edit"}-error`;
|
|
853
|
+
const inputAriaLabel = ariaLabel ?? value ?? placeholder;
|
|
854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "inline-flex flex-col items-stretch gap-1", children: [
|
|
855
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
856
|
+
"input",
|
|
857
|
+
{
|
|
858
|
+
ref: inputRef,
|
|
859
|
+
type: "text",
|
|
860
|
+
value: draft,
|
|
861
|
+
onChange: (e) => {
|
|
862
|
+
setDraft(e.target.value);
|
|
863
|
+
if (error) setError(null);
|
|
864
|
+
},
|
|
865
|
+
onKeyDown: onInputKeyDown,
|
|
866
|
+
onBlur: () => {
|
|
867
|
+
if (commitOnBlur) commit();
|
|
868
|
+
else cancel();
|
|
869
|
+
},
|
|
870
|
+
placeholder,
|
|
871
|
+
"aria-label": inputAriaLabel,
|
|
872
|
+
"aria-invalid": error ? true : void 0,
|
|
873
|
+
"aria-errormessage": error ? errorId : void 0,
|
|
874
|
+
className: cn(inputStyles({ size, tone: error ? "err" : "default" }), inputClassName)
|
|
875
|
+
}
|
|
876
|
+
),
|
|
877
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { id: errorId, role: "alert", className: "text-err text-[11px]", children: error })
|
|
878
|
+
] });
|
|
879
|
+
}
|
|
880
|
+
const Tag3 = as;
|
|
881
|
+
const isHeading = as === "h1" || as === "h2" || as === "h3";
|
|
882
|
+
const isEmpty = value.length === 0;
|
|
883
|
+
const displayText = isEmpty ? placeholder : value;
|
|
884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
885
|
+
Tag3,
|
|
886
|
+
{
|
|
887
|
+
role: isHeading ? void 0 : "button",
|
|
888
|
+
"aria-roledescription": isHeading ? "editable" : void 0,
|
|
889
|
+
tabIndex: disabled ? -1 : 0,
|
|
890
|
+
"aria-disabled": disabled || void 0,
|
|
891
|
+
"aria-label": ariaLabel ?? `Edit ${value || placeholder}`,
|
|
892
|
+
"data-empty": isEmpty || void 0,
|
|
893
|
+
onClick: onDisplayActivate,
|
|
894
|
+
onKeyDown: onDisplayKeyDown,
|
|
895
|
+
className: cn(
|
|
896
|
+
displayStyles({ size }),
|
|
897
|
+
isEmpty && "text-text-dim italic",
|
|
898
|
+
disabled && "cursor-not-allowed opacity-50 hover:bg-transparent",
|
|
899
|
+
className
|
|
900
|
+
),
|
|
901
|
+
...rest,
|
|
902
|
+
children: displayText
|
|
903
|
+
}
|
|
904
|
+
);
|
|
905
|
+
});
|
|
906
|
+
InlineEdit.displayName = "InlineEdit";
|
|
907
|
+
|
|
908
|
+
// src/components/Input/Input.tsx
|
|
909
|
+
var import_class_variance_authority4 = require("class-variance-authority");
|
|
910
|
+
var import_react16 = require("react");
|
|
911
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
912
|
+
var inputWrapperStyles = (0, import_class_variance_authority4.cva)(
|
|
725
913
|
[
|
|
726
914
|
"flex items-center gap-[6px] font-sans transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
727
915
|
"border focus-within:ring-[3px]",
|
|
@@ -753,16 +941,16 @@ var inputWrapperStyles = (0, import_class_variance_authority3.cva)(
|
|
|
753
941
|
defaultVariants: { size: "md", tone: "default", density: "comfortable" }
|
|
754
942
|
}
|
|
755
943
|
);
|
|
756
|
-
var Input = (0,
|
|
944
|
+
var Input = (0, import_react16.forwardRef)(function Input2({ size, tone, density, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
|
|
757
945
|
const computedTone = error ? "err" : tone;
|
|
758
|
-
return /* @__PURE__ */ (0,
|
|
946
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
759
947
|
"div",
|
|
760
948
|
{
|
|
761
949
|
className: cn(inputWrapperStyles({ size, tone: computedTone, density }), className),
|
|
762
950
|
style: { width, ...style },
|
|
763
951
|
children: [
|
|
764
|
-
icon && /* @__PURE__ */ (0,
|
|
765
|
-
/* @__PURE__ */ (0,
|
|
952
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-text-dim leading-none", children: icon }),
|
|
953
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
766
954
|
"input",
|
|
767
955
|
{
|
|
768
956
|
ref,
|
|
@@ -776,7 +964,7 @@ var Input = (0, import_react15.forwardRef)(function Input2({ size, tone, density
|
|
|
776
964
|
...props
|
|
777
965
|
}
|
|
778
966
|
),
|
|
779
|
-
trailing && /* @__PURE__ */ (0,
|
|
967
|
+
trailing && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-text-dim text-[11px]", children: trailing })
|
|
780
968
|
]
|
|
781
969
|
}
|
|
782
970
|
);
|
|
@@ -784,9 +972,9 @@ var Input = (0, import_react15.forwardRef)(function Input2({ size, tone, density
|
|
|
784
972
|
Input.displayName = "Input";
|
|
785
973
|
|
|
786
974
|
// src/components/Input/SearchInput.tsx
|
|
787
|
-
var
|
|
788
|
-
var
|
|
789
|
-
var SearchInput = (0,
|
|
975
|
+
var import_react17 = require("react");
|
|
976
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
977
|
+
var SearchInput = (0, import_react17.forwardRef)(function SearchInput2({
|
|
790
978
|
shortcut,
|
|
791
979
|
width,
|
|
792
980
|
density = "comfortable",
|
|
@@ -799,7 +987,7 @@ var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
|
|
|
799
987
|
const isTouch = density === "touch";
|
|
800
988
|
const resolvedWidth = width ?? (isTouch ? "100%" : 360);
|
|
801
989
|
const resolvedShortcut = shortcut ?? (isTouch ? void 0 : "\u2318K");
|
|
802
|
-
return /* @__PURE__ */ (0,
|
|
990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
803
991
|
"div",
|
|
804
992
|
{
|
|
805
993
|
className: cn(
|
|
@@ -812,8 +1000,8 @@ var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
|
|
|
812
1000
|
),
|
|
813
1001
|
style: { width: resolvedWidth, ...style },
|
|
814
1002
|
children: [
|
|
815
|
-
/* @__PURE__ */ (0,
|
|
816
|
-
/* @__PURE__ */ (0,
|
|
1003
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("text-text-dim leading-none", isTouch && "text-[18px]"), "aria-hidden": true, children: "\u2315" }),
|
|
1004
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
817
1005
|
"input",
|
|
818
1006
|
{
|
|
819
1007
|
ref,
|
|
@@ -827,7 +1015,7 @@ var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
|
|
|
827
1015
|
...props
|
|
828
1016
|
}
|
|
829
1017
|
),
|
|
830
|
-
resolvedShortcut && /* @__PURE__ */ (0,
|
|
1018
|
+
resolvedShortcut && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: resolvedShortcut })
|
|
831
1019
|
]
|
|
832
1020
|
}
|
|
833
1021
|
);
|
|
@@ -835,16 +1023,16 @@ var SearchInput = (0, import_react16.forwardRef)(function SearchInput2({
|
|
|
835
1023
|
SearchInput.displayName = "SearchInput";
|
|
836
1024
|
|
|
837
1025
|
// src/components/OTP/OTP.tsx
|
|
838
|
-
var
|
|
839
|
-
var
|
|
840
|
-
var OTP = (0,
|
|
841
|
-
const baseId = (0,
|
|
842
|
-
const refs = (0,
|
|
843
|
-
const [values, setValues] = (0,
|
|
1026
|
+
var import_react18 = require("react");
|
|
1027
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1028
|
+
var OTP = (0, import_react18.forwardRef)(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
|
|
1029
|
+
const baseId = (0, import_react18.useId)();
|
|
1030
|
+
const refs = (0, import_react18.useRef)([]);
|
|
1031
|
+
const [values, setValues] = (0, import_react18.useState)(
|
|
844
1032
|
() => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
|
|
845
1033
|
);
|
|
846
|
-
const [completedAnnouncement, setCompletedAnnouncement] = (0,
|
|
847
|
-
(0,
|
|
1034
|
+
const [completedAnnouncement, setCompletedAnnouncement] = (0, import_react18.useState)("");
|
|
1035
|
+
(0, import_react18.useImperativeHandle)(ref, () => ({
|
|
848
1036
|
focus: () => refs.current[0]?.focus(),
|
|
849
1037
|
reset: () => {
|
|
850
1038
|
setValues(Array(length).fill(""));
|
|
@@ -894,8 +1082,8 @@ var OTP = (0, import_react17.forwardRef)(function OTP2({ length = 6, onComplete,
|
|
|
894
1082
|
}
|
|
895
1083
|
refs.current[Math.min(pasted.length, length - 1)]?.focus();
|
|
896
1084
|
};
|
|
897
|
-
return /* @__PURE__ */ (0,
|
|
898
|
-
values.map((c, i) => /* @__PURE__ */ (0,
|
|
1085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex gap-2", className), children: [
|
|
1086
|
+
values.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
899
1087
|
"input",
|
|
900
1088
|
{
|
|
901
1089
|
id: `${baseId}-${i}`,
|
|
@@ -921,23 +1109,23 @@ var OTP = (0, import_react17.forwardRef)(function OTP2({ length = 6, onComplete,
|
|
|
921
1109
|
},
|
|
922
1110
|
i
|
|
923
1111
|
)),
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
1112
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: completedAnnouncement })
|
|
925
1113
|
] });
|
|
926
1114
|
});
|
|
927
1115
|
OTP.displayName = "OTP";
|
|
928
1116
|
|
|
929
1117
|
// src/components/Radio/Radio.tsx
|
|
930
1118
|
var RadixRadio = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
931
|
-
var
|
|
932
|
-
var
|
|
933
|
-
var RadioGroup = (0,
|
|
934
|
-
return /* @__PURE__ */ (0,
|
|
1119
|
+
var import_react19 = require("react");
|
|
1120
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1121
|
+
var RadioGroup = (0, import_react19.forwardRef)(function RadioGroup2({ className, ...props }, ref) {
|
|
1122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
|
|
935
1123
|
});
|
|
936
1124
|
RadioGroup.displayName = "RadioGroup";
|
|
937
|
-
var Radio = (0,
|
|
938
|
-
const reactId = (0,
|
|
1125
|
+
var Radio = (0, import_react19.forwardRef)(function Radio2({ label, className, id: idProp, ...props }, ref) {
|
|
1126
|
+
const reactId = (0, import_react19.useId)();
|
|
939
1127
|
const id = idProp ?? `radio-${reactId}`;
|
|
940
|
-
return /* @__PURE__ */ (0,
|
|
1128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
941
1129
|
"span",
|
|
942
1130
|
{
|
|
943
1131
|
className: cn(
|
|
@@ -946,7 +1134,7 @@ var Radio = (0, import_react18.forwardRef)(function Radio2({ label, className, i
|
|
|
946
1134
|
className
|
|
947
1135
|
),
|
|
948
1136
|
children: [
|
|
949
|
-
/* @__PURE__ */ (0,
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
950
1138
|
RadixRadio.Item,
|
|
951
1139
|
{
|
|
952
1140
|
ref,
|
|
@@ -959,10 +1147,10 @@ var Radio = (0, import_react18.forwardRef)(function Radio2({ label, className, i
|
|
|
959
1147
|
"focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
|
|
960
1148
|
),
|
|
961
1149
|
...props,
|
|
962
|
-
children: /* @__PURE__ */ (0,
|
|
1150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
|
|
963
1151
|
}
|
|
964
1152
|
),
|
|
965
|
-
label && /* @__PURE__ */ (0,
|
|
1153
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
|
|
966
1154
|
]
|
|
967
1155
|
}
|
|
968
1156
|
);
|
|
@@ -971,8 +1159,8 @@ Radio.displayName = "Radio";
|
|
|
971
1159
|
|
|
972
1160
|
// src/components/Select/Select.tsx
|
|
973
1161
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
974
|
-
var
|
|
975
|
-
var
|
|
1162
|
+
var import_react20 = require("react");
|
|
1163
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
976
1164
|
var SelectRoot = RadixSelect.Root;
|
|
977
1165
|
var SelectValue = RadixSelect.Value;
|
|
978
1166
|
var SelectGroup = RadixSelect.Group;
|
|
@@ -982,8 +1170,8 @@ var triggerClasses = {
|
|
|
982
1170
|
md: "h-[34px] px-[10px] text-[13px]",
|
|
983
1171
|
lg: "h-10 px-3 text-[14px]"
|
|
984
1172
|
};
|
|
985
|
-
var SelectTrigger = (0,
|
|
986
|
-
return /* @__PURE__ */ (0,
|
|
1173
|
+
var SelectTrigger = (0, import_react20.forwardRef)(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
|
|
1174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
987
1175
|
RadixSelect.Trigger,
|
|
988
1176
|
{
|
|
989
1177
|
ref,
|
|
@@ -999,15 +1187,15 @@ var SelectTrigger = (0, import_react19.forwardRef)(function SelectTrigger2({ siz
|
|
|
999
1187
|
...props,
|
|
1000
1188
|
children: [
|
|
1001
1189
|
children,
|
|
1002
|
-
/* @__PURE__ */ (0,
|
|
1190
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
|
|
1003
1191
|
]
|
|
1004
1192
|
}
|
|
1005
1193
|
);
|
|
1006
1194
|
});
|
|
1007
1195
|
SelectTrigger.displayName = "SelectTrigger";
|
|
1008
|
-
var SelectContent = (0,
|
|
1196
|
+
var SelectContent = (0, import_react20.forwardRef)(
|
|
1009
1197
|
function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
|
|
1010
|
-
return /* @__PURE__ */ (0,
|
|
1198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1011
1199
|
RadixSelect.Content,
|
|
1012
1200
|
{
|
|
1013
1201
|
ref,
|
|
@@ -1019,15 +1207,15 @@ var SelectContent = (0, import_react19.forwardRef)(
|
|
|
1019
1207
|
className
|
|
1020
1208
|
),
|
|
1021
1209
|
...props,
|
|
1022
|
-
children: /* @__PURE__ */ (0,
|
|
1210
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.Viewport, { children })
|
|
1023
1211
|
}
|
|
1024
1212
|
) });
|
|
1025
1213
|
}
|
|
1026
1214
|
);
|
|
1027
1215
|
SelectContent.displayName = "SelectContent";
|
|
1028
|
-
var SelectItem = (0,
|
|
1216
|
+
var SelectItem = (0, import_react20.forwardRef)(
|
|
1029
1217
|
function SelectItem2({ className, children, ...props }, ref) {
|
|
1030
|
-
return /* @__PURE__ */ (0,
|
|
1218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1031
1219
|
RadixSelect.Item,
|
|
1032
1220
|
{
|
|
1033
1221
|
ref,
|
|
@@ -1039,7 +1227,7 @@ var SelectItem = (0, import_react19.forwardRef)(
|
|
|
1039
1227
|
className
|
|
1040
1228
|
),
|
|
1041
1229
|
...props,
|
|
1042
|
-
children: /* @__PURE__ */ (0,
|
|
1230
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSelect.ItemText, { children })
|
|
1043
1231
|
}
|
|
1044
1232
|
);
|
|
1045
1233
|
}
|
|
@@ -1054,30 +1242,30 @@ function Select({
|
|
|
1054
1242
|
"aria-labelledby": ariaLabelledBy,
|
|
1055
1243
|
...rootProps
|
|
1056
1244
|
}) {
|
|
1057
|
-
return /* @__PURE__ */ (0,
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(RadixSelect.Root, { ...rootProps, children: [
|
|
1246
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1059
1247
|
SelectTrigger,
|
|
1060
1248
|
{
|
|
1061
1249
|
size,
|
|
1062
1250
|
className,
|
|
1063
1251
|
"aria-label": ariaLabel,
|
|
1064
1252
|
"aria-labelledby": ariaLabelledBy,
|
|
1065
|
-
children: /* @__PURE__ */ (0,
|
|
1253
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, { placeholder })
|
|
1066
1254
|
}
|
|
1067
1255
|
),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: options.map((opt) => {
|
|
1069
1257
|
const value = typeof opt === "string" ? opt : opt.value;
|
|
1070
1258
|
const label = typeof opt === "string" ? opt : opt.label;
|
|
1071
|
-
return /* @__PURE__ */ (0,
|
|
1259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value);
|
|
1072
1260
|
}) })
|
|
1073
1261
|
] });
|
|
1074
1262
|
}
|
|
1075
1263
|
|
|
1076
1264
|
// src/components/Slider/Slider.tsx
|
|
1077
1265
|
var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
|
|
1078
|
-
var
|
|
1079
|
-
var
|
|
1080
|
-
var Slider = (0,
|
|
1266
|
+
var import_react21 = require("react");
|
|
1267
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1268
|
+
var Slider = (0, import_react21.forwardRef)(function Slider2({
|
|
1081
1269
|
showValue,
|
|
1082
1270
|
width = 240,
|
|
1083
1271
|
className,
|
|
@@ -1092,10 +1280,10 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
|
|
|
1092
1280
|
const arrValue = Array.isArray(value) ? value : value !== void 0 ? [value] : void 0;
|
|
1093
1281
|
const arrDefault = Array.isArray(defaultValue) ? defaultValue : defaultValue !== void 0 ? [defaultValue] : void 0;
|
|
1094
1282
|
const isControlled = arrValue !== void 0;
|
|
1095
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
1283
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react21.useState)(arrDefault);
|
|
1096
1284
|
const currentValue = isControlled ? arrValue : uncontrolledValue;
|
|
1097
1285
|
const wasScalar = !Array.isArray(value ?? defaultValue) && (value ?? defaultValue) !== void 0;
|
|
1098
|
-
const handleValueChange = (0,
|
|
1286
|
+
const handleValueChange = (0, import_react21.useCallback)(
|
|
1099
1287
|
(next) => {
|
|
1100
1288
|
if (!isControlled) setUncontrolledValue(next);
|
|
1101
1289
|
if (onValueChange) {
|
|
@@ -1106,14 +1294,14 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
|
|
|
1106
1294
|
);
|
|
1107
1295
|
const display = currentValue?.[0] ?? props.min ?? 0;
|
|
1108
1296
|
const thumbCount = (arrValue ?? arrDefault)?.length ?? 1;
|
|
1109
|
-
return /* @__PURE__ */ (0,
|
|
1297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1110
1298
|
"span",
|
|
1111
1299
|
{
|
|
1112
1300
|
ref,
|
|
1113
1301
|
className: cn("inline-flex items-center gap-[10px]", className),
|
|
1114
1302
|
style: { width },
|
|
1115
1303
|
children: [
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1117
1305
|
RadixSlider.Root,
|
|
1118
1306
|
{
|
|
1119
1307
|
value: arrValue,
|
|
@@ -1122,11 +1310,11 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
|
|
|
1122
1310
|
className: "relative flex h-4 flex-1 touch-none items-center select-none",
|
|
1123
1311
|
...props,
|
|
1124
1312
|
children: [
|
|
1125
|
-
/* @__PURE__ */ (0,
|
|
1313
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixSlider.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
|
|
1126
1314
|
Array.from({ length: thumbCount }, (_, i) => {
|
|
1127
1315
|
const perThumb = thumbLabels?.[i];
|
|
1128
1316
|
const thumbAriaLabel = perThumb ?? (ariaLabelledBy ? void 0 : ariaLabel ?? "Value");
|
|
1129
|
-
return /* @__PURE__ */ (0,
|
|
1317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1130
1318
|
RadixSlider.Thumb,
|
|
1131
1319
|
{
|
|
1132
1320
|
className: cn(
|
|
@@ -1143,7 +1331,7 @@ var Slider = (0, import_react20.forwardRef)(function Slider2({
|
|
|
1143
1331
|
]
|
|
1144
1332
|
}
|
|
1145
1333
|
),
|
|
1146
|
-
showValue && /* @__PURE__ */ (0,
|
|
1334
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
|
|
1147
1335
|
]
|
|
1148
1336
|
}
|
|
1149
1337
|
);
|
|
@@ -1152,8 +1340,8 @@ Slider.displayName = "Slider";
|
|
|
1152
1340
|
|
|
1153
1341
|
// src/components/Switch/Switch.tsx
|
|
1154
1342
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1155
|
-
var
|
|
1156
|
-
var
|
|
1343
|
+
var import_react22 = require("react");
|
|
1344
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1157
1345
|
var trackClasses = {
|
|
1158
1346
|
comfortable: {
|
|
1159
1347
|
sm: "h-4 w-7",
|
|
@@ -1174,10 +1362,10 @@ var thumbClasses = {
|
|
|
1174
1362
|
md: "h-[26px] w-[26px] data-[state=checked]:translate-x-5"
|
|
1175
1363
|
}
|
|
1176
1364
|
};
|
|
1177
|
-
var Switch = (0,
|
|
1178
|
-
const reactId = (0,
|
|
1365
|
+
var Switch = (0, import_react22.forwardRef)(function Switch2({ label, size = "md", density = "comfortable", className, id: idProp, ...props }, ref) {
|
|
1366
|
+
const reactId = (0, import_react22.useId)();
|
|
1179
1367
|
const id = idProp ?? `sw-${reactId}`;
|
|
1180
|
-
return /* @__PURE__ */ (0,
|
|
1368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1181
1369
|
"span",
|
|
1182
1370
|
{
|
|
1183
1371
|
className: cn(
|
|
@@ -1186,7 +1374,7 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
|
|
|
1186
1374
|
className
|
|
1187
1375
|
),
|
|
1188
1376
|
children: [
|
|
1189
|
-
/* @__PURE__ */ (0,
|
|
1377
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1190
1378
|
RadixSwitch.Root,
|
|
1191
1379
|
{
|
|
1192
1380
|
ref,
|
|
@@ -1199,7 +1387,7 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
|
|
|
1199
1387
|
trackClasses[density][size]
|
|
1200
1388
|
),
|
|
1201
1389
|
...props,
|
|
1202
|
-
children: /* @__PURE__ */ (0,
|
|
1390
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1203
1391
|
RadixSwitch.Thumb,
|
|
1204
1392
|
{
|
|
1205
1393
|
className: cn(
|
|
@@ -1211,7 +1399,7 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
|
|
|
1211
1399
|
)
|
|
1212
1400
|
}
|
|
1213
1401
|
),
|
|
1214
|
-
label && /* @__PURE__ */ (0,
|
|
1402
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1215
1403
|
"label",
|
|
1216
1404
|
{
|
|
1217
1405
|
htmlFor: id,
|
|
@@ -1226,10 +1414,10 @@ var Switch = (0, import_react21.forwardRef)(function Switch2({ label, size = "md
|
|
|
1226
1414
|
Switch.displayName = "Switch";
|
|
1227
1415
|
|
|
1228
1416
|
// src/components/Textarea/Textarea.tsx
|
|
1229
|
-
var
|
|
1230
|
-
var
|
|
1231
|
-
var
|
|
1232
|
-
var textareaStyles = (0,
|
|
1417
|
+
var import_class_variance_authority5 = require("class-variance-authority");
|
|
1418
|
+
var import_react23 = require("react");
|
|
1419
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1420
|
+
var textareaStyles = (0, import_class_variance_authority5.cva)(
|
|
1233
1421
|
[
|
|
1234
1422
|
"w-full font-sans text-text bg-panel rounded-md p-[10px]",
|
|
1235
1423
|
"border outline-none transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
@@ -1247,8 +1435,8 @@ var textareaStyles = (0, import_class_variance_authority4.cva)(
|
|
|
1247
1435
|
defaultVariants: { tone: "default" }
|
|
1248
1436
|
}
|
|
1249
1437
|
);
|
|
1250
|
-
var Textarea = (0,
|
|
1251
|
-
return /* @__PURE__ */ (0,
|
|
1438
|
+
var Textarea = (0, import_react23.forwardRef)(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
|
|
1439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1252
1440
|
"textarea",
|
|
1253
1441
|
{
|
|
1254
1442
|
ref,
|
|
@@ -1263,11 +1451,11 @@ Textarea.displayName = "Textarea";
|
|
|
1263
1451
|
|
|
1264
1452
|
// src/components/Avatar/Avatar.tsx
|
|
1265
1453
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
1266
|
-
var
|
|
1454
|
+
var import_react25 = require("react");
|
|
1267
1455
|
|
|
1268
1456
|
// src/components/StatusDot/StatusDot.tsx
|
|
1269
|
-
var
|
|
1270
|
-
var
|
|
1457
|
+
var import_react24 = require("react");
|
|
1458
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1271
1459
|
var stateColor = {
|
|
1272
1460
|
ok: "bg-ok",
|
|
1273
1461
|
warn: "bg-warn",
|
|
@@ -1292,8 +1480,8 @@ var stateLabel = {
|
|
|
1292
1480
|
sync: "Syncing",
|
|
1293
1481
|
accent: "Active"
|
|
1294
1482
|
};
|
|
1295
|
-
var StatusDot = (0,
|
|
1296
|
-
return /* @__PURE__ */ (0,
|
|
1483
|
+
var StatusDot = (0, import_react24.forwardRef)(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
|
|
1484
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1297
1485
|
"span",
|
|
1298
1486
|
{
|
|
1299
1487
|
ref,
|
|
@@ -1302,7 +1490,7 @@ var StatusDot = (0, import_react23.forwardRef)(function StatusDot2({ state = "ok
|
|
|
1302
1490
|
className: cn("inline-flex items-center gap-[6px]", className),
|
|
1303
1491
|
...props,
|
|
1304
1492
|
children: [
|
|
1305
|
-
/* @__PURE__ */ (0,
|
|
1493
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1306
1494
|
"span",
|
|
1307
1495
|
{
|
|
1308
1496
|
className: cn(
|
|
@@ -1314,7 +1502,7 @@ var StatusDot = (0, import_react23.forwardRef)(function StatusDot2({ state = "ok
|
|
|
1314
1502
|
style: { width: size, height: size }
|
|
1315
1503
|
}
|
|
1316
1504
|
),
|
|
1317
|
-
label && /* @__PURE__ */ (0,
|
|
1505
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-text-muted text-[12px]", children: label })
|
|
1318
1506
|
]
|
|
1319
1507
|
}
|
|
1320
1508
|
);
|
|
@@ -1331,7 +1519,7 @@ var sizePx = {
|
|
|
1331
1519
|
};
|
|
1332
1520
|
|
|
1333
1521
|
// src/components/Avatar/Avatar.tsx
|
|
1334
|
-
var
|
|
1522
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1335
1523
|
var statusBg = {
|
|
1336
1524
|
ok: "bg-ok",
|
|
1337
1525
|
warn: "bg-warn",
|
|
@@ -1346,11 +1534,11 @@ function hashHue(str) {
|
|
|
1346
1534
|
for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
|
|
1347
1535
|
return h;
|
|
1348
1536
|
}
|
|
1349
|
-
var Avatar = (0,
|
|
1537
|
+
var Avatar = (0, import_react25.forwardRef)(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
|
|
1350
1538
|
const dim = sizePx[size];
|
|
1351
1539
|
const hue = hashHue(name);
|
|
1352
1540
|
const computedInitials = initials ?? initialsFor(name);
|
|
1353
|
-
return /* @__PURE__ */ (0,
|
|
1541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1354
1542
|
"span",
|
|
1355
1543
|
{
|
|
1356
1544
|
ref,
|
|
@@ -1358,7 +1546,7 @@ var Avatar = (0, import_react24.forwardRef)(function Avatar2({ name = "?", src,
|
|
|
1358
1546
|
style: { width: dim, height: dim, ...style },
|
|
1359
1547
|
...props,
|
|
1360
1548
|
children: [
|
|
1361
|
-
/* @__PURE__ */ (0,
|
|
1549
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1362
1550
|
RadixAvatar.Root,
|
|
1363
1551
|
{
|
|
1364
1552
|
className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
|
|
@@ -1366,8 +1554,8 @@ var Avatar = (0, import_react24.forwardRef)(function Avatar2({ name = "?", src,
|
|
|
1366
1554
|
background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
|
|
1367
1555
|
},
|
|
1368
1556
|
children: [
|
|
1369
|
-
src && /* @__PURE__ */ (0,
|
|
1370
|
-
/* @__PURE__ */ (0,
|
|
1557
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1371
1559
|
RadixAvatar.Fallback,
|
|
1372
1560
|
{
|
|
1373
1561
|
className: "flex h-full w-full items-center justify-center font-sans font-semibold text-white",
|
|
@@ -1378,7 +1566,7 @@ var Avatar = (0, import_react24.forwardRef)(function Avatar2({ name = "?", src,
|
|
|
1378
1566
|
]
|
|
1379
1567
|
}
|
|
1380
1568
|
),
|
|
1381
|
-
status && /* @__PURE__ */ (0,
|
|
1569
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1382
1570
|
"span",
|
|
1383
1571
|
{
|
|
1384
1572
|
role: "img",
|
|
@@ -1397,16 +1585,16 @@ var Avatar = (0, import_react24.forwardRef)(function Avatar2({ name = "?", src,
|
|
|
1397
1585
|
Avatar.displayName = "Avatar";
|
|
1398
1586
|
|
|
1399
1587
|
// src/components/Avatar/AvatarGroup.tsx
|
|
1400
|
-
var
|
|
1401
|
-
var
|
|
1402
|
-
var AvatarGroup = (0,
|
|
1588
|
+
var import_react26 = require("react");
|
|
1589
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1590
|
+
var AvatarGroup = (0, import_react26.forwardRef)(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
|
|
1403
1591
|
const dim = sizePx[size];
|
|
1404
1592
|
const visible = names.slice(0, max);
|
|
1405
1593
|
const rest = names.length - visible.length;
|
|
1406
1594
|
const overlap = -dim * 0.35;
|
|
1407
|
-
return /* @__PURE__ */ (0,
|
|
1408
|
-
visible.map((n, i) => /* @__PURE__ */ (0,
|
|
1409
|
-
rest > 0 && /* @__PURE__ */ (0,
|
|
1595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref, className: cn("inline-flex", className), ...props, children: [
|
|
1596
|
+
visible.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Avatar, { name: n, size }) }, `${n}-${i}`)),
|
|
1597
|
+
rest > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1410
1598
|
"span",
|
|
1411
1599
|
{
|
|
1412
1600
|
"aria-label": `+${rest} more`,
|
|
@@ -1428,10 +1616,10 @@ var AvatarGroup = (0, import_react25.forwardRef)(function AvatarGroup2({ names,
|
|
|
1428
1616
|
AvatarGroup.displayName = "AvatarGroup";
|
|
1429
1617
|
|
|
1430
1618
|
// src/components/Badge/Badge.tsx
|
|
1431
|
-
var
|
|
1432
|
-
var
|
|
1433
|
-
var
|
|
1434
|
-
var badgeStyles = (0,
|
|
1619
|
+
var import_class_variance_authority6 = require("class-variance-authority");
|
|
1620
|
+
var import_react27 = require("react");
|
|
1621
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1622
|
+
var badgeStyles = (0, import_class_variance_authority6.cva)("inline-flex items-center font-sans leading-none whitespace-nowrap", {
|
|
1435
1623
|
variants: {
|
|
1436
1624
|
variant: {
|
|
1437
1625
|
neutral: "bg-panel-2 text-text-muted border border-border",
|
|
@@ -1464,28 +1652,28 @@ var dotColorClass = {
|
|
|
1464
1652
|
solid: "bg-bg"
|
|
1465
1653
|
};
|
|
1466
1654
|
var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
|
|
1467
|
-
var Badge = (0,
|
|
1655
|
+
var Badge = (0, import_react27.forwardRef)(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
|
|
1468
1656
|
const sz = size ?? "md";
|
|
1469
1657
|
const v = variant ?? "neutral";
|
|
1470
|
-
return /* @__PURE__ */ (0,
|
|
1471
|
-
dot && /* @__PURE__ */ (0,
|
|
1658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
|
|
1659
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1472
1660
|
"span",
|
|
1473
1661
|
{
|
|
1474
1662
|
"aria-hidden": true,
|
|
1475
1663
|
className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
|
|
1476
1664
|
}
|
|
1477
1665
|
),
|
|
1478
|
-
icon && /* @__PURE__ */ (0,
|
|
1666
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex leading-none", children: icon }),
|
|
1479
1667
|
children
|
|
1480
1668
|
] });
|
|
1481
1669
|
});
|
|
1482
1670
|
Badge.displayName = "Badge";
|
|
1483
1671
|
|
|
1484
1672
|
// src/components/Card/Card.tsx
|
|
1485
|
-
var
|
|
1486
|
-
var
|
|
1487
|
-
var
|
|
1488
|
-
var cardStyles = (0,
|
|
1673
|
+
var import_class_variance_authority7 = require("class-variance-authority");
|
|
1674
|
+
var import_react28 = require("react");
|
|
1675
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1676
|
+
var cardStyles = (0, import_class_variance_authority7.cva)(
|
|
1489
1677
|
"block bg-panel border border-border transition-[border-color,transform,box-shadow] duration-(--duration-step)",
|
|
1490
1678
|
{
|
|
1491
1679
|
variants: {
|
|
@@ -1506,7 +1694,7 @@ var cardStyles = (0, import_class_variance_authority6.cva)(
|
|
|
1506
1694
|
defaultVariants: { variant: "default", interactive: false, density: "comfortable" }
|
|
1507
1695
|
}
|
|
1508
1696
|
);
|
|
1509
|
-
var Card = (0,
|
|
1697
|
+
var Card = (0, import_react28.forwardRef)(function Card2({
|
|
1510
1698
|
variant,
|
|
1511
1699
|
interactive,
|
|
1512
1700
|
density,
|
|
@@ -1538,7 +1726,7 @@ var Card = (0, import_react27.forwardRef)(function Card2({
|
|
|
1538
1726
|
onClick(e);
|
|
1539
1727
|
}
|
|
1540
1728
|
} : void 0;
|
|
1541
|
-
return /* @__PURE__ */ (0,
|
|
1729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1542
1730
|
"div",
|
|
1543
1731
|
{
|
|
1544
1732
|
ref,
|
|
@@ -1553,20 +1741,20 @@ var Card = (0, import_react27.forwardRef)(function Card2({
|
|
|
1553
1741
|
),
|
|
1554
1742
|
...props,
|
|
1555
1743
|
children: [
|
|
1556
|
-
(title || actions) && /* @__PURE__ */ (0,
|
|
1557
|
-
title && /* @__PURE__ */ (0,
|
|
1558
|
-
actions && /* @__PURE__ */ (0,
|
|
1744
|
+
(title || actions) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
|
|
1745
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 text-[14px] font-medium", children: title }),
|
|
1746
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex gap-1", children: actions })
|
|
1559
1747
|
] }),
|
|
1560
|
-
description && /* @__PURE__ */ (0,
|
|
1748
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
|
|
1561
1749
|
children,
|
|
1562
|
-
footer && /* @__PURE__ */ (0,
|
|
1750
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
|
|
1563
1751
|
]
|
|
1564
1752
|
}
|
|
1565
1753
|
);
|
|
1566
1754
|
});
|
|
1567
1755
|
Card.displayName = "Card";
|
|
1568
|
-
var CardLink = (0,
|
|
1569
|
-
return /* @__PURE__ */ (0,
|
|
1756
|
+
var CardLink = (0, import_react28.forwardRef)(function CardLink2({ variant, density, title, description, footer, className, children, href, ...props }, ref) {
|
|
1757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1570
1758
|
"a",
|
|
1571
1759
|
{
|
|
1572
1760
|
ref,
|
|
@@ -1579,10 +1767,10 @@ var CardLink = (0, import_react27.forwardRef)(function CardLink2({ variant, dens
|
|
|
1579
1767
|
),
|
|
1580
1768
|
...props,
|
|
1581
1769
|
children: [
|
|
1582
|
-
title && /* @__PURE__ */ (0,
|
|
1583
|
-
description && /* @__PURE__ */ (0,
|
|
1770
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex items-start", (description || children) && "mb-[10px]"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 text-[14px] font-medium", children: title }) }),
|
|
1771
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
|
|
1584
1772
|
children,
|
|
1585
|
-
footer && /* @__PURE__ */ (0,
|
|
1773
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
|
|
1586
1774
|
]
|
|
1587
1775
|
}
|
|
1588
1776
|
);
|
|
@@ -1590,28 +1778,28 @@ var CardLink = (0, import_react27.forwardRef)(function CardLink2({ variant, dens
|
|
|
1590
1778
|
CardLink.displayName = "CardLink";
|
|
1591
1779
|
|
|
1592
1780
|
// src/components/Card/StatCard.tsx
|
|
1593
|
-
var
|
|
1594
|
-
var
|
|
1781
|
+
var import_react29 = require("react");
|
|
1782
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1595
1783
|
var trendClasses = {
|
|
1596
1784
|
up: "text-ok",
|
|
1597
1785
|
down: "text-err",
|
|
1598
1786
|
flat: "text-text-dim"
|
|
1599
1787
|
};
|
|
1600
1788
|
var trendArrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
|
|
1601
|
-
var StatCard = (0,
|
|
1602
|
-
return /* @__PURE__ */ (0,
|
|
1789
|
+
var StatCard = (0, import_react29.forwardRef)(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
|
|
1790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1603
1791
|
"div",
|
|
1604
1792
|
{
|
|
1605
1793
|
ref,
|
|
1606
1794
|
className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
|
|
1607
1795
|
...props,
|
|
1608
1796
|
children: [
|
|
1609
|
-
/* @__PURE__ */ (0,
|
|
1610
|
-
/* @__PURE__ */ (0,
|
|
1611
|
-
icon && /* @__PURE__ */ (0,
|
|
1797
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mb-[10px] flex items-center justify-between", children: [
|
|
1798
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
|
|
1799
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text-dim text-[14px]", children: icon })
|
|
1612
1800
|
] }),
|
|
1613
|
-
/* @__PURE__ */ (0,
|
|
1614
|
-
delta !== void 0 && /* @__PURE__ */ (0,
|
|
1801
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
|
|
1802
|
+
delta !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
|
|
1615
1803
|
trendArrows[trend],
|
|
1616
1804
|
" ",
|
|
1617
1805
|
delta
|
|
@@ -1623,11 +1811,11 @@ var StatCard = (0, import_react28.forwardRef)(function StatCard2({ label, value,
|
|
|
1623
1811
|
StatCard.displayName = "StatCard";
|
|
1624
1812
|
|
|
1625
1813
|
// src/components/Chip/Chip.tsx
|
|
1626
|
-
var
|
|
1627
|
-
var
|
|
1628
|
-
var Chip = (0,
|
|
1814
|
+
var import_react30 = require("react");
|
|
1815
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1816
|
+
var Chip = (0, import_react30.forwardRef)(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
|
|
1629
1817
|
const isTouch = density === "touch";
|
|
1630
|
-
return /* @__PURE__ */ (0,
|
|
1818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1631
1819
|
"span",
|
|
1632
1820
|
{
|
|
1633
1821
|
ref,
|
|
@@ -1639,9 +1827,9 @@ var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, densi
|
|
|
1639
1827
|
),
|
|
1640
1828
|
...props,
|
|
1641
1829
|
children: [
|
|
1642
|
-
icon && /* @__PURE__ */ (0,
|
|
1830
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
|
|
1643
1831
|
children,
|
|
1644
|
-
onRemove && /* @__PURE__ */ (0,
|
|
1832
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1645
1833
|
"button",
|
|
1646
1834
|
{
|
|
1647
1835
|
type: "button",
|
|
@@ -1661,10 +1849,10 @@ var Chip = (0, import_react29.forwardRef)(function Chip2({ icon, onRemove, densi
|
|
|
1661
1849
|
Chip.displayName = "Chip";
|
|
1662
1850
|
|
|
1663
1851
|
// src/components/Kbd/Kbd.tsx
|
|
1664
|
-
var
|
|
1665
|
-
var
|
|
1666
|
-
var Kbd = (0,
|
|
1667
|
-
return /* @__PURE__ */ (0,
|
|
1852
|
+
var import_react31 = require("react");
|
|
1853
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1854
|
+
var Kbd = (0, import_react31.forwardRef)(function Kbd2({ className, children, ...props }, ref) {
|
|
1855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1668
1856
|
"kbd",
|
|
1669
1857
|
{
|
|
1670
1858
|
ref,
|
|
@@ -1683,11 +1871,11 @@ Kbd.displayName = "Kbd";
|
|
|
1683
1871
|
|
|
1684
1872
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
1685
1873
|
var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"), 1);
|
|
1686
|
-
var
|
|
1687
|
-
var
|
|
1874
|
+
var import_react32 = require("react");
|
|
1875
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1688
1876
|
var scrollbarBase = "flex touch-none select-none p-[2px] transition-colors duration-(--duration-micro)";
|
|
1689
1877
|
var thumbBase = 'relative flex-1 rounded-full bg-text-muted/40 hover:bg-text-muted/60 before:absolute before:inset-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[""]';
|
|
1690
|
-
var ScrollArea = (0,
|
|
1878
|
+
var ScrollArea = (0, import_react32.forwardRef)(function ScrollArea2({
|
|
1691
1879
|
type = "hover",
|
|
1692
1880
|
orientation = "vertical",
|
|
1693
1881
|
scrollHideDelay = 600,
|
|
@@ -1699,7 +1887,7 @@ var ScrollArea = (0, import_react31.forwardRef)(function ScrollArea2({
|
|
|
1699
1887
|
}, ref) {
|
|
1700
1888
|
const showVertical = orientation === "vertical" || orientation === "both";
|
|
1701
1889
|
const showHorizontal = orientation === "horizontal" || orientation === "both";
|
|
1702
|
-
return /* @__PURE__ */ (0,
|
|
1890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1703
1891
|
RadixScrollArea.Root,
|
|
1704
1892
|
{
|
|
1705
1893
|
ref,
|
|
@@ -1708,7 +1896,7 @@ var ScrollArea = (0, import_react31.forwardRef)(function ScrollArea2({
|
|
|
1708
1896
|
className: cn("relative overflow-hidden", className),
|
|
1709
1897
|
...props,
|
|
1710
1898
|
children: [
|
|
1711
|
-
/* @__PURE__ */ (0,
|
|
1899
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1712
1900
|
RadixScrollArea.Viewport,
|
|
1713
1901
|
{
|
|
1714
1902
|
ref: viewportRef,
|
|
@@ -1716,15 +1904,15 @@ var ScrollArea = (0, import_react31.forwardRef)(function ScrollArea2({
|
|
|
1716
1904
|
children
|
|
1717
1905
|
}
|
|
1718
1906
|
),
|
|
1719
|
-
showVertical && /* @__PURE__ */ (0,
|
|
1907
|
+
showVertical && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1720
1908
|
RadixScrollArea.Scrollbar,
|
|
1721
1909
|
{
|
|
1722
1910
|
orientation: "vertical",
|
|
1723
1911
|
className: cn(scrollbarBase, "bg-panel-2/40 hover:bg-panel-2/80 h-full w-[10px]"),
|
|
1724
|
-
children: /* @__PURE__ */ (0,
|
|
1912
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadixScrollArea.Thumb, { className: thumbBase })
|
|
1725
1913
|
}
|
|
1726
1914
|
),
|
|
1727
|
-
showHorizontal && /* @__PURE__ */ (0,
|
|
1915
|
+
showHorizontal && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1728
1916
|
RadixScrollArea.Scrollbar,
|
|
1729
1917
|
{
|
|
1730
1918
|
orientation: "horizontal",
|
|
@@ -1732,10 +1920,10 @@ var ScrollArea = (0, import_react31.forwardRef)(function ScrollArea2({
|
|
|
1732
1920
|
scrollbarBase,
|
|
1733
1921
|
"bg-panel-2/40 hover:bg-panel-2/80 h-[10px] w-full flex-col"
|
|
1734
1922
|
),
|
|
1735
|
-
children: /* @__PURE__ */ (0,
|
|
1923
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadixScrollArea.Thumb, { className: thumbBase })
|
|
1736
1924
|
}
|
|
1737
1925
|
),
|
|
1738
|
-
orientation === "both" && /* @__PURE__ */ (0,
|
|
1926
|
+
orientation === "both" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadixScrollArea.Corner, { className: "bg-panel-2/60" })
|
|
1739
1927
|
]
|
|
1740
1928
|
}
|
|
1741
1929
|
);
|
|
@@ -1743,10 +1931,10 @@ var ScrollArea = (0, import_react31.forwardRef)(function ScrollArea2({
|
|
|
1743
1931
|
ScrollArea.displayName = "ScrollArea";
|
|
1744
1932
|
|
|
1745
1933
|
// src/components/Skeleton/Skeleton.tsx
|
|
1746
|
-
var
|
|
1747
|
-
var
|
|
1748
|
-
var
|
|
1749
|
-
var skeletonStyles = (0,
|
|
1934
|
+
var import_class_variance_authority8 = require("class-variance-authority");
|
|
1935
|
+
var import_react33 = require("react");
|
|
1936
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1937
|
+
var skeletonStyles = (0, import_class_variance_authority8.cva)("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
|
|
1750
1938
|
variants: {
|
|
1751
1939
|
shape: {
|
|
1752
1940
|
line: "rounded-xs",
|
|
@@ -1757,11 +1945,11 @@ var skeletonStyles = (0, import_class_variance_authority7.cva)("block bg-panel-2
|
|
|
1757
1945
|
defaultVariants: { shape: "line" }
|
|
1758
1946
|
});
|
|
1759
1947
|
var defaultHeight = { line: 14, block: 80, circle: 40 };
|
|
1760
|
-
var Skeleton = (0,
|
|
1948
|
+
var Skeleton = (0, import_react33.forwardRef)(function Skeleton2({ shape = "line", width = "100%", height, standalone = false, className, style, ...props }, ref) {
|
|
1761
1949
|
const h = height ?? defaultHeight[shape];
|
|
1762
1950
|
const w = shape === "circle" ? h : width;
|
|
1763
1951
|
const a11yProps = standalone ? { role: "status", "aria-busy": true, "aria-label": "Loading" } : { "aria-hidden": true };
|
|
1764
|
-
return /* @__PURE__ */ (0,
|
|
1952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1765
1953
|
"div",
|
|
1766
1954
|
{
|
|
1767
1955
|
ref,
|
|
@@ -1773,11 +1961,11 @@ var Skeleton = (0, import_react32.forwardRef)(function Skeleton2({ shape = "line
|
|
|
1773
1961
|
);
|
|
1774
1962
|
});
|
|
1775
1963
|
Skeleton.displayName = "Skeleton";
|
|
1776
|
-
var SkeletonGroup = (0,
|
|
1964
|
+
var SkeletonGroup = (0, import_react33.forwardRef)(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
|
|
1777
1965
|
if (!loading) {
|
|
1778
|
-
return /* @__PURE__ */ (0,
|
|
1966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className, ...props, children });
|
|
1779
1967
|
}
|
|
1780
|
-
return /* @__PURE__ */ (0,
|
|
1968
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1781
1969
|
"div",
|
|
1782
1970
|
{
|
|
1783
1971
|
ref,
|
|
@@ -1793,10 +1981,10 @@ var SkeletonGroup = (0, import_react32.forwardRef)(function SkeletonGroup2({ lab
|
|
|
1793
1981
|
SkeletonGroup.displayName = "SkeletonGroup";
|
|
1794
1982
|
|
|
1795
1983
|
// src/components/Tag/Tag.tsx
|
|
1796
|
-
var
|
|
1797
|
-
var
|
|
1798
|
-
var Tag = (0,
|
|
1799
|
-
return /* @__PURE__ */ (0,
|
|
1984
|
+
var import_react34 = require("react");
|
|
1985
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1986
|
+
var Tag = (0, import_react34.forwardRef)(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
|
|
1987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1800
1988
|
"span",
|
|
1801
1989
|
{
|
|
1802
1990
|
ref,
|
|
@@ -1808,9 +1996,9 @@ var Tag = (0, import_react33.forwardRef)(function Tag2({ onRemove, icon, size =
|
|
|
1808
1996
|
style: { height: size },
|
|
1809
1997
|
...props,
|
|
1810
1998
|
children: [
|
|
1811
|
-
icon && /* @__PURE__ */ (0,
|
|
1999
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-text-dim inline-flex", children: icon }),
|
|
1812
2000
|
children,
|
|
1813
|
-
onRemove && /* @__PURE__ */ (0,
|
|
2001
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1814
2002
|
"button",
|
|
1815
2003
|
{
|
|
1816
2004
|
type: "button",
|
|
@@ -1828,14 +2016,14 @@ Tag.displayName = "Tag";
|
|
|
1828
2016
|
|
|
1829
2017
|
// src/components/ContextMenu/ContextMenu.tsx
|
|
1830
2018
|
var RadixContext = __toESM(require("@radix-ui/react-context-menu"), 1);
|
|
1831
|
-
var
|
|
1832
|
-
var
|
|
2019
|
+
var import_react35 = require("react");
|
|
2020
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1833
2021
|
var ContextMenuRoot = RadixContext.Root;
|
|
1834
2022
|
var ContextMenuTrigger = RadixContext.Trigger;
|
|
1835
2023
|
var ContextMenuPortal = RadixContext.Portal;
|
|
1836
|
-
var ContextMenuContent = (0,
|
|
2024
|
+
var ContextMenuContent = (0, import_react35.forwardRef)(
|
|
1837
2025
|
function ContextMenuContent2({ className, ...props }, ref) {
|
|
1838
|
-
return /* @__PURE__ */ (0,
|
|
2026
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixContext.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1839
2027
|
RadixContext.Content,
|
|
1840
2028
|
{
|
|
1841
2029
|
ref,
|
|
@@ -1855,26 +2043,26 @@ var itemBase = cn(
|
|
|
1855
2043
|
"data-[highlighted]:bg-panel-2",
|
|
1856
2044
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
1857
2045
|
);
|
|
1858
|
-
var ContextMenuItem = (0,
|
|
2046
|
+
var ContextMenuItem = (0, import_react35.forwardRef)(
|
|
1859
2047
|
function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
|
|
1860
|
-
return /* @__PURE__ */ (0,
|
|
2048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1861
2049
|
RadixContext.Item,
|
|
1862
2050
|
{
|
|
1863
2051
|
ref,
|
|
1864
2052
|
className: cn(itemBase, destructive ? "text-err" : "text-text", className),
|
|
1865
2053
|
...props,
|
|
1866
2054
|
children: [
|
|
1867
|
-
icon && /* @__PURE__ */ (0,
|
|
1868
|
-
/* @__PURE__ */ (0,
|
|
1869
|
-
trailing && /* @__PURE__ */ (0,
|
|
2055
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
|
|
2056
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1", children }),
|
|
2057
|
+
trailing && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
1870
2058
|
]
|
|
1871
2059
|
}
|
|
1872
2060
|
);
|
|
1873
2061
|
}
|
|
1874
2062
|
);
|
|
1875
2063
|
ContextMenuItem.displayName = "ContextMenuItem";
|
|
1876
|
-
var ContextMenuSeparator = (0,
|
|
1877
|
-
return /* @__PURE__ */ (0,
|
|
2064
|
+
var ContextMenuSeparator = (0, import_react35.forwardRef)(function ContextMenuSeparator2({ className, ...props }, ref) {
|
|
2065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1878
2066
|
RadixContext.Separator,
|
|
1879
2067
|
{
|
|
1880
2068
|
ref,
|
|
@@ -1888,15 +2076,15 @@ var ContextMenu = RadixContext.Root;
|
|
|
1888
2076
|
|
|
1889
2077
|
// src/components/Dialog/Dialog.tsx
|
|
1890
2078
|
var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
1891
|
-
var
|
|
1892
|
-
var
|
|
2079
|
+
var import_react36 = require("react");
|
|
2080
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1893
2081
|
var DialogRoot = RadixDialog.Root;
|
|
1894
2082
|
var DialogTrigger = RadixDialog.Trigger;
|
|
1895
2083
|
var DialogClose = RadixDialog.Close;
|
|
1896
2084
|
var DialogPortal = RadixDialog.Portal;
|
|
1897
|
-
var DialogOverlay = (0,
|
|
2085
|
+
var DialogOverlay = (0, import_react36.forwardRef)(
|
|
1898
2086
|
function DialogOverlay2({ className, ...props }, ref) {
|
|
1899
|
-
return /* @__PURE__ */ (0,
|
|
2087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1900
2088
|
RadixDialog.Overlay,
|
|
1901
2089
|
{
|
|
1902
2090
|
ref,
|
|
@@ -1911,10 +2099,10 @@ var DialogOverlay = (0, import_react35.forwardRef)(
|
|
|
1911
2099
|
}
|
|
1912
2100
|
);
|
|
1913
2101
|
DialogOverlay.displayName = "DialogOverlay";
|
|
1914
|
-
var DialogContent = (0,
|
|
1915
|
-
return /* @__PURE__ */ (0,
|
|
1916
|
-
/* @__PURE__ */ (0,
|
|
1917
|
-
/* @__PURE__ */ (0,
|
|
2102
|
+
var DialogContent = (0, import_react36.forwardRef)(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
|
|
2103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPortal, { children: [
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogOverlay, {}),
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1918
2106
|
RadixDialog.Content,
|
|
1919
2107
|
{
|
|
1920
2108
|
ref,
|
|
@@ -1934,32 +2122,32 @@ var DialogContent = (0, import_react35.forwardRef)(function DialogContent2({ cla
|
|
|
1934
2122
|
});
|
|
1935
2123
|
DialogContent.displayName = "DialogContent";
|
|
1936
2124
|
function Dialog({ title, description, footer, width, children, ...rootProps }) {
|
|
1937
|
-
return /* @__PURE__ */ (0,
|
|
1938
|
-
title && /* @__PURE__ */ (0,
|
|
2125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogContent, { width, children: [
|
|
2126
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1939
2127
|
RadixDialog.Title,
|
|
1940
2128
|
{
|
|
1941
2129
|
className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
|
|
1942
2130
|
children: title
|
|
1943
2131
|
}
|
|
1944
2132
|
),
|
|
1945
|
-
description && /* @__PURE__ */ (0,
|
|
2133
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
|
|
1946
2134
|
children,
|
|
1947
|
-
footer && /* @__PURE__ */ (0,
|
|
2135
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
|
|
1948
2136
|
] }) });
|
|
1949
2137
|
}
|
|
1950
2138
|
|
|
1951
2139
|
// src/components/Dialog/Drawer.tsx
|
|
1952
2140
|
var RadixDialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
1953
|
-
var
|
|
1954
|
-
var
|
|
2141
|
+
var import_react37 = require("react");
|
|
2142
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1955
2143
|
var sideClasses = {
|
|
1956
2144
|
left: "top-0 bottom-0 left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
|
|
1957
2145
|
right: "top-0 bottom-0 right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]",
|
|
1958
2146
|
bottom: "bottom-0 left-0 right-0 border-t border-border-strong rounded-t-m-sheet data-[state=open]:animate-[ship-slide-in-bottom_240ms_var(--easing-out)]"
|
|
1959
2147
|
};
|
|
1960
|
-
var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0,
|
|
1961
|
-
/* @__PURE__ */ (0,
|
|
1962
|
-
/* @__PURE__ */ (0,
|
|
2148
|
+
var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
|
|
2149
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
|
|
2150
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1963
2151
|
RadixDialog2.Close,
|
|
1964
2152
|
{
|
|
1965
2153
|
onClick: onClose,
|
|
@@ -1969,15 +2157,15 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ (0, import_jsx_runtim
|
|
|
1969
2157
|
}
|
|
1970
2158
|
)
|
|
1971
2159
|
] });
|
|
1972
|
-
var SheetHeader = ({ title }) => /* @__PURE__ */ (0,
|
|
1973
|
-
var DragHandle = () => /* @__PURE__ */ (0,
|
|
1974
|
-
var Drawer = (0,
|
|
2160
|
+
var SheetHeader = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixDialog2.Title, { className: "text-m-body-lg font-semibold tracking-tight", children: title }) });
|
|
2161
|
+
var DragHandle = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex justify-center pt-3 pb-2", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "bg-border-strong h-1 w-9 rounded-full" }) });
|
|
2162
|
+
var Drawer = (0, import_react37.forwardRef)(function Drawer2({ side = "right", title, width = 420, height = "85vh", handle, children, ...rootProps }, ref) {
|
|
1975
2163
|
const isBottom = side === "bottom";
|
|
1976
2164
|
const showHandle = isBottom && (handle ?? true);
|
|
1977
2165
|
const dimensionStyle = isBottom ? { height } : { width };
|
|
1978
|
-
return /* @__PURE__ */ (0,
|
|
1979
|
-
/* @__PURE__ */ (0,
|
|
1980
|
-
/* @__PURE__ */ (0,
|
|
2166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogPortal, { children: [
|
|
2167
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogOverlay, {}),
|
|
2168
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1981
2169
|
RadixDialog2.Content,
|
|
1982
2170
|
{
|
|
1983
2171
|
ref,
|
|
@@ -1988,9 +2176,9 @@ var Drawer = (0, import_react36.forwardRef)(function Drawer2({ side = "right", t
|
|
|
1988
2176
|
),
|
|
1989
2177
|
style: dimensionStyle,
|
|
1990
2178
|
children: [
|
|
1991
|
-
showHandle && /* @__PURE__ */ (0,
|
|
1992
|
-
title ? isBottom ? /* @__PURE__ */ (0,
|
|
1993
|
-
/* @__PURE__ */ (0,
|
|
2179
|
+
showHandle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DragHandle, {}),
|
|
2180
|
+
title ? isBottom ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SheetHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerHeader, { title }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixDialog2.Title, { className: "sr-only", children: isBottom ? "Sheet" : "Drawer" }),
|
|
2181
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex-1 overflow-auto", isBottom ? "px-5 pb-6" : "p-5"), children })
|
|
1994
2182
|
]
|
|
1995
2183
|
}
|
|
1996
2184
|
)
|
|
@@ -2000,12 +2188,12 @@ Drawer.displayName = "Drawer";
|
|
|
2000
2188
|
|
|
2001
2189
|
// src/components/Dialog/Sheet.tsx
|
|
2002
2190
|
var RadixDialog3 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2003
|
-
var
|
|
2004
|
-
var
|
|
2005
|
-
var Sheet = (0,
|
|
2006
|
-
return /* @__PURE__ */ (0,
|
|
2007
|
-
/* @__PURE__ */ (0,
|
|
2008
|
-
/* @__PURE__ */ (0,
|
|
2191
|
+
var import_react38 = require("react");
|
|
2192
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2193
|
+
var Sheet = (0, import_react38.forwardRef)(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
|
|
2194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogPortal, { children: [
|
|
2195
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogOverlay, {}),
|
|
2196
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2009
2197
|
RadixDialog3.Content,
|
|
2010
2198
|
{
|
|
2011
2199
|
ref,
|
|
@@ -2017,7 +2205,7 @@ var Sheet = (0, import_react37.forwardRef)(function Sheet2({ title, width = "min
|
|
|
2017
2205
|
),
|
|
2018
2206
|
style: { width },
|
|
2019
2207
|
children: [
|
|
2020
|
-
title ? /* @__PURE__ */ (0,
|
|
2208
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
|
|
2021
2209
|
children
|
|
2022
2210
|
]
|
|
2023
2211
|
}
|
|
@@ -2028,15 +2216,15 @@ Sheet.displayName = "Sheet";
|
|
|
2028
2216
|
|
|
2029
2217
|
// src/components/Dialog/AlertDialog.tsx
|
|
2030
2218
|
var RadixAlert = __toESM(require("@radix-ui/react-alert-dialog"), 1);
|
|
2031
|
-
var
|
|
2032
|
-
var
|
|
2219
|
+
var import_react39 = require("react");
|
|
2220
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2033
2221
|
var AlertDialogRoot = RadixAlert.Root;
|
|
2034
2222
|
var AlertDialogTrigger = RadixAlert.Trigger;
|
|
2035
2223
|
var AlertDialogAction = RadixAlert.Action;
|
|
2036
2224
|
var AlertDialogCancel = RadixAlert.Cancel;
|
|
2037
|
-
var AlertDialog = (0,
|
|
2038
|
-
return /* @__PURE__ */ (0,
|
|
2039
|
-
/* @__PURE__ */ (0,
|
|
2225
|
+
var AlertDialog = (0, import_react39.forwardRef)(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
|
|
2226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(RadixAlert.Portal, { children: [
|
|
2227
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2040
2228
|
RadixAlert.Overlay,
|
|
2041
2229
|
{
|
|
2042
2230
|
className: cn(
|
|
@@ -2045,7 +2233,7 @@ var AlertDialog = (0, import_react38.forwardRef)(function AlertDialog2({ title,
|
|
|
2045
2233
|
)
|
|
2046
2234
|
}
|
|
2047
2235
|
),
|
|
2048
|
-
/* @__PURE__ */ (0,
|
|
2236
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2049
2237
|
RadixAlert.Content,
|
|
2050
2238
|
{
|
|
2051
2239
|
ref,
|
|
@@ -2056,16 +2244,16 @@ var AlertDialog = (0, import_react38.forwardRef)(function AlertDialog2({ title,
|
|
|
2056
2244
|
"data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
|
|
2057
2245
|
),
|
|
2058
2246
|
children: [
|
|
2059
|
-
/* @__PURE__ */ (0,
|
|
2247
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2060
2248
|
RadixAlert.Title,
|
|
2061
2249
|
{
|
|
2062
2250
|
className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
|
|
2063
2251
|
children: title
|
|
2064
2252
|
}
|
|
2065
2253
|
),
|
|
2066
|
-
description && /* @__PURE__ */ (0,
|
|
2254
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
|
|
2067
2255
|
children,
|
|
2068
|
-
footer && /* @__PURE__ */ (0,
|
|
2256
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-5 flex justify-end gap-2", children: footer })
|
|
2069
2257
|
]
|
|
2070
2258
|
}
|
|
2071
2259
|
)
|
|
@@ -2075,17 +2263,17 @@ AlertDialog.displayName = "AlertDialog";
|
|
|
2075
2263
|
|
|
2076
2264
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
2077
2265
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
2078
|
-
var
|
|
2079
|
-
var
|
|
2266
|
+
var import_react40 = require("react");
|
|
2267
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2080
2268
|
var DropdownMenuRoot = RadixMenu.Root;
|
|
2081
2269
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
2082
2270
|
var DropdownMenuPortal = RadixMenu.Portal;
|
|
2083
2271
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
2084
2272
|
var DropdownMenuLabel = RadixMenu.Label;
|
|
2085
2273
|
var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
|
|
2086
|
-
var DropdownMenuContent = (0,
|
|
2274
|
+
var DropdownMenuContent = (0, import_react40.forwardRef)(
|
|
2087
2275
|
function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
|
|
2088
|
-
return /* @__PURE__ */ (0,
|
|
2276
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2089
2277
|
RadixMenu.Content,
|
|
2090
2278
|
{
|
|
2091
2279
|
ref,
|
|
@@ -2107,32 +2295,32 @@ var itemBase2 = cn(
|
|
|
2107
2295
|
"data-[highlighted]:bg-panel-2",
|
|
2108
2296
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
2109
2297
|
);
|
|
2110
|
-
var MenuItem = (0,
|
|
2111
|
-
return /* @__PURE__ */ (0,
|
|
2298
|
+
var MenuItem = (0, import_react40.forwardRef)(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
|
|
2299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2112
2300
|
RadixMenu.Item,
|
|
2113
2301
|
{
|
|
2114
2302
|
ref,
|
|
2115
2303
|
className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
|
|
2116
2304
|
...props,
|
|
2117
2305
|
children: [
|
|
2118
|
-
icon && /* @__PURE__ */ (0,
|
|
2119
|
-
/* @__PURE__ */ (0,
|
|
2120
|
-
trailing && /* @__PURE__ */ (0,
|
|
2306
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
|
|
2307
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex-1", children }),
|
|
2308
|
+
trailing && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
2121
2309
|
]
|
|
2122
2310
|
}
|
|
2123
2311
|
);
|
|
2124
2312
|
});
|
|
2125
2313
|
MenuItem.displayName = "MenuItem";
|
|
2126
|
-
var MenuCheckboxItem = (0,
|
|
2314
|
+
var MenuCheckboxItem = (0, import_react40.forwardRef)(
|
|
2127
2315
|
function MenuCheckboxItem2({ className, children, ...props }, ref) {
|
|
2128
|
-
return /* @__PURE__ */ (0,
|
|
2316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2129
2317
|
RadixMenu.CheckboxItem,
|
|
2130
2318
|
{
|
|
2131
2319
|
ref,
|
|
2132
2320
|
className: cn(itemBase2, "text-text relative pl-[26px]", className),
|
|
2133
2321
|
...props,
|
|
2134
2322
|
children: [
|
|
2135
|
-
/* @__PURE__ */ (0,
|
|
2323
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
|
|
2136
2324
|
children
|
|
2137
2325
|
]
|
|
2138
2326
|
}
|
|
@@ -2140,9 +2328,9 @@ var MenuCheckboxItem = (0, import_react39.forwardRef)(
|
|
|
2140
2328
|
}
|
|
2141
2329
|
);
|
|
2142
2330
|
MenuCheckboxItem.displayName = "MenuCheckboxItem";
|
|
2143
|
-
var MenuSeparator = (0,
|
|
2331
|
+
var MenuSeparator = (0, import_react40.forwardRef)(
|
|
2144
2332
|
function MenuSeparator2({ className, ...props }, ref) {
|
|
2145
|
-
return /* @__PURE__ */ (0,
|
|
2333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2146
2334
|
RadixMenu.Separator,
|
|
2147
2335
|
{
|
|
2148
2336
|
ref,
|
|
@@ -2157,14 +2345,14 @@ var DropdownMenu = RadixMenu.Root;
|
|
|
2157
2345
|
|
|
2158
2346
|
// src/components/HoverCard/HoverCard.tsx
|
|
2159
2347
|
var RadixHoverCard = __toESM(require("@radix-ui/react-hover-card"), 1);
|
|
2160
|
-
var
|
|
2161
|
-
var
|
|
2348
|
+
var import_react41 = require("react");
|
|
2349
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2162
2350
|
var HoverCardRoot = RadixHoverCard.Root;
|
|
2163
2351
|
var HoverCardTrigger = RadixHoverCard.Trigger;
|
|
2164
2352
|
var HoverCardPortal = RadixHoverCard.Portal;
|
|
2165
|
-
var HoverCardContent = (0,
|
|
2353
|
+
var HoverCardContent = (0, import_react41.forwardRef)(
|
|
2166
2354
|
function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
|
|
2167
|
-
return /* @__PURE__ */ (0,
|
|
2355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixHoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2168
2356
|
RadixHoverCard.Content,
|
|
2169
2357
|
{
|
|
2170
2358
|
ref,
|
|
@@ -2181,25 +2369,25 @@ var HoverCardContent = (0, import_react40.forwardRef)(
|
|
|
2181
2369
|
);
|
|
2182
2370
|
HoverCardContent.displayName = "HoverCardContent";
|
|
2183
2371
|
function HoverCard({ trigger, content, ...rootProps }) {
|
|
2184
|
-
return /* @__PURE__ */ (0,
|
|
2185
|
-
/* @__PURE__ */ (0,
|
|
2186
|
-
/* @__PURE__ */ (0,
|
|
2372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
|
|
2373
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
|
|
2374
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HoverCardContent, { children: content })
|
|
2187
2375
|
] });
|
|
2188
2376
|
}
|
|
2189
2377
|
|
|
2190
2378
|
// src/components/Popover/Popover.tsx
|
|
2191
2379
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
2192
|
-
var
|
|
2193
|
-
var
|
|
2380
|
+
var import_react42 = require("react");
|
|
2381
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2194
2382
|
var PopoverRoot = RadixPopover.Root;
|
|
2195
2383
|
var PopoverTrigger = RadixPopover.Trigger;
|
|
2196
2384
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
2197
2385
|
var PopoverPortal = RadixPopover.Portal;
|
|
2198
2386
|
var PopoverClose = RadixPopover.Close;
|
|
2199
2387
|
var PopoverArrow = RadixPopover.Arrow;
|
|
2200
|
-
var PopoverContent = (0,
|
|
2388
|
+
var PopoverContent = (0, import_react42.forwardRef)(
|
|
2201
2389
|
function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
|
|
2202
|
-
return /* @__PURE__ */ (0,
|
|
2390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2203
2391
|
RadixPopover.Content,
|
|
2204
2392
|
{
|
|
2205
2393
|
ref,
|
|
@@ -2220,9 +2408,9 @@ var Popover = RadixPopover.Root;
|
|
|
2220
2408
|
|
|
2221
2409
|
// src/components/Toast/Toast.tsx
|
|
2222
2410
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
2223
|
-
var
|
|
2224
|
-
var
|
|
2225
|
-
var ToastContext = (0,
|
|
2411
|
+
var import_react43 = require("react");
|
|
2412
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2413
|
+
var ToastContext = (0, import_react43.createContext)(null);
|
|
2226
2414
|
var variantIcon = {
|
|
2227
2415
|
default: "\u25CF",
|
|
2228
2416
|
info: "\u2139",
|
|
@@ -2247,8 +2435,8 @@ var variantBorderLeft = {
|
|
|
2247
2435
|
var toastIdCounter = 0;
|
|
2248
2436
|
var nextToastId = () => `toast-${++toastIdCounter}`;
|
|
2249
2437
|
function ToastProvider({ children }) {
|
|
2250
|
-
const [toasts, setToasts] = (0,
|
|
2251
|
-
const toast = (0,
|
|
2438
|
+
const [toasts, setToasts] = (0, import_react43.useState)([]);
|
|
2439
|
+
const toast = (0, import_react43.useCallback)((t) => {
|
|
2252
2440
|
const explicitId = t.id;
|
|
2253
2441
|
const id = explicitId ?? nextToastId();
|
|
2254
2442
|
const entry = { ...t, id };
|
|
@@ -2260,24 +2448,24 @@ function ToastProvider({ children }) {
|
|
|
2260
2448
|
});
|
|
2261
2449
|
return id;
|
|
2262
2450
|
}, []);
|
|
2263
|
-
const dismiss = (0,
|
|
2451
|
+
const dismiss = (0, import_react43.useCallback)((id) => {
|
|
2264
2452
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
2265
2453
|
}, []);
|
|
2266
|
-
const value = (0,
|
|
2267
|
-
return /* @__PURE__ */ (0,
|
|
2454
|
+
const value = (0, import_react43.useMemo)(() => ({ toast, dismiss }), [toast, dismiss]);
|
|
2455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(RadixToast.Provider, { swipeDirection: "right", children: [
|
|
2268
2456
|
children,
|
|
2269
|
-
toasts.map((t) => /* @__PURE__ */ (0,
|
|
2270
|
-
/* @__PURE__ */ (0,
|
|
2457
|
+
toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
|
|
2458
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixToast.Viewport, { className: "z-toast fixed right-5 bottom-5 flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
|
|
2271
2459
|
] }) });
|
|
2272
2460
|
}
|
|
2273
2461
|
function useToast() {
|
|
2274
|
-
const ctx = (0,
|
|
2462
|
+
const ctx = (0, import_react43.useContext)(ToastContext);
|
|
2275
2463
|
if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
|
|
2276
2464
|
return ctx;
|
|
2277
2465
|
}
|
|
2278
|
-
var ToastCard = (0,
|
|
2466
|
+
var ToastCard = (0, import_react43.forwardRef)(function ToastCard2({ toast, onDismiss }, ref) {
|
|
2279
2467
|
const variant = toast.variant ?? "default";
|
|
2280
|
-
return /* @__PURE__ */ (0,
|
|
2468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2281
2469
|
RadixToast.Root,
|
|
2282
2470
|
{
|
|
2283
2471
|
ref,
|
|
@@ -2292,13 +2480,13 @@ var ToastCard = (0, import_react42.forwardRef)(function ToastCard2({ toast, onDi
|
|
|
2292
2480
|
variantBorderLeft[variant]
|
|
2293
2481
|
),
|
|
2294
2482
|
children: [
|
|
2295
|
-
/* @__PURE__ */ (0,
|
|
2296
|
-
/* @__PURE__ */ (0,
|
|
2297
|
-
/* @__PURE__ */ (0,
|
|
2298
|
-
toast.description && /* @__PURE__ */ (0,
|
|
2299
|
-
toast.action && /* @__PURE__ */ (0,
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
2485
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
|
|
2486
|
+
toast.description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
|
|
2487
|
+
toast.action && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-2", children: toast.action })
|
|
2300
2488
|
] }),
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2302
2490
|
RadixToast.Close,
|
|
2303
2491
|
{
|
|
2304
2492
|
"aria-label": "Dismiss",
|
|
@@ -2314,16 +2502,16 @@ ToastCard.displayName = "ToastCard";
|
|
|
2314
2502
|
|
|
2315
2503
|
// src/components/Tooltip/Tooltip.tsx
|
|
2316
2504
|
var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
2317
|
-
var
|
|
2318
|
-
var
|
|
2505
|
+
var import_react44 = require("react");
|
|
2506
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2319
2507
|
var TooltipProvider = RadixTooltip.Provider;
|
|
2320
|
-
var
|
|
2508
|
+
var Tooltip = RadixTooltip.Root;
|
|
2321
2509
|
var TooltipTrigger = RadixTooltip.Trigger;
|
|
2322
2510
|
var TooltipPortal = RadixTooltip.Portal;
|
|
2323
2511
|
var TooltipArrow = RadixTooltip.Arrow;
|
|
2324
|
-
var TooltipContent = (0,
|
|
2512
|
+
var TooltipContent = (0, import_react44.forwardRef)(
|
|
2325
2513
|
function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
|
|
2326
|
-
return /* @__PURE__ */ (0,
|
|
2514
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2327
2515
|
RadixTooltip.Content,
|
|
2328
2516
|
{
|
|
2329
2517
|
ref,
|
|
@@ -2340,18 +2528,23 @@ var TooltipContent = (0, import_react43.forwardRef)(
|
|
|
2340
2528
|
}
|
|
2341
2529
|
);
|
|
2342
2530
|
TooltipContent.displayName = "TooltipContent";
|
|
2343
|
-
function
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2531
|
+
function SimpleTooltip({
|
|
2532
|
+
content,
|
|
2533
|
+
children,
|
|
2534
|
+
side = "top",
|
|
2535
|
+
delayDuration = 400
|
|
2536
|
+
}) {
|
|
2537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children }),
|
|
2539
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { side, children: content })
|
|
2347
2540
|
] }) });
|
|
2348
2541
|
}
|
|
2349
2542
|
|
|
2350
2543
|
// src/patterns/Alert/Alert.tsx
|
|
2351
|
-
var
|
|
2352
|
-
var
|
|
2353
|
-
var
|
|
2354
|
-
var alertStyles = (0,
|
|
2544
|
+
var import_class_variance_authority9 = require("class-variance-authority");
|
|
2545
|
+
var import_react45 = require("react");
|
|
2546
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2547
|
+
var alertStyles = (0, import_class_variance_authority9.cva)("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
|
|
2355
2548
|
variants: {
|
|
2356
2549
|
tone: {
|
|
2357
2550
|
accent: "border-border border-l-2 border-l-accent",
|
|
@@ -2374,7 +2567,7 @@ var defaultGlyph = {
|
|
|
2374
2567
|
warn: "!",
|
|
2375
2568
|
err: "\xD7"
|
|
2376
2569
|
};
|
|
2377
|
-
var Alert = (0,
|
|
2570
|
+
var Alert = (0, import_react45.forwardRef)(function Alert2({
|
|
2378
2571
|
tone = "accent",
|
|
2379
2572
|
title,
|
|
2380
2573
|
description,
|
|
@@ -2386,7 +2579,7 @@ var Alert = (0, import_react44.forwardRef)(function Alert2({
|
|
|
2386
2579
|
...props
|
|
2387
2580
|
}, ref) {
|
|
2388
2581
|
const t = tone ?? "accent";
|
|
2389
|
-
return /* @__PURE__ */ (0,
|
|
2582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2390
2583
|
"div",
|
|
2391
2584
|
{
|
|
2392
2585
|
ref,
|
|
@@ -2395,13 +2588,13 @@ var Alert = (0, import_react44.forwardRef)(function Alert2({
|
|
|
2395
2588
|
className: cn(alertStyles({ tone }), className),
|
|
2396
2589
|
...props,
|
|
2397
2590
|
children: [
|
|
2398
|
-
/* @__PURE__ */ (0,
|
|
2399
|
-
/* @__PURE__ */ (0,
|
|
2400
|
-
title && /* @__PURE__ */ (0,
|
|
2401
|
-
description && /* @__PURE__ */ (0,
|
|
2591
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[t]), children: icon ?? defaultGlyph[t] }),
|
|
2592
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
2593
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "font-medium", children: title }),
|
|
2594
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
|
|
2402
2595
|
children
|
|
2403
2596
|
] }),
|
|
2404
|
-
action && /* @__PURE__ */ (0,
|
|
2597
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ml-1 shrink-0", children: action })
|
|
2405
2598
|
]
|
|
2406
2599
|
}
|
|
2407
2600
|
);
|
|
@@ -2409,10 +2602,10 @@ var Alert = (0, import_react44.forwardRef)(function Alert2({
|
|
|
2409
2602
|
Alert.displayName = "Alert";
|
|
2410
2603
|
|
|
2411
2604
|
// src/patterns/Banner/Banner.tsx
|
|
2412
|
-
var
|
|
2413
|
-
var
|
|
2414
|
-
var
|
|
2415
|
-
var bannerStyles = (0,
|
|
2605
|
+
var import_class_variance_authority10 = require("class-variance-authority");
|
|
2606
|
+
var import_react46 = require("react");
|
|
2607
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2608
|
+
var bannerStyles = (0, import_class_variance_authority10.cva)(
|
|
2416
2609
|
"flex items-center gap-3 border-b border-border px-[14px] py-2 text-[12px]",
|
|
2417
2610
|
{
|
|
2418
2611
|
variants: {
|
|
@@ -2436,9 +2629,9 @@ var defaultGlyph2 = {
|
|
|
2436
2629
|
warn: "!",
|
|
2437
2630
|
err: "\xD7"
|
|
2438
2631
|
};
|
|
2439
|
-
var Banner = (0,
|
|
2632
|
+
var Banner = (0, import_react46.forwardRef)(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
|
|
2440
2633
|
const t = tone ?? "accent";
|
|
2441
|
-
return /* @__PURE__ */ (0,
|
|
2634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2442
2635
|
"div",
|
|
2443
2636
|
{
|
|
2444
2637
|
ref,
|
|
@@ -2447,9 +2640,9 @@ var Banner = (0, import_react45.forwardRef)(function Banner2({ tone = "accent",
|
|
|
2447
2640
|
className: cn(bannerStyles({ tone, sticky }), className),
|
|
2448
2641
|
...props,
|
|
2449
2642
|
children: [
|
|
2450
|
-
/* @__PURE__ */ (0,
|
|
2451
|
-
/* @__PURE__ */ (0,
|
|
2452
|
-
action && /* @__PURE__ */ (0,
|
|
2643
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[t] }),
|
|
2644
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "min-w-0 flex-1", children }),
|
|
2645
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "ml-auto", children: action })
|
|
2453
2646
|
]
|
|
2454
2647
|
}
|
|
2455
2648
|
);
|
|
@@ -2457,28 +2650,28 @@ var Banner = (0, import_react45.forwardRef)(function Banner2({ tone = "accent",
|
|
|
2457
2650
|
Banner.displayName = "Banner";
|
|
2458
2651
|
|
|
2459
2652
|
// src/patterns/Breadcrumbs/Breadcrumbs.tsx
|
|
2460
|
-
var
|
|
2461
|
-
var
|
|
2462
|
-
var Breadcrumbs = (0,
|
|
2463
|
-
const crumbs =
|
|
2653
|
+
var import_react47 = require("react");
|
|
2654
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2655
|
+
var Breadcrumbs = (0, import_react47.forwardRef)(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
|
|
2656
|
+
const crumbs = import_react47.Children.toArray(children).filter(import_react47.isValidElement);
|
|
2464
2657
|
const last = crumbs.length - 1;
|
|
2465
|
-
return /* @__PURE__ */ (0,
|
|
2658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
|
|
2466
2659
|
const isCurrent = i === last;
|
|
2467
|
-
return /* @__PURE__ */ (0,
|
|
2468
|
-
isCurrent ? /* @__PURE__ */ (0,
|
|
2469
|
-
!isCurrent && /* @__PURE__ */ (0,
|
|
2660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { className: "inline-flex items-center gap-[6px]", children: [
|
|
2661
|
+
isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Crumb, { ...crumb.props, current: true }) : crumb,
|
|
2662
|
+
!isCurrent && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
|
|
2470
2663
|
] }, i);
|
|
2471
2664
|
}) }) });
|
|
2472
2665
|
});
|
|
2473
2666
|
Breadcrumbs.displayName = "Breadcrumbs";
|
|
2474
|
-
var Crumb = (0,
|
|
2667
|
+
var Crumb = (0, import_react47.forwardRef)(function Crumb2({ current, className, href, children, ...props }, ref) {
|
|
2475
2668
|
if (current) {
|
|
2476
|
-
return /* @__PURE__ */ (0,
|
|
2669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-current": "page", className: cn("text-text", className), children });
|
|
2477
2670
|
}
|
|
2478
2671
|
if (href === void 0) {
|
|
2479
|
-
return /* @__PURE__ */ (0,
|
|
2672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-text-dim", className), children });
|
|
2480
2673
|
}
|
|
2481
|
-
return /* @__PURE__ */ (0,
|
|
2674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2482
2675
|
"a",
|
|
2483
2676
|
{
|
|
2484
2677
|
ref,
|
|
@@ -2492,8 +2685,8 @@ var Crumb = (0, import_react46.forwardRef)(function Crumb2({ current, className,
|
|
|
2492
2685
|
Crumb.displayName = "Crumb";
|
|
2493
2686
|
|
|
2494
2687
|
// src/patterns/Combobox/Combobox.tsx
|
|
2495
|
-
var
|
|
2496
|
-
var
|
|
2688
|
+
var import_react48 = require("react");
|
|
2689
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2497
2690
|
function normalize(option) {
|
|
2498
2691
|
if (typeof option === "string") {
|
|
2499
2692
|
return { value: option, label: option, searchText: option.toLowerCase() };
|
|
@@ -2509,7 +2702,7 @@ function normalize(option) {
|
|
|
2509
2702
|
};
|
|
2510
2703
|
}
|
|
2511
2704
|
var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
|
|
2512
|
-
var Combobox = (0,
|
|
2705
|
+
var Combobox = (0, import_react48.forwardRef)(function Combobox2({
|
|
2513
2706
|
options,
|
|
2514
2707
|
value: valueProp,
|
|
2515
2708
|
defaultValue,
|
|
@@ -2526,16 +2719,16 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2526
2719
|
id,
|
|
2527
2720
|
"aria-label": ariaLabel
|
|
2528
2721
|
}, ref) {
|
|
2529
|
-
const reactId = (0,
|
|
2722
|
+
const reactId = (0, import_react48.useId)();
|
|
2530
2723
|
const listboxId = `${id ?? reactId}-listbox`;
|
|
2531
2724
|
const inputId = id ?? `${reactId}-input`;
|
|
2532
|
-
const normalized = (0,
|
|
2725
|
+
const normalized = (0, import_react48.useMemo)(() => options.map(normalize), [options]);
|
|
2533
2726
|
const [value, setValue] = useControllableState({
|
|
2534
2727
|
value: valueProp,
|
|
2535
2728
|
defaultValue,
|
|
2536
2729
|
onChange: onValueChange
|
|
2537
2730
|
});
|
|
2538
|
-
const initialQuery = (0,
|
|
2731
|
+
const initialQuery = (0, import_react48.useMemo)(() => {
|
|
2539
2732
|
if (defaultQuery !== void 0) return defaultQuery;
|
|
2540
2733
|
if (defaultValue !== void 0) {
|
|
2541
2734
|
const opt = normalized.find((o) => o.value === defaultValue);
|
|
@@ -2548,10 +2741,10 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2548
2741
|
defaultValue: initialQuery,
|
|
2549
2742
|
onChange: onQueryChange
|
|
2550
2743
|
});
|
|
2551
|
-
const [open, setOpen] = (0,
|
|
2552
|
-
const wrapperRef = (0,
|
|
2744
|
+
const [open, setOpen] = (0, import_react48.useState)(false);
|
|
2745
|
+
const wrapperRef = (0, import_react48.useRef)(null);
|
|
2553
2746
|
useOutsideClick(wrapperRef, () => setOpen(false));
|
|
2554
|
-
const filtered = (0,
|
|
2747
|
+
const filtered = (0, import_react48.useMemo)(
|
|
2555
2748
|
() => query ? normalized.filter((o) => filter(o, query)) : normalized,
|
|
2556
2749
|
[normalized, query, filter]
|
|
2557
2750
|
);
|
|
@@ -2563,7 +2756,7 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2563
2756
|
if (item && !item.disabled) commit(item);
|
|
2564
2757
|
}
|
|
2565
2758
|
});
|
|
2566
|
-
(0,
|
|
2759
|
+
(0, import_react48.useEffect)(() => {
|
|
2567
2760
|
setCursor(0);
|
|
2568
2761
|
}, [query, setCursor]);
|
|
2569
2762
|
function commit(option) {
|
|
@@ -2586,8 +2779,8 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2586
2779
|
setOpen(false);
|
|
2587
2780
|
}
|
|
2588
2781
|
};
|
|
2589
|
-
return /* @__PURE__ */ (0,
|
|
2590
|
-
/* @__PURE__ */ (0,
|
|
2782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
|
|
2783
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2591
2784
|
"input",
|
|
2592
2785
|
{
|
|
2593
2786
|
ref,
|
|
@@ -2621,7 +2814,7 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2621
2814
|
)
|
|
2622
2815
|
}
|
|
2623
2816
|
),
|
|
2624
|
-
open && /* @__PURE__ */ (0,
|
|
2817
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2625
2818
|
"ul",
|
|
2626
2819
|
{
|
|
2627
2820
|
id: listboxId,
|
|
@@ -2631,9 +2824,9 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2631
2824
|
"z-dropdown absolute top-full right-0 left-0 mt-1 max-h-[220px] overflow-auto",
|
|
2632
2825
|
"border-border bg-panel rounded-md border p-1 shadow-lg"
|
|
2633
2826
|
),
|
|
2634
|
-
children: filtered.length === 0 ? /* @__PURE__ */ (0,
|
|
2827
|
+
children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { className: "text-text-dim px-2 py-3 text-center text-[12px]", role: "presentation", children: emptyState ?? "No matches" }) : filtered.map((option, i) => {
|
|
2635
2828
|
const isActive = i === cursor;
|
|
2636
|
-
return /* @__PURE__ */ (0,
|
|
2829
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2637
2830
|
"li",
|
|
2638
2831
|
{
|
|
2639
2832
|
id: `${listboxId}-option-${i}`,
|
|
@@ -2651,8 +2844,8 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2651
2844
|
option.disabled && "pointer-events-none opacity-40"
|
|
2652
2845
|
),
|
|
2653
2846
|
children: [
|
|
2654
|
-
/* @__PURE__ */ (0,
|
|
2655
|
-
option.description && /* @__PURE__ */ (0,
|
|
2847
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: option.label }),
|
|
2848
|
+
option.description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-text-dim text-[11px]", children: option.description })
|
|
2656
2849
|
]
|
|
2657
2850
|
},
|
|
2658
2851
|
option.value
|
|
@@ -2660,19 +2853,19 @@ var Combobox = (0, import_react47.forwardRef)(function Combobox2({
|
|
|
2660
2853
|
})
|
|
2661
2854
|
}
|
|
2662
2855
|
),
|
|
2663
|
-
name && /* @__PURE__ */ (0,
|
|
2856
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("input", { type: "hidden", name, value: value ?? "", readOnly: true })
|
|
2664
2857
|
] });
|
|
2665
2858
|
});
|
|
2666
2859
|
Combobox.displayName = "Combobox";
|
|
2667
2860
|
|
|
2668
2861
|
// src/patterns/CommandPalette/CommandPalette.tsx
|
|
2669
2862
|
var RadixDialog4 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
2670
|
-
var
|
|
2671
|
-
var
|
|
2863
|
+
var import_react49 = require("react");
|
|
2864
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2672
2865
|
function flatItems(groups) {
|
|
2673
2866
|
return groups.flatMap((g) => g.items);
|
|
2674
2867
|
}
|
|
2675
|
-
var CommandPalette = (0,
|
|
2868
|
+
var CommandPalette = (0, import_react49.forwardRef)(
|
|
2676
2869
|
function CommandPalette2({
|
|
2677
2870
|
open,
|
|
2678
2871
|
onOpenChange,
|
|
@@ -2685,7 +2878,7 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2685
2878
|
emptyState,
|
|
2686
2879
|
width = 540
|
|
2687
2880
|
}, ref) {
|
|
2688
|
-
const flat = (0,
|
|
2881
|
+
const flat = (0, import_react49.useMemo)(() => flatItems(groups), [groups]);
|
|
2689
2882
|
const { cursor, setCursor, onKeyDown } = useKeyboardList({
|
|
2690
2883
|
count: flat.length,
|
|
2691
2884
|
defaultCursor: 0,
|
|
@@ -2694,15 +2887,15 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2694
2887
|
if (item) onSelect(item.id);
|
|
2695
2888
|
}
|
|
2696
2889
|
});
|
|
2697
|
-
const reactId = (0,
|
|
2890
|
+
const reactId = (0, import_react49.useId)();
|
|
2698
2891
|
const listboxId = `${reactId}-listbox`;
|
|
2699
2892
|
const optionId = (i) => `${listboxId}-option-${i}`;
|
|
2700
2893
|
const hasMatches = flat.length > 0;
|
|
2701
|
-
(0,
|
|
2894
|
+
(0, import_react49.useEffect)(() => {
|
|
2702
2895
|
setCursor(0);
|
|
2703
2896
|
}, [query, groups, setCursor]);
|
|
2704
|
-
return /* @__PURE__ */ (0,
|
|
2705
|
-
/* @__PURE__ */ (0,
|
|
2897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(RadixDialog4.Portal, { children: [
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2706
2899
|
RadixDialog4.Overlay,
|
|
2707
2900
|
{
|
|
2708
2901
|
className: cn(
|
|
@@ -2711,7 +2904,7 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2711
2904
|
)
|
|
2712
2905
|
}
|
|
2713
2906
|
),
|
|
2714
|
-
/* @__PURE__ */ (0,
|
|
2907
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2715
2908
|
RadixDialog4.Content,
|
|
2716
2909
|
{
|
|
2717
2910
|
ref,
|
|
@@ -2725,10 +2918,10 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2725
2918
|
),
|
|
2726
2919
|
onKeyDown,
|
|
2727
2920
|
children: [
|
|
2728
|
-
/* @__PURE__ */ (0,
|
|
2729
|
-
/* @__PURE__ */ (0,
|
|
2730
|
-
/* @__PURE__ */ (0,
|
|
2731
|
-
/* @__PURE__ */ (0,
|
|
2921
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadixDialog4.Title, { className: "sr-only", children: "Command palette" }),
|
|
2922
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
|
|
2923
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
|
|
2924
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2732
2925
|
"input",
|
|
2733
2926
|
{
|
|
2734
2927
|
autoFocus: true,
|
|
@@ -2745,9 +2938,9 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2745
2938
|
className: "text-text placeholder:text-text-dim flex-1 border-0 bg-transparent text-[14px] outline-none"
|
|
2746
2939
|
}
|
|
2747
2940
|
),
|
|
2748
|
-
/* @__PURE__ */ (0,
|
|
2941
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
|
|
2749
2942
|
] }),
|
|
2750
|
-
/* @__PURE__ */ (0,
|
|
2943
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { id: listboxId, className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2751
2944
|
CommandGroups,
|
|
2752
2945
|
{
|
|
2753
2946
|
groups,
|
|
@@ -2757,7 +2950,7 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2757
2950
|
optionId
|
|
2758
2951
|
}
|
|
2759
2952
|
) }),
|
|
2760
|
-
footer && /* @__PURE__ */ (0,
|
|
2953
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
|
|
2761
2954
|
]
|
|
2762
2955
|
}
|
|
2763
2956
|
)
|
|
@@ -2767,10 +2960,10 @@ var CommandPalette = (0, import_react48.forwardRef)(
|
|
|
2767
2960
|
CommandPalette.displayName = "CommandPalette";
|
|
2768
2961
|
function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
2769
2962
|
let runningIndex = 0;
|
|
2770
|
-
return /* @__PURE__ */ (0,
|
|
2963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: groups.map((group, gIdx) => {
|
|
2771
2964
|
if (group.items.length === 0) return null;
|
|
2772
|
-
return /* @__PURE__ */ (0,
|
|
2773
|
-
group.label && /* @__PURE__ */ (0,
|
|
2965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
|
|
2966
|
+
group.label && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
|
|
2774
2967
|
group.label,
|
|
2775
2968
|
" \xB7 ",
|
|
2776
2969
|
group.items.length
|
|
@@ -2778,7 +2971,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2778
2971
|
group.items.map((item) => {
|
|
2779
2972
|
const myIndex = runningIndex++;
|
|
2780
2973
|
const isActive = cursor === myIndex;
|
|
2781
|
-
return /* @__PURE__ */ (0,
|
|
2974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2782
2975
|
"button",
|
|
2783
2976
|
{
|
|
2784
2977
|
id: optionId(myIndex),
|
|
@@ -2792,7 +2985,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2792
2985
|
isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
|
|
2793
2986
|
),
|
|
2794
2987
|
children: [
|
|
2795
|
-
item.glyph != null && /* @__PURE__ */ (0,
|
|
2988
|
+
item.glyph != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2796
2989
|
"span",
|
|
2797
2990
|
{
|
|
2798
2991
|
"aria-hidden": true,
|
|
@@ -2803,11 +2996,11 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2803
2996
|
children: item.glyph
|
|
2804
2997
|
}
|
|
2805
2998
|
),
|
|
2806
|
-
/* @__PURE__ */ (0,
|
|
2807
|
-
/* @__PURE__ */ (0,
|
|
2808
|
-
item.description && /* @__PURE__ */ (0,
|
|
2999
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
3000
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "block truncate text-[13px]", children: item.label }),
|
|
3001
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
|
|
2809
3002
|
] }),
|
|
2810
|
-
item.trailing && /* @__PURE__ */ (0,
|
|
3003
|
+
item.trailing && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
|
|
2811
3004
|
]
|
|
2812
3005
|
},
|
|
2813
3006
|
item.id
|
|
@@ -2829,8 +3022,8 @@ function filterCommandItems(query, groups) {
|
|
|
2829
3022
|
}
|
|
2830
3023
|
|
|
2831
3024
|
// src/patterns/DataTable/DataTable.tsx
|
|
2832
|
-
var
|
|
2833
|
-
var
|
|
3025
|
+
var import_react50 = require("react");
|
|
3026
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2834
3027
|
var alignClass = {
|
|
2835
3028
|
left: "text-left",
|
|
2836
3029
|
right: "text-right",
|
|
@@ -2865,12 +3058,12 @@ function DataTable(props) {
|
|
|
2865
3058
|
defaultValue: new Set(defaultSelected ?? []),
|
|
2866
3059
|
onChange: onSelectionChange
|
|
2867
3060
|
});
|
|
2868
|
-
const sortableMap = (0,
|
|
3061
|
+
const sortableMap = (0, import_react50.useMemo)(() => {
|
|
2869
3062
|
const m = /* @__PURE__ */ new Map();
|
|
2870
3063
|
for (const c of columns) if (c.accessor) m.set(c.key, c);
|
|
2871
3064
|
return m;
|
|
2872
3065
|
}, [columns]);
|
|
2873
|
-
const sortedData = (0,
|
|
3066
|
+
const sortedData = (0, import_react50.useMemo)(() => {
|
|
2874
3067
|
if (!sort) return [...data];
|
|
2875
3068
|
const col = sortableMap.get(sort.key);
|
|
2876
3069
|
if (!col || !col.accessor) return [...data];
|
|
@@ -2882,12 +3075,12 @@ function DataTable(props) {
|
|
|
2882
3075
|
return String(av).localeCompare(String(bv)) * factor;
|
|
2883
3076
|
});
|
|
2884
3077
|
}, [data, sort, sortableMap]);
|
|
2885
|
-
const allIds = (0,
|
|
3078
|
+
const allIds = (0, import_react50.useMemo)(() => sortedData.map(rowKey), [sortedData, rowKey]);
|
|
2886
3079
|
const selectedSet = selected ?? EMPTY_SET;
|
|
2887
3080
|
const allSelected = allIds.length > 0 && allIds.every((id) => selectedSet.has(id));
|
|
2888
3081
|
const someSelected = !allSelected && allIds.some((id) => selectedSet.has(id));
|
|
2889
|
-
const headerCheckRef = (0,
|
|
2890
|
-
(0,
|
|
3082
|
+
const headerCheckRef = (0, import_react50.useRef)(null);
|
|
3083
|
+
(0, import_react50.useEffect)(() => {
|
|
2891
3084
|
if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
|
|
2892
3085
|
}, [someSelected]);
|
|
2893
3086
|
const toggleSort = (key) => {
|
|
@@ -2918,10 +3111,10 @@ function DataTable(props) {
|
|
|
2918
3111
|
return next;
|
|
2919
3112
|
});
|
|
2920
3113
|
};
|
|
2921
|
-
return /* @__PURE__ */ (0,
|
|
2922
|
-
caption && /* @__PURE__ */ (0,
|
|
2923
|
-
/* @__PURE__ */ (0,
|
|
2924
|
-
selectable && /* @__PURE__ */ (0,
|
|
3114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
|
|
3115
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: "sr-only", children: caption }),
|
|
3116
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("tr", { children: [
|
|
3117
|
+
selectable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2925
3118
|
"input",
|
|
2926
3119
|
{
|
|
2927
3120
|
ref: headerCheckRef,
|
|
@@ -2937,8 +3130,8 @@ function DataTable(props) {
|
|
|
2937
3130
|
const isSorted = sort?.key === col.key;
|
|
2938
3131
|
const ariaSort = !sortable ? void 0 : isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : "none";
|
|
2939
3132
|
const align = col.align ?? "left";
|
|
2940
|
-
const indicator = sortable && isSorted && /* @__PURE__ */ (0,
|
|
2941
|
-
return /* @__PURE__ */ (0,
|
|
3133
|
+
const indicator = sortable && isSorted && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
|
|
3134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2942
3135
|
"th",
|
|
2943
3136
|
{
|
|
2944
3137
|
scope: "col",
|
|
@@ -2950,7 +3143,7 @@ function DataTable(props) {
|
|
|
2950
3143
|
sortable && "cursor-pointer",
|
|
2951
3144
|
isSorted ? "text-accent" : "text-text-dim"
|
|
2952
3145
|
),
|
|
2953
|
-
children: sortable ? /* @__PURE__ */ (0,
|
|
3146
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
2954
3147
|
"button",
|
|
2955
3148
|
{
|
|
2956
3149
|
type: "button",
|
|
@@ -2967,8 +3160,8 @@ function DataTable(props) {
|
|
|
2967
3160
|
);
|
|
2968
3161
|
})
|
|
2969
3162
|
] }) }),
|
|
2970
|
-
/* @__PURE__ */ (0,
|
|
2971
|
-
sortedData.length === 0 && /* @__PURE__ */ (0,
|
|
3163
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("tbody", { children: [
|
|
3164
|
+
sortedData.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2972
3165
|
"td",
|
|
2973
3166
|
{
|
|
2974
3167
|
colSpan: columns.length + (selectable ? 1 : 0),
|
|
@@ -2979,7 +3172,7 @@ function DataTable(props) {
|
|
|
2979
3172
|
sortedData.map((row) => {
|
|
2980
3173
|
const id = rowKey(row);
|
|
2981
3174
|
const isSelected = selectedSet.has(id);
|
|
2982
|
-
return /* @__PURE__ */ (0,
|
|
3175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
2983
3176
|
"tr",
|
|
2984
3177
|
{
|
|
2985
3178
|
"data-state": isSelected ? "selected" : void 0,
|
|
@@ -2988,7 +3181,7 @@ function DataTable(props) {
|
|
|
2988
3181
|
isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
|
|
2989
3182
|
),
|
|
2990
3183
|
children: [
|
|
2991
|
-
selectable && /* @__PURE__ */ (0,
|
|
3184
|
+
selectable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2992
3185
|
"input",
|
|
2993
3186
|
{
|
|
2994
3187
|
type: "checkbox",
|
|
@@ -2998,7 +3191,7 @@ function DataTable(props) {
|
|
|
2998
3191
|
className: "cursor-pointer accent-[var(--color-accent)]"
|
|
2999
3192
|
}
|
|
3000
3193
|
) }),
|
|
3001
|
-
columns.map((col) => /* @__PURE__ */ (0,
|
|
3194
|
+
columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cn("px-3 py-[10px]", alignClass[col.align ?? "left"]), children: col.cell ? col.cell(row) : col.accessor ? String(col.accessor(row)) : null }, col.key))
|
|
3002
3195
|
]
|
|
3003
3196
|
},
|
|
3004
3197
|
id
|
|
@@ -3009,8 +3202,8 @@ function DataTable(props) {
|
|
|
3009
3202
|
}
|
|
3010
3203
|
|
|
3011
3204
|
// src/patterns/DatePicker/Calendar.tsx
|
|
3012
|
-
var
|
|
3013
|
-
var
|
|
3205
|
+
var import_react51 = require("react");
|
|
3206
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3014
3207
|
var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3015
3208
|
var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
|
|
3016
3209
|
function isSameDay(a, b) {
|
|
@@ -3021,7 +3214,7 @@ function clampDay(year, month, day) {
|
|
|
3021
3214
|
const max = new Date(year, month + 1, 0).getDate();
|
|
3022
3215
|
return Math.min(Math.max(1, day), max);
|
|
3023
3216
|
}
|
|
3024
|
-
var Calendar = (0,
|
|
3217
|
+
var Calendar = (0, import_react51.forwardRef)(function Calendar2({
|
|
3025
3218
|
value,
|
|
3026
3219
|
defaultValue,
|
|
3027
3220
|
onValueChange,
|
|
@@ -3034,9 +3227,9 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3034
3227
|
className,
|
|
3035
3228
|
...props
|
|
3036
3229
|
}, ref) {
|
|
3037
|
-
const [today] = (0,
|
|
3038
|
-
const [hydrated, setHydrated] = (0,
|
|
3039
|
-
(0,
|
|
3230
|
+
const [today] = (0, import_react51.useState)(() => /* @__PURE__ */ new Date());
|
|
3231
|
+
const [hydrated, setHydrated] = (0, import_react51.useState)(false);
|
|
3232
|
+
(0, import_react51.useEffect)(() => setHydrated(true), []);
|
|
3040
3233
|
const [selectedDate, setSelectedDate] = useControllableState({
|
|
3041
3234
|
value,
|
|
3042
3235
|
defaultValue,
|
|
@@ -3044,12 +3237,12 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3044
3237
|
});
|
|
3045
3238
|
const initialMonth = defaultMonth ?? defaultValue?.getMonth() ?? today.getMonth();
|
|
3046
3239
|
const initialYear = defaultYear ?? defaultValue?.getFullYear() ?? today.getFullYear();
|
|
3047
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
3048
|
-
const [internalYear, setInternalYear] = (0,
|
|
3240
|
+
const [internalMonth, setInternalMonth] = (0, import_react51.useState)(initialMonth);
|
|
3241
|
+
const [internalYear, setInternalYear] = (0, import_react51.useState)(initialYear);
|
|
3049
3242
|
const month = monthProp ?? internalMonth;
|
|
3050
3243
|
const year = yearProp ?? internalYear;
|
|
3051
3244
|
const isControlled = monthProp !== void 0 && yearProp !== void 0;
|
|
3052
|
-
const setVisible = (0,
|
|
3245
|
+
const setVisible = (0, import_react51.useCallback)(
|
|
3053
3246
|
(m, y) => {
|
|
3054
3247
|
if (!isControlled) {
|
|
3055
3248
|
setInternalMonth(m);
|
|
@@ -3059,36 +3252,36 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3059
3252
|
},
|
|
3060
3253
|
[isControlled, onVisibleMonthChange]
|
|
3061
3254
|
);
|
|
3062
|
-
const goPrev = (0,
|
|
3255
|
+
const goPrev = (0, import_react51.useCallback)(() => {
|
|
3063
3256
|
const m = month === 0 ? 11 : month - 1;
|
|
3064
3257
|
const y = month === 0 ? year - 1 : year;
|
|
3065
3258
|
setVisible(m, y);
|
|
3066
3259
|
}, [month, year, setVisible]);
|
|
3067
|
-
const goNext = (0,
|
|
3260
|
+
const goNext = (0, import_react51.useCallback)(() => {
|
|
3068
3261
|
const m = month === 11 ? 0 : month + 1;
|
|
3069
3262
|
const y = month === 11 ? year + 1 : year;
|
|
3070
3263
|
setVisible(m, y);
|
|
3071
3264
|
}, [month, year, setVisible]);
|
|
3072
3265
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
3073
3266
|
const firstDayOfMonth = new Date(year, month, 1).getDay();
|
|
3074
|
-
const [focusedDate, setFocusedDate] = (0,
|
|
3267
|
+
const [focusedDate, setFocusedDate] = (0, import_react51.useState)(() => {
|
|
3075
3268
|
if (selectedDate) return selectedDate;
|
|
3076
3269
|
return new Date(initialYear, initialMonth, 1);
|
|
3077
3270
|
});
|
|
3078
|
-
(0,
|
|
3271
|
+
(0, import_react51.useEffect)(() => {
|
|
3079
3272
|
if (selectedDate) setFocusedDate(selectedDate);
|
|
3080
3273
|
}, [selectedDate]);
|
|
3081
3274
|
const focusedInVisibleMonth = focusedDate.getMonth() === month && focusedDate.getFullYear() === year;
|
|
3082
3275
|
const effectiveFocusDay = focusedInVisibleMonth ? focusedDate.getDate() : clampDay(year, month, focusedDate.getDate());
|
|
3083
|
-
const dayRefs = (0,
|
|
3084
|
-
const shouldFocusRef = (0,
|
|
3085
|
-
(0,
|
|
3276
|
+
const dayRefs = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
|
|
3277
|
+
const shouldFocusRef = (0, import_react51.useRef)(false);
|
|
3278
|
+
(0, import_react51.useEffect)(() => {
|
|
3086
3279
|
if (!shouldFocusRef.current) return;
|
|
3087
3280
|
shouldFocusRef.current = false;
|
|
3088
3281
|
const node = dayRefs.current.get(effectiveFocusDay);
|
|
3089
3282
|
node?.focus();
|
|
3090
3283
|
}, [effectiveFocusDay, month, year]);
|
|
3091
|
-
const moveFocus = (0,
|
|
3284
|
+
const moveFocus = (0, import_react51.useCallback)(
|
|
3092
3285
|
(next) => {
|
|
3093
3286
|
setFocusedDate(next);
|
|
3094
3287
|
shouldFocusRef.current = true;
|
|
@@ -3100,7 +3293,7 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3100
3293
|
},
|
|
3101
3294
|
[month, year, setVisible]
|
|
3102
3295
|
);
|
|
3103
|
-
const onCellKeyDown = (0,
|
|
3296
|
+
const onCellKeyDown = (0, import_react51.useCallback)(
|
|
3104
3297
|
(e, day) => {
|
|
3105
3298
|
const current = new Date(year, month, day);
|
|
3106
3299
|
let next = null;
|
|
@@ -3152,7 +3345,7 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3152
3345
|
},
|
|
3153
3346
|
[month, year, moveFocus]
|
|
3154
3347
|
);
|
|
3155
|
-
return /* @__PURE__ */ (0,
|
|
3348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3156
3349
|
"div",
|
|
3157
3350
|
{
|
|
3158
3351
|
ref,
|
|
@@ -3164,14 +3357,14 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3164
3357
|
),
|
|
3165
3358
|
...props,
|
|
3166
3359
|
children: [
|
|
3167
|
-
/* @__PURE__ */ (0,
|
|
3168
|
-
/* @__PURE__ */ (0,
|
|
3360
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
|
|
3169
3362
|
MONTHS[month],
|
|
3170
3363
|
" ",
|
|
3171
3364
|
year
|
|
3172
3365
|
] }),
|
|
3173
|
-
/* @__PURE__ */ (0,
|
|
3174
|
-
/* @__PURE__ */ (0,
|
|
3366
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-1", children: [
|
|
3367
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3175
3368
|
IconButton,
|
|
3176
3369
|
{
|
|
3177
3370
|
size: "sm",
|
|
@@ -3181,11 +3374,11 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3181
3374
|
onClick: goPrev
|
|
3182
3375
|
}
|
|
3183
3376
|
),
|
|
3184
|
-
/* @__PURE__ */ (0,
|
|
3377
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
|
|
3185
3378
|
] })
|
|
3186
3379
|
] }),
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3188
|
-
/* @__PURE__ */ (0,
|
|
3380
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { role: "grid", "aria-label": `${MONTHS[month]} ${year}`, className: "flex flex-col gap-[2px]", children: [
|
|
3381
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: DAYS.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3189
3382
|
"div",
|
|
3190
3383
|
{
|
|
3191
3384
|
role: "columnheader",
|
|
@@ -3205,7 +3398,7 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3205
3398
|
const cellIndex = r * 7 + c;
|
|
3206
3399
|
const dayNum = cellIndex - firstDayOfMonth + 1;
|
|
3207
3400
|
if (dayNum < 1 || dayNum > daysInMonth) {
|
|
3208
|
-
cells.push(/* @__PURE__ */ (0,
|
|
3401
|
+
cells.push(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "gridcell", "aria-hidden": true }, `pad-${r}-${c}`));
|
|
3209
3402
|
continue;
|
|
3210
3403
|
}
|
|
3211
3404
|
const date = new Date(year, month, dayNum);
|
|
@@ -3215,7 +3408,7 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3215
3408
|
const isFocused = dayNum === effectiveFocusDay;
|
|
3216
3409
|
const day = dayNum;
|
|
3217
3410
|
cells.push(
|
|
3218
|
-
/* @__PURE__ */ (0,
|
|
3411
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3219
3412
|
"button",
|
|
3220
3413
|
{
|
|
3221
3414
|
ref: (node) => {
|
|
@@ -3246,7 +3439,7 @@ var Calendar = (0, import_react50.forwardRef)(function Calendar2({
|
|
|
3246
3439
|
);
|
|
3247
3440
|
}
|
|
3248
3441
|
rows.push(
|
|
3249
|
-
/* @__PURE__ */ (0,
|
|
3442
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
|
|
3250
3443
|
);
|
|
3251
3444
|
}
|
|
3252
3445
|
return rows;
|
|
@@ -3260,10 +3453,10 @@ Calendar.displayName = "Calendar";
|
|
|
3260
3453
|
|
|
3261
3454
|
// src/patterns/DatePicker/DatePicker.tsx
|
|
3262
3455
|
var RadixPopover2 = __toESM(require("@radix-ui/react-popover"), 1);
|
|
3263
|
-
var
|
|
3264
|
-
var
|
|
3456
|
+
var import_react52 = require("react");
|
|
3457
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3265
3458
|
var defaultFormat = (d) => d.toLocaleDateString();
|
|
3266
|
-
var DatePicker = (0,
|
|
3459
|
+
var DatePicker = (0, import_react52.forwardRef)(function DatePicker2({
|
|
3267
3460
|
value: valueProp,
|
|
3268
3461
|
defaultValue,
|
|
3269
3462
|
onValueChange,
|
|
@@ -3277,14 +3470,14 @@ var DatePicker = (0, import_react51.forwardRef)(function DatePicker2({
|
|
|
3277
3470
|
id,
|
|
3278
3471
|
name
|
|
3279
3472
|
}, ref) {
|
|
3280
|
-
const [open, setOpen] = (0,
|
|
3473
|
+
const [open, setOpen] = (0, import_react52.useState)(false);
|
|
3281
3474
|
const [value, setValue] = useControllableState({
|
|
3282
3475
|
value: valueProp,
|
|
3283
3476
|
defaultValue,
|
|
3284
3477
|
onChange: onValueChange
|
|
3285
3478
|
});
|
|
3286
|
-
return /* @__PURE__ */ (0,
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
|
|
3480
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
3288
3481
|
"button",
|
|
3289
3482
|
{
|
|
3290
3483
|
ref,
|
|
@@ -3301,18 +3494,18 @@ var DatePicker = (0, import_react51.forwardRef)(function DatePicker2({
|
|
|
3301
3494
|
),
|
|
3302
3495
|
style: { width },
|
|
3303
3496
|
children: [
|
|
3304
|
-
/* @__PURE__ */ (0,
|
|
3305
|
-
/* @__PURE__ */ (0,
|
|
3497
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
|
|
3306
3499
|
]
|
|
3307
3500
|
}
|
|
3308
3501
|
) }),
|
|
3309
|
-
/* @__PURE__ */ (0,
|
|
3502
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixPopover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3310
3503
|
RadixPopover2.Content,
|
|
3311
3504
|
{
|
|
3312
3505
|
align: "start",
|
|
3313
3506
|
sideOffset: 6,
|
|
3314
3507
|
className: "z-popover outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
|
|
3315
|
-
children: /* @__PURE__ */ (0,
|
|
3508
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3316
3509
|
Calendar,
|
|
3317
3510
|
{
|
|
3318
3511
|
value,
|
|
@@ -3327,17 +3520,17 @@ var DatePicker = (0, import_react51.forwardRef)(function DatePicker2({
|
|
|
3327
3520
|
)
|
|
3328
3521
|
}
|
|
3329
3522
|
) }),
|
|
3330
|
-
name && /* @__PURE__ */ (0,
|
|
3523
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
|
|
3331
3524
|
] });
|
|
3332
3525
|
});
|
|
3333
3526
|
DatePicker.displayName = "DatePicker";
|
|
3334
3527
|
|
|
3335
3528
|
// src/patterns/Dots/Dots.tsx
|
|
3336
|
-
var
|
|
3337
|
-
var
|
|
3338
|
-
var Dots = (0,
|
|
3529
|
+
var import_react53 = require("react");
|
|
3530
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3531
|
+
var Dots = (0, import_react53.forwardRef)(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
|
|
3339
3532
|
const interactive = typeof onChange === "function";
|
|
3340
|
-
return /* @__PURE__ */ (0,
|
|
3533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3341
3534
|
"nav",
|
|
3342
3535
|
{
|
|
3343
3536
|
ref,
|
|
@@ -3351,7 +3544,7 @@ var Dots = (0, import_react52.forwardRef)(function Dots2({ total, current, onCha
|
|
|
3351
3544
|
isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
|
|
3352
3545
|
);
|
|
3353
3546
|
if (interactive) {
|
|
3354
|
-
return /* @__PURE__ */ (0,
|
|
3547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3355
3548
|
"button",
|
|
3356
3549
|
{
|
|
3357
3550
|
type: "button",
|
|
@@ -3368,7 +3561,7 @@ var Dots = (0, import_react52.forwardRef)(function Dots2({ total, current, onCha
|
|
|
3368
3561
|
i
|
|
3369
3562
|
);
|
|
3370
3563
|
}
|
|
3371
|
-
return /* @__PURE__ */ (0,
|
|
3564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { "aria-hidden": true, className: sharedClass }, i);
|
|
3372
3565
|
})
|
|
3373
3566
|
}
|
|
3374
3567
|
);
|
|
@@ -3376,13 +3569,13 @@ var Dots = (0, import_react52.forwardRef)(function Dots2({ total, current, onCha
|
|
|
3376
3569
|
Dots.displayName = "Dots";
|
|
3377
3570
|
|
|
3378
3571
|
// src/patterns/Dropzone/Dropzone.tsx
|
|
3379
|
-
var
|
|
3380
|
-
var
|
|
3572
|
+
var import_react54 = require("react");
|
|
3573
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
3381
3574
|
function listToArray(list) {
|
|
3382
3575
|
if (!list) return [];
|
|
3383
3576
|
return Array.from(list);
|
|
3384
3577
|
}
|
|
3385
|
-
var Dropzone = (0,
|
|
3578
|
+
var Dropzone = (0, import_react54.forwardRef)(function Dropzone2({
|
|
3386
3579
|
onFiles,
|
|
3387
3580
|
accept,
|
|
3388
3581
|
multiple = true,
|
|
@@ -3393,7 +3586,7 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3393
3586
|
className,
|
|
3394
3587
|
...props
|
|
3395
3588
|
}, ref) {
|
|
3396
|
-
const [isDragging, setIsDragging] = (0,
|
|
3589
|
+
const [isDragging, setIsDragging] = (0, import_react54.useState)(false);
|
|
3397
3590
|
const onDragOver = (e) => {
|
|
3398
3591
|
if (disabled) return;
|
|
3399
3592
|
e.preventDefault();
|
|
@@ -3407,7 +3600,7 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3407
3600
|
const files = listToArray(e.dataTransfer.files);
|
|
3408
3601
|
if (files.length) onFiles?.(files);
|
|
3409
3602
|
};
|
|
3410
|
-
return /* @__PURE__ */ (0,
|
|
3603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
3411
3604
|
"label",
|
|
3412
3605
|
{
|
|
3413
3606
|
ref,
|
|
@@ -3424,7 +3617,7 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3424
3617
|
),
|
|
3425
3618
|
...props,
|
|
3426
3619
|
children: [
|
|
3427
|
-
/* @__PURE__ */ (0,
|
|
3620
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3428
3621
|
"input",
|
|
3429
3622
|
{
|
|
3430
3623
|
type: "file",
|
|
@@ -3440,7 +3633,7 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3440
3633
|
}
|
|
3441
3634
|
}
|
|
3442
3635
|
),
|
|
3443
|
-
/* @__PURE__ */ (0,
|
|
3636
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3444
3637
|
"div",
|
|
3445
3638
|
{
|
|
3446
3639
|
"aria-hidden": true,
|
|
@@ -3448,8 +3641,8 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3448
3641
|
children: icon
|
|
3449
3642
|
}
|
|
3450
3643
|
),
|
|
3451
|
-
/* @__PURE__ */ (0,
|
|
3452
|
-
description && /* @__PURE__ */ (0,
|
|
3644
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mb-1 text-[13px] font-medium", children: title }),
|
|
3645
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-text-dim text-[11px]", children: description })
|
|
3453
3646
|
]
|
|
3454
3647
|
}
|
|
3455
3648
|
);
|
|
@@ -3457,10 +3650,10 @@ var Dropzone = (0, import_react53.forwardRef)(function Dropzone2({
|
|
|
3457
3650
|
Dropzone.displayName = "Dropzone";
|
|
3458
3651
|
|
|
3459
3652
|
// src/patterns/EmptyState/EmptyState.tsx
|
|
3460
|
-
var
|
|
3461
|
-
var
|
|
3462
|
-
var
|
|
3463
|
-
var plateStyles = (0,
|
|
3653
|
+
var import_class_variance_authority11 = require("class-variance-authority");
|
|
3654
|
+
var import_react55 = require("react");
|
|
3655
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
3656
|
+
var plateStyles = (0, import_class_variance_authority11.cva)("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
|
|
3464
3657
|
variants: {
|
|
3465
3658
|
tone: {
|
|
3466
3659
|
neutral: "bg-panel-2 text-text-muted",
|
|
@@ -3472,8 +3665,8 @@ var plateStyles = (0, import_class_variance_authority10.cva)("grid h-12 w-12 pla
|
|
|
3472
3665
|
},
|
|
3473
3666
|
defaultVariants: { tone: "neutral" }
|
|
3474
3667
|
});
|
|
3475
|
-
var EmptyState = (0,
|
|
3476
|
-
return /* @__PURE__ */ (0,
|
|
3668
|
+
var EmptyState = (0, import_react55.forwardRef)(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
|
|
3669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
3477
3670
|
"div",
|
|
3478
3671
|
{
|
|
3479
3672
|
ref,
|
|
@@ -3483,10 +3676,10 @@ var EmptyState = (0, import_react54.forwardRef)(function EmptyState2({ icon, tit
|
|
|
3483
3676
|
),
|
|
3484
3677
|
...props,
|
|
3485
3678
|
children: [
|
|
3486
|
-
icon != null && /* @__PURE__ */ (0,
|
|
3487
|
-
/* @__PURE__ */ (0,
|
|
3488
|
-
description && /* @__PURE__ */ (0,
|
|
3489
|
-
chips && chips.length > 0 && /* @__PURE__ */ (0,
|
|
3679
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
|
|
3680
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-[14px] font-medium", children: title }),
|
|
3681
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
|
|
3682
|
+
chips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
3490
3683
|
"button",
|
|
3491
3684
|
{
|
|
3492
3685
|
type: "button",
|
|
@@ -3508,18 +3701,18 @@ var EmptyState = (0, import_react54.forwardRef)(function EmptyState2({ icon, tit
|
|
|
3508
3701
|
EmptyState.displayName = "EmptyState";
|
|
3509
3702
|
|
|
3510
3703
|
// src/patterns/FileChip/FileChip.tsx
|
|
3511
|
-
var
|
|
3512
|
-
var
|
|
3704
|
+
var import_react56 = require("react");
|
|
3705
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
3513
3706
|
function deriveExt(name) {
|
|
3514
3707
|
const dot = name.lastIndexOf(".");
|
|
3515
3708
|
if (dot < 0) return "FILE";
|
|
3516
3709
|
return name.slice(dot + 1).slice(0, 4).toUpperCase();
|
|
3517
3710
|
}
|
|
3518
|
-
var FileChip = (0,
|
|
3711
|
+
var FileChip = (0, import_react56.forwardRef)(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
|
|
3519
3712
|
const ext = deriveExt(name);
|
|
3520
3713
|
const showProgress = typeof progress === "number";
|
|
3521
3714
|
const isComplete = showProgress && progress >= 100;
|
|
3522
|
-
return /* @__PURE__ */ (0,
|
|
3715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
3523
3716
|
"div",
|
|
3524
3717
|
{
|
|
3525
3718
|
ref,
|
|
@@ -3529,7 +3722,7 @@ var FileChip = (0, import_react55.forwardRef)(function FileChip2({ name, size, p
|
|
|
3529
3722
|
),
|
|
3530
3723
|
...props,
|
|
3531
3724
|
children: [
|
|
3532
|
-
/* @__PURE__ */ (0,
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
3533
3726
|
"span",
|
|
3534
3727
|
{
|
|
3535
3728
|
"aria-hidden": true,
|
|
@@ -3537,17 +3730,17 @@ var FileChip = (0, import_react55.forwardRef)(function FileChip2({ name, size, p
|
|
|
3537
3730
|
children: icon ?? ext
|
|
3538
3731
|
}
|
|
3539
3732
|
),
|
|
3540
|
-
/* @__PURE__ */ (0,
|
|
3541
|
-
/* @__PURE__ */ (0,
|
|
3542
|
-
/* @__PURE__ */ (0,
|
|
3733
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
3734
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "truncate text-[12px] font-medium", children: name }),
|
|
3735
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
|
|
3543
3736
|
size,
|
|
3544
|
-
showProgress && !isComplete && /* @__PURE__ */ (0,
|
|
3737
|
+
showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { children: [
|
|
3545
3738
|
" \xB7 ",
|
|
3546
3739
|
Math.round(progress),
|
|
3547
3740
|
"%"
|
|
3548
3741
|
] })
|
|
3549
3742
|
] }),
|
|
3550
|
-
showProgress && !isComplete && /* @__PURE__ */ (0,
|
|
3743
|
+
showProgress && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
3551
3744
|
"div",
|
|
3552
3745
|
{
|
|
3553
3746
|
className: cn(
|
|
@@ -3558,7 +3751,7 @@ var FileChip = (0, import_react55.forwardRef)(function FileChip2({ name, size, p
|
|
|
3558
3751
|
}
|
|
3559
3752
|
) })
|
|
3560
3753
|
] }),
|
|
3561
|
-
onRemove && /* @__PURE__ */ (0,
|
|
3754
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
3562
3755
|
"button",
|
|
3563
3756
|
{
|
|
3564
3757
|
type: "button",
|
|
@@ -3578,10 +3771,10 @@ var FileChip = (0, import_react55.forwardRef)(function FileChip2({ name, size, p
|
|
|
3578
3771
|
FileChip.displayName = "FileChip";
|
|
3579
3772
|
|
|
3580
3773
|
// src/patterns/FilterPanel/FilterPanel.tsx
|
|
3581
|
-
var
|
|
3582
|
-
var
|
|
3774
|
+
var import_react57 = require("react");
|
|
3775
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
3583
3776
|
var EMPTY = Object.freeze({});
|
|
3584
|
-
var FilterPanel = (0,
|
|
3777
|
+
var FilterPanel = (0, import_react57.forwardRef)(function FilterPanel2({
|
|
3585
3778
|
facets,
|
|
3586
3779
|
value,
|
|
3587
3780
|
defaultValue,
|
|
@@ -3599,7 +3792,7 @@ var FilterPanel = (0, import_react56.forwardRef)(function FilterPanel2({
|
|
|
3599
3792
|
onChange: onValueChange
|
|
3600
3793
|
});
|
|
3601
3794
|
const total = facets.reduce((sum, facet) => sum + (selection[facet.id]?.length ?? 0), 0);
|
|
3602
|
-
const toggle = (0,
|
|
3795
|
+
const toggle = (0, import_react57.useCallback)(
|
|
3603
3796
|
(facetId, optionValue, next) => {
|
|
3604
3797
|
setSelection((prev) => {
|
|
3605
3798
|
const current = prev?.[facetId] ?? [];
|
|
@@ -3610,11 +3803,11 @@ var FilterPanel = (0, import_react56.forwardRef)(function FilterPanel2({
|
|
|
3610
3803
|
},
|
|
3611
3804
|
[setSelection]
|
|
3612
3805
|
);
|
|
3613
|
-
const handleReset = (0,
|
|
3806
|
+
const handleReset = (0, import_react57.useCallback)(() => {
|
|
3614
3807
|
setSelection(EMPTY);
|
|
3615
3808
|
onReset?.();
|
|
3616
3809
|
}, [setSelection, onReset]);
|
|
3617
|
-
return /* @__PURE__ */ (0,
|
|
3810
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
3618
3811
|
"div",
|
|
3619
3812
|
{
|
|
3620
3813
|
ref,
|
|
@@ -3626,10 +3819,10 @@ var FilterPanel = (0, import_react56.forwardRef)(function FilterPanel2({
|
|
|
3626
3819
|
),
|
|
3627
3820
|
...props,
|
|
3628
3821
|
children: [
|
|
3629
|
-
/* @__PURE__ */ (0,
|
|
3630
|
-
/* @__PURE__ */ (0,
|
|
3631
|
-
total > 0 && /* @__PURE__ */ (0,
|
|
3632
|
-
/* @__PURE__ */ (0,
|
|
3822
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3823
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-text-dim font-mono text-[10px] tracking-[1.4px] uppercase", children: title }),
|
|
3824
|
+
total > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge, { size: "sm", variant: "accent", children: total }),
|
|
3825
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
3633
3826
|
Button,
|
|
3634
3827
|
{
|
|
3635
3828
|
type: "button",
|
|
@@ -3642,7 +3835,7 @@ var FilterPanel = (0, import_react56.forwardRef)(function FilterPanel2({
|
|
|
3642
3835
|
}
|
|
3643
3836
|
)
|
|
3644
3837
|
] }),
|
|
3645
|
-
facets.map((facet) => /* @__PURE__ */ (0,
|
|
3838
|
+
facets.map((facet) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
3646
3839
|
FilterFacetGroup,
|
|
3647
3840
|
{
|
|
3648
3841
|
facet,
|
|
@@ -3659,12 +3852,12 @@ var FilterPanel = (0, import_react56.forwardRef)(function FilterPanel2({
|
|
|
3659
3852
|
FilterPanel.displayName = "FilterPanel";
|
|
3660
3853
|
function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
3661
3854
|
const collapsible = facet.collapsible ?? true;
|
|
3662
|
-
const [open, setOpen] = (0,
|
|
3855
|
+
const [open, setOpen] = (0, import_react57.useState)(facet.defaultOpen ?? true);
|
|
3663
3856
|
const isOpen = !collapsible || open;
|
|
3664
3857
|
const selectedCount = selected.length;
|
|
3665
3858
|
const headingClass = "text-text-muted flex items-center gap-[6px] font-mono text-[10px] tracking-[1.4px] uppercase";
|
|
3666
|
-
return /* @__PURE__ */ (0,
|
|
3667
|
-
collapsible ? /* @__PURE__ */ (0,
|
|
3859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("section", { className: "flex flex-col gap-1", children: [
|
|
3860
|
+
collapsible ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
3668
3861
|
"button",
|
|
3669
3862
|
{
|
|
3670
3863
|
type: "button",
|
|
@@ -3677,20 +3870,20 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
|
3677
3870
|
"hover:text-text"
|
|
3678
3871
|
),
|
|
3679
3872
|
children: [
|
|
3680
|
-
/* @__PURE__ */ (0,
|
|
3681
|
-
selectedCount > 0 && /* @__PURE__ */ (0,
|
|
3682
|
-
/* @__PURE__ */ (0,
|
|
3873
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-left", children: facet.label }),
|
|
3874
|
+
selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount }),
|
|
3875
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
|
|
3683
3876
|
]
|
|
3684
3877
|
}
|
|
3685
|
-
) : /* @__PURE__ */ (0,
|
|
3686
|
-
/* @__PURE__ */ (0,
|
|
3687
|
-
selectedCount > 0 && /* @__PURE__ */ (0,
|
|
3878
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn(headingClass, "px-1 py-[2px]"), children: [
|
|
3879
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1", children: facet.label }),
|
|
3880
|
+
selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge, { size: "sm", variant: "neutral", children: selectedCount })
|
|
3688
3881
|
] }),
|
|
3689
|
-
isOpen && /* @__PURE__ */ (0,
|
|
3882
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: "m-0 flex list-none flex-col gap-[2px] p-0", children: facet.options.map((option) => {
|
|
3690
3883
|
const isSelected = selected.includes(option.value);
|
|
3691
3884
|
const count = counts?.[option.value];
|
|
3692
|
-
return /* @__PURE__ */ (0,
|
|
3693
|
-
/* @__PURE__ */ (0,
|
|
3885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: "flex items-center gap-2 px-1 py-[3px]", children: [
|
|
3886
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
3694
3887
|
Checkbox,
|
|
3695
3888
|
{
|
|
3696
3889
|
checked: isSelected,
|
|
@@ -3698,25 +3891,25 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
|
3698
3891
|
label: option.label
|
|
3699
3892
|
}
|
|
3700
3893
|
),
|
|
3701
|
-
typeof count === "number" && /* @__PURE__ */ (0,
|
|
3894
|
+
typeof count === "number" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[10px] tabular-nums", children: count })
|
|
3702
3895
|
] }, option.value);
|
|
3703
3896
|
}) })
|
|
3704
3897
|
] });
|
|
3705
3898
|
}
|
|
3706
3899
|
|
|
3707
3900
|
// src/patterns/HealthScore/HealthScore.tsx
|
|
3708
|
-
var
|
|
3901
|
+
var import_react59 = require("react");
|
|
3709
3902
|
|
|
3710
3903
|
// src/patterns/RadialProgress/RadialProgress.tsx
|
|
3711
|
-
var
|
|
3712
|
-
var
|
|
3904
|
+
var import_react58 = require("react");
|
|
3905
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
3713
3906
|
var toneStrokeClass = {
|
|
3714
3907
|
accent: "stroke-accent",
|
|
3715
3908
|
ok: "stroke-ok",
|
|
3716
3909
|
warn: "stroke-warn",
|
|
3717
3910
|
err: "stroke-err"
|
|
3718
3911
|
};
|
|
3719
|
-
var RadialProgress = (0,
|
|
3912
|
+
var RadialProgress = (0, import_react58.forwardRef)(
|
|
3720
3913
|
function RadialProgress2({
|
|
3721
3914
|
value,
|
|
3722
3915
|
max = 100,
|
|
@@ -3734,7 +3927,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
|
|
|
3734
3927
|
const c = 2 * Math.PI * r;
|
|
3735
3928
|
const dash = pct / 100 * c;
|
|
3736
3929
|
const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
|
|
3737
|
-
return /* @__PURE__ */ (0,
|
|
3930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
3738
3931
|
"div",
|
|
3739
3932
|
{
|
|
3740
3933
|
ref,
|
|
@@ -3747,8 +3940,8 @@ var RadialProgress = (0, import_react57.forwardRef)(
|
|
|
3747
3940
|
style: { width: size, height: size },
|
|
3748
3941
|
...props,
|
|
3749
3942
|
children: [
|
|
3750
|
-
/* @__PURE__ */ (0,
|
|
3751
|
-
/* @__PURE__ */ (0,
|
|
3943
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
|
|
3944
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3752
3945
|
"circle",
|
|
3753
3946
|
{
|
|
3754
3947
|
cx: size / 2,
|
|
@@ -3759,7 +3952,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
|
|
|
3759
3952
|
className: "stroke-panel-2"
|
|
3760
3953
|
}
|
|
3761
3954
|
),
|
|
3762
|
-
/* @__PURE__ */ (0,
|
|
3955
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3763
3956
|
"circle",
|
|
3764
3957
|
{
|
|
3765
3958
|
cx: size / 2,
|
|
@@ -3777,7 +3970,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
|
|
|
3777
3970
|
}
|
|
3778
3971
|
)
|
|
3779
3972
|
] }),
|
|
3780
|
-
/* @__PURE__ */ (0,
|
|
3973
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
|
|
3781
3974
|
]
|
|
3782
3975
|
}
|
|
3783
3976
|
);
|
|
@@ -3786,7 +3979,7 @@ var RadialProgress = (0, import_react57.forwardRef)(
|
|
|
3786
3979
|
RadialProgress.displayName = "RadialProgress";
|
|
3787
3980
|
|
|
3788
3981
|
// src/patterns/HealthScore/HealthScore.tsx
|
|
3789
|
-
var
|
|
3982
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3790
3983
|
function deltaTone(delta) {
|
|
3791
3984
|
if (delta > 0) return "ok";
|
|
3792
3985
|
if (delta < 0) return "err";
|
|
@@ -3803,7 +3996,7 @@ var toneTextClass = {
|
|
|
3803
3996
|
warn: "text-warn",
|
|
3804
3997
|
err: "text-err"
|
|
3805
3998
|
};
|
|
3806
|
-
var HealthScore = (0,
|
|
3999
|
+
var HealthScore = (0, import_react59.forwardRef)(function HealthScore2({
|
|
3807
4000
|
value,
|
|
3808
4001
|
max = 100,
|
|
3809
4002
|
delta,
|
|
@@ -3818,7 +4011,7 @@ var HealthScore = (0, import_react58.forwardRef)(function HealthScore2({
|
|
|
3818
4011
|
const pct = max > 0 ? Math.round(Math.min(max, Math.max(0, value)) / max * 100) : 0;
|
|
3819
4012
|
const resolvedTone = tone ?? (pct >= 80 ? "ok" : pct >= 50 ? "accent" : "warn");
|
|
3820
4013
|
const indicatorTone = typeof delta === "number" ? deltaTone(delta) : "accent";
|
|
3821
|
-
const core = /* @__PURE__ */ (0,
|
|
4014
|
+
const core = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
3822
4015
|
"div",
|
|
3823
4016
|
{
|
|
3824
4017
|
ref,
|
|
@@ -3826,10 +4019,10 @@ var HealthScore = (0, import_react58.forwardRef)(function HealthScore2({
|
|
|
3826
4019
|
"aria-label": ariaLabel ?? `${pct}% health`,
|
|
3827
4020
|
...props,
|
|
3828
4021
|
children: [
|
|
3829
|
-
/* @__PURE__ */ (0,
|
|
3830
|
-
label && /* @__PURE__ */ (0,
|
|
3831
|
-
typeof delta === "number" && /* @__PURE__ */ (0,
|
|
3832
|
-
/* @__PURE__ */ (0,
|
|
4022
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RadialProgress, { value, max, size, tone: resolvedTone }),
|
|
4023
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-text-muted mt-1 text-[12px] leading-tight", children: label }),
|
|
4024
|
+
typeof delta === "number" && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("font-mono text-[11px] tabular-nums", toneTextClass[indicatorTone]), children: [
|
|
4025
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-hidden": true, children: deltaGlyph(delta) }),
|
|
3833
4026
|
" ",
|
|
3834
4027
|
Math.abs(delta)
|
|
3835
4028
|
] })
|
|
@@ -3839,15 +4032,15 @@ var HealthScore = (0, import_react58.forwardRef)(function HealthScore2({
|
|
|
3839
4032
|
if (!breakdown || breakdown.length === 0) {
|
|
3840
4033
|
return core;
|
|
3841
4034
|
}
|
|
3842
|
-
return /* @__PURE__ */ (0,
|
|
4035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3843
4036
|
HoverCard,
|
|
3844
4037
|
{
|
|
3845
|
-
trigger: /* @__PURE__ */ (0,
|
|
3846
|
-
content: /* @__PURE__ */ (0,
|
|
3847
|
-
/* @__PURE__ */ (0,
|
|
3848
|
-
/* @__PURE__ */ (0,
|
|
3849
|
-
/* @__PURE__ */ (0,
|
|
3850
|
-
/* @__PURE__ */ (0,
|
|
4038
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "inline-flex", children: core }),
|
|
4039
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex min-w-[180px] flex-col gap-2", children: [
|
|
4040
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: "Breakdown" }),
|
|
4041
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-[12px]", children: breakdown.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("li", { className: "flex items-center gap-2", children: [
|
|
4042
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-text-muted flex-1 truncate", children: entry.label }),
|
|
4043
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3851
4044
|
"span",
|
|
3852
4045
|
{
|
|
3853
4046
|
className: cn(
|
|
@@ -3865,21 +4058,21 @@ var HealthScore = (0, import_react58.forwardRef)(function HealthScore2({
|
|
|
3865
4058
|
HealthScore.displayName = "HealthScore";
|
|
3866
4059
|
|
|
3867
4060
|
// src/patterns/LargeTitle/LargeTitle.tsx
|
|
3868
|
-
var
|
|
3869
|
-
var
|
|
3870
|
-
var LargeTitle = (0,
|
|
3871
|
-
return /* @__PURE__ */ (0,
|
|
4061
|
+
var import_react60 = require("react");
|
|
4062
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
4063
|
+
var LargeTitle = (0, import_react60.forwardRef)(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
|
|
4064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
|
|
3872
4065
|
"header",
|
|
3873
4066
|
{
|
|
3874
4067
|
ref,
|
|
3875
4068
|
className: cn("px-screen flex items-end justify-between gap-3 py-3 pb-4", className),
|
|
3876
4069
|
...props,
|
|
3877
4070
|
children: [
|
|
3878
|
-
/* @__PURE__ */ (0,
|
|
3879
|
-
eyebrow && /* @__PURE__ */ (0,
|
|
3880
|
-
/* @__PURE__ */ (0,
|
|
4071
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
4072
|
+
eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
|
|
4073
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
|
|
3881
4074
|
] }),
|
|
3882
|
-
trailing && /* @__PURE__ */ (0,
|
|
4075
|
+
trailing && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "shrink-0", children: trailing })
|
|
3883
4076
|
]
|
|
3884
4077
|
}
|
|
3885
4078
|
);
|
|
@@ -3888,10 +4081,10 @@ LargeTitle.displayName = "LargeTitle";
|
|
|
3888
4081
|
|
|
3889
4082
|
// src/patterns/Menubar/Menubar.tsx
|
|
3890
4083
|
var RadixMenubar = __toESM(require("@radix-ui/react-menubar"), 1);
|
|
3891
|
-
var
|
|
3892
|
-
var
|
|
3893
|
-
var Menubar = (0,
|
|
3894
|
-
return /* @__PURE__ */ (0,
|
|
4084
|
+
var import_react61 = require("react");
|
|
4085
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
4086
|
+
var Menubar = (0, import_react61.forwardRef)(function Menubar2({ className, ...props }, ref) {
|
|
4087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3895
4088
|
RadixMenubar.Root,
|
|
3896
4089
|
{
|
|
3897
4090
|
ref,
|
|
@@ -3905,9 +4098,9 @@ var Menubar = (0, import_react60.forwardRef)(function Menubar2({ className, ...p
|
|
|
3905
4098
|
});
|
|
3906
4099
|
Menubar.displayName = "Menubar";
|
|
3907
4100
|
var MenubarMenu = RadixMenubar.Menu;
|
|
3908
|
-
var MenubarTrigger = (0,
|
|
4101
|
+
var MenubarTrigger = (0, import_react61.forwardRef)(
|
|
3909
4102
|
function MenubarTrigger2({ className, ...props }, ref) {
|
|
3910
|
-
return /* @__PURE__ */ (0,
|
|
4103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3911
4104
|
RadixMenubar.Trigger,
|
|
3912
4105
|
{
|
|
3913
4106
|
ref,
|
|
@@ -3924,9 +4117,9 @@ var MenubarTrigger = (0, import_react60.forwardRef)(
|
|
|
3924
4117
|
}
|
|
3925
4118
|
);
|
|
3926
4119
|
MenubarTrigger.displayName = "MenubarTrigger";
|
|
3927
|
-
var MenubarContent = (0,
|
|
4120
|
+
var MenubarContent = (0, import_react61.forwardRef)(
|
|
3928
4121
|
function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
|
|
3929
|
-
return /* @__PURE__ */ (0,
|
|
4122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RadixMenubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3930
4123
|
RadixMenubar.Content,
|
|
3931
4124
|
{
|
|
3932
4125
|
ref,
|
|
@@ -3948,24 +4141,24 @@ var itemBase3 = cn(
|
|
|
3948
4141
|
"data-[highlighted]:bg-panel-2",
|
|
3949
4142
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
3950
4143
|
);
|
|
3951
|
-
var MenubarItem = (0,
|
|
3952
|
-
return /* @__PURE__ */ (0,
|
|
4144
|
+
var MenubarItem = (0, import_react61.forwardRef)(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
|
|
4145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
3953
4146
|
RadixMenubar.Item,
|
|
3954
4147
|
{
|
|
3955
4148
|
ref,
|
|
3956
4149
|
className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
|
|
3957
4150
|
...props,
|
|
3958
4151
|
children: [
|
|
3959
|
-
/* @__PURE__ */ (0,
|
|
3960
|
-
trailing && /* @__PURE__ */ (0,
|
|
4152
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1", children }),
|
|
4153
|
+
trailing && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
3961
4154
|
]
|
|
3962
4155
|
}
|
|
3963
4156
|
);
|
|
3964
4157
|
});
|
|
3965
4158
|
MenubarItem.displayName = "MenubarItem";
|
|
3966
|
-
var MenubarSeparator = (0,
|
|
4159
|
+
var MenubarSeparator = (0, import_react61.forwardRef)(
|
|
3967
4160
|
function MenubarSeparator2({ className, ...props }, ref) {
|
|
3968
|
-
return /* @__PURE__ */ (0,
|
|
4161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3969
4162
|
RadixMenubar.Separator,
|
|
3970
4163
|
{
|
|
3971
4164
|
ref,
|
|
@@ -3979,13 +4172,13 @@ MenubarSeparator.displayName = "MenubarSeparator";
|
|
|
3979
4172
|
|
|
3980
4173
|
// src/patterns/NavBar/NavBar.tsx
|
|
3981
4174
|
var RadixNav = __toESM(require("@radix-ui/react-navigation-menu"), 1);
|
|
3982
|
-
var
|
|
4175
|
+
var import_react63 = require("react");
|
|
3983
4176
|
|
|
3984
4177
|
// src/patterns/Sidebar/Sidebar.tsx
|
|
3985
|
-
var
|
|
3986
|
-
var
|
|
3987
|
-
var Sidebar = (0,
|
|
3988
|
-
return /* @__PURE__ */ (0,
|
|
4178
|
+
var import_react62 = require("react");
|
|
4179
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
4180
|
+
var Sidebar = (0, import_react62.forwardRef)(function Sidebar2({ width = 240, className, style, ...props }, ref) {
|
|
4181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3989
4182
|
"aside",
|
|
3990
4183
|
{
|
|
3991
4184
|
ref,
|
|
@@ -3999,12 +4192,12 @@ var Sidebar = (0, import_react61.forwardRef)(function Sidebar2({ width = 240, cl
|
|
|
3999
4192
|
);
|
|
4000
4193
|
});
|
|
4001
4194
|
Sidebar.displayName = "Sidebar";
|
|
4002
|
-
var NavItem = (0,
|
|
4195
|
+
var NavItem = (0, import_react62.forwardRef)(
|
|
4003
4196
|
function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
|
|
4004
|
-
const inner = /* @__PURE__ */ (0,
|
|
4005
|
-
icon && /* @__PURE__ */ (0,
|
|
4006
|
-
/* @__PURE__ */ (0,
|
|
4007
|
-
badge != null && /* @__PURE__ */ (0,
|
|
4197
|
+
const inner = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
|
|
4198
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
|
|
4199
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-1 truncate", children: label }),
|
|
4200
|
+
badge != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4008
4201
|
"span",
|
|
4009
4202
|
{
|
|
4010
4203
|
className: cn(
|
|
@@ -4025,7 +4218,7 @@ var NavItem = (0, import_react61.forwardRef)(
|
|
|
4025
4218
|
);
|
|
4026
4219
|
if (href) {
|
|
4027
4220
|
const anchorProps = props;
|
|
4028
|
-
return /* @__PURE__ */ (0,
|
|
4221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4029
4222
|
"a",
|
|
4030
4223
|
{
|
|
4031
4224
|
ref,
|
|
@@ -4039,7 +4232,7 @@ var NavItem = (0, import_react61.forwardRef)(
|
|
|
4039
4232
|
);
|
|
4040
4233
|
}
|
|
4041
4234
|
const buttonProps = props;
|
|
4042
|
-
return /* @__PURE__ */ (0,
|
|
4235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4043
4236
|
"button",
|
|
4044
4237
|
{
|
|
4045
4238
|
ref,
|
|
@@ -4054,7 +4247,7 @@ var NavItem = (0, import_react61.forwardRef)(
|
|
|
4054
4247
|
}
|
|
4055
4248
|
);
|
|
4056
4249
|
NavItem.displayName = "NavItem";
|
|
4057
|
-
var NavSection = (0,
|
|
4250
|
+
var NavSection = (0, import_react62.forwardRef)(function NavSection2({
|
|
4058
4251
|
label,
|
|
4059
4252
|
icon,
|
|
4060
4253
|
action,
|
|
@@ -4068,16 +4261,16 @@ var NavSection = (0, import_react61.forwardRef)(function NavSection2({
|
|
|
4068
4261
|
...props
|
|
4069
4262
|
}, ref) {
|
|
4070
4263
|
const isControlled = open !== void 0;
|
|
4071
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
4264
|
+
const [internalOpen, setInternalOpen] = (0, import_react62.useState)(defaultOpen);
|
|
4072
4265
|
const isOpen = !collapsible || (isControlled ? open : internalOpen);
|
|
4073
|
-
const toggle = (0,
|
|
4266
|
+
const toggle = (0, import_react62.useCallback)(() => {
|
|
4074
4267
|
const next = !isOpen;
|
|
4075
4268
|
if (!isControlled) setInternalOpen(next);
|
|
4076
4269
|
onOpenChange?.(next);
|
|
4077
4270
|
}, [isOpen, isControlled, onOpenChange]);
|
|
4078
4271
|
const eyebrowClass = "text-text-dim flex items-center gap-[6px] px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase";
|
|
4079
|
-
return /* @__PURE__ */ (0,
|
|
4080
|
-
collapsible ? /* @__PURE__ */ (0,
|
|
4272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
|
|
4273
|
+
collapsible ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
4081
4274
|
"button",
|
|
4082
4275
|
{
|
|
4083
4276
|
type: "button",
|
|
@@ -4090,18 +4283,18 @@ var NavSection = (0, import_react61.forwardRef)(function NavSection2({
|
|
|
4090
4283
|
"hover:text-text-muted"
|
|
4091
4284
|
),
|
|
4092
4285
|
children: [
|
|
4093
|
-
icon != null && /* @__PURE__ */ (0,
|
|
4094
|
-
/* @__PURE__ */ (0,
|
|
4286
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
|
|
4287
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-1 text-left", children: label }),
|
|
4095
4288
|
action,
|
|
4096
|
-
/* @__PURE__ */ (0,
|
|
4289
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
|
|
4097
4290
|
]
|
|
4098
4291
|
}
|
|
4099
|
-
) : /* @__PURE__ */ (0,
|
|
4100
|
-
icon != null && /* @__PURE__ */ (0,
|
|
4101
|
-
/* @__PURE__ */ (0,
|
|
4292
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: eyebrowClass, children: [
|
|
4293
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
|
|
4294
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex-1", children: label }),
|
|
4102
4295
|
action
|
|
4103
4296
|
] }),
|
|
4104
|
-
isOpen && /* @__PURE__ */ (0,
|
|
4297
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
4105
4298
|
"div",
|
|
4106
4299
|
{
|
|
4107
4300
|
className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
|
|
@@ -4114,12 +4307,12 @@ var NavSection = (0, import_react61.forwardRef)(function NavSection2({
|
|
|
4114
4307
|
NavSection.displayName = "NavSection";
|
|
4115
4308
|
|
|
4116
4309
|
// src/patterns/NavBar/NavBar.tsx
|
|
4117
|
-
var
|
|
4310
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
4118
4311
|
function isActiveTree(item, activeId) {
|
|
4119
4312
|
if (item.id === activeId) return true;
|
|
4120
4313
|
return item.children?.some((c) => isActiveTree(c, activeId)) ?? false;
|
|
4121
4314
|
}
|
|
4122
|
-
var NavBar = (0,
|
|
4315
|
+
var NavBar = (0, import_react63.forwardRef)(function NavBar2({
|
|
4123
4316
|
orientation = "horizontal",
|
|
4124
4317
|
items,
|
|
4125
4318
|
brand,
|
|
@@ -4133,17 +4326,17 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4133
4326
|
...props
|
|
4134
4327
|
}, ref) {
|
|
4135
4328
|
const isControlled = value !== void 0;
|
|
4136
|
-
const [internalValue, setInternalValue] = (0,
|
|
4329
|
+
const [internalValue, setInternalValue] = (0, import_react63.useState)(defaultValue);
|
|
4137
4330
|
const activeId = isControlled ? value : internalValue;
|
|
4138
|
-
const [drawerOpen, setDrawerOpen] = (0,
|
|
4139
|
-
const select = (0,
|
|
4331
|
+
const [drawerOpen, setDrawerOpen] = (0, import_react63.useState)(false);
|
|
4332
|
+
const select = (0, import_react63.useCallback)(
|
|
4140
4333
|
(id) => {
|
|
4141
4334
|
if (!isControlled) setInternalValue(id);
|
|
4142
4335
|
onValueChange?.(id);
|
|
4143
4336
|
},
|
|
4144
4337
|
[isControlled, onValueChange]
|
|
4145
4338
|
);
|
|
4146
|
-
const handleItemActivate = (0,
|
|
4339
|
+
const handleItemActivate = (0, import_react63.useCallback)(
|
|
4147
4340
|
(id) => {
|
|
4148
4341
|
select(id);
|
|
4149
4342
|
setDrawerOpen(false);
|
|
@@ -4155,7 +4348,7 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4155
4348
|
// drawer is open on a viewport that's resizing past `md`, both navs can
|
|
4156
4349
|
// sit in the DOM together. Identical accessible names would trip axe's
|
|
4157
4350
|
// `landmark-unique` rule.
|
|
4158
|
-
/* @__PURE__ */ (0,
|
|
4351
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4159
4352
|
VerticalItem,
|
|
4160
4353
|
{
|
|
4161
4354
|
item,
|
|
@@ -4165,14 +4358,14 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4165
4358
|
item.id
|
|
4166
4359
|
)) })
|
|
4167
4360
|
);
|
|
4168
|
-
const mobileBar = responsive ? /* @__PURE__ */ (0,
|
|
4361
|
+
const mobileBar = responsive ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4169
4362
|
"div",
|
|
4170
4363
|
{
|
|
4171
4364
|
className: cn(
|
|
4172
4365
|
"border-border bg-panel z-overlay sticky top-0 flex h-[52px] items-center gap-4 border-b px-5 md:hidden"
|
|
4173
4366
|
),
|
|
4174
4367
|
children: [
|
|
4175
|
-
/* @__PURE__ */ (0,
|
|
4368
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4176
4369
|
"button",
|
|
4177
4370
|
{
|
|
4178
4371
|
type: "button",
|
|
@@ -4182,15 +4375,15 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4182
4375
|
children: "\u2630"
|
|
4183
4376
|
}
|
|
4184
4377
|
),
|
|
4185
|
-
brand && /* @__PURE__ */ (0,
|
|
4186
|
-
actions && /* @__PURE__ */ (0,
|
|
4378
|
+
brand && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
|
|
4379
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center gap-3", children: actions })
|
|
4187
4380
|
]
|
|
4188
4381
|
}
|
|
4189
4382
|
) : null;
|
|
4190
4383
|
if (orientation === "horizontal") {
|
|
4191
|
-
return /* @__PURE__ */ (0,
|
|
4384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4192
4385
|
mobileBar,
|
|
4193
|
-
/* @__PURE__ */ (0,
|
|
4386
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4194
4387
|
"header",
|
|
4195
4388
|
{
|
|
4196
4389
|
ref,
|
|
@@ -4201,10 +4394,10 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4201
4394
|
),
|
|
4202
4395
|
...props,
|
|
4203
4396
|
children: [
|
|
4204
|
-
brand && /* @__PURE__ */ (0,
|
|
4205
|
-
/* @__PURE__ */ (0,
|
|
4206
|
-
/* @__PURE__ */ (0,
|
|
4207
|
-
(item) => item.children?.length ? /* @__PURE__ */ (0,
|
|
4397
|
+
brand && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
|
|
4398
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
|
|
4399
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.List, { className: "m-0! flex list-none! items-center gap-1 p-0! [&_li]:m-0!", children: items.map(
|
|
4400
|
+
(item) => item.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4208
4401
|
HorizontalDropdown,
|
|
4209
4402
|
{
|
|
4210
4403
|
item,
|
|
@@ -4213,7 +4406,7 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4213
4406
|
onActivate: handleItemActivate
|
|
4214
4407
|
},
|
|
4215
4408
|
item.id
|
|
4216
|
-
) : /* @__PURE__ */ (0,
|
|
4409
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4217
4410
|
HorizontalLink,
|
|
4218
4411
|
{
|
|
4219
4412
|
item,
|
|
@@ -4222,13 +4415,13 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4222
4415
|
}
|
|
4223
4416
|
) }, item.id)
|
|
4224
4417
|
) }),
|
|
4225
|
-
/* @__PURE__ */ (0,
|
|
4418
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
|
|
4226
4419
|
] }),
|
|
4227
|
-
actions && /* @__PURE__ */ (0,
|
|
4420
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center gap-3", children: actions })
|
|
4228
4421
|
]
|
|
4229
4422
|
}
|
|
4230
4423
|
),
|
|
4231
|
-
responsive && /* @__PURE__ */ (0,
|
|
4424
|
+
responsive && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4232
4425
|
Drawer,
|
|
4233
4426
|
{
|
|
4234
4427
|
open: drawerOpen,
|
|
@@ -4241,9 +4434,9 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4241
4434
|
)
|
|
4242
4435
|
] });
|
|
4243
4436
|
}
|
|
4244
|
-
return /* @__PURE__ */ (0,
|
|
4437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4245
4438
|
mobileBar,
|
|
4246
|
-
/* @__PURE__ */ (0,
|
|
4439
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4247
4440
|
"aside",
|
|
4248
4441
|
{
|
|
4249
4442
|
ref,
|
|
@@ -4256,8 +4449,8 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4256
4449
|
),
|
|
4257
4450
|
...props,
|
|
4258
4451
|
children: [
|
|
4259
|
-
brand && /* @__PURE__ */ (0,
|
|
4260
|
-
/* @__PURE__ */ (0,
|
|
4452
|
+
brand && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
|
|
4453
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4261
4454
|
VerticalItem,
|
|
4262
4455
|
{
|
|
4263
4456
|
item,
|
|
@@ -4266,11 +4459,11 @@ var NavBar = (0, import_react62.forwardRef)(function NavBar2({
|
|
|
4266
4459
|
},
|
|
4267
4460
|
item.id
|
|
4268
4461
|
)) }),
|
|
4269
|
-
actions && /* @__PURE__ */ (0,
|
|
4462
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
|
|
4270
4463
|
]
|
|
4271
4464
|
}
|
|
4272
4465
|
),
|
|
4273
|
-
responsive && /* @__PURE__ */ (0,
|
|
4466
|
+
responsive && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4274
4467
|
Drawer,
|
|
4275
4468
|
{
|
|
4276
4469
|
open: drawerOpen,
|
|
@@ -4299,13 +4492,13 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4299
4492
|
}
|
|
4300
4493
|
onActivate(item.id);
|
|
4301
4494
|
};
|
|
4302
|
-
const inner = /* @__PURE__ */ (0,
|
|
4303
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
4304
|
-
/* @__PURE__ */ (0,
|
|
4305
|
-
item.badge != null && /* @__PURE__ */ (0,
|
|
4495
|
+
const inner = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4496
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4497
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: item.label }),
|
|
4498
|
+
item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ItemBadge, { active, children: item.badge })
|
|
4306
4499
|
] });
|
|
4307
4500
|
if (item.href) {
|
|
4308
|
-
return /* @__PURE__ */ (0,
|
|
4501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4309
4502
|
"a",
|
|
4310
4503
|
{
|
|
4311
4504
|
href: item.href,
|
|
@@ -4317,7 +4510,7 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4317
4510
|
}
|
|
4318
4511
|
) });
|
|
4319
4512
|
}
|
|
4320
|
-
return /* @__PURE__ */ (0,
|
|
4513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4321
4514
|
"button",
|
|
4322
4515
|
{
|
|
4323
4516
|
type: "button",
|
|
@@ -4330,8 +4523,8 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4330
4523
|
) });
|
|
4331
4524
|
}
|
|
4332
4525
|
function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
4333
|
-
return /* @__PURE__ */ (0,
|
|
4334
|
-
/* @__PURE__ */ (0,
|
|
4526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(RadixNav.Item, { children: [
|
|
4527
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4335
4528
|
RadixNav.Trigger,
|
|
4336
4529
|
{
|
|
4337
4530
|
className: cn(
|
|
@@ -4343,9 +4536,9 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
|
4343
4536
|
),
|
|
4344
4537
|
disabled: item.disabled,
|
|
4345
4538
|
children: [
|
|
4346
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
4347
|
-
/* @__PURE__ */ (0,
|
|
4348
|
-
/* @__PURE__ */ (0,
|
|
4539
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4540
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: item.label }),
|
|
4541
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4349
4542
|
"span",
|
|
4350
4543
|
{
|
|
4351
4544
|
"aria-hidden": true,
|
|
@@ -4356,7 +4549,7 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
|
4356
4549
|
]
|
|
4357
4550
|
}
|
|
4358
4551
|
),
|
|
4359
|
-
/* @__PURE__ */ (0,
|
|
4552
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
|
|
4360
4553
|
] });
|
|
4361
4554
|
}
|
|
4362
4555
|
function DropdownLink({ item, active, onActivate }) {
|
|
@@ -4373,13 +4566,13 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4373
4566
|
}
|
|
4374
4567
|
onActivate(item.id);
|
|
4375
4568
|
};
|
|
4376
|
-
const inner = /* @__PURE__ */ (0,
|
|
4377
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
4378
|
-
/* @__PURE__ */ (0,
|
|
4379
|
-
item.badge != null && /* @__PURE__ */ (0,
|
|
4569
|
+
const inner = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
4570
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4571
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "flex-1", children: item.label }),
|
|
4572
|
+
item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ItemBadge, { active, children: item.badge })
|
|
4380
4573
|
] });
|
|
4381
4574
|
if (item.href) {
|
|
4382
|
-
return /* @__PURE__ */ (0,
|
|
4575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4383
4576
|
"a",
|
|
4384
4577
|
{
|
|
4385
4578
|
href: item.href,
|
|
@@ -4391,7 +4584,7 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4391
4584
|
}
|
|
4392
4585
|
) });
|
|
4393
4586
|
}
|
|
4394
|
-
return /* @__PURE__ */ (0,
|
|
4587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4395
4588
|
"button",
|
|
4396
4589
|
{
|
|
4397
4590
|
type: "button",
|
|
@@ -4406,9 +4599,9 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4406
4599
|
function VerticalItem({ item, activeId, onActivate }) {
|
|
4407
4600
|
const hasChildren = (item.children?.length ?? 0) > 0;
|
|
4408
4601
|
const treeActive = isActiveTree(item, activeId);
|
|
4409
|
-
const [open, setOpen] = (0,
|
|
4410
|
-
const prevTreeActive = (0,
|
|
4411
|
-
(0,
|
|
4602
|
+
const [open, setOpen] = (0, import_react63.useState)(treeActive);
|
|
4603
|
+
const prevTreeActive = (0, import_react63.useRef)(treeActive);
|
|
4604
|
+
(0, import_react63.useEffect)(() => {
|
|
4412
4605
|
if (treeActive && !prevTreeActive.current) setOpen(true);
|
|
4413
4606
|
prevTreeActive.current = treeActive;
|
|
4414
4607
|
}, [treeActive]);
|
|
@@ -4420,7 +4613,7 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4420
4613
|
}
|
|
4421
4614
|
onActivate(item.id);
|
|
4422
4615
|
};
|
|
4423
|
-
return /* @__PURE__ */ (0,
|
|
4616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4424
4617
|
NavItem,
|
|
4425
4618
|
{
|
|
4426
4619
|
icon: item.icon,
|
|
@@ -4433,8 +4626,8 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4433
4626
|
}
|
|
4434
4627
|
);
|
|
4435
4628
|
}
|
|
4436
|
-
return /* @__PURE__ */ (0,
|
|
4437
|
-
/* @__PURE__ */ (0,
|
|
4629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col", children: [
|
|
4630
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
4438
4631
|
"button",
|
|
4439
4632
|
{
|
|
4440
4633
|
type: "button",
|
|
@@ -4450,18 +4643,18 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4450
4643
|
item.disabled && "pointer-events-none opacity-50"
|
|
4451
4644
|
),
|
|
4452
4645
|
children: [
|
|
4453
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
4454
|
-
/* @__PURE__ */ (0,
|
|
4455
|
-
item.badge != null && /* @__PURE__ */ (0,
|
|
4456
|
-
/* @__PURE__ */ (0,
|
|
4646
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
|
|
4647
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "flex-1 truncate", children: item.label }),
|
|
4648
|
+
item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ItemBadge, { active: treeActive, children: item.badge }),
|
|
4649
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
|
|
4457
4650
|
]
|
|
4458
4651
|
}
|
|
4459
4652
|
),
|
|
4460
|
-
open && /* @__PURE__ */ (0,
|
|
4653
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
|
|
4461
4654
|
] });
|
|
4462
4655
|
}
|
|
4463
4656
|
function ItemBadge({ active, children }) {
|
|
4464
|
-
return /* @__PURE__ */ (0,
|
|
4657
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4465
4658
|
"span",
|
|
4466
4659
|
{
|
|
4467
4660
|
className: cn(
|
|
@@ -4474,8 +4667,8 @@ function ItemBadge({ active, children }) {
|
|
|
4474
4667
|
}
|
|
4475
4668
|
|
|
4476
4669
|
// src/patterns/OnboardingChecklist/OnboardingChecklist.tsx
|
|
4477
|
-
var
|
|
4478
|
-
var
|
|
4670
|
+
var import_react64 = require("react");
|
|
4671
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
4479
4672
|
var statusDot = {
|
|
4480
4673
|
pending: "off",
|
|
4481
4674
|
"in-progress": "sync",
|
|
@@ -4486,11 +4679,11 @@ var labelStateClass = {
|
|
|
4486
4679
|
"in-progress": "text-text",
|
|
4487
4680
|
done: "text-text-dim line-through"
|
|
4488
4681
|
};
|
|
4489
|
-
var OnboardingChecklist = (0,
|
|
4682
|
+
var OnboardingChecklist = (0, import_react64.forwardRef)(
|
|
4490
4683
|
function OnboardingChecklist2({ items, onItemClick, title = "Get started", progressLabel, hideProgress, className, ...props }, ref) {
|
|
4491
4684
|
const total = items.length;
|
|
4492
4685
|
const done = items.filter((i) => i.status === "done").length;
|
|
4493
|
-
return /* @__PURE__ */ (0,
|
|
4686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
4494
4687
|
"section",
|
|
4495
4688
|
{
|
|
4496
4689
|
ref,
|
|
@@ -4501,11 +4694,11 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4501
4694
|
),
|
|
4502
4695
|
...props,
|
|
4503
4696
|
children: [
|
|
4504
|
-
/* @__PURE__ */ (0,
|
|
4505
|
-
/* @__PURE__ */ (0,
|
|
4506
|
-
/* @__PURE__ */ (0,
|
|
4697
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("header", { className: "flex items-center gap-2", children: [
|
|
4698
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[14px] font-medium", children: title }),
|
|
4699
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
|
|
4507
4700
|
] }),
|
|
4508
|
-
!hideProgress && total > 0 && /* @__PURE__ */ (0,
|
|
4701
|
+
!hideProgress && total > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4509
4702
|
"div",
|
|
4510
4703
|
{
|
|
4511
4704
|
role: "progressbar",
|
|
@@ -4514,7 +4707,7 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4514
4707
|
"aria-valuenow": done,
|
|
4515
4708
|
"aria-label": typeof title === "string" ? `${title} progress` : "Setup progress",
|
|
4516
4709
|
className: "bg-panel-2 h-[3px] w-full overflow-hidden rounded-full",
|
|
4517
|
-
children: /* @__PURE__ */ (0,
|
|
4710
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4518
4711
|
"span",
|
|
4519
4712
|
{
|
|
4520
4713
|
"aria-hidden": true,
|
|
@@ -4527,10 +4720,10 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4527
4720
|
)
|
|
4528
4721
|
}
|
|
4529
4722
|
),
|
|
4530
|
-
/* @__PURE__ */ (0,
|
|
4723
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
|
|
4531
4724
|
const interactive = typeof onItemClick === "function";
|
|
4532
|
-
const labelBlock = /* @__PURE__ */ (0,
|
|
4533
|
-
/* @__PURE__ */ (0,
|
|
4725
|
+
const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
4726
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4534
4727
|
StatusDot,
|
|
4535
4728
|
{
|
|
4536
4729
|
state: statusDot[item.status],
|
|
@@ -4539,17 +4732,17 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4539
4732
|
className: "mt-[3px]"
|
|
4540
4733
|
}
|
|
4541
4734
|
),
|
|
4542
|
-
/* @__PURE__ */ (0,
|
|
4543
|
-
/* @__PURE__ */ (0,
|
|
4544
|
-
item.description && /* @__PURE__ */ (0,
|
|
4735
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
|
|
4736
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
|
|
4737
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
|
|
4545
4738
|
] })
|
|
4546
4739
|
] });
|
|
4547
4740
|
const labelRegionClass = cn(
|
|
4548
4741
|
"flex flex-1 items-start gap-3 rounded-md px-2 py-2 text-left transition-colors duration-(--duration-micro)",
|
|
4549
4742
|
interactive && "cursor-pointer outline-none hover:bg-panel-2 focus-visible:ring-[3px] focus-visible:ring-accent-dim"
|
|
4550
4743
|
);
|
|
4551
|
-
return /* @__PURE__ */ (0,
|
|
4552
|
-
interactive ? /* @__PURE__ */ (0,
|
|
4744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "flex items-start gap-2", children: [
|
|
4745
|
+
interactive ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4553
4746
|
"button",
|
|
4554
4747
|
{
|
|
4555
4748
|
type: "button",
|
|
@@ -4558,8 +4751,8 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4558
4751
|
className: labelRegionClass,
|
|
4559
4752
|
children: labelBlock
|
|
4560
4753
|
}
|
|
4561
|
-
) : /* @__PURE__ */ (0,
|
|
4562
|
-
item.action && /* @__PURE__ */ (0,
|
|
4754
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: labelRegionClass, children: labelBlock }),
|
|
4755
|
+
item.action && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 self-center", children: item.action })
|
|
4563
4756
|
] }, item.id);
|
|
4564
4757
|
}) })
|
|
4565
4758
|
]
|
|
@@ -4570,8 +4763,8 @@ var OnboardingChecklist = (0, import_react63.forwardRef)(
|
|
|
4570
4763
|
OnboardingChecklist.displayName = "OnboardingChecklist";
|
|
4571
4764
|
|
|
4572
4765
|
// src/patterns/Pagination/Pagination.tsx
|
|
4573
|
-
var
|
|
4574
|
-
var
|
|
4766
|
+
var import_react65 = require("react");
|
|
4767
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
4575
4768
|
function buildRange(page, total, siblings) {
|
|
4576
4769
|
if (total <= 0) return [];
|
|
4577
4770
|
const items = [];
|
|
@@ -4584,9 +4777,9 @@ function buildRange(page, total, siblings) {
|
|
|
4584
4777
|
if (total > 1) items.push(total);
|
|
4585
4778
|
return items;
|
|
4586
4779
|
}
|
|
4587
|
-
var Pagination = (0,
|
|
4780
|
+
var Pagination = (0, import_react65.forwardRef)(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
|
|
4588
4781
|
const items = buildRange(page, total, siblings);
|
|
4589
|
-
return /* @__PURE__ */ (0,
|
|
4782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
4590
4783
|
"nav",
|
|
4591
4784
|
{
|
|
4592
4785
|
ref,
|
|
@@ -4594,7 +4787,7 @@ var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, tot
|
|
|
4594
4787
|
className: cn("inline-flex items-center gap-1", className),
|
|
4595
4788
|
...props,
|
|
4596
4789
|
children: [
|
|
4597
|
-
/* @__PURE__ */ (0,
|
|
4790
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4598
4791
|
IconButton,
|
|
4599
4792
|
{
|
|
4600
4793
|
size: "sm",
|
|
@@ -4607,7 +4800,7 @@ var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, tot
|
|
|
4607
4800
|
),
|
|
4608
4801
|
items.map((item, i) => {
|
|
4609
4802
|
if (item === "start-ellipsis" || item === "end-ellipsis") {
|
|
4610
|
-
return /* @__PURE__ */ (0,
|
|
4803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4611
4804
|
"span",
|
|
4612
4805
|
{
|
|
4613
4806
|
"aria-hidden": true,
|
|
@@ -4618,7 +4811,7 @@ var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, tot
|
|
|
4618
4811
|
);
|
|
4619
4812
|
}
|
|
4620
4813
|
const isActive = item === page;
|
|
4621
|
-
return /* @__PURE__ */ (0,
|
|
4814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4622
4815
|
"button",
|
|
4623
4816
|
{
|
|
4624
4817
|
type: "button",
|
|
@@ -4636,7 +4829,7 @@ var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, tot
|
|
|
4636
4829
|
item
|
|
4637
4830
|
);
|
|
4638
4831
|
}),
|
|
4639
|
-
/* @__PURE__ */ (0,
|
|
4832
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4640
4833
|
IconButton,
|
|
4641
4834
|
{
|
|
4642
4835
|
size: "sm",
|
|
@@ -4654,10 +4847,10 @@ var Pagination = (0, import_react64.forwardRef)(function Pagination2({ page, tot
|
|
|
4654
4847
|
Pagination.displayName = "Pagination";
|
|
4655
4848
|
|
|
4656
4849
|
// src/patterns/Progress/Progress.tsx
|
|
4657
|
-
var
|
|
4658
|
-
var
|
|
4659
|
-
var
|
|
4660
|
-
var trackStyles = (0,
|
|
4850
|
+
var import_class_variance_authority12 = require("class-variance-authority");
|
|
4851
|
+
var import_react66 = require("react");
|
|
4852
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
4853
|
+
var trackStyles = (0, import_class_variance_authority12.cva)("w-full rounded-full bg-panel-2 overflow-hidden", {
|
|
4661
4854
|
variants: {
|
|
4662
4855
|
size: {
|
|
4663
4856
|
sm: "h-[3px]",
|
|
@@ -4667,7 +4860,7 @@ var trackStyles = (0, import_class_variance_authority11.cva)("w-full rounded-ful
|
|
|
4667
4860
|
},
|
|
4668
4861
|
defaultVariants: { size: "md" }
|
|
4669
4862
|
});
|
|
4670
|
-
var fillStyles = (0,
|
|
4863
|
+
var fillStyles = (0, import_class_variance_authority12.cva)("h-full rounded-full transition-[width] duration-(--duration-step)", {
|
|
4671
4864
|
variants: {
|
|
4672
4865
|
tone: {
|
|
4673
4866
|
accent: "bg-accent",
|
|
@@ -4678,7 +4871,7 @@ var fillStyles = (0, import_class_variance_authority11.cva)("h-full rounded-full
|
|
|
4678
4871
|
},
|
|
4679
4872
|
defaultVariants: { tone: "accent" }
|
|
4680
4873
|
});
|
|
4681
|
-
var Progress = (0,
|
|
4874
|
+
var Progress = (0, import_react66.forwardRef)(function Progress2({
|
|
4682
4875
|
value = 0,
|
|
4683
4876
|
max = 100,
|
|
4684
4877
|
indeterminate = false,
|
|
@@ -4692,15 +4885,15 @@ var Progress = (0, import_react65.forwardRef)(function Progress2({
|
|
|
4692
4885
|
const clamped = Math.min(max, Math.max(0, value));
|
|
4693
4886
|
const pct = max > 0 ? clamped / max * 100 : 0;
|
|
4694
4887
|
const display = Math.round(pct);
|
|
4695
|
-
return /* @__PURE__ */ (0,
|
|
4696
|
-
label != null && /* @__PURE__ */ (0,
|
|
4697
|
-
/* @__PURE__ */ (0,
|
|
4698
|
-
showValue && !indeterminate && /* @__PURE__ */ (0,
|
|
4888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
|
|
4889
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex text-[12px]", children: [
|
|
4890
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-text-muted", children: label }),
|
|
4891
|
+
showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
|
|
4699
4892
|
display,
|
|
4700
4893
|
"%"
|
|
4701
4894
|
] })
|
|
4702
4895
|
] }),
|
|
4703
|
-
/* @__PURE__ */ (0,
|
|
4896
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
4704
4897
|
"div",
|
|
4705
4898
|
{
|
|
4706
4899
|
role: "progressbar",
|
|
@@ -4709,7 +4902,7 @@ var Progress = (0, import_react65.forwardRef)(function Progress2({
|
|
|
4709
4902
|
"aria-valuenow": indeterminate ? void 0 : display,
|
|
4710
4903
|
"aria-label": typeof label === "string" ? label : void 0,
|
|
4711
4904
|
className: trackStyles({ size }),
|
|
4712
|
-
children: indeterminate ? /* @__PURE__ */ (0,
|
|
4905
|
+
children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
4713
4906
|
"span",
|
|
4714
4907
|
{
|
|
4715
4908
|
"aria-hidden": true,
|
|
@@ -4719,7 +4912,7 @@ var Progress = (0, import_react65.forwardRef)(function Progress2({
|
|
|
4719
4912
|
"animate-[ship-indeterminate_1.4s_linear_infinite]"
|
|
4720
4913
|
)
|
|
4721
4914
|
}
|
|
4722
|
-
) : /* @__PURE__ */ (0,
|
|
4915
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
|
|
4723
4916
|
}
|
|
4724
4917
|
)
|
|
4725
4918
|
] });
|
|
@@ -4727,18 +4920,18 @@ var Progress = (0, import_react65.forwardRef)(function Progress2({
|
|
|
4727
4920
|
Progress.displayName = "Progress";
|
|
4728
4921
|
|
|
4729
4922
|
// src/patterns/PullToRefresh/PullToRefresh.tsx
|
|
4730
|
-
var
|
|
4731
|
-
var
|
|
4923
|
+
var import_react67 = require("react");
|
|
4924
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
4732
4925
|
var labels = {
|
|
4733
4926
|
idle: "Pull to refresh",
|
|
4734
4927
|
pulling: "Pull to refresh",
|
|
4735
4928
|
ready: "Release to refresh",
|
|
4736
4929
|
loading: "Refreshing\u2026"
|
|
4737
4930
|
};
|
|
4738
|
-
var PullToRefresh = (0,
|
|
4931
|
+
var PullToRefresh = (0, import_react67.forwardRef)(function PullToRefresh2({ state = "idle", label, className, ...props }, ref) {
|
|
4739
4932
|
const isLoading = state === "loading";
|
|
4740
4933
|
const transform = state === "ready" ? "rotate(180deg)" : state === "pulling" ? "rotate(90deg)" : "rotate(0deg)";
|
|
4741
|
-
return /* @__PURE__ */ (0,
|
|
4934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
4742
4935
|
"div",
|
|
4743
4936
|
{
|
|
4744
4937
|
ref,
|
|
@@ -4748,7 +4941,7 @@ var PullToRefresh = (0, import_react66.forwardRef)(function PullToRefresh2({ sta
|
|
|
4748
4941
|
className: cn("text-text-muted flex flex-col items-center gap-[6px] py-3", className),
|
|
4749
4942
|
...props,
|
|
4750
4943
|
children: [
|
|
4751
|
-
/* @__PURE__ */ (0,
|
|
4944
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
4752
4945
|
"div",
|
|
4753
4946
|
{
|
|
4754
4947
|
"aria-hidden": true,
|
|
@@ -4764,7 +4957,7 @@ var PullToRefresh = (0, import_react66.forwardRef)(function PullToRefresh2({ sta
|
|
|
4764
4957
|
}
|
|
4765
4958
|
}
|
|
4766
4959
|
),
|
|
4767
|
-
/* @__PURE__ */ (0,
|
|
4960
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
|
|
4768
4961
|
]
|
|
4769
4962
|
}
|
|
4770
4963
|
);
|
|
@@ -4772,8 +4965,8 @@ var PullToRefresh = (0, import_react66.forwardRef)(function PullToRefresh2({ sta
|
|
|
4772
4965
|
PullToRefresh.displayName = "PullToRefresh";
|
|
4773
4966
|
|
|
4774
4967
|
// src/patterns/Sparkline/Sparkline.tsx
|
|
4775
|
-
var
|
|
4776
|
-
var
|
|
4968
|
+
var import_react68 = require("react");
|
|
4969
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
4777
4970
|
function buildPath(values, w, h) {
|
|
4778
4971
|
if (values.length === 0) return { line: "", area: "" };
|
|
4779
4972
|
const pad = 2;
|
|
@@ -4792,7 +4985,7 @@ function buildPath(values, w, h) {
|
|
|
4792
4985
|
)} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
|
|
4793
4986
|
return { line, area };
|
|
4794
4987
|
}
|
|
4795
|
-
var Sparkline = (0,
|
|
4988
|
+
var Sparkline = (0, import_react68.forwardRef)(function Sparkline2({
|
|
4796
4989
|
values,
|
|
4797
4990
|
width = 160,
|
|
4798
4991
|
height = 32,
|
|
@@ -4803,8 +4996,8 @@ var Sparkline = (0, import_react67.forwardRef)(function Sparkline2({
|
|
|
4803
4996
|
"aria-label": ariaLabel = "Trend",
|
|
4804
4997
|
...props
|
|
4805
4998
|
}, ref) {
|
|
4806
|
-
const { line, area } = (0,
|
|
4807
|
-
return /* @__PURE__ */ (0,
|
|
4999
|
+
const { line, area } = (0, import_react68.useMemo)(() => buildPath(values, width, height), [values, width, height]);
|
|
5000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
4808
5001
|
"svg",
|
|
4809
5002
|
{
|
|
4810
5003
|
ref,
|
|
@@ -4816,8 +5009,8 @@ var Sparkline = (0, import_react67.forwardRef)(function Sparkline2({
|
|
|
4816
5009
|
className: cn("inline-block", className),
|
|
4817
5010
|
...props,
|
|
4818
5011
|
children: [
|
|
4819
|
-
fill && /* @__PURE__ */ (0,
|
|
4820
|
-
/* @__PURE__ */ (0,
|
|
5012
|
+
fill && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
|
|
5013
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
4821
5014
|
"path",
|
|
4822
5015
|
{
|
|
4823
5016
|
d: line,
|
|
@@ -4835,16 +5028,16 @@ var Sparkline = (0, import_react67.forwardRef)(function Sparkline2({
|
|
|
4835
5028
|
Sparkline.displayName = "Sparkline";
|
|
4836
5029
|
|
|
4837
5030
|
// src/patterns/Spinner/Spinner.tsx
|
|
4838
|
-
var
|
|
4839
|
-
var
|
|
5031
|
+
var import_react69 = require("react");
|
|
5032
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
4840
5033
|
var sizes = {
|
|
4841
5034
|
sm: { box: "h-3 w-3", border: "border-[2px]" },
|
|
4842
5035
|
md: { box: "h-4 w-4", border: "border-[2px]" },
|
|
4843
5036
|
lg: { box: "h-5 w-5", border: "border-[2px]" }
|
|
4844
5037
|
};
|
|
4845
|
-
var Spinner2 = (0,
|
|
5038
|
+
var Spinner2 = (0, import_react69.forwardRef)(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
|
|
4846
5039
|
const s = sizes[size];
|
|
4847
|
-
return /* @__PURE__ */ (0,
|
|
5040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
4848
5041
|
"span",
|
|
4849
5042
|
{
|
|
4850
5043
|
ref,
|
|
@@ -4852,7 +5045,7 @@ var Spinner2 = (0, import_react68.forwardRef)(function Spinner3({ size = "md", l
|
|
|
4852
5045
|
"aria-label": label,
|
|
4853
5046
|
className: cn("inline-block", className),
|
|
4854
5047
|
...props,
|
|
4855
|
-
children: /* @__PURE__ */ (0,
|
|
5048
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
4856
5049
|
"span",
|
|
4857
5050
|
{
|
|
4858
5051
|
"aria-hidden": true,
|
|
@@ -4869,8 +5062,8 @@ var Spinner2 = (0, import_react68.forwardRef)(function Spinner3({ size = "md", l
|
|
|
4869
5062
|
Spinner2.displayName = "Spinner";
|
|
4870
5063
|
|
|
4871
5064
|
// src/patterns/Stepper/Stepper.tsx
|
|
4872
|
-
var
|
|
4873
|
-
var
|
|
5065
|
+
var import_react70 = require("react");
|
|
5066
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
4874
5067
|
var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
|
|
4875
5068
|
var dotStateClass = {
|
|
4876
5069
|
done: "bg-accent text-on-accent border-accent",
|
|
@@ -4887,8 +5080,8 @@ function stateFor(index, current) {
|
|
|
4887
5080
|
if (index === current) return "current";
|
|
4888
5081
|
return "upcoming";
|
|
4889
5082
|
}
|
|
4890
|
-
var Stepper = (0,
|
|
4891
|
-
return /* @__PURE__ */ (0,
|
|
5083
|
+
var Stepper = (0, import_react70.forwardRef)(function Stepper2({ steps, current, className, ...props }, ref) {
|
|
5084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4892
5085
|
"ol",
|
|
4893
5086
|
{
|
|
4894
5087
|
ref,
|
|
@@ -4900,19 +5093,19 @@ var Stepper = (0, import_react69.forwardRef)(function Stepper2({ steps, current,
|
|
|
4900
5093
|
const id = typeof step === "string" ? void 0 : step.id;
|
|
4901
5094
|
const state = stateFor(i, current);
|
|
4902
5095
|
const connectorActive = i < current;
|
|
4903
|
-
return /* @__PURE__ */ (0,
|
|
4904
|
-
/* @__PURE__ */ (0,
|
|
5096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react70.Fragment, { children: [
|
|
5097
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
4905
5098
|
"li",
|
|
4906
5099
|
{
|
|
4907
5100
|
"aria-current": state === "current" ? "step" : void 0,
|
|
4908
5101
|
className: "flex items-center gap-2",
|
|
4909
5102
|
children: [
|
|
4910
|
-
/* @__PURE__ */ (0,
|
|
4911
|
-
/* @__PURE__ */ (0,
|
|
5103
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
|
|
5104
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
|
|
4912
5105
|
]
|
|
4913
5106
|
}
|
|
4914
5107
|
),
|
|
4915
|
-
i < steps.length - 1 && /* @__PURE__ */ (0,
|
|
5108
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4916
5109
|
"span",
|
|
4917
5110
|
{
|
|
4918
5111
|
"aria-hidden": true,
|
|
@@ -4927,13 +5120,13 @@ var Stepper = (0, import_react69.forwardRef)(function Stepper2({ steps, current,
|
|
|
4927
5120
|
Stepper.displayName = "Stepper";
|
|
4928
5121
|
|
|
4929
5122
|
// src/patterns/TabBar/TabBar.tsx
|
|
4930
|
-
var
|
|
4931
|
-
var
|
|
4932
|
-
var TabBar = (0,
|
|
5123
|
+
var import_react71 = require("react");
|
|
5124
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
5125
|
+
var TabBar = (0, import_react71.forwardRef)(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
|
|
4933
5126
|
const isControlled = value !== void 0;
|
|
4934
|
-
const [internalValue, setInternalValue] = (0,
|
|
5127
|
+
const [internalValue, setInternalValue] = (0, import_react71.useState)(defaultValue);
|
|
4935
5128
|
const activeId = isControlled ? value : internalValue;
|
|
4936
|
-
const handleSelect = (0,
|
|
5129
|
+
const handleSelect = (0, import_react71.useCallback)(
|
|
4937
5130
|
(id, e) => {
|
|
4938
5131
|
if (!isControlled) setInternalValue(id);
|
|
4939
5132
|
onValueChange?.(id);
|
|
@@ -4941,7 +5134,7 @@ var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, def
|
|
|
4941
5134
|
},
|
|
4942
5135
|
[isControlled, onValueChange]
|
|
4943
5136
|
);
|
|
4944
|
-
return /* @__PURE__ */ (0,
|
|
5137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
4945
5138
|
"nav",
|
|
4946
5139
|
{
|
|
4947
5140
|
ref,
|
|
@@ -4956,7 +5149,7 @@ var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, def
|
|
|
4956
5149
|
children: items.map((item) => {
|
|
4957
5150
|
const isActive = item.id === activeId;
|
|
4958
5151
|
if (item.elevated) {
|
|
4959
|
-
return /* @__PURE__ */ (0,
|
|
5152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "grid place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
4960
5153
|
"button",
|
|
4961
5154
|
{
|
|
4962
5155
|
type: "button",
|
|
@@ -4972,13 +5165,13 @@ var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, def
|
|
|
4972
5165
|
"disabled:cursor-not-allowed disabled:opacity-40"
|
|
4973
5166
|
),
|
|
4974
5167
|
children: [
|
|
4975
|
-
/* @__PURE__ */ (0,
|
|
4976
|
-
/* @__PURE__ */ (0,
|
|
5168
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { "aria-hidden": true, children: item.icon }),
|
|
5169
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: item.label })
|
|
4977
5170
|
]
|
|
4978
5171
|
}
|
|
4979
5172
|
) }, item.id);
|
|
4980
5173
|
}
|
|
4981
|
-
return /* @__PURE__ */ (0,
|
|
5174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
4982
5175
|
"button",
|
|
4983
5176
|
{
|
|
4984
5177
|
type: "button",
|
|
@@ -4993,9 +5186,9 @@ var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, def
|
|
|
4993
5186
|
isActive ? "text-accent-text" : "text-text-muted hover:text-text"
|
|
4994
5187
|
),
|
|
4995
5188
|
children: [
|
|
4996
|
-
/* @__PURE__ */ (0,
|
|
5189
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "relative inline-flex", "aria-hidden": true, children: [
|
|
4997
5190
|
item.icon,
|
|
4998
|
-
item.badge != null && /* @__PURE__ */ (0,
|
|
5191
|
+
item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
4999
5192
|
"span",
|
|
5000
5193
|
{
|
|
5001
5194
|
className: cn(
|
|
@@ -5006,9 +5199,9 @@ var TabBar = (0, import_react70.forwardRef)(function TabBar2({ items, value, def
|
|
|
5006
5199
|
}
|
|
5007
5200
|
)
|
|
5008
5201
|
] }),
|
|
5009
|
-
/* @__PURE__ */ (0,
|
|
5202
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "text-[10px] font-medium tracking-tight", children: [
|
|
5010
5203
|
item.label,
|
|
5011
|
-
item.badge != null && /* @__PURE__ */ (0,
|
|
5204
|
+
item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "sr-only", children: [
|
|
5012
5205
|
", ",
|
|
5013
5206
|
item.badge,
|
|
5014
5207
|
" unread"
|
|
@@ -5026,11 +5219,11 @@ TabBar.displayName = "TabBar";
|
|
|
5026
5219
|
|
|
5027
5220
|
// src/patterns/Tabs/Tabs.tsx
|
|
5028
5221
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
5029
|
-
var
|
|
5030
|
-
var
|
|
5031
|
-
var
|
|
5032
|
-
var TabsVariantContext = (0,
|
|
5033
|
-
var tabsListStyles = (0,
|
|
5222
|
+
var import_class_variance_authority13 = require("class-variance-authority");
|
|
5223
|
+
var import_react72 = require("react");
|
|
5224
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
5225
|
+
var TabsVariantContext = (0, import_react72.createContext)("underline");
|
|
5226
|
+
var tabsListStyles = (0, import_class_variance_authority13.cva)("", {
|
|
5034
5227
|
variants: {
|
|
5035
5228
|
variant: {
|
|
5036
5229
|
underline: "flex gap-6 border-b border-border",
|
|
@@ -5038,7 +5231,7 @@ var tabsListStyles = (0, import_class_variance_authority12.cva)("", {
|
|
|
5038
5231
|
}
|
|
5039
5232
|
}
|
|
5040
5233
|
});
|
|
5041
|
-
var tabsTriggerStyles = (0,
|
|
5234
|
+
var tabsTriggerStyles = (0, import_class_variance_authority13.cva)(
|
|
5042
5235
|
"cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
|
|
5043
5236
|
{
|
|
5044
5237
|
variants: {
|
|
@@ -5059,8 +5252,8 @@ var tabsTriggerStyles = (0, import_class_variance_authority12.cva)(
|
|
|
5059
5252
|
}
|
|
5060
5253
|
}
|
|
5061
5254
|
);
|
|
5062
|
-
var Tabs = (0,
|
|
5063
|
-
return /* @__PURE__ */ (0,
|
|
5255
|
+
var Tabs = (0, import_react72.forwardRef)(function Tabs2({ variant = "underline", className, ...props }, ref) {
|
|
5256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5064
5257
|
RadixTabs.Root,
|
|
5065
5258
|
{
|
|
5066
5259
|
ref,
|
|
@@ -5070,14 +5263,14 @@ var Tabs = (0, import_react71.forwardRef)(function Tabs2({ variant = "underline"
|
|
|
5070
5263
|
) });
|
|
5071
5264
|
});
|
|
5072
5265
|
Tabs.displayName = "Tabs";
|
|
5073
|
-
var TabsList = (0,
|
|
5074
|
-
const variant = (0,
|
|
5075
|
-
return /* @__PURE__ */ (0,
|
|
5266
|
+
var TabsList = (0, import_react72.forwardRef)(function TabsList2({ className, ...props }, ref) {
|
|
5267
|
+
const variant = (0, import_react72.useContext)(TabsVariantContext);
|
|
5268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
|
|
5076
5269
|
});
|
|
5077
5270
|
TabsList.displayName = "TabsList";
|
|
5078
|
-
var Tab = (0,
|
|
5079
|
-
const variant = (0,
|
|
5080
|
-
return /* @__PURE__ */ (0,
|
|
5271
|
+
var Tab = (0, import_react72.forwardRef)(function Tab2({ className, ...props }, ref) {
|
|
5272
|
+
const variant = (0, import_react72.useContext)(TabsVariantContext);
|
|
5273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5081
5274
|
RadixTabs.Trigger,
|
|
5082
5275
|
{
|
|
5083
5276
|
ref,
|
|
@@ -5087,9 +5280,9 @@ var Tab = (0, import_react71.forwardRef)(function Tab2({ className, ...props },
|
|
|
5087
5280
|
);
|
|
5088
5281
|
});
|
|
5089
5282
|
Tab.displayName = "Tab";
|
|
5090
|
-
var TabsContent = (0,
|
|
5283
|
+
var TabsContent = (0, import_react72.forwardRef)(
|
|
5091
5284
|
function TabsContent2({ className, ...props }, ref) {
|
|
5092
|
-
return /* @__PURE__ */ (0,
|
|
5285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5093
5286
|
RadixTabs.Content,
|
|
5094
5287
|
{
|
|
5095
5288
|
ref,
|
|
@@ -5105,8 +5298,8 @@ var TabsContent = (0, import_react71.forwardRef)(
|
|
|
5105
5298
|
TabsContent.displayName = "TabsContent";
|
|
5106
5299
|
|
|
5107
5300
|
// src/patterns/Timeline/Timeline.tsx
|
|
5108
|
-
var
|
|
5109
|
-
var
|
|
5301
|
+
var import_react73 = require("react");
|
|
5302
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
5110
5303
|
var ringClass = {
|
|
5111
5304
|
accent: "border-accent",
|
|
5112
5305
|
ok: "border-ok",
|
|
@@ -5114,8 +5307,8 @@ var ringClass = {
|
|
|
5114
5307
|
err: "border-err",
|
|
5115
5308
|
muted: "border-text-dim"
|
|
5116
5309
|
};
|
|
5117
|
-
var Timeline = (0,
|
|
5118
|
-
return /* @__PURE__ */ (0,
|
|
5310
|
+
var Timeline = (0, import_react73.forwardRef)(function Timeline2({ events, className, children, ...props }, ref) {
|
|
5311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
5119
5312
|
"ol",
|
|
5120
5313
|
{
|
|
5121
5314
|
ref,
|
|
@@ -5125,14 +5318,14 @@ var Timeline = (0, import_react72.forwardRef)(function Timeline2({ events, class
|
|
|
5125
5318
|
className
|
|
5126
5319
|
),
|
|
5127
5320
|
...props,
|
|
5128
|
-
children: events ? events.map((e, i) => /* @__PURE__ */ (0,
|
|
5321
|
+
children: events ? events.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
|
|
5129
5322
|
}
|
|
5130
5323
|
);
|
|
5131
5324
|
});
|
|
5132
5325
|
Timeline.displayName = "Timeline";
|
|
5133
|
-
var TimelineItem = (0,
|
|
5134
|
-
return /* @__PURE__ */ (0,
|
|
5135
|
-
/* @__PURE__ */ (0,
|
|
5326
|
+
var TimelineItem = (0, import_react73.forwardRef)(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
|
|
5327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
|
|
5328
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
5136
5329
|
"span",
|
|
5137
5330
|
{
|
|
5138
5331
|
"aria-hidden": true,
|
|
@@ -5142,15 +5335,15 @@ var TimelineItem = (0, import_react72.forwardRef)(function TimelineItem2({ tone
|
|
|
5142
5335
|
)
|
|
5143
5336
|
}
|
|
5144
5337
|
),
|
|
5145
|
-
/* @__PURE__ */ (0,
|
|
5146
|
-
description && /* @__PURE__ */ (0,
|
|
5147
|
-
time && /* @__PURE__ */ (0,
|
|
5338
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "text-[13px] font-medium", children }),
|
|
5339
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "text-text-muted text-[12px]", children: description }),
|
|
5340
|
+
time && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
|
|
5148
5341
|
] });
|
|
5149
5342
|
});
|
|
5150
5343
|
TimelineItem.displayName = "TimelineItem";
|
|
5151
5344
|
|
|
5152
5345
|
// src/patterns/Timeline/ActivityTimeline.tsx
|
|
5153
|
-
var
|
|
5346
|
+
var import_react74 = require("react");
|
|
5154
5347
|
|
|
5155
5348
|
// src/patterns/Timeline/formatRelative.ts
|
|
5156
5349
|
var SECOND = 1e3;
|
|
@@ -5185,7 +5378,7 @@ function formatRelative(input, now = /* @__PURE__ */ new Date()) {
|
|
|
5185
5378
|
}
|
|
5186
5379
|
|
|
5187
5380
|
// src/patterns/Timeline/ActivityTimeline.tsx
|
|
5188
|
-
var
|
|
5381
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
5189
5382
|
var ringClass2 = {
|
|
5190
5383
|
accent: "border-accent",
|
|
5191
5384
|
ok: "border-ok",
|
|
@@ -5193,10 +5386,10 @@ var ringClass2 = {
|
|
|
5193
5386
|
err: "border-err",
|
|
5194
5387
|
muted: "border-text-dim"
|
|
5195
5388
|
};
|
|
5196
|
-
var ActivityTimeline = (0,
|
|
5389
|
+
var ActivityTimeline = (0, import_react74.forwardRef)(
|
|
5197
5390
|
function ActivityTimeline2({ events, relativeNow, className, ...props }, ref) {
|
|
5198
5391
|
const now = relativeNow ?? /* @__PURE__ */ new Date();
|
|
5199
|
-
return /* @__PURE__ */ (0,
|
|
5392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
5200
5393
|
"ol",
|
|
5201
5394
|
{
|
|
5202
5395
|
ref,
|
|
@@ -5209,8 +5402,8 @@ var ActivityTimeline = (0, import_react73.forwardRef)(
|
|
|
5209
5402
|
children: events.map((event) => {
|
|
5210
5403
|
const tone = event.tone ?? "accent";
|
|
5211
5404
|
const time = formatRelative(event.at, now);
|
|
5212
|
-
return /* @__PURE__ */ (0,
|
|
5213
|
-
/* @__PURE__ */ (0,
|
|
5405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("li", { className: "relative mb-4 last:mb-0", children: [
|
|
5406
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
5214
5407
|
"span",
|
|
5215
5408
|
{
|
|
5216
5409
|
"aria-hidden": true,
|
|
@@ -5220,16 +5413,16 @@ var ActivityTimeline = (0, import_react73.forwardRef)(
|
|
|
5220
5413
|
)
|
|
5221
5414
|
}
|
|
5222
5415
|
),
|
|
5223
|
-
/* @__PURE__ */ (0,
|
|
5224
|
-
event.icon && /* @__PURE__ */ (0,
|
|
5225
|
-
/* @__PURE__ */ (0,
|
|
5226
|
-
time && /* @__PURE__ */ (0,
|
|
5416
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-baseline gap-2", children: [
|
|
5417
|
+
event.icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
|
|
5418
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "text-[13px] font-medium", children: event.title }),
|
|
5419
|
+
time && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
|
|
5227
5420
|
] }),
|
|
5228
|
-
event.actor && /* @__PURE__ */ (0,
|
|
5229
|
-
event.actor.avatar && /* @__PURE__ */ (0,
|
|
5230
|
-
/* @__PURE__ */ (0,
|
|
5421
|
+
event.actor && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
|
|
5422
|
+
event.actor.avatar && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
|
|
5423
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: event.actor.name })
|
|
5231
5424
|
] }),
|
|
5232
|
-
event.payload && /* @__PURE__ */ (0,
|
|
5425
|
+
event.payload && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "border-border bg-panel-2 mt-2 rounded-md border px-3 py-2 font-mono text-[11px] leading-[1.5]", children: event.payload })
|
|
5233
5426
|
] }, event.id);
|
|
5234
5427
|
})
|
|
5235
5428
|
}
|
|
@@ -5239,9 +5432,9 @@ var ActivityTimeline = (0, import_react73.forwardRef)(
|
|
|
5239
5432
|
ActivityTimeline.displayName = "ActivityTimeline";
|
|
5240
5433
|
|
|
5241
5434
|
// src/patterns/Topbar/Topbar.tsx
|
|
5242
|
-
var
|
|
5243
|
-
var
|
|
5244
|
-
var Topbar = (0,
|
|
5435
|
+
var import_react75 = require("react");
|
|
5436
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
5437
|
+
var Topbar = (0, import_react75.forwardRef)(function Topbar2({
|
|
5245
5438
|
title,
|
|
5246
5439
|
eyebrow,
|
|
5247
5440
|
leading,
|
|
@@ -5255,7 +5448,7 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5255
5448
|
}, ref) {
|
|
5256
5449
|
const isTouch = density === "touch";
|
|
5257
5450
|
const backHandler = typeof back === "function" ? back : back ? onBack : void 0;
|
|
5258
|
-
return /* @__PURE__ */ (0,
|
|
5451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
|
|
5259
5452
|
"header",
|
|
5260
5453
|
{
|
|
5261
5454
|
ref,
|
|
@@ -5266,7 +5459,7 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5266
5459
|
),
|
|
5267
5460
|
...props,
|
|
5268
5461
|
children: [
|
|
5269
|
-
isTouch && back && /* @__PURE__ */ (0,
|
|
5462
|
+
isTouch && back && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
5270
5463
|
"button",
|
|
5271
5464
|
{
|
|
5272
5465
|
type: "button",
|
|
@@ -5280,7 +5473,7 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5280
5473
|
"hover:bg-panel-2 h-touch w-touch",
|
|
5281
5474
|
"focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
|
|
5282
5475
|
),
|
|
5283
|
-
children: /* @__PURE__ */ (0,
|
|
5476
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
5284
5477
|
"svg",
|
|
5285
5478
|
{
|
|
5286
5479
|
width: "20",
|
|
@@ -5290,15 +5483,15 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5290
5483
|
stroke: "currentColor",
|
|
5291
5484
|
strokeWidth: "2",
|
|
5292
5485
|
"aria-hidden": true,
|
|
5293
|
-
children: /* @__PURE__ */ (0,
|
|
5486
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "m15 18-6-6 6-6" })
|
|
5294
5487
|
}
|
|
5295
5488
|
)
|
|
5296
5489
|
}
|
|
5297
5490
|
),
|
|
5298
5491
|
leading,
|
|
5299
|
-
(title || isTouch && eyebrow) && /* @__PURE__ */ (0,
|
|
5300
|
-
isTouch && eyebrow && /* @__PURE__ */ (0,
|
|
5301
|
-
title && /* @__PURE__ */ (0,
|
|
5492
|
+
(title || isTouch && eyebrow) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
|
|
5493
|
+
isTouch && eyebrow && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
|
|
5494
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
5302
5495
|
"div",
|
|
5303
5496
|
{
|
|
5304
5497
|
className: cn(
|
|
@@ -5308,8 +5501,8 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5308
5501
|
}
|
|
5309
5502
|
)
|
|
5310
5503
|
] }),
|
|
5311
|
-
!isTouch && /* @__PURE__ */ (0,
|
|
5312
|
-
actions && /* @__PURE__ */ (0,
|
|
5504
|
+
!isTouch && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-1 items-center" }),
|
|
5505
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
|
|
5313
5506
|
children
|
|
5314
5507
|
]
|
|
5315
5508
|
}
|
|
@@ -5318,8 +5511,8 @@ var Topbar = (0, import_react74.forwardRef)(function Topbar2({
|
|
|
5318
5511
|
Topbar.displayName = "Topbar";
|
|
5319
5512
|
|
|
5320
5513
|
// src/patterns/Tree/Tree.tsx
|
|
5321
|
-
var
|
|
5322
|
-
var
|
|
5514
|
+
var import_react76 = require("react");
|
|
5515
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
5323
5516
|
var EMPTY_SET2 = /* @__PURE__ */ new Set();
|
|
5324
5517
|
function flattenVisible(items, expanded, level, parentId, out) {
|
|
5325
5518
|
for (const item of items) {
|
|
@@ -5330,7 +5523,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
|
|
|
5330
5523
|
}
|
|
5331
5524
|
}
|
|
5332
5525
|
}
|
|
5333
|
-
var Tree = (0,
|
|
5526
|
+
var Tree = (0, import_react76.forwardRef)(function Tree2({
|
|
5334
5527
|
items,
|
|
5335
5528
|
expanded: expandedProp,
|
|
5336
5529
|
defaultExpanded,
|
|
@@ -5353,24 +5546,24 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5353
5546
|
onChange: onValueChange
|
|
5354
5547
|
});
|
|
5355
5548
|
const expandedSet = expanded ?? EMPTY_SET2;
|
|
5356
|
-
const flatVisible = (0,
|
|
5549
|
+
const flatVisible = (0, import_react76.useMemo)(() => {
|
|
5357
5550
|
const out = [];
|
|
5358
5551
|
flattenVisible(items, expandedSet, 1, null, out);
|
|
5359
5552
|
return out;
|
|
5360
5553
|
}, [items, expandedSet]);
|
|
5361
|
-
const [activeId, setActiveId] = (0,
|
|
5362
|
-
(0,
|
|
5554
|
+
const [activeId, setActiveId] = (0, import_react76.useState)(null);
|
|
5555
|
+
(0, import_react76.useEffect)(() => {
|
|
5363
5556
|
if (activeId && !flatVisible.some((f) => f.id === activeId)) {
|
|
5364
5557
|
setActiveId(null);
|
|
5365
5558
|
}
|
|
5366
5559
|
}, [activeId, flatVisible]);
|
|
5367
|
-
const tabStopId = (0,
|
|
5560
|
+
const tabStopId = (0, import_react76.useMemo)(() => {
|
|
5368
5561
|
if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
|
|
5369
5562
|
if (value && flatVisible.some((f) => f.id === value)) return value;
|
|
5370
5563
|
return flatVisible[0]?.id ?? null;
|
|
5371
5564
|
}, [activeId, flatVisible, value]);
|
|
5372
|
-
const listRef = (0,
|
|
5373
|
-
const setRefs = (0,
|
|
5565
|
+
const listRef = (0, import_react76.useRef)(null);
|
|
5566
|
+
const setRefs = (0, import_react76.useCallback)(
|
|
5374
5567
|
(node) => {
|
|
5375
5568
|
listRef.current = node;
|
|
5376
5569
|
if (typeof ref === "function") ref(node);
|
|
@@ -5378,20 +5571,20 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5378
5571
|
},
|
|
5379
5572
|
[ref]
|
|
5380
5573
|
);
|
|
5381
|
-
const focusItem = (0,
|
|
5574
|
+
const focusItem = (0, import_react76.useCallback)((id) => {
|
|
5382
5575
|
const root = listRef.current;
|
|
5383
5576
|
if (!root) return;
|
|
5384
5577
|
const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
|
|
5385
5578
|
el?.focus();
|
|
5386
5579
|
}, []);
|
|
5387
|
-
const moveActive = (0,
|
|
5580
|
+
const moveActive = (0, import_react76.useCallback)(
|
|
5388
5581
|
(id) => {
|
|
5389
5582
|
setActiveId(id);
|
|
5390
5583
|
queueMicrotask(() => focusItem(id));
|
|
5391
5584
|
},
|
|
5392
5585
|
[focusItem]
|
|
5393
5586
|
);
|
|
5394
|
-
const toggle = (0,
|
|
5587
|
+
const toggle = (0, import_react76.useCallback)(
|
|
5395
5588
|
(id) => {
|
|
5396
5589
|
setExpanded((prev) => {
|
|
5397
5590
|
const next = new Set(prev ?? EMPTY_SET2);
|
|
@@ -5402,7 +5595,7 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5402
5595
|
},
|
|
5403
5596
|
[setExpanded]
|
|
5404
5597
|
);
|
|
5405
|
-
const expand = (0,
|
|
5598
|
+
const expand = (0, import_react76.useCallback)(
|
|
5406
5599
|
(id) => {
|
|
5407
5600
|
setExpanded((prev) => {
|
|
5408
5601
|
const base = prev ?? EMPTY_SET2;
|
|
@@ -5414,7 +5607,7 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5414
5607
|
},
|
|
5415
5608
|
[setExpanded]
|
|
5416
5609
|
);
|
|
5417
|
-
const collapse = (0,
|
|
5610
|
+
const collapse = (0, import_react76.useCallback)(
|
|
5418
5611
|
(id) => {
|
|
5419
5612
|
setExpanded((prev) => {
|
|
5420
5613
|
const base = prev ?? EMPTY_SET2;
|
|
@@ -5426,13 +5619,13 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5426
5619
|
},
|
|
5427
5620
|
[setExpanded]
|
|
5428
5621
|
);
|
|
5429
|
-
const selectItem = (0,
|
|
5622
|
+
const selectItem = (0, import_react76.useCallback)(
|
|
5430
5623
|
(id) => {
|
|
5431
5624
|
setValue(id);
|
|
5432
5625
|
},
|
|
5433
5626
|
[setValue]
|
|
5434
5627
|
);
|
|
5435
|
-
const handleKeyDown = (0,
|
|
5628
|
+
const handleKeyDown = (0, import_react76.useCallback)(
|
|
5436
5629
|
(e) => {
|
|
5437
5630
|
onKeyDown?.(e);
|
|
5438
5631
|
if (e.defaultPrevented) return;
|
|
@@ -5512,7 +5705,7 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5512
5705
|
toggle
|
|
5513
5706
|
]
|
|
5514
5707
|
);
|
|
5515
|
-
return /* @__PURE__ */ (0,
|
|
5708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
5516
5709
|
"ul",
|
|
5517
5710
|
{
|
|
5518
5711
|
ref: setRefs,
|
|
@@ -5520,7 +5713,7 @@ var Tree = (0, import_react75.forwardRef)(function Tree2({
|
|
|
5520
5713
|
className: cn("flex flex-col gap-px text-[12px]", className),
|
|
5521
5714
|
onKeyDown: handleKeyDown,
|
|
5522
5715
|
...props,
|
|
5523
|
-
children: items.map((item) => /* @__PURE__ */ (0,
|
|
5716
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
5524
5717
|
TreeItemRow,
|
|
5525
5718
|
{
|
|
5526
5719
|
item,
|
|
@@ -5555,8 +5748,8 @@ function TreeItemRow({
|
|
|
5555
5748
|
const isExpanded = hasChildren && expanded.has(item.id);
|
|
5556
5749
|
const isSelected = selected === item.id;
|
|
5557
5750
|
const isTabStop = tabStopId === item.id;
|
|
5558
|
-
return /* @__PURE__ */ (0,
|
|
5559
|
-
/* @__PURE__ */ (0,
|
|
5751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("li", { role: "none", children: [
|
|
5752
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
5560
5753
|
"div",
|
|
5561
5754
|
{
|
|
5562
5755
|
role: "treeitem",
|
|
@@ -5579,14 +5772,14 @@ function TreeItemRow({
|
|
|
5579
5772
|
isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
|
|
5580
5773
|
),
|
|
5581
5774
|
children: [
|
|
5582
|
-
/* @__PURE__ */ (0,
|
|
5583
|
-
item.icon && /* @__PURE__ */ (0,
|
|
5584
|
-
/* @__PURE__ */ (0,
|
|
5775
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
|
|
5776
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
|
|
5777
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "flex-1 truncate", children: item.label }),
|
|
5585
5778
|
item.trailing
|
|
5586
5779
|
]
|
|
5587
5780
|
}
|
|
5588
5781
|
),
|
|
5589
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
5782
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
5590
5783
|
TreeItemRow,
|
|
5591
5784
|
{
|
|
5592
5785
|
item: child,
|
|
@@ -5605,9 +5798,9 @@ function TreeItemRow({
|
|
|
5605
5798
|
|
|
5606
5799
|
// src/patterns/WizardDialog/WizardDialog.tsx
|
|
5607
5800
|
var RadixDialog5 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
5608
|
-
var
|
|
5609
|
-
var
|
|
5610
|
-
var WizardDialog = (0,
|
|
5801
|
+
var import_react77 = require("react");
|
|
5802
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
5803
|
+
var WizardDialog = (0, import_react77.forwardRef)(function WizardDialog2({
|
|
5611
5804
|
open,
|
|
5612
5805
|
defaultOpen,
|
|
5613
5806
|
onOpenChange,
|
|
@@ -5623,19 +5816,19 @@ var WizardDialog = (0, import_react76.forwardRef)(function WizardDialog2({
|
|
|
5623
5816
|
cancelLabel,
|
|
5624
5817
|
onCancel
|
|
5625
5818
|
}, ref) {
|
|
5626
|
-
const [current, setCurrent] = (0,
|
|
5819
|
+
const [current, setCurrent] = (0, import_react77.useState)(initialStep);
|
|
5627
5820
|
const total = steps.length;
|
|
5628
5821
|
const safeCurrent = Math.min(current, Math.max(0, total - 1));
|
|
5629
5822
|
const step = steps[safeCurrent];
|
|
5630
|
-
const goTo = (0,
|
|
5823
|
+
const goTo = (0, import_react77.useCallback)(
|
|
5631
5824
|
(index) => {
|
|
5632
5825
|
setCurrent(Math.min(Math.max(0, index), Math.max(0, total - 1)));
|
|
5633
5826
|
},
|
|
5634
5827
|
[total]
|
|
5635
5828
|
);
|
|
5636
|
-
const goNext = (0,
|
|
5637
|
-
const goBack = (0,
|
|
5638
|
-
const ctx = (0,
|
|
5829
|
+
const goNext = (0, import_react77.useCallback)(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
|
|
5830
|
+
const goBack = (0, import_react77.useCallback)(() => setCurrent((c) => Math.max(c - 1, 0)), []);
|
|
5831
|
+
const ctx = (0, import_react77.useMemo)(
|
|
5639
5832
|
() => ({
|
|
5640
5833
|
current: safeCurrent,
|
|
5641
5834
|
total,
|
|
@@ -5647,7 +5840,7 @@ var WizardDialog = (0, import_react76.forwardRef)(function WizardDialog2({
|
|
|
5647
5840
|
}),
|
|
5648
5841
|
[safeCurrent, total, goNext, goBack, goTo]
|
|
5649
5842
|
);
|
|
5650
|
-
const stepperSteps = (0,
|
|
5843
|
+
const stepperSteps = (0, import_react77.useMemo)(() => steps.map((s) => ({ id: s.id, label: s.label })), [steps]);
|
|
5651
5844
|
if (!step) return null;
|
|
5652
5845
|
const canAdvance = step.canAdvance ? step.canAdvance(ctx) : true;
|
|
5653
5846
|
const body = typeof step.content === "function" ? step.content(ctx) : step.content;
|
|
@@ -5658,23 +5851,23 @@ var WizardDialog = (0, import_react76.forwardRef)(function WizardDialog2({
|
|
|
5658
5851
|
goNext();
|
|
5659
5852
|
}
|
|
5660
5853
|
};
|
|
5661
|
-
return /* @__PURE__ */ (0,
|
|
5662
|
-
title && /* @__PURE__ */ (0,
|
|
5663
|
-
description && /* @__PURE__ */ (0,
|
|
5664
|
-
/* @__PURE__ */ (0,
|
|
5665
|
-
/* @__PURE__ */ (0,
|
|
5666
|
-
/* @__PURE__ */ (0,
|
|
5667
|
-
cancelLabel && /* @__PURE__ */ (0,
|
|
5668
|
-
/* @__PURE__ */ (0,
|
|
5669
|
-
/* @__PURE__ */ (0,
|
|
5854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(DialogContent, { ref, width, children: [
|
|
5855
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WizardTitle, { children: title }),
|
|
5856
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WizardDescription, { children: description }),
|
|
5857
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
|
|
5858
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-5", children: body }),
|
|
5859
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex justify-end gap-2", children: [
|
|
5860
|
+
cancelLabel && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
|
|
5861
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
|
|
5862
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
|
|
5670
5863
|
] })
|
|
5671
5864
|
] }) });
|
|
5672
5865
|
});
|
|
5673
5866
|
function WizardTitle({ children }) {
|
|
5674
|
-
return /* @__PURE__ */ (0,
|
|
5867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(RadixDialog5.Title, { className: "mb-2 text-[16px] font-medium", children });
|
|
5675
5868
|
}
|
|
5676
5869
|
function WizardDescription({ children }) {
|
|
5677
|
-
return /* @__PURE__ */ (0,
|
|
5870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(RadixDialog5.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
|
|
5678
5871
|
}
|
|
5679
5872
|
WizardDialog.displayName = "WizardDialog";
|
|
5680
5873
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -5740,6 +5933,7 @@ WizardDialog.displayName = "WizardDialog";
|
|
|
5740
5933
|
HoverCardRoot,
|
|
5741
5934
|
HoverCardTrigger,
|
|
5742
5935
|
IconButton,
|
|
5936
|
+
InlineEdit,
|
|
5743
5937
|
Input,
|
|
5744
5938
|
Kbd,
|
|
5745
5939
|
LargeTitle,
|
|
@@ -5783,6 +5977,7 @@ WizardDialog.displayName = "WizardDialog";
|
|
|
5783
5977
|
SelectValue,
|
|
5784
5978
|
Sheet,
|
|
5785
5979
|
Sidebar,
|
|
5980
|
+
SimpleTooltip,
|
|
5786
5981
|
Skeleton,
|
|
5787
5982
|
SkeletonGroup,
|
|
5788
5983
|
Slider,
|
|
@@ -5809,7 +6004,6 @@ WizardDialog.displayName = "WizardDialog";
|
|
|
5809
6004
|
TooltipContent,
|
|
5810
6005
|
TooltipPortal,
|
|
5811
6006
|
TooltipProvider,
|
|
5812
|
-
TooltipRoot,
|
|
5813
6007
|
TooltipTrigger,
|
|
5814
6008
|
Topbar,
|
|
5815
6009
|
Tree,
|