@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.js
CHANGED
|
@@ -537,11 +537,205 @@ function Field({ label, hint, error, required, className, children, ...props })
|
|
|
537
537
|
] });
|
|
538
538
|
}
|
|
539
539
|
|
|
540
|
-
// src/components/
|
|
540
|
+
// src/components/InlineEdit/InlineEdit.tsx
|
|
541
541
|
import { cva as cva3 } from "class-variance-authority";
|
|
542
|
-
import {
|
|
542
|
+
import {
|
|
543
|
+
forwardRef as forwardRef7,
|
|
544
|
+
useCallback as useCallback5,
|
|
545
|
+
useEffect as useEffect5,
|
|
546
|
+
useImperativeHandle,
|
|
547
|
+
useRef as useRef3,
|
|
548
|
+
useState as useState5
|
|
549
|
+
} from "react";
|
|
543
550
|
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
544
|
-
var
|
|
551
|
+
var displayStyles = cva3(
|
|
552
|
+
[
|
|
553
|
+
"inline-block cursor-text rounded-[3px] px-[2px] -mx-[2px]",
|
|
554
|
+
"outline-none transition-[background,box-shadow] duration-(--duration-micro)",
|
|
555
|
+
"hover:bg-panel-2",
|
|
556
|
+
"focus-visible:ring-[2px] focus-visible:ring-accent-dim"
|
|
557
|
+
],
|
|
558
|
+
{
|
|
559
|
+
variants: {
|
|
560
|
+
size: {
|
|
561
|
+
sm: "text-[12px]",
|
|
562
|
+
md: "text-[13px]",
|
|
563
|
+
lg: "text-[14px]"
|
|
564
|
+
}
|
|
565
|
+
},
|
|
566
|
+
defaultVariants: { size: "md" }
|
|
567
|
+
}
|
|
568
|
+
);
|
|
569
|
+
var inputStyles = cva3(
|
|
570
|
+
[
|
|
571
|
+
"border bg-panel text-text font-sans outline-none",
|
|
572
|
+
"transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
573
|
+
"focus:ring-[3px] focus:ring-accent-dim focus:border-accent",
|
|
574
|
+
"placeholder:text-text-dim"
|
|
575
|
+
],
|
|
576
|
+
{
|
|
577
|
+
variants: {
|
|
578
|
+
size: {
|
|
579
|
+
sm: "h-6 px-2 text-[12px] rounded-md",
|
|
580
|
+
md: "h-[28px] px-[8px] text-[13px] rounded-md",
|
|
581
|
+
lg: "h-8 px-[10px] text-[14px] rounded-md"
|
|
582
|
+
},
|
|
583
|
+
tone: {
|
|
584
|
+
default: "border-border",
|
|
585
|
+
err: "border-err focus:border-err focus:ring-err/30"
|
|
586
|
+
}
|
|
587
|
+
},
|
|
588
|
+
defaultVariants: { size: "md", tone: "default" }
|
|
589
|
+
}
|
|
590
|
+
);
|
|
591
|
+
var InlineEdit = forwardRef7(function InlineEdit2({
|
|
592
|
+
value,
|
|
593
|
+
onValueChange,
|
|
594
|
+
as = "span",
|
|
595
|
+
activate = "dblclick",
|
|
596
|
+
commitOnBlur = true,
|
|
597
|
+
validate,
|
|
598
|
+
placeholder = "Empty",
|
|
599
|
+
disabled = false,
|
|
600
|
+
editing: editingProp,
|
|
601
|
+
onEditingChange,
|
|
602
|
+
size,
|
|
603
|
+
className,
|
|
604
|
+
inputClassName,
|
|
605
|
+
"aria-label": ariaLabel,
|
|
606
|
+
...rest
|
|
607
|
+
}, forwardedRef) {
|
|
608
|
+
const [editing, setEditing] = useControllableState({
|
|
609
|
+
value: editingProp,
|
|
610
|
+
defaultValue: false,
|
|
611
|
+
onChange: onEditingChange
|
|
612
|
+
});
|
|
613
|
+
const [draft, setDraft] = useState5(value);
|
|
614
|
+
const [error, setError] = useState5(null);
|
|
615
|
+
const inputRef = useRef3(null);
|
|
616
|
+
useEffect5(() => {
|
|
617
|
+
if (!editing) {
|
|
618
|
+
setDraft(value);
|
|
619
|
+
setError(null);
|
|
620
|
+
}
|
|
621
|
+
}, [editing, value]);
|
|
622
|
+
useEffect5(() => {
|
|
623
|
+
if (!editing) return;
|
|
624
|
+
const el = inputRef.current;
|
|
625
|
+
if (!el) return;
|
|
626
|
+
el.focus();
|
|
627
|
+
el.select();
|
|
628
|
+
}, [editing]);
|
|
629
|
+
const commit = useCallback5(() => {
|
|
630
|
+
const next = draft;
|
|
631
|
+
if (validate) {
|
|
632
|
+
const msg = validate(next);
|
|
633
|
+
if (msg !== null) {
|
|
634
|
+
setError(msg);
|
|
635
|
+
return;
|
|
636
|
+
}
|
|
637
|
+
}
|
|
638
|
+
setError(null);
|
|
639
|
+
setEditing(false);
|
|
640
|
+
if (next !== value) onValueChange(next);
|
|
641
|
+
}, [draft, validate, value, onValueChange, setEditing]);
|
|
642
|
+
const cancel = useCallback5(() => {
|
|
643
|
+
setDraft(value);
|
|
644
|
+
setError(null);
|
|
645
|
+
setEditing(false);
|
|
646
|
+
}, [value, setEditing]);
|
|
647
|
+
const beginEdit = useCallback5(() => {
|
|
648
|
+
if (disabled) return;
|
|
649
|
+
setDraft(value);
|
|
650
|
+
setError(null);
|
|
651
|
+
setEditing(true);
|
|
652
|
+
}, [disabled, value, setEditing]);
|
|
653
|
+
useImperativeHandle(forwardedRef, () => ({ edit: beginEdit, cancel }), [beginEdit, cancel]);
|
|
654
|
+
const onDisplayKeyDown = (e) => {
|
|
655
|
+
if (disabled) return;
|
|
656
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
657
|
+
e.preventDefault();
|
|
658
|
+
beginEdit();
|
|
659
|
+
}
|
|
660
|
+
};
|
|
661
|
+
const onDisplayActivate = (e) => {
|
|
662
|
+
if (disabled) return;
|
|
663
|
+
if (activate === "dblclick" && e.detail >= 2 || activate === "click" && e.detail >= 1) {
|
|
664
|
+
e.preventDefault();
|
|
665
|
+
beginEdit();
|
|
666
|
+
}
|
|
667
|
+
};
|
|
668
|
+
const onInputKeyDown = (e) => {
|
|
669
|
+
if (e.key === "Enter") {
|
|
670
|
+
e.preventDefault();
|
|
671
|
+
commit();
|
|
672
|
+
} else if (e.key === "Escape") {
|
|
673
|
+
e.preventDefault();
|
|
674
|
+
cancel();
|
|
675
|
+
}
|
|
676
|
+
};
|
|
677
|
+
if (editing) {
|
|
678
|
+
const errorId = `${rest.id ?? "inline-edit"}-error`;
|
|
679
|
+
const inputAriaLabel = ariaLabel ?? value ?? placeholder;
|
|
680
|
+
return /* @__PURE__ */ jsxs5("span", { className: "inline-flex flex-col items-stretch gap-1", children: [
|
|
681
|
+
/* @__PURE__ */ jsx8(
|
|
682
|
+
"input",
|
|
683
|
+
{
|
|
684
|
+
ref: inputRef,
|
|
685
|
+
type: "text",
|
|
686
|
+
value: draft,
|
|
687
|
+
onChange: (e) => {
|
|
688
|
+
setDraft(e.target.value);
|
|
689
|
+
if (error) setError(null);
|
|
690
|
+
},
|
|
691
|
+
onKeyDown: onInputKeyDown,
|
|
692
|
+
onBlur: () => {
|
|
693
|
+
if (commitOnBlur) commit();
|
|
694
|
+
else cancel();
|
|
695
|
+
},
|
|
696
|
+
placeholder,
|
|
697
|
+
"aria-label": inputAriaLabel,
|
|
698
|
+
"aria-invalid": error ? true : void 0,
|
|
699
|
+
"aria-errormessage": error ? errorId : void 0,
|
|
700
|
+
className: cn(inputStyles({ size, tone: error ? "err" : "default" }), inputClassName)
|
|
701
|
+
}
|
|
702
|
+
),
|
|
703
|
+
error && /* @__PURE__ */ jsx8("span", { id: errorId, role: "alert", className: "text-err text-[11px]", children: error })
|
|
704
|
+
] });
|
|
705
|
+
}
|
|
706
|
+
const Tag3 = as;
|
|
707
|
+
const isHeading = as === "h1" || as === "h2" || as === "h3";
|
|
708
|
+
const isEmpty = value.length === 0;
|
|
709
|
+
const displayText = isEmpty ? placeholder : value;
|
|
710
|
+
return /* @__PURE__ */ jsx8(
|
|
711
|
+
Tag3,
|
|
712
|
+
{
|
|
713
|
+
role: isHeading ? void 0 : "button",
|
|
714
|
+
"aria-roledescription": isHeading ? "editable" : void 0,
|
|
715
|
+
tabIndex: disabled ? -1 : 0,
|
|
716
|
+
"aria-disabled": disabled || void 0,
|
|
717
|
+
"aria-label": ariaLabel ?? `Edit ${value || placeholder}`,
|
|
718
|
+
"data-empty": isEmpty || void 0,
|
|
719
|
+
onClick: onDisplayActivate,
|
|
720
|
+
onKeyDown: onDisplayKeyDown,
|
|
721
|
+
className: cn(
|
|
722
|
+
displayStyles({ size }),
|
|
723
|
+
isEmpty && "text-text-dim italic",
|
|
724
|
+
disabled && "cursor-not-allowed opacity-50 hover:bg-transparent",
|
|
725
|
+
className
|
|
726
|
+
),
|
|
727
|
+
...rest,
|
|
728
|
+
children: displayText
|
|
729
|
+
}
|
|
730
|
+
);
|
|
731
|
+
});
|
|
732
|
+
InlineEdit.displayName = "InlineEdit";
|
|
733
|
+
|
|
734
|
+
// src/components/Input/Input.tsx
|
|
735
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
736
|
+
import { forwardRef as forwardRef8 } from "react";
|
|
737
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
738
|
+
var inputWrapperStyles = cva4(
|
|
545
739
|
[
|
|
546
740
|
"flex items-center gap-[6px] font-sans transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
547
741
|
"border focus-within:ring-[3px]",
|
|
@@ -573,16 +767,16 @@ var inputWrapperStyles = cva3(
|
|
|
573
767
|
defaultVariants: { size: "md", tone: "default", density: "comfortable" }
|
|
574
768
|
}
|
|
575
769
|
);
|
|
576
|
-
var Input =
|
|
770
|
+
var Input = forwardRef8(function Input2({ size, tone, density, icon, trailing, error, width, className, style, disabled, ...props }, ref) {
|
|
577
771
|
const computedTone = error ? "err" : tone;
|
|
578
|
-
return /* @__PURE__ */
|
|
772
|
+
return /* @__PURE__ */ jsxs6(
|
|
579
773
|
"div",
|
|
580
774
|
{
|
|
581
775
|
className: cn(inputWrapperStyles({ size, tone: computedTone, density }), className),
|
|
582
776
|
style: { width, ...style },
|
|
583
777
|
children: [
|
|
584
|
-
icon && /* @__PURE__ */
|
|
585
|
-
/* @__PURE__ */
|
|
778
|
+
icon && /* @__PURE__ */ jsx9("span", { className: "text-text-dim leading-none", children: icon }),
|
|
779
|
+
/* @__PURE__ */ jsx9(
|
|
586
780
|
"input",
|
|
587
781
|
{
|
|
588
782
|
ref,
|
|
@@ -596,7 +790,7 @@ var Input = forwardRef7(function Input2({ size, tone, density, icon, trailing, e
|
|
|
596
790
|
...props
|
|
597
791
|
}
|
|
598
792
|
),
|
|
599
|
-
trailing && /* @__PURE__ */
|
|
793
|
+
trailing && /* @__PURE__ */ jsx9("span", { className: "text-text-dim text-[11px]", children: trailing })
|
|
600
794
|
]
|
|
601
795
|
}
|
|
602
796
|
);
|
|
@@ -604,9 +798,9 @@ var Input = forwardRef7(function Input2({ size, tone, density, icon, trailing, e
|
|
|
604
798
|
Input.displayName = "Input";
|
|
605
799
|
|
|
606
800
|
// src/components/Input/SearchInput.tsx
|
|
607
|
-
import { forwardRef as
|
|
608
|
-
import { jsx as
|
|
609
|
-
var SearchInput =
|
|
801
|
+
import { forwardRef as forwardRef9 } from "react";
|
|
802
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
803
|
+
var SearchInput = forwardRef9(function SearchInput2({
|
|
610
804
|
shortcut,
|
|
611
805
|
width,
|
|
612
806
|
density = "comfortable",
|
|
@@ -619,7 +813,7 @@ var SearchInput = forwardRef8(function SearchInput2({
|
|
|
619
813
|
const isTouch = density === "touch";
|
|
620
814
|
const resolvedWidth = width ?? (isTouch ? "100%" : 360);
|
|
621
815
|
const resolvedShortcut = shortcut ?? (isTouch ? void 0 : "\u2318K");
|
|
622
|
-
return /* @__PURE__ */
|
|
816
|
+
return /* @__PURE__ */ jsxs7(
|
|
623
817
|
"div",
|
|
624
818
|
{
|
|
625
819
|
className: cn(
|
|
@@ -632,8 +826,8 @@ var SearchInput = forwardRef8(function SearchInput2({
|
|
|
632
826
|
),
|
|
633
827
|
style: { width: resolvedWidth, ...style },
|
|
634
828
|
children: [
|
|
635
|
-
/* @__PURE__ */
|
|
636
|
-
/* @__PURE__ */
|
|
829
|
+
/* @__PURE__ */ jsx10("span", { className: cn("text-text-dim leading-none", isTouch && "text-[18px]"), "aria-hidden": true, children: "\u2315" }),
|
|
830
|
+
/* @__PURE__ */ jsx10(
|
|
637
831
|
"input",
|
|
638
832
|
{
|
|
639
833
|
ref,
|
|
@@ -647,7 +841,7 @@ var SearchInput = forwardRef8(function SearchInput2({
|
|
|
647
841
|
...props
|
|
648
842
|
}
|
|
649
843
|
),
|
|
650
|
-
resolvedShortcut && /* @__PURE__ */
|
|
844
|
+
resolvedShortcut && /* @__PURE__ */ jsx10("kbd", { className: "text-text-dim border-border rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: resolvedShortcut })
|
|
651
845
|
]
|
|
652
846
|
}
|
|
653
847
|
);
|
|
@@ -656,21 +850,21 @@ SearchInput.displayName = "SearchInput";
|
|
|
656
850
|
|
|
657
851
|
// src/components/OTP/OTP.tsx
|
|
658
852
|
import {
|
|
659
|
-
forwardRef as
|
|
853
|
+
forwardRef as forwardRef10,
|
|
660
854
|
useId as useId3,
|
|
661
|
-
useImperativeHandle,
|
|
662
|
-
useRef as
|
|
663
|
-
useState as
|
|
855
|
+
useImperativeHandle as useImperativeHandle2,
|
|
856
|
+
useRef as useRef4,
|
|
857
|
+
useState as useState6
|
|
664
858
|
} from "react";
|
|
665
|
-
import { jsx as
|
|
666
|
-
var OTP =
|
|
859
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
860
|
+
var OTP = forwardRef10(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
|
|
667
861
|
const baseId = useId3();
|
|
668
|
-
const refs =
|
|
669
|
-
const [values, setValues] =
|
|
862
|
+
const refs = useRef4([]);
|
|
863
|
+
const [values, setValues] = useState6(
|
|
670
864
|
() => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
|
|
671
865
|
);
|
|
672
|
-
const [completedAnnouncement, setCompletedAnnouncement] =
|
|
673
|
-
|
|
866
|
+
const [completedAnnouncement, setCompletedAnnouncement] = useState6("");
|
|
867
|
+
useImperativeHandle2(ref, () => ({
|
|
674
868
|
focus: () => refs.current[0]?.focus(),
|
|
675
869
|
reset: () => {
|
|
676
870
|
setValues(Array(length).fill(""));
|
|
@@ -720,8 +914,8 @@ var OTP = forwardRef9(function OTP2({ length = 6, onComplete, onChange, defaultV
|
|
|
720
914
|
}
|
|
721
915
|
refs.current[Math.min(pasted.length, length - 1)]?.focus();
|
|
722
916
|
};
|
|
723
|
-
return /* @__PURE__ */
|
|
724
|
-
values.map((c, i) => /* @__PURE__ */
|
|
917
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn("flex gap-2", className), children: [
|
|
918
|
+
values.map((c, i) => /* @__PURE__ */ jsx11(
|
|
725
919
|
"input",
|
|
726
920
|
{
|
|
727
921
|
id: `${baseId}-${i}`,
|
|
@@ -747,23 +941,23 @@ var OTP = forwardRef9(function OTP2({ length = 6, onComplete, onChange, defaultV
|
|
|
747
941
|
},
|
|
748
942
|
i
|
|
749
943
|
)),
|
|
750
|
-
/* @__PURE__ */
|
|
944
|
+
/* @__PURE__ */ jsx11("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: completedAnnouncement })
|
|
751
945
|
] });
|
|
752
946
|
});
|
|
753
947
|
OTP.displayName = "OTP";
|
|
754
948
|
|
|
755
949
|
// src/components/Radio/Radio.tsx
|
|
756
950
|
import * as RadixRadio from "@radix-ui/react-radio-group";
|
|
757
|
-
import { forwardRef as
|
|
758
|
-
import { jsx as
|
|
759
|
-
var RadioGroup =
|
|
760
|
-
return /* @__PURE__ */
|
|
951
|
+
import { forwardRef as forwardRef11, useId as useId4 } from "react";
|
|
952
|
+
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
953
|
+
var RadioGroup = forwardRef11(function RadioGroup2({ className, ...props }, ref) {
|
|
954
|
+
return /* @__PURE__ */ jsx12(RadixRadio.Root, { ref, className: cn("flex flex-col gap-2", className), ...props });
|
|
761
955
|
});
|
|
762
956
|
RadioGroup.displayName = "RadioGroup";
|
|
763
|
-
var Radio =
|
|
957
|
+
var Radio = forwardRef11(function Radio2({ label, className, id: idProp, ...props }, ref) {
|
|
764
958
|
const reactId = useId4();
|
|
765
959
|
const id = idProp ?? `radio-${reactId}`;
|
|
766
|
-
return /* @__PURE__ */
|
|
960
|
+
return /* @__PURE__ */ jsxs9(
|
|
767
961
|
"span",
|
|
768
962
|
{
|
|
769
963
|
className: cn(
|
|
@@ -772,7 +966,7 @@ var Radio = forwardRef10(function Radio2({ label, className, id: idProp, ...prop
|
|
|
772
966
|
className
|
|
773
967
|
),
|
|
774
968
|
children: [
|
|
775
|
-
/* @__PURE__ */
|
|
969
|
+
/* @__PURE__ */ jsx12(
|
|
776
970
|
RadixRadio.Item,
|
|
777
971
|
{
|
|
778
972
|
ref,
|
|
@@ -785,10 +979,10 @@ var Radio = forwardRef10(function Radio2({ label, className, id: idProp, ...prop
|
|
|
785
979
|
"focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
|
|
786
980
|
),
|
|
787
981
|
...props,
|
|
788
|
-
children: /* @__PURE__ */
|
|
982
|
+
children: /* @__PURE__ */ jsx12(RadixRadio.Indicator, { className: "bg-accent block h-[7px] w-[7px] rounded-full" })
|
|
789
983
|
}
|
|
790
984
|
),
|
|
791
|
-
label && /* @__PURE__ */
|
|
985
|
+
label && /* @__PURE__ */ jsx12("label", { htmlFor: id, className: "cursor-pointer text-[13px]", children: label })
|
|
792
986
|
]
|
|
793
987
|
}
|
|
794
988
|
);
|
|
@@ -797,8 +991,8 @@ Radio.displayName = "Radio";
|
|
|
797
991
|
|
|
798
992
|
// src/components/Select/Select.tsx
|
|
799
993
|
import * as RadixSelect from "@radix-ui/react-select";
|
|
800
|
-
import { forwardRef as
|
|
801
|
-
import { jsx as
|
|
994
|
+
import { forwardRef as forwardRef12 } from "react";
|
|
995
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
802
996
|
var SelectRoot = RadixSelect.Root;
|
|
803
997
|
var SelectValue = RadixSelect.Value;
|
|
804
998
|
var SelectGroup = RadixSelect.Group;
|
|
@@ -808,8 +1002,8 @@ var triggerClasses = {
|
|
|
808
1002
|
md: "h-[34px] px-[10px] text-[13px]",
|
|
809
1003
|
lg: "h-10 px-3 text-[14px]"
|
|
810
1004
|
};
|
|
811
|
-
var SelectTrigger =
|
|
812
|
-
return /* @__PURE__ */
|
|
1005
|
+
var SelectTrigger = forwardRef12(function SelectTrigger2({ size = "md", className, children, ...props }, ref) {
|
|
1006
|
+
return /* @__PURE__ */ jsxs10(
|
|
813
1007
|
RadixSelect.Trigger,
|
|
814
1008
|
{
|
|
815
1009
|
ref,
|
|
@@ -825,15 +1019,15 @@ var SelectTrigger = forwardRef11(function SelectTrigger2({ size = "md", classNam
|
|
|
825
1019
|
...props,
|
|
826
1020
|
children: [
|
|
827
1021
|
children,
|
|
828
|
-
/* @__PURE__ */
|
|
1022
|
+
/* @__PURE__ */ jsx13(RadixSelect.Icon, { className: "text-text-dim text-[11px] leading-none", children: "\u25BE" })
|
|
829
1023
|
]
|
|
830
1024
|
}
|
|
831
1025
|
);
|
|
832
1026
|
});
|
|
833
1027
|
SelectTrigger.displayName = "SelectTrigger";
|
|
834
|
-
var SelectContent =
|
|
1028
|
+
var SelectContent = forwardRef12(
|
|
835
1029
|
function SelectContent2({ className, children, position = "popper", sideOffset = 6, ...props }, ref) {
|
|
836
|
-
return /* @__PURE__ */
|
|
1030
|
+
return /* @__PURE__ */ jsx13(RadixSelect.Portal, { children: /* @__PURE__ */ jsx13(
|
|
837
1031
|
RadixSelect.Content,
|
|
838
1032
|
{
|
|
839
1033
|
ref,
|
|
@@ -845,15 +1039,15 @@ var SelectContent = forwardRef11(
|
|
|
845
1039
|
className
|
|
846
1040
|
),
|
|
847
1041
|
...props,
|
|
848
|
-
children: /* @__PURE__ */
|
|
1042
|
+
children: /* @__PURE__ */ jsx13(RadixSelect.Viewport, { children })
|
|
849
1043
|
}
|
|
850
1044
|
) });
|
|
851
1045
|
}
|
|
852
1046
|
);
|
|
853
1047
|
SelectContent.displayName = "SelectContent";
|
|
854
|
-
var SelectItem =
|
|
1048
|
+
var SelectItem = forwardRef12(
|
|
855
1049
|
function SelectItem2({ className, children, ...props }, ref) {
|
|
856
|
-
return /* @__PURE__ */
|
|
1050
|
+
return /* @__PURE__ */ jsx13(
|
|
857
1051
|
RadixSelect.Item,
|
|
858
1052
|
{
|
|
859
1053
|
ref,
|
|
@@ -865,7 +1059,7 @@ var SelectItem = forwardRef11(
|
|
|
865
1059
|
className
|
|
866
1060
|
),
|
|
867
1061
|
...props,
|
|
868
|
-
children: /* @__PURE__ */
|
|
1062
|
+
children: /* @__PURE__ */ jsx13(RadixSelect.ItemText, { children })
|
|
869
1063
|
}
|
|
870
1064
|
);
|
|
871
1065
|
}
|
|
@@ -880,30 +1074,30 @@ function Select({
|
|
|
880
1074
|
"aria-labelledby": ariaLabelledBy,
|
|
881
1075
|
...rootProps
|
|
882
1076
|
}) {
|
|
883
|
-
return /* @__PURE__ */
|
|
884
|
-
/* @__PURE__ */
|
|
1077
|
+
return /* @__PURE__ */ jsxs10(RadixSelect.Root, { ...rootProps, children: [
|
|
1078
|
+
/* @__PURE__ */ jsx13(
|
|
885
1079
|
SelectTrigger,
|
|
886
1080
|
{
|
|
887
1081
|
size,
|
|
888
1082
|
className,
|
|
889
1083
|
"aria-label": ariaLabel,
|
|
890
1084
|
"aria-labelledby": ariaLabelledBy,
|
|
891
|
-
children: /* @__PURE__ */
|
|
1085
|
+
children: /* @__PURE__ */ jsx13(SelectValue, { placeholder })
|
|
892
1086
|
}
|
|
893
1087
|
),
|
|
894
|
-
/* @__PURE__ */
|
|
1088
|
+
/* @__PURE__ */ jsx13(SelectContent, { children: options.map((opt) => {
|
|
895
1089
|
const value = typeof opt === "string" ? opt : opt.value;
|
|
896
1090
|
const label = typeof opt === "string" ? opt : opt.label;
|
|
897
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ jsx13(SelectItem, { value, children: label }, value);
|
|
898
1092
|
}) })
|
|
899
1093
|
] });
|
|
900
1094
|
}
|
|
901
1095
|
|
|
902
1096
|
// src/components/Slider/Slider.tsx
|
|
903
1097
|
import * as RadixSlider from "@radix-ui/react-slider";
|
|
904
|
-
import { forwardRef as
|
|
905
|
-
import { jsx as
|
|
906
|
-
var Slider =
|
|
1098
|
+
import { forwardRef as forwardRef13, useCallback as useCallback6, useState as useState7 } from "react";
|
|
1099
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1100
|
+
var Slider = forwardRef13(function Slider2({
|
|
907
1101
|
showValue,
|
|
908
1102
|
width = 240,
|
|
909
1103
|
className,
|
|
@@ -918,10 +1112,10 @@ var Slider = forwardRef12(function Slider2({
|
|
|
918
1112
|
const arrValue = Array.isArray(value) ? value : value !== void 0 ? [value] : void 0;
|
|
919
1113
|
const arrDefault = Array.isArray(defaultValue) ? defaultValue : defaultValue !== void 0 ? [defaultValue] : void 0;
|
|
920
1114
|
const isControlled = arrValue !== void 0;
|
|
921
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
1115
|
+
const [uncontrolledValue, setUncontrolledValue] = useState7(arrDefault);
|
|
922
1116
|
const currentValue = isControlled ? arrValue : uncontrolledValue;
|
|
923
1117
|
const wasScalar = !Array.isArray(value ?? defaultValue) && (value ?? defaultValue) !== void 0;
|
|
924
|
-
const handleValueChange =
|
|
1118
|
+
const handleValueChange = useCallback6(
|
|
925
1119
|
(next) => {
|
|
926
1120
|
if (!isControlled) setUncontrolledValue(next);
|
|
927
1121
|
if (onValueChange) {
|
|
@@ -932,14 +1126,14 @@ var Slider = forwardRef12(function Slider2({
|
|
|
932
1126
|
);
|
|
933
1127
|
const display = currentValue?.[0] ?? props.min ?? 0;
|
|
934
1128
|
const thumbCount = (arrValue ?? arrDefault)?.length ?? 1;
|
|
935
|
-
return /* @__PURE__ */
|
|
1129
|
+
return /* @__PURE__ */ jsxs11(
|
|
936
1130
|
"span",
|
|
937
1131
|
{
|
|
938
1132
|
ref,
|
|
939
1133
|
className: cn("inline-flex items-center gap-[10px]", className),
|
|
940
1134
|
style: { width },
|
|
941
1135
|
children: [
|
|
942
|
-
/* @__PURE__ */
|
|
1136
|
+
/* @__PURE__ */ jsxs11(
|
|
943
1137
|
RadixSlider.Root,
|
|
944
1138
|
{
|
|
945
1139
|
value: arrValue,
|
|
@@ -948,11 +1142,11 @@ var Slider = forwardRef12(function Slider2({
|
|
|
948
1142
|
className: "relative flex h-4 flex-1 touch-none items-center select-none",
|
|
949
1143
|
...props,
|
|
950
1144
|
children: [
|
|
951
|
-
/* @__PURE__ */
|
|
1145
|
+
/* @__PURE__ */ jsx14(RadixSlider.Track, { className: "bg-panel-2 relative h-1 grow rounded-full", children: /* @__PURE__ */ jsx14(RadixSlider.Range, { className: "bg-accent absolute h-full rounded-full" }) }),
|
|
952
1146
|
Array.from({ length: thumbCount }, (_, i) => {
|
|
953
1147
|
const perThumb = thumbLabels?.[i];
|
|
954
1148
|
const thumbAriaLabel = perThumb ?? (ariaLabelledBy ? void 0 : ariaLabel ?? "Value");
|
|
955
|
-
return /* @__PURE__ */
|
|
1149
|
+
return /* @__PURE__ */ jsx14(
|
|
956
1150
|
RadixSlider.Thumb,
|
|
957
1151
|
{
|
|
958
1152
|
className: cn(
|
|
@@ -969,7 +1163,7 @@ var Slider = forwardRef12(function Slider2({
|
|
|
969
1163
|
]
|
|
970
1164
|
}
|
|
971
1165
|
),
|
|
972
|
-
showValue && /* @__PURE__ */
|
|
1166
|
+
showValue && /* @__PURE__ */ jsx14("span", { className: "text-text-muted min-w-[28px] text-right font-mono text-[11px]", children: display })
|
|
973
1167
|
]
|
|
974
1168
|
}
|
|
975
1169
|
);
|
|
@@ -978,8 +1172,8 @@ Slider.displayName = "Slider";
|
|
|
978
1172
|
|
|
979
1173
|
// src/components/Switch/Switch.tsx
|
|
980
1174
|
import * as RadixSwitch from "@radix-ui/react-switch";
|
|
981
|
-
import { forwardRef as
|
|
982
|
-
import { jsx as
|
|
1175
|
+
import { forwardRef as forwardRef14, useId as useId5 } from "react";
|
|
1176
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
983
1177
|
var trackClasses = {
|
|
984
1178
|
comfortable: {
|
|
985
1179
|
sm: "h-4 w-7",
|
|
@@ -1000,10 +1194,10 @@ var thumbClasses = {
|
|
|
1000
1194
|
md: "h-[26px] w-[26px] data-[state=checked]:translate-x-5"
|
|
1001
1195
|
}
|
|
1002
1196
|
};
|
|
1003
|
-
var Switch =
|
|
1197
|
+
var Switch = forwardRef14(function Switch2({ label, size = "md", density = "comfortable", className, id: idProp, ...props }, ref) {
|
|
1004
1198
|
const reactId = useId5();
|
|
1005
1199
|
const id = idProp ?? `sw-${reactId}`;
|
|
1006
|
-
return /* @__PURE__ */
|
|
1200
|
+
return /* @__PURE__ */ jsxs12(
|
|
1007
1201
|
"span",
|
|
1008
1202
|
{
|
|
1009
1203
|
className: cn(
|
|
@@ -1012,7 +1206,7 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", density = "comf
|
|
|
1012
1206
|
className
|
|
1013
1207
|
),
|
|
1014
1208
|
children: [
|
|
1015
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ jsx15(
|
|
1016
1210
|
RadixSwitch.Root,
|
|
1017
1211
|
{
|
|
1018
1212
|
ref,
|
|
@@ -1025,7 +1219,7 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", density = "comf
|
|
|
1025
1219
|
trackClasses[density][size]
|
|
1026
1220
|
),
|
|
1027
1221
|
...props,
|
|
1028
|
-
children: /* @__PURE__ */
|
|
1222
|
+
children: /* @__PURE__ */ jsx15(
|
|
1029
1223
|
RadixSwitch.Thumb,
|
|
1030
1224
|
{
|
|
1031
1225
|
className: cn(
|
|
@@ -1037,7 +1231,7 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", density = "comf
|
|
|
1037
1231
|
)
|
|
1038
1232
|
}
|
|
1039
1233
|
),
|
|
1040
|
-
label && /* @__PURE__ */
|
|
1234
|
+
label && /* @__PURE__ */ jsx15(
|
|
1041
1235
|
"label",
|
|
1042
1236
|
{
|
|
1043
1237
|
htmlFor: id,
|
|
@@ -1052,10 +1246,10 @@ var Switch = forwardRef13(function Switch2({ label, size = "md", density = "comf
|
|
|
1052
1246
|
Switch.displayName = "Switch";
|
|
1053
1247
|
|
|
1054
1248
|
// src/components/Textarea/Textarea.tsx
|
|
1055
|
-
import { cva as
|
|
1056
|
-
import { forwardRef as
|
|
1057
|
-
import { jsx as
|
|
1058
|
-
var textareaStyles =
|
|
1249
|
+
import { cva as cva5 } from "class-variance-authority";
|
|
1250
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
1251
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1252
|
+
var textareaStyles = cva5(
|
|
1059
1253
|
[
|
|
1060
1254
|
"w-full font-sans text-text bg-panel rounded-md p-[10px]",
|
|
1061
1255
|
"border outline-none transition-[border-color,box-shadow] duration-(--duration-micro)",
|
|
@@ -1073,8 +1267,8 @@ var textareaStyles = cva4(
|
|
|
1073
1267
|
defaultVariants: { tone: "default" }
|
|
1074
1268
|
}
|
|
1075
1269
|
);
|
|
1076
|
-
var Textarea =
|
|
1077
|
-
return /* @__PURE__ */
|
|
1270
|
+
var Textarea = forwardRef15(function Textarea2({ tone, error, rows = 4, className, ...props }, ref) {
|
|
1271
|
+
return /* @__PURE__ */ jsx16(
|
|
1078
1272
|
"textarea",
|
|
1079
1273
|
{
|
|
1080
1274
|
ref,
|
|
@@ -1089,11 +1283,11 @@ Textarea.displayName = "Textarea";
|
|
|
1089
1283
|
|
|
1090
1284
|
// src/components/Avatar/Avatar.tsx
|
|
1091
1285
|
import * as RadixAvatar from "@radix-ui/react-avatar";
|
|
1092
|
-
import { forwardRef as
|
|
1286
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
1093
1287
|
|
|
1094
1288
|
// src/components/StatusDot/StatusDot.tsx
|
|
1095
|
-
import { forwardRef as
|
|
1096
|
-
import { jsx as
|
|
1289
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
1290
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1097
1291
|
var stateColor = {
|
|
1098
1292
|
ok: "bg-ok",
|
|
1099
1293
|
warn: "bg-warn",
|
|
@@ -1118,8 +1312,8 @@ var stateLabel = {
|
|
|
1118
1312
|
sync: "Syncing",
|
|
1119
1313
|
accent: "Active"
|
|
1120
1314
|
};
|
|
1121
|
-
var StatusDot =
|
|
1122
|
-
return /* @__PURE__ */
|
|
1315
|
+
var StatusDot = forwardRef16(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
|
|
1316
|
+
return /* @__PURE__ */ jsxs13(
|
|
1123
1317
|
"span",
|
|
1124
1318
|
{
|
|
1125
1319
|
ref,
|
|
@@ -1128,7 +1322,7 @@ var StatusDot = forwardRef15(function StatusDot2({ state = "ok", label, pulse, s
|
|
|
1128
1322
|
className: cn("inline-flex items-center gap-[6px]", className),
|
|
1129
1323
|
...props,
|
|
1130
1324
|
children: [
|
|
1131
|
-
/* @__PURE__ */
|
|
1325
|
+
/* @__PURE__ */ jsx17(
|
|
1132
1326
|
"span",
|
|
1133
1327
|
{
|
|
1134
1328
|
className: cn(
|
|
@@ -1140,7 +1334,7 @@ var StatusDot = forwardRef15(function StatusDot2({ state = "ok", label, pulse, s
|
|
|
1140
1334
|
style: { width: size, height: size }
|
|
1141
1335
|
}
|
|
1142
1336
|
),
|
|
1143
|
-
label && /* @__PURE__ */
|
|
1337
|
+
label && /* @__PURE__ */ jsx17("span", { className: "text-text-muted text-[12px]", children: label })
|
|
1144
1338
|
]
|
|
1145
1339
|
}
|
|
1146
1340
|
);
|
|
@@ -1157,7 +1351,7 @@ var sizePx = {
|
|
|
1157
1351
|
};
|
|
1158
1352
|
|
|
1159
1353
|
// src/components/Avatar/Avatar.tsx
|
|
1160
|
-
import { jsx as
|
|
1354
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1161
1355
|
var statusBg = {
|
|
1162
1356
|
ok: "bg-ok",
|
|
1163
1357
|
warn: "bg-warn",
|
|
@@ -1172,11 +1366,11 @@ function hashHue(str) {
|
|
|
1172
1366
|
for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
|
|
1173
1367
|
return h;
|
|
1174
1368
|
}
|
|
1175
|
-
var Avatar =
|
|
1369
|
+
var Avatar = forwardRef17(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
|
|
1176
1370
|
const dim = sizePx[size];
|
|
1177
1371
|
const hue = hashHue(name);
|
|
1178
1372
|
const computedInitials = initials ?? initialsFor(name);
|
|
1179
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsxs14(
|
|
1180
1374
|
"span",
|
|
1181
1375
|
{
|
|
1182
1376
|
ref,
|
|
@@ -1184,7 +1378,7 @@ var Avatar = forwardRef16(function Avatar2({ name = "?", src, size = "md", statu
|
|
|
1184
1378
|
style: { width: dim, height: dim, ...style },
|
|
1185
1379
|
...props,
|
|
1186
1380
|
children: [
|
|
1187
|
-
/* @__PURE__ */
|
|
1381
|
+
/* @__PURE__ */ jsxs14(
|
|
1188
1382
|
RadixAvatar.Root,
|
|
1189
1383
|
{
|
|
1190
1384
|
className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
|
|
@@ -1192,8 +1386,8 @@ var Avatar = forwardRef16(function Avatar2({ name = "?", src, size = "md", statu
|
|
|
1192
1386
|
background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
|
|
1193
1387
|
},
|
|
1194
1388
|
children: [
|
|
1195
|
-
src && /* @__PURE__ */
|
|
1196
|
-
/* @__PURE__ */
|
|
1389
|
+
src && /* @__PURE__ */ jsx18(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
|
|
1390
|
+
/* @__PURE__ */ jsx18(
|
|
1197
1391
|
RadixAvatar.Fallback,
|
|
1198
1392
|
{
|
|
1199
1393
|
className: "flex h-full w-full items-center justify-center font-sans font-semibold text-white",
|
|
@@ -1204,7 +1398,7 @@ var Avatar = forwardRef16(function Avatar2({ name = "?", src, size = "md", statu
|
|
|
1204
1398
|
]
|
|
1205
1399
|
}
|
|
1206
1400
|
),
|
|
1207
|
-
status && /* @__PURE__ */
|
|
1401
|
+
status && /* @__PURE__ */ jsx18(
|
|
1208
1402
|
"span",
|
|
1209
1403
|
{
|
|
1210
1404
|
role: "img",
|
|
@@ -1223,16 +1417,16 @@ var Avatar = forwardRef16(function Avatar2({ name = "?", src, size = "md", statu
|
|
|
1223
1417
|
Avatar.displayName = "Avatar";
|
|
1224
1418
|
|
|
1225
1419
|
// src/components/Avatar/AvatarGroup.tsx
|
|
1226
|
-
import { forwardRef as
|
|
1227
|
-
import { jsx as
|
|
1228
|
-
var AvatarGroup =
|
|
1420
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
1421
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1422
|
+
var AvatarGroup = forwardRef18(function AvatarGroup2({ names, max = 3, size = "md", className, ...props }, ref) {
|
|
1229
1423
|
const dim = sizePx[size];
|
|
1230
1424
|
const visible = names.slice(0, max);
|
|
1231
1425
|
const rest = names.length - visible.length;
|
|
1232
1426
|
const overlap = -dim * 0.35;
|
|
1233
|
-
return /* @__PURE__ */
|
|
1234
|
-
visible.map((n, i) => /* @__PURE__ */
|
|
1235
|
-
rest > 0 && /* @__PURE__ */
|
|
1427
|
+
return /* @__PURE__ */ jsxs15("div", { ref, className: cn("inline-flex", className), ...props, children: [
|
|
1428
|
+
visible.map((n, i) => /* @__PURE__ */ jsx19("span", { style: { marginLeft: i === 0 ? 0 : overlap }, children: /* @__PURE__ */ jsx19(Avatar, { name: n, size }) }, `${n}-${i}`)),
|
|
1429
|
+
rest > 0 && /* @__PURE__ */ jsxs15(
|
|
1236
1430
|
"span",
|
|
1237
1431
|
{
|
|
1238
1432
|
"aria-label": `+${rest} more`,
|
|
@@ -1254,10 +1448,10 @@ var AvatarGroup = forwardRef17(function AvatarGroup2({ names, max = 3, size = "m
|
|
|
1254
1448
|
AvatarGroup.displayName = "AvatarGroup";
|
|
1255
1449
|
|
|
1256
1450
|
// src/components/Badge/Badge.tsx
|
|
1257
|
-
import { cva as
|
|
1258
|
-
import { forwardRef as
|
|
1259
|
-
import { jsx as
|
|
1260
|
-
var badgeStyles =
|
|
1451
|
+
import { cva as cva6 } from "class-variance-authority";
|
|
1452
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
1453
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1454
|
+
var badgeStyles = cva6("inline-flex items-center font-sans leading-none whitespace-nowrap", {
|
|
1261
1455
|
variants: {
|
|
1262
1456
|
variant: {
|
|
1263
1457
|
neutral: "bg-panel-2 text-text-muted border border-border",
|
|
@@ -1290,28 +1484,28 @@ var dotColorClass = {
|
|
|
1290
1484
|
solid: "bg-bg"
|
|
1291
1485
|
};
|
|
1292
1486
|
var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
|
|
1293
|
-
var Badge =
|
|
1487
|
+
var Badge = forwardRef19(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
|
|
1294
1488
|
const sz = size ?? "md";
|
|
1295
1489
|
const v = variant ?? "neutral";
|
|
1296
|
-
return /* @__PURE__ */
|
|
1297
|
-
dot && /* @__PURE__ */
|
|
1490
|
+
return /* @__PURE__ */ jsxs16("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
|
|
1491
|
+
dot && /* @__PURE__ */ jsx20(
|
|
1298
1492
|
"span",
|
|
1299
1493
|
{
|
|
1300
1494
|
"aria-hidden": true,
|
|
1301
1495
|
className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
|
|
1302
1496
|
}
|
|
1303
1497
|
),
|
|
1304
|
-
icon && /* @__PURE__ */
|
|
1498
|
+
icon && /* @__PURE__ */ jsx20("span", { className: "inline-flex leading-none", children: icon }),
|
|
1305
1499
|
children
|
|
1306
1500
|
] });
|
|
1307
1501
|
});
|
|
1308
1502
|
Badge.displayName = "Badge";
|
|
1309
1503
|
|
|
1310
1504
|
// src/components/Card/Card.tsx
|
|
1311
|
-
import { cva as
|
|
1312
|
-
import { forwardRef as
|
|
1313
|
-
import { jsx as
|
|
1314
|
-
var cardStyles =
|
|
1505
|
+
import { cva as cva7 } from "class-variance-authority";
|
|
1506
|
+
import { forwardRef as forwardRef20 } from "react";
|
|
1507
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1508
|
+
var cardStyles = cva7(
|
|
1315
1509
|
"block bg-panel border border-border transition-[border-color,transform,box-shadow] duration-(--duration-step)",
|
|
1316
1510
|
{
|
|
1317
1511
|
variants: {
|
|
@@ -1332,7 +1526,7 @@ var cardStyles = cva6(
|
|
|
1332
1526
|
defaultVariants: { variant: "default", interactive: false, density: "comfortable" }
|
|
1333
1527
|
}
|
|
1334
1528
|
);
|
|
1335
|
-
var Card =
|
|
1529
|
+
var Card = forwardRef20(function Card2({
|
|
1336
1530
|
variant,
|
|
1337
1531
|
interactive,
|
|
1338
1532
|
density,
|
|
@@ -1364,7 +1558,7 @@ var Card = forwardRef19(function Card2({
|
|
|
1364
1558
|
onClick(e);
|
|
1365
1559
|
}
|
|
1366
1560
|
} : void 0;
|
|
1367
|
-
return /* @__PURE__ */
|
|
1561
|
+
return /* @__PURE__ */ jsxs17(
|
|
1368
1562
|
"div",
|
|
1369
1563
|
{
|
|
1370
1564
|
ref,
|
|
@@ -1379,20 +1573,20 @@ var Card = forwardRef19(function Card2({
|
|
|
1379
1573
|
),
|
|
1380
1574
|
...props,
|
|
1381
1575
|
children: [
|
|
1382
|
-
(title || actions) && /* @__PURE__ */
|
|
1383
|
-
title && /* @__PURE__ */
|
|
1384
|
-
actions && /* @__PURE__ */
|
|
1576
|
+
(title || actions) && /* @__PURE__ */ jsxs17("div", { className: cn("flex items-start gap-3", (description || children) && "mb-[10px]"), children: [
|
|
1577
|
+
title && /* @__PURE__ */ jsx21("div", { className: "flex-1 text-[14px] font-medium", children: title }),
|
|
1578
|
+
actions && /* @__PURE__ */ jsx21("div", { className: "flex gap-1", children: actions })
|
|
1385
1579
|
] }),
|
|
1386
|
-
description && /* @__PURE__ */
|
|
1580
|
+
description && /* @__PURE__ */ jsx21("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
|
|
1387
1581
|
children,
|
|
1388
|
-
footer && /* @__PURE__ */
|
|
1582
|
+
footer && /* @__PURE__ */ jsx21("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
|
|
1389
1583
|
]
|
|
1390
1584
|
}
|
|
1391
1585
|
);
|
|
1392
1586
|
});
|
|
1393
1587
|
Card.displayName = "Card";
|
|
1394
|
-
var CardLink =
|
|
1395
|
-
return /* @__PURE__ */
|
|
1588
|
+
var CardLink = forwardRef20(function CardLink2({ variant, density, title, description, footer, className, children, href, ...props }, ref) {
|
|
1589
|
+
return /* @__PURE__ */ jsxs17(
|
|
1396
1590
|
"a",
|
|
1397
1591
|
{
|
|
1398
1592
|
ref,
|
|
@@ -1405,10 +1599,10 @@ var CardLink = forwardRef19(function CardLink2({ variant, density, title, descri
|
|
|
1405
1599
|
),
|
|
1406
1600
|
...props,
|
|
1407
1601
|
children: [
|
|
1408
|
-
title && /* @__PURE__ */
|
|
1409
|
-
description && /* @__PURE__ */
|
|
1602
|
+
title && /* @__PURE__ */ jsx21("div", { className: cn("flex items-start", (description || children) && "mb-[10px]"), children: /* @__PURE__ */ jsx21("div", { className: "flex-1 text-[14px] font-medium", children: title }) }),
|
|
1603
|
+
description && /* @__PURE__ */ jsx21("div", { className: cn("text-text-muted text-[12px] leading-[1.55]", children && "mb-[14px]"), children: description }),
|
|
1410
1604
|
children,
|
|
1411
|
-
footer && /* @__PURE__ */
|
|
1605
|
+
footer && /* @__PURE__ */ jsx21("div", { className: "border-border text-text-dim mt-[14px] border-t pt-3 text-[11px]", children: footer })
|
|
1412
1606
|
]
|
|
1413
1607
|
}
|
|
1414
1608
|
);
|
|
@@ -1416,28 +1610,28 @@ var CardLink = forwardRef19(function CardLink2({ variant, density, title, descri
|
|
|
1416
1610
|
CardLink.displayName = "CardLink";
|
|
1417
1611
|
|
|
1418
1612
|
// src/components/Card/StatCard.tsx
|
|
1419
|
-
import { forwardRef as
|
|
1420
|
-
import { jsx as
|
|
1613
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
1614
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1421
1615
|
var trendClasses = {
|
|
1422
1616
|
up: "text-ok",
|
|
1423
1617
|
down: "text-err",
|
|
1424
1618
|
flat: "text-text-dim"
|
|
1425
1619
|
};
|
|
1426
1620
|
var trendArrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
|
|
1427
|
-
var StatCard =
|
|
1428
|
-
return /* @__PURE__ */
|
|
1621
|
+
var StatCard = forwardRef21(function StatCard2({ label, value, delta, trend = "flat", icon, className, ...props }, ref) {
|
|
1622
|
+
return /* @__PURE__ */ jsxs18(
|
|
1429
1623
|
"div",
|
|
1430
1624
|
{
|
|
1431
1625
|
ref,
|
|
1432
1626
|
className: cn("bg-panel border-border rounded-base block border p-[18px]", className),
|
|
1433
1627
|
...props,
|
|
1434
1628
|
children: [
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
/* @__PURE__ */
|
|
1437
|
-
icon && /* @__PURE__ */
|
|
1629
|
+
/* @__PURE__ */ jsxs18("div", { className: "mb-[10px] flex items-center justify-between", children: [
|
|
1630
|
+
/* @__PURE__ */ jsx22("div", { className: "text-text-dim font-mono text-[10px] tracking-wide uppercase", children: label }),
|
|
1631
|
+
icon && /* @__PURE__ */ jsx22("div", { className: "text-text-dim text-[14px]", children: icon })
|
|
1438
1632
|
] }),
|
|
1439
|
-
/* @__PURE__ */
|
|
1440
|
-
delta !== void 0 && /* @__PURE__ */
|
|
1633
|
+
/* @__PURE__ */ jsx22("div", { className: "text-text font-mono text-[26px] leading-none font-medium tracking-tight", children: value }),
|
|
1634
|
+
delta !== void 0 && /* @__PURE__ */ jsxs18("div", { className: cn("mt-[6px] font-mono text-[11px]", trendClasses[trend]), children: [
|
|
1441
1635
|
trendArrows[trend],
|
|
1442
1636
|
" ",
|
|
1443
1637
|
delta
|
|
@@ -1449,11 +1643,11 @@ var StatCard = forwardRef20(function StatCard2({ label, value, delta, trend = "f
|
|
|
1449
1643
|
StatCard.displayName = "StatCard";
|
|
1450
1644
|
|
|
1451
1645
|
// src/components/Chip/Chip.tsx
|
|
1452
|
-
import { forwardRef as
|
|
1453
|
-
import { jsx as
|
|
1454
|
-
var Chip =
|
|
1646
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
1647
|
+
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1648
|
+
var Chip = forwardRef22(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
|
|
1455
1649
|
const isTouch = density === "touch";
|
|
1456
|
-
return /* @__PURE__ */
|
|
1650
|
+
return /* @__PURE__ */ jsxs19(
|
|
1457
1651
|
"span",
|
|
1458
1652
|
{
|
|
1459
1653
|
ref,
|
|
@@ -1465,9 +1659,9 @@ var Chip = forwardRef21(function Chip2({ icon, onRemove, density = "comfortable"
|
|
|
1465
1659
|
),
|
|
1466
1660
|
...props,
|
|
1467
1661
|
children: [
|
|
1468
|
-
icon && /* @__PURE__ */
|
|
1662
|
+
icon && /* @__PURE__ */ jsx23("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
|
|
1469
1663
|
children,
|
|
1470
|
-
onRemove && /* @__PURE__ */
|
|
1664
|
+
onRemove && /* @__PURE__ */ jsx23(
|
|
1471
1665
|
"button",
|
|
1472
1666
|
{
|
|
1473
1667
|
type: "button",
|
|
@@ -1487,10 +1681,10 @@ var Chip = forwardRef21(function Chip2({ icon, onRemove, density = "comfortable"
|
|
|
1487
1681
|
Chip.displayName = "Chip";
|
|
1488
1682
|
|
|
1489
1683
|
// src/components/Kbd/Kbd.tsx
|
|
1490
|
-
import { forwardRef as
|
|
1491
|
-
import { jsx as
|
|
1492
|
-
var Kbd =
|
|
1493
|
-
return /* @__PURE__ */
|
|
1684
|
+
import { forwardRef as forwardRef23 } from "react";
|
|
1685
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1686
|
+
var Kbd = forwardRef23(function Kbd2({ className, children, ...props }, ref) {
|
|
1687
|
+
return /* @__PURE__ */ jsx24(
|
|
1494
1688
|
"kbd",
|
|
1495
1689
|
{
|
|
1496
1690
|
ref,
|
|
@@ -1509,11 +1703,11 @@ Kbd.displayName = "Kbd";
|
|
|
1509
1703
|
|
|
1510
1704
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
1511
1705
|
import * as RadixScrollArea from "@radix-ui/react-scroll-area";
|
|
1512
|
-
import { forwardRef as
|
|
1513
|
-
import { jsx as
|
|
1706
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
1707
|
+
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1514
1708
|
var scrollbarBase = "flex touch-none select-none p-[2px] transition-colors duration-(--duration-micro)";
|
|
1515
1709
|
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-[""]';
|
|
1516
|
-
var ScrollArea =
|
|
1710
|
+
var ScrollArea = forwardRef24(function ScrollArea2({
|
|
1517
1711
|
type = "hover",
|
|
1518
1712
|
orientation = "vertical",
|
|
1519
1713
|
scrollHideDelay = 600,
|
|
@@ -1525,7 +1719,7 @@ var ScrollArea = forwardRef23(function ScrollArea2({
|
|
|
1525
1719
|
}, ref) {
|
|
1526
1720
|
const showVertical = orientation === "vertical" || orientation === "both";
|
|
1527
1721
|
const showHorizontal = orientation === "horizontal" || orientation === "both";
|
|
1528
|
-
return /* @__PURE__ */
|
|
1722
|
+
return /* @__PURE__ */ jsxs20(
|
|
1529
1723
|
RadixScrollArea.Root,
|
|
1530
1724
|
{
|
|
1531
1725
|
ref,
|
|
@@ -1534,7 +1728,7 @@ var ScrollArea = forwardRef23(function ScrollArea2({
|
|
|
1534
1728
|
className: cn("relative overflow-hidden", className),
|
|
1535
1729
|
...props,
|
|
1536
1730
|
children: [
|
|
1537
|
-
/* @__PURE__ */
|
|
1731
|
+
/* @__PURE__ */ jsx25(
|
|
1538
1732
|
RadixScrollArea.Viewport,
|
|
1539
1733
|
{
|
|
1540
1734
|
ref: viewportRef,
|
|
@@ -1542,15 +1736,15 @@ var ScrollArea = forwardRef23(function ScrollArea2({
|
|
|
1542
1736
|
children
|
|
1543
1737
|
}
|
|
1544
1738
|
),
|
|
1545
|
-
showVertical && /* @__PURE__ */
|
|
1739
|
+
showVertical && /* @__PURE__ */ jsx25(
|
|
1546
1740
|
RadixScrollArea.Scrollbar,
|
|
1547
1741
|
{
|
|
1548
1742
|
orientation: "vertical",
|
|
1549
1743
|
className: cn(scrollbarBase, "bg-panel-2/40 hover:bg-panel-2/80 h-full w-[10px]"),
|
|
1550
|
-
children: /* @__PURE__ */
|
|
1744
|
+
children: /* @__PURE__ */ jsx25(RadixScrollArea.Thumb, { className: thumbBase })
|
|
1551
1745
|
}
|
|
1552
1746
|
),
|
|
1553
|
-
showHorizontal && /* @__PURE__ */
|
|
1747
|
+
showHorizontal && /* @__PURE__ */ jsx25(
|
|
1554
1748
|
RadixScrollArea.Scrollbar,
|
|
1555
1749
|
{
|
|
1556
1750
|
orientation: "horizontal",
|
|
@@ -1558,10 +1752,10 @@ var ScrollArea = forwardRef23(function ScrollArea2({
|
|
|
1558
1752
|
scrollbarBase,
|
|
1559
1753
|
"bg-panel-2/40 hover:bg-panel-2/80 h-[10px] w-full flex-col"
|
|
1560
1754
|
),
|
|
1561
|
-
children: /* @__PURE__ */
|
|
1755
|
+
children: /* @__PURE__ */ jsx25(RadixScrollArea.Thumb, { className: thumbBase })
|
|
1562
1756
|
}
|
|
1563
1757
|
),
|
|
1564
|
-
orientation === "both" && /* @__PURE__ */
|
|
1758
|
+
orientation === "both" && /* @__PURE__ */ jsx25(RadixScrollArea.Corner, { className: "bg-panel-2/60" })
|
|
1565
1759
|
]
|
|
1566
1760
|
}
|
|
1567
1761
|
);
|
|
@@ -1569,10 +1763,10 @@ var ScrollArea = forwardRef23(function ScrollArea2({
|
|
|
1569
1763
|
ScrollArea.displayName = "ScrollArea";
|
|
1570
1764
|
|
|
1571
1765
|
// src/components/Skeleton/Skeleton.tsx
|
|
1572
|
-
import { cva as
|
|
1573
|
-
import { forwardRef as
|
|
1574
|
-
import { jsx as
|
|
1575
|
-
var skeletonStyles =
|
|
1766
|
+
import { cva as cva8 } from "class-variance-authority";
|
|
1767
|
+
import { forwardRef as forwardRef25 } from "react";
|
|
1768
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
1769
|
+
var skeletonStyles = cva8("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite]", {
|
|
1576
1770
|
variants: {
|
|
1577
1771
|
shape: {
|
|
1578
1772
|
line: "rounded-xs",
|
|
@@ -1583,11 +1777,11 @@ var skeletonStyles = cva7("block bg-panel-2 animate-[ship-skeleton_1.4s_infinite
|
|
|
1583
1777
|
defaultVariants: { shape: "line" }
|
|
1584
1778
|
});
|
|
1585
1779
|
var defaultHeight = { line: 14, block: 80, circle: 40 };
|
|
1586
|
-
var Skeleton =
|
|
1780
|
+
var Skeleton = forwardRef25(function Skeleton2({ shape = "line", width = "100%", height, standalone = false, className, style, ...props }, ref) {
|
|
1587
1781
|
const h = height ?? defaultHeight[shape];
|
|
1588
1782
|
const w = shape === "circle" ? h : width;
|
|
1589
1783
|
const a11yProps = standalone ? { role: "status", "aria-busy": true, "aria-label": "Loading" } : { "aria-hidden": true };
|
|
1590
|
-
return /* @__PURE__ */
|
|
1784
|
+
return /* @__PURE__ */ jsx26(
|
|
1591
1785
|
"div",
|
|
1592
1786
|
{
|
|
1593
1787
|
ref,
|
|
@@ -1599,11 +1793,11 @@ var Skeleton = forwardRef24(function Skeleton2({ shape = "line", width = "100%",
|
|
|
1599
1793
|
);
|
|
1600
1794
|
});
|
|
1601
1795
|
Skeleton.displayName = "Skeleton";
|
|
1602
|
-
var SkeletonGroup =
|
|
1796
|
+
var SkeletonGroup = forwardRef25(function SkeletonGroup2({ label = "Loading", loading = true, className, children, ...props }, ref) {
|
|
1603
1797
|
if (!loading) {
|
|
1604
|
-
return /* @__PURE__ */
|
|
1798
|
+
return /* @__PURE__ */ jsx26("div", { ref, className, ...props, children });
|
|
1605
1799
|
}
|
|
1606
|
-
return /* @__PURE__ */
|
|
1800
|
+
return /* @__PURE__ */ jsx26(
|
|
1607
1801
|
"div",
|
|
1608
1802
|
{
|
|
1609
1803
|
ref,
|
|
@@ -1619,10 +1813,10 @@ var SkeletonGroup = forwardRef24(function SkeletonGroup2({ label = "Loading", lo
|
|
|
1619
1813
|
SkeletonGroup.displayName = "SkeletonGroup";
|
|
1620
1814
|
|
|
1621
1815
|
// src/components/Tag/Tag.tsx
|
|
1622
|
-
import { forwardRef as
|
|
1623
|
-
import { jsx as
|
|
1624
|
-
var Tag =
|
|
1625
|
-
return /* @__PURE__ */
|
|
1816
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
1817
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1818
|
+
var Tag = forwardRef26(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
|
|
1819
|
+
return /* @__PURE__ */ jsxs21(
|
|
1626
1820
|
"span",
|
|
1627
1821
|
{
|
|
1628
1822
|
ref,
|
|
@@ -1634,9 +1828,9 @@ var Tag = forwardRef25(function Tag2({ onRemove, icon, size = 22, className, chi
|
|
|
1634
1828
|
style: { height: size },
|
|
1635
1829
|
...props,
|
|
1636
1830
|
children: [
|
|
1637
|
-
icon && /* @__PURE__ */
|
|
1831
|
+
icon && /* @__PURE__ */ jsx27("span", { className: "text-text-dim inline-flex", children: icon }),
|
|
1638
1832
|
children,
|
|
1639
|
-
onRemove && /* @__PURE__ */
|
|
1833
|
+
onRemove && /* @__PURE__ */ jsx27(
|
|
1640
1834
|
"button",
|
|
1641
1835
|
{
|
|
1642
1836
|
type: "button",
|
|
@@ -1654,14 +1848,14 @@ Tag.displayName = "Tag";
|
|
|
1654
1848
|
|
|
1655
1849
|
// src/components/ContextMenu/ContextMenu.tsx
|
|
1656
1850
|
import * as RadixContext from "@radix-ui/react-context-menu";
|
|
1657
|
-
import { forwardRef as
|
|
1658
|
-
import { jsx as
|
|
1851
|
+
import { forwardRef as forwardRef27 } from "react";
|
|
1852
|
+
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1659
1853
|
var ContextMenuRoot = RadixContext.Root;
|
|
1660
1854
|
var ContextMenuTrigger = RadixContext.Trigger;
|
|
1661
1855
|
var ContextMenuPortal = RadixContext.Portal;
|
|
1662
|
-
var ContextMenuContent =
|
|
1856
|
+
var ContextMenuContent = forwardRef27(
|
|
1663
1857
|
function ContextMenuContent2({ className, ...props }, ref) {
|
|
1664
|
-
return /* @__PURE__ */
|
|
1858
|
+
return /* @__PURE__ */ jsx28(RadixContext.Portal, { children: /* @__PURE__ */ jsx28(
|
|
1665
1859
|
RadixContext.Content,
|
|
1666
1860
|
{
|
|
1667
1861
|
ref,
|
|
@@ -1681,26 +1875,26 @@ var itemBase = cn(
|
|
|
1681
1875
|
"data-[highlighted]:bg-panel-2",
|
|
1682
1876
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
1683
1877
|
);
|
|
1684
|
-
var ContextMenuItem =
|
|
1878
|
+
var ContextMenuItem = forwardRef27(
|
|
1685
1879
|
function ContextMenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
|
|
1686
|
-
return /* @__PURE__ */
|
|
1880
|
+
return /* @__PURE__ */ jsxs22(
|
|
1687
1881
|
RadixContext.Item,
|
|
1688
1882
|
{
|
|
1689
1883
|
ref,
|
|
1690
1884
|
className: cn(itemBase, destructive ? "text-err" : "text-text", className),
|
|
1691
1885
|
...props,
|
|
1692
1886
|
children: [
|
|
1693
|
-
icon && /* @__PURE__ */
|
|
1694
|
-
/* @__PURE__ */
|
|
1695
|
-
trailing && /* @__PURE__ */
|
|
1887
|
+
icon && /* @__PURE__ */ jsx28("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
|
|
1888
|
+
/* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
|
|
1889
|
+
trailing && /* @__PURE__ */ jsx28("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
1696
1890
|
]
|
|
1697
1891
|
}
|
|
1698
1892
|
);
|
|
1699
1893
|
}
|
|
1700
1894
|
);
|
|
1701
1895
|
ContextMenuItem.displayName = "ContextMenuItem";
|
|
1702
|
-
var ContextMenuSeparator =
|
|
1703
|
-
return /* @__PURE__ */
|
|
1896
|
+
var ContextMenuSeparator = forwardRef27(function ContextMenuSeparator2({ className, ...props }, ref) {
|
|
1897
|
+
return /* @__PURE__ */ jsx28(
|
|
1704
1898
|
RadixContext.Separator,
|
|
1705
1899
|
{
|
|
1706
1900
|
ref,
|
|
@@ -1714,15 +1908,15 @@ var ContextMenu = RadixContext.Root;
|
|
|
1714
1908
|
|
|
1715
1909
|
// src/components/Dialog/Dialog.tsx
|
|
1716
1910
|
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
1717
|
-
import { forwardRef as
|
|
1718
|
-
import { jsx as
|
|
1911
|
+
import { forwardRef as forwardRef28 } from "react";
|
|
1912
|
+
import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1719
1913
|
var DialogRoot = RadixDialog.Root;
|
|
1720
1914
|
var DialogTrigger = RadixDialog.Trigger;
|
|
1721
1915
|
var DialogClose = RadixDialog.Close;
|
|
1722
1916
|
var DialogPortal = RadixDialog.Portal;
|
|
1723
|
-
var DialogOverlay =
|
|
1917
|
+
var DialogOverlay = forwardRef28(
|
|
1724
1918
|
function DialogOverlay2({ className, ...props }, ref) {
|
|
1725
|
-
return /* @__PURE__ */
|
|
1919
|
+
return /* @__PURE__ */ jsx29(
|
|
1726
1920
|
RadixDialog.Overlay,
|
|
1727
1921
|
{
|
|
1728
1922
|
ref,
|
|
@@ -1737,10 +1931,10 @@ var DialogOverlay = forwardRef27(
|
|
|
1737
1931
|
}
|
|
1738
1932
|
);
|
|
1739
1933
|
DialogOverlay.displayName = "DialogOverlay";
|
|
1740
|
-
var DialogContent =
|
|
1741
|
-
return /* @__PURE__ */
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1934
|
+
var DialogContent = forwardRef28(function DialogContent2({ className, width = 460, style, children, ...props }, ref) {
|
|
1935
|
+
return /* @__PURE__ */ jsxs23(DialogPortal, { children: [
|
|
1936
|
+
/* @__PURE__ */ jsx29(DialogOverlay, {}),
|
|
1937
|
+
/* @__PURE__ */ jsx29(
|
|
1744
1938
|
RadixDialog.Content,
|
|
1745
1939
|
{
|
|
1746
1940
|
ref,
|
|
@@ -1760,32 +1954,32 @@ var DialogContent = forwardRef27(function DialogContent2({ className, width = 46
|
|
|
1760
1954
|
});
|
|
1761
1955
|
DialogContent.displayName = "DialogContent";
|
|
1762
1956
|
function Dialog({ title, description, footer, width, children, ...rootProps }) {
|
|
1763
|
-
return /* @__PURE__ */
|
|
1764
|
-
title && /* @__PURE__ */
|
|
1957
|
+
return /* @__PURE__ */ jsx29(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs23(DialogContent, { width, children: [
|
|
1958
|
+
title && /* @__PURE__ */ jsx29(
|
|
1765
1959
|
RadixDialog.Title,
|
|
1766
1960
|
{
|
|
1767
1961
|
className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
|
|
1768
1962
|
children: title
|
|
1769
1963
|
}
|
|
1770
1964
|
),
|
|
1771
|
-
description && /* @__PURE__ */
|
|
1965
|
+
description && /* @__PURE__ */ jsx29(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
|
|
1772
1966
|
children,
|
|
1773
|
-
footer && /* @__PURE__ */
|
|
1967
|
+
footer && /* @__PURE__ */ jsx29("div", { className: "mt-5 flex justify-end gap-2", children: footer })
|
|
1774
1968
|
] }) });
|
|
1775
1969
|
}
|
|
1776
1970
|
|
|
1777
1971
|
// src/components/Dialog/Drawer.tsx
|
|
1778
1972
|
import * as RadixDialog2 from "@radix-ui/react-dialog";
|
|
1779
|
-
import { forwardRef as
|
|
1780
|
-
import { jsx as
|
|
1973
|
+
import { forwardRef as forwardRef29 } from "react";
|
|
1974
|
+
import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1781
1975
|
var sideClasses = {
|
|
1782
1976
|
left: "top-0 bottom-0 left-0 border-r border-border-strong data-[state=open]:animate-[ship-slide-in-left_220ms_var(--easing-out)]",
|
|
1783
1977
|
right: "top-0 bottom-0 right-0 border-l border-border-strong data-[state=open]:animate-[ship-slide-in-right_220ms_var(--easing-out)]",
|
|
1784
1978
|
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)]"
|
|
1785
1979
|
};
|
|
1786
|
-
var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
/* @__PURE__ */
|
|
1980
|
+
var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs24("div", { className: "border-border flex items-center justify-between border-b p-[16px] px-5", children: [
|
|
1981
|
+
/* @__PURE__ */ jsx30(RadixDialog2.Title, { className: "text-[14px] font-medium", children: title }),
|
|
1982
|
+
/* @__PURE__ */ jsx30(
|
|
1789
1983
|
RadixDialog2.Close,
|
|
1790
1984
|
{
|
|
1791
1985
|
onClick: onClose,
|
|
@@ -1795,15 +1989,15 @@ var DrawerHeader = ({ title, onClose }) => /* @__PURE__ */ jsxs23("div", { class
|
|
|
1795
1989
|
}
|
|
1796
1990
|
)
|
|
1797
1991
|
] });
|
|
1798
|
-
var SheetHeader = ({ title }) => /* @__PURE__ */
|
|
1799
|
-
var DragHandle = () => /* @__PURE__ */
|
|
1800
|
-
var Drawer =
|
|
1992
|
+
var SheetHeader = ({ title }) => /* @__PURE__ */ jsx30("div", { className: "px-5 pb-3", children: /* @__PURE__ */ jsx30(RadixDialog2.Title, { className: "text-m-body-lg font-semibold tracking-tight", children: title }) });
|
|
1993
|
+
var DragHandle = () => /* @__PURE__ */ jsx30("div", { className: "flex justify-center pt-3 pb-2", "aria-hidden": true, children: /* @__PURE__ */ jsx30("span", { className: "bg-border-strong h-1 w-9 rounded-full" }) });
|
|
1994
|
+
var Drawer = forwardRef29(function Drawer2({ side = "right", title, width = 420, height = "85vh", handle, children, ...rootProps }, ref) {
|
|
1801
1995
|
const isBottom = side === "bottom";
|
|
1802
1996
|
const showHandle = isBottom && (handle ?? true);
|
|
1803
1997
|
const dimensionStyle = isBottom ? { height } : { width };
|
|
1804
|
-
return /* @__PURE__ */
|
|
1805
|
-
/* @__PURE__ */
|
|
1806
|
-
/* @__PURE__ */
|
|
1998
|
+
return /* @__PURE__ */ jsx30(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs24(DialogPortal, { children: [
|
|
1999
|
+
/* @__PURE__ */ jsx30(DialogOverlay, {}),
|
|
2000
|
+
/* @__PURE__ */ jsxs24(
|
|
1807
2001
|
RadixDialog2.Content,
|
|
1808
2002
|
{
|
|
1809
2003
|
ref,
|
|
@@ -1814,9 +2008,9 @@ var Drawer = forwardRef28(function Drawer2({ side = "right", title, width = 420,
|
|
|
1814
2008
|
),
|
|
1815
2009
|
style: dimensionStyle,
|
|
1816
2010
|
children: [
|
|
1817
|
-
showHandle && /* @__PURE__ */
|
|
1818
|
-
title ? isBottom ? /* @__PURE__ */
|
|
1819
|
-
/* @__PURE__ */
|
|
2011
|
+
showHandle && /* @__PURE__ */ jsx30(DragHandle, {}),
|
|
2012
|
+
title ? isBottom ? /* @__PURE__ */ jsx30(SheetHeader, { title }) : /* @__PURE__ */ jsx30(DrawerHeader, { title }) : /* @__PURE__ */ jsx30(RadixDialog2.Title, { className: "sr-only", children: isBottom ? "Sheet" : "Drawer" }),
|
|
2013
|
+
/* @__PURE__ */ jsx30("div", { className: cn("flex-1 overflow-auto", isBottom ? "px-5 pb-6" : "p-5"), children })
|
|
1820
2014
|
]
|
|
1821
2015
|
}
|
|
1822
2016
|
)
|
|
@@ -1826,12 +2020,12 @@ Drawer.displayName = "Drawer";
|
|
|
1826
2020
|
|
|
1827
2021
|
// src/components/Dialog/Sheet.tsx
|
|
1828
2022
|
import * as RadixDialog3 from "@radix-ui/react-dialog";
|
|
1829
|
-
import { forwardRef as
|
|
1830
|
-
import { jsx as
|
|
1831
|
-
var Sheet =
|
|
1832
|
-
return /* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1834
|
-
/* @__PURE__ */
|
|
2023
|
+
import { forwardRef as forwardRef30 } from "react";
|
|
2024
|
+
import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2025
|
+
var Sheet = forwardRef30(function Sheet2({ title, width = "min(640px, 90vw)", children, ...rootProps }, ref) {
|
|
2026
|
+
return /* @__PURE__ */ jsx31(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs25(DialogPortal, { children: [
|
|
2027
|
+
/* @__PURE__ */ jsx31(DialogOverlay, {}),
|
|
2028
|
+
/* @__PURE__ */ jsxs25(
|
|
1835
2029
|
RadixDialog3.Content,
|
|
1836
2030
|
{
|
|
1837
2031
|
ref,
|
|
@@ -1843,7 +2037,7 @@ var Sheet = forwardRef29(function Sheet2({ title, width = "min(640px, 90vw)", ch
|
|
|
1843
2037
|
),
|
|
1844
2038
|
style: { width },
|
|
1845
2039
|
children: [
|
|
1846
|
-
title ? /* @__PURE__ */
|
|
2040
|
+
title ? /* @__PURE__ */ jsx31(RadixDialog3.Title, { className: "mb-1 text-[15px] font-medium", children: title }) : /* @__PURE__ */ jsx31(RadixDialog3.Title, { className: "sr-only", children: "Sheet" }),
|
|
1847
2041
|
children
|
|
1848
2042
|
]
|
|
1849
2043
|
}
|
|
@@ -1854,15 +2048,15 @@ Sheet.displayName = "Sheet";
|
|
|
1854
2048
|
|
|
1855
2049
|
// src/components/Dialog/AlertDialog.tsx
|
|
1856
2050
|
import * as RadixAlert from "@radix-ui/react-alert-dialog";
|
|
1857
|
-
import { forwardRef as
|
|
1858
|
-
import { jsx as
|
|
2051
|
+
import { forwardRef as forwardRef31 } from "react";
|
|
2052
|
+
import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1859
2053
|
var AlertDialogRoot = RadixAlert.Root;
|
|
1860
2054
|
var AlertDialogTrigger = RadixAlert.Trigger;
|
|
1861
2055
|
var AlertDialogAction = RadixAlert.Action;
|
|
1862
2056
|
var AlertDialogCancel = RadixAlert.Cancel;
|
|
1863
|
-
var AlertDialog =
|
|
1864
|
-
return /* @__PURE__ */
|
|
1865
|
-
/* @__PURE__ */
|
|
2057
|
+
var AlertDialog = forwardRef31(function AlertDialog2({ title, description, footer, width = 460, children, ...rootProps }, ref) {
|
|
2058
|
+
return /* @__PURE__ */ jsx32(AlertDialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs26(RadixAlert.Portal, { children: [
|
|
2059
|
+
/* @__PURE__ */ jsx32(
|
|
1866
2060
|
RadixAlert.Overlay,
|
|
1867
2061
|
{
|
|
1868
2062
|
className: cn(
|
|
@@ -1871,7 +2065,7 @@ var AlertDialog = forwardRef30(function AlertDialog2({ title, description, foote
|
|
|
1871
2065
|
)
|
|
1872
2066
|
}
|
|
1873
2067
|
),
|
|
1874
|
-
/* @__PURE__ */
|
|
2068
|
+
/* @__PURE__ */ jsxs26(
|
|
1875
2069
|
RadixAlert.Content,
|
|
1876
2070
|
{
|
|
1877
2071
|
ref,
|
|
@@ -1882,16 +2076,16 @@ var AlertDialog = forwardRef30(function AlertDialog2({ title, description, foote
|
|
|
1882
2076
|
"data-[state=open]:animate-[ship-dialog-in_180ms_var(--easing-out)]"
|
|
1883
2077
|
),
|
|
1884
2078
|
children: [
|
|
1885
|
-
/* @__PURE__ */
|
|
2079
|
+
/* @__PURE__ */ jsx32(
|
|
1886
2080
|
RadixAlert.Title,
|
|
1887
2081
|
{
|
|
1888
2082
|
className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
|
|
1889
2083
|
children: title
|
|
1890
2084
|
}
|
|
1891
2085
|
),
|
|
1892
|
-
description && /* @__PURE__ */
|
|
2086
|
+
description && /* @__PURE__ */ jsx32(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
|
|
1893
2087
|
children,
|
|
1894
|
-
footer && /* @__PURE__ */
|
|
2088
|
+
footer && /* @__PURE__ */ jsx32("div", { className: "mt-5 flex justify-end gap-2", children: footer })
|
|
1895
2089
|
]
|
|
1896
2090
|
}
|
|
1897
2091
|
)
|
|
@@ -1901,17 +2095,17 @@ AlertDialog.displayName = "AlertDialog";
|
|
|
1901
2095
|
|
|
1902
2096
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1903
2097
|
import * as RadixMenu from "@radix-ui/react-dropdown-menu";
|
|
1904
|
-
import { forwardRef as
|
|
1905
|
-
import { jsx as
|
|
2098
|
+
import { forwardRef as forwardRef32 } from "react";
|
|
2099
|
+
import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1906
2100
|
var DropdownMenuRoot = RadixMenu.Root;
|
|
1907
2101
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
1908
2102
|
var DropdownMenuPortal = RadixMenu.Portal;
|
|
1909
2103
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
1910
2104
|
var DropdownMenuLabel = RadixMenu.Label;
|
|
1911
2105
|
var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
|
|
1912
|
-
var DropdownMenuContent =
|
|
2106
|
+
var DropdownMenuContent = forwardRef32(
|
|
1913
2107
|
function DropdownMenuContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
|
|
1914
|
-
return /* @__PURE__ */
|
|
2108
|
+
return /* @__PURE__ */ jsx33(RadixMenu.Portal, { children: /* @__PURE__ */ jsx33(
|
|
1915
2109
|
RadixMenu.Content,
|
|
1916
2110
|
{
|
|
1917
2111
|
ref,
|
|
@@ -1933,32 +2127,32 @@ var itemBase2 = cn(
|
|
|
1933
2127
|
"data-[highlighted]:bg-panel-2",
|
|
1934
2128
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
1935
2129
|
);
|
|
1936
|
-
var MenuItem =
|
|
1937
|
-
return /* @__PURE__ */
|
|
2130
|
+
var MenuItem = forwardRef32(function MenuItem2({ icon, trailing, destructive, className, children, ...props }, ref) {
|
|
2131
|
+
return /* @__PURE__ */ jsxs27(
|
|
1938
2132
|
RadixMenu.Item,
|
|
1939
2133
|
{
|
|
1940
2134
|
ref,
|
|
1941
2135
|
className: cn(itemBase2, destructive ? "text-err" : "text-text", className),
|
|
1942
2136
|
...props,
|
|
1943
2137
|
children: [
|
|
1944
|
-
icon && /* @__PURE__ */
|
|
1945
|
-
/* @__PURE__ */
|
|
1946
|
-
trailing && /* @__PURE__ */
|
|
2138
|
+
icon && /* @__PURE__ */ jsx33("span", { className: "w-[14px] text-[12px] opacity-70", children: icon }),
|
|
2139
|
+
/* @__PURE__ */ jsx33("span", { className: "flex-1", children }),
|
|
2140
|
+
trailing && /* @__PURE__ */ jsx33("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
1947
2141
|
]
|
|
1948
2142
|
}
|
|
1949
2143
|
);
|
|
1950
2144
|
});
|
|
1951
2145
|
MenuItem.displayName = "MenuItem";
|
|
1952
|
-
var MenuCheckboxItem =
|
|
2146
|
+
var MenuCheckboxItem = forwardRef32(
|
|
1953
2147
|
function MenuCheckboxItem2({ className, children, ...props }, ref) {
|
|
1954
|
-
return /* @__PURE__ */
|
|
2148
|
+
return /* @__PURE__ */ jsxs27(
|
|
1955
2149
|
RadixMenu.CheckboxItem,
|
|
1956
2150
|
{
|
|
1957
2151
|
ref,
|
|
1958
2152
|
className: cn(itemBase2, "text-text relative pl-[26px]", className),
|
|
1959
2153
|
...props,
|
|
1960
2154
|
children: [
|
|
1961
|
-
/* @__PURE__ */
|
|
2155
|
+
/* @__PURE__ */ jsx33(RadixMenu.ItemIndicator, { className: "text-accent absolute top-1/2 left-2 -translate-y-1/2 text-[10px]", children: "\u2713" }),
|
|
1962
2156
|
children
|
|
1963
2157
|
]
|
|
1964
2158
|
}
|
|
@@ -1966,9 +2160,9 @@ var MenuCheckboxItem = forwardRef31(
|
|
|
1966
2160
|
}
|
|
1967
2161
|
);
|
|
1968
2162
|
MenuCheckboxItem.displayName = "MenuCheckboxItem";
|
|
1969
|
-
var MenuSeparator =
|
|
2163
|
+
var MenuSeparator = forwardRef32(
|
|
1970
2164
|
function MenuSeparator2({ className, ...props }, ref) {
|
|
1971
|
-
return /* @__PURE__ */
|
|
2165
|
+
return /* @__PURE__ */ jsx33(
|
|
1972
2166
|
RadixMenu.Separator,
|
|
1973
2167
|
{
|
|
1974
2168
|
ref,
|
|
@@ -1983,14 +2177,14 @@ var DropdownMenu = RadixMenu.Root;
|
|
|
1983
2177
|
|
|
1984
2178
|
// src/components/HoverCard/HoverCard.tsx
|
|
1985
2179
|
import * as RadixHoverCard from "@radix-ui/react-hover-card";
|
|
1986
|
-
import { forwardRef as
|
|
1987
|
-
import { jsx as
|
|
2180
|
+
import { forwardRef as forwardRef33 } from "react";
|
|
2181
|
+
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1988
2182
|
var HoverCardRoot = RadixHoverCard.Root;
|
|
1989
2183
|
var HoverCardTrigger = RadixHoverCard.Trigger;
|
|
1990
2184
|
var HoverCardPortal = RadixHoverCard.Portal;
|
|
1991
|
-
var HoverCardContent =
|
|
2185
|
+
var HoverCardContent = forwardRef33(
|
|
1992
2186
|
function HoverCardContent2({ className, sideOffset = 4, ...props }, ref) {
|
|
1993
|
-
return /* @__PURE__ */
|
|
2187
|
+
return /* @__PURE__ */ jsx34(RadixHoverCard.Portal, { children: /* @__PURE__ */ jsx34(
|
|
1994
2188
|
RadixHoverCard.Content,
|
|
1995
2189
|
{
|
|
1996
2190
|
ref,
|
|
@@ -2007,25 +2201,25 @@ var HoverCardContent = forwardRef32(
|
|
|
2007
2201
|
);
|
|
2008
2202
|
HoverCardContent.displayName = "HoverCardContent";
|
|
2009
2203
|
function HoverCard({ trigger, content, ...rootProps }) {
|
|
2010
|
-
return /* @__PURE__ */
|
|
2011
|
-
/* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2204
|
+
return /* @__PURE__ */ jsxs28(RadixHoverCard.Root, { openDelay: 200, closeDelay: 120, ...rootProps, children: [
|
|
2205
|
+
/* @__PURE__ */ jsx34(RadixHoverCard.Trigger, { asChild: true, children: trigger }),
|
|
2206
|
+
/* @__PURE__ */ jsx34(HoverCardContent, { children: content })
|
|
2013
2207
|
] });
|
|
2014
2208
|
}
|
|
2015
2209
|
|
|
2016
2210
|
// src/components/Popover/Popover.tsx
|
|
2017
2211
|
import * as RadixPopover from "@radix-ui/react-popover";
|
|
2018
|
-
import { forwardRef as
|
|
2019
|
-
import { jsx as
|
|
2212
|
+
import { forwardRef as forwardRef34 } from "react";
|
|
2213
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
2020
2214
|
var PopoverRoot = RadixPopover.Root;
|
|
2021
2215
|
var PopoverTrigger = RadixPopover.Trigger;
|
|
2022
2216
|
var PopoverAnchor = RadixPopover.Anchor;
|
|
2023
2217
|
var PopoverPortal = RadixPopover.Portal;
|
|
2024
2218
|
var PopoverClose = RadixPopover.Close;
|
|
2025
2219
|
var PopoverArrow = RadixPopover.Arrow;
|
|
2026
|
-
var PopoverContent =
|
|
2220
|
+
var PopoverContent = forwardRef34(
|
|
2027
2221
|
function PopoverContent2({ className, align = "start", sideOffset = 6, ...props }, ref) {
|
|
2028
|
-
return /* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ jsx35(RadixPopover.Portal, { children: /* @__PURE__ */ jsx35(
|
|
2029
2223
|
RadixPopover.Content,
|
|
2030
2224
|
{
|
|
2031
2225
|
ref,
|
|
@@ -2048,13 +2242,13 @@ var Popover = RadixPopover.Root;
|
|
|
2048
2242
|
import * as RadixToast from "@radix-ui/react-toast";
|
|
2049
2243
|
import {
|
|
2050
2244
|
createContext,
|
|
2051
|
-
forwardRef as
|
|
2052
|
-
useCallback as
|
|
2245
|
+
forwardRef as forwardRef35,
|
|
2246
|
+
useCallback as useCallback7,
|
|
2053
2247
|
useContext,
|
|
2054
2248
|
useMemo,
|
|
2055
|
-
useState as
|
|
2249
|
+
useState as useState8
|
|
2056
2250
|
} from "react";
|
|
2057
|
-
import { jsx as
|
|
2251
|
+
import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2058
2252
|
var ToastContext = createContext(null);
|
|
2059
2253
|
var variantIcon = {
|
|
2060
2254
|
default: "\u25CF",
|
|
@@ -2080,8 +2274,8 @@ var variantBorderLeft = {
|
|
|
2080
2274
|
var toastIdCounter = 0;
|
|
2081
2275
|
var nextToastId = () => `toast-${++toastIdCounter}`;
|
|
2082
2276
|
function ToastProvider({ children }) {
|
|
2083
|
-
const [toasts, setToasts] =
|
|
2084
|
-
const toast =
|
|
2277
|
+
const [toasts, setToasts] = useState8([]);
|
|
2278
|
+
const toast = useCallback7((t) => {
|
|
2085
2279
|
const explicitId = t.id;
|
|
2086
2280
|
const id = explicitId ?? nextToastId();
|
|
2087
2281
|
const entry = { ...t, id };
|
|
@@ -2093,14 +2287,14 @@ function ToastProvider({ children }) {
|
|
|
2093
2287
|
});
|
|
2094
2288
|
return id;
|
|
2095
2289
|
}, []);
|
|
2096
|
-
const dismiss =
|
|
2290
|
+
const dismiss = useCallback7((id) => {
|
|
2097
2291
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
2098
2292
|
}, []);
|
|
2099
2293
|
const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
|
|
2100
|
-
return /* @__PURE__ */
|
|
2294
|
+
return /* @__PURE__ */ jsx36(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs29(RadixToast.Provider, { swipeDirection: "right", children: [
|
|
2101
2295
|
children,
|
|
2102
|
-
toasts.map((t) => /* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2296
|
+
toasts.map((t) => /* @__PURE__ */ jsx36(ToastCard, { toast: t, onDismiss: () => dismiss(t.id) }, t.id)),
|
|
2297
|
+
/* @__PURE__ */ jsx36(RadixToast.Viewport, { className: "z-toast fixed right-5 bottom-5 flex w-[380px] max-w-[calc(100vw-40px)] flex-col gap-2 outline-none" })
|
|
2104
2298
|
] }) });
|
|
2105
2299
|
}
|
|
2106
2300
|
function useToast() {
|
|
@@ -2108,9 +2302,9 @@ function useToast() {
|
|
|
2108
2302
|
if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
|
|
2109
2303
|
return ctx;
|
|
2110
2304
|
}
|
|
2111
|
-
var ToastCard =
|
|
2305
|
+
var ToastCard = forwardRef35(function ToastCard2({ toast, onDismiss }, ref) {
|
|
2112
2306
|
const variant = toast.variant ?? "default";
|
|
2113
|
-
return /* @__PURE__ */
|
|
2307
|
+
return /* @__PURE__ */ jsxs29(
|
|
2114
2308
|
RadixToast.Root,
|
|
2115
2309
|
{
|
|
2116
2310
|
ref,
|
|
@@ -2125,13 +2319,13 @@ var ToastCard = forwardRef34(function ToastCard2({ toast, onDismiss }, ref) {
|
|
|
2125
2319
|
variantBorderLeft[variant]
|
|
2126
2320
|
),
|
|
2127
2321
|
children: [
|
|
2128
|
-
/* @__PURE__ */
|
|
2129
|
-
/* @__PURE__ */
|
|
2130
|
-
/* @__PURE__ */
|
|
2131
|
-
toast.description && /* @__PURE__ */
|
|
2132
|
-
toast.action && /* @__PURE__ */
|
|
2322
|
+
/* @__PURE__ */ jsx36("span", { className: cn("mt-px text-[14px] leading-none", variantTextColor[variant]), children: variantIcon[variant] }),
|
|
2323
|
+
/* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
|
|
2324
|
+
/* @__PURE__ */ jsx36(RadixToast.Title, { className: "text-text text-[13px] font-medium", children: toast.title }),
|
|
2325
|
+
toast.description && /* @__PURE__ */ jsx36(RadixToast.Description, { className: "text-text-muted mt-[2px] text-[12px] leading-[1.5]", children: toast.description }),
|
|
2326
|
+
toast.action && /* @__PURE__ */ jsx36("div", { className: "mt-2", children: toast.action })
|
|
2133
2327
|
] }),
|
|
2134
|
-
/* @__PURE__ */
|
|
2328
|
+
/* @__PURE__ */ jsx36(
|
|
2135
2329
|
RadixToast.Close,
|
|
2136
2330
|
{
|
|
2137
2331
|
"aria-label": "Dismiss",
|
|
@@ -2147,16 +2341,16 @@ ToastCard.displayName = "ToastCard";
|
|
|
2147
2341
|
|
|
2148
2342
|
// src/components/Tooltip/Tooltip.tsx
|
|
2149
2343
|
import * as RadixTooltip from "@radix-ui/react-tooltip";
|
|
2150
|
-
import { forwardRef as
|
|
2151
|
-
import { jsx as
|
|
2344
|
+
import { forwardRef as forwardRef36 } from "react";
|
|
2345
|
+
import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2152
2346
|
var TooltipProvider = RadixTooltip.Provider;
|
|
2153
|
-
var
|
|
2347
|
+
var Tooltip = RadixTooltip.Root;
|
|
2154
2348
|
var TooltipTrigger = RadixTooltip.Trigger;
|
|
2155
2349
|
var TooltipPortal = RadixTooltip.Portal;
|
|
2156
2350
|
var TooltipArrow = RadixTooltip.Arrow;
|
|
2157
|
-
var TooltipContent =
|
|
2351
|
+
var TooltipContent = forwardRef36(
|
|
2158
2352
|
function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
|
|
2159
|
-
return /* @__PURE__ */
|
|
2353
|
+
return /* @__PURE__ */ jsx37(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx37(
|
|
2160
2354
|
RadixTooltip.Content,
|
|
2161
2355
|
{
|
|
2162
2356
|
ref,
|
|
@@ -2173,18 +2367,23 @@ var TooltipContent = forwardRef35(
|
|
|
2173
2367
|
}
|
|
2174
2368
|
);
|
|
2175
2369
|
TooltipContent.displayName = "TooltipContent";
|
|
2176
|
-
function
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2370
|
+
function SimpleTooltip({
|
|
2371
|
+
content,
|
|
2372
|
+
children,
|
|
2373
|
+
side = "top",
|
|
2374
|
+
delayDuration = 400
|
|
2375
|
+
}) {
|
|
2376
|
+
return /* @__PURE__ */ jsx37(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs30(Tooltip, { children: [
|
|
2377
|
+
/* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children }),
|
|
2378
|
+
/* @__PURE__ */ jsx37(TooltipContent, { side, children: content })
|
|
2180
2379
|
] }) });
|
|
2181
2380
|
}
|
|
2182
2381
|
|
|
2183
2382
|
// src/patterns/Alert/Alert.tsx
|
|
2184
|
-
import { cva as
|
|
2185
|
-
import { forwardRef as
|
|
2186
|
-
import { jsx as
|
|
2187
|
-
var alertStyles =
|
|
2383
|
+
import { cva as cva9 } from "class-variance-authority";
|
|
2384
|
+
import { forwardRef as forwardRef37 } from "react";
|
|
2385
|
+
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2386
|
+
var alertStyles = cva9("flex items-start gap-3 rounded-base border bg-panel p-3 text-[13px]", {
|
|
2188
2387
|
variants: {
|
|
2189
2388
|
tone: {
|
|
2190
2389
|
accent: "border-border border-l-2 border-l-accent",
|
|
@@ -2207,7 +2406,7 @@ var defaultGlyph = {
|
|
|
2207
2406
|
warn: "!",
|
|
2208
2407
|
err: "\xD7"
|
|
2209
2408
|
};
|
|
2210
|
-
var Alert =
|
|
2409
|
+
var Alert = forwardRef37(function Alert2({
|
|
2211
2410
|
tone = "accent",
|
|
2212
2411
|
title,
|
|
2213
2412
|
description,
|
|
@@ -2219,7 +2418,7 @@ var Alert = forwardRef36(function Alert2({
|
|
|
2219
2418
|
...props
|
|
2220
2419
|
}, ref) {
|
|
2221
2420
|
const t = tone ?? "accent";
|
|
2222
|
-
return /* @__PURE__ */
|
|
2421
|
+
return /* @__PURE__ */ jsxs31(
|
|
2223
2422
|
"div",
|
|
2224
2423
|
{
|
|
2225
2424
|
ref,
|
|
@@ -2228,13 +2427,13 @@ var Alert = forwardRef36(function Alert2({
|
|
|
2228
2427
|
className: cn(alertStyles({ tone }), className),
|
|
2229
2428
|
...props,
|
|
2230
2429
|
children: [
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2233
|
-
title && /* @__PURE__ */
|
|
2234
|
-
description && /* @__PURE__ */
|
|
2430
|
+
/* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: cn("mt-[1px] text-[14px] leading-none", iconColorClass[t]), children: icon ?? defaultGlyph[t] }),
|
|
2431
|
+
/* @__PURE__ */ jsxs31("div", { className: "min-w-0 flex-1", children: [
|
|
2432
|
+
title && /* @__PURE__ */ jsx38("div", { className: "font-medium", children: title }),
|
|
2433
|
+
description && /* @__PURE__ */ jsx38("div", { className: "text-text-muted mt-[2px] text-[12px]", children: description }),
|
|
2235
2434
|
children
|
|
2236
2435
|
] }),
|
|
2237
|
-
action && /* @__PURE__ */
|
|
2436
|
+
action && /* @__PURE__ */ jsx38("div", { className: "ml-1 shrink-0", children: action })
|
|
2238
2437
|
]
|
|
2239
2438
|
}
|
|
2240
2439
|
);
|
|
@@ -2242,10 +2441,10 @@ var Alert = forwardRef36(function Alert2({
|
|
|
2242
2441
|
Alert.displayName = "Alert";
|
|
2243
2442
|
|
|
2244
2443
|
// src/patterns/Banner/Banner.tsx
|
|
2245
|
-
import { cva as
|
|
2246
|
-
import { forwardRef as
|
|
2247
|
-
import { jsx as
|
|
2248
|
-
var bannerStyles =
|
|
2444
|
+
import { cva as cva10 } from "class-variance-authority";
|
|
2445
|
+
import { forwardRef as forwardRef38 } from "react";
|
|
2446
|
+
import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2447
|
+
var bannerStyles = cva10(
|
|
2249
2448
|
"flex items-center gap-3 border-b border-border px-[14px] py-2 text-[12px]",
|
|
2250
2449
|
{
|
|
2251
2450
|
variants: {
|
|
@@ -2269,9 +2468,9 @@ var defaultGlyph2 = {
|
|
|
2269
2468
|
warn: "!",
|
|
2270
2469
|
err: "\xD7"
|
|
2271
2470
|
};
|
|
2272
|
-
var Banner =
|
|
2471
|
+
var Banner = forwardRef38(function Banner2({ tone = "accent", sticky, icon, action, live = "polite", className, children, ...props }, ref) {
|
|
2273
2472
|
const t = tone ?? "accent";
|
|
2274
|
-
return /* @__PURE__ */
|
|
2473
|
+
return /* @__PURE__ */ jsxs32(
|
|
2275
2474
|
"div",
|
|
2276
2475
|
{
|
|
2277
2476
|
ref,
|
|
@@ -2280,9 +2479,9 @@ var Banner = forwardRef37(function Banner2({ tone = "accent", sticky, icon, acti
|
|
|
2280
2479
|
className: cn(bannerStyles({ tone, sticky }), className),
|
|
2281
2480
|
...props,
|
|
2282
2481
|
children: [
|
|
2283
|
-
/* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2285
|
-
action && /* @__PURE__ */
|
|
2482
|
+
/* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "leading-none", children: icon ?? defaultGlyph2[t] }),
|
|
2483
|
+
/* @__PURE__ */ jsx39("div", { className: "min-w-0 flex-1", children }),
|
|
2484
|
+
action && /* @__PURE__ */ jsx39("div", { className: "ml-auto", children: action })
|
|
2286
2485
|
]
|
|
2287
2486
|
}
|
|
2288
2487
|
);
|
|
@@ -2292,30 +2491,30 @@ Banner.displayName = "Banner";
|
|
|
2292
2491
|
// src/patterns/Breadcrumbs/Breadcrumbs.tsx
|
|
2293
2492
|
import {
|
|
2294
2493
|
Children as Children2,
|
|
2295
|
-
forwardRef as
|
|
2494
|
+
forwardRef as forwardRef39,
|
|
2296
2495
|
isValidElement as isValidElement2
|
|
2297
2496
|
} from "react";
|
|
2298
|
-
import { jsx as
|
|
2299
|
-
var Breadcrumbs =
|
|
2497
|
+
import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2498
|
+
var Breadcrumbs = forwardRef39(function Breadcrumbs2({ separator = "/", className, children, ...props }, ref) {
|
|
2300
2499
|
const crumbs = Children2.toArray(children).filter(isValidElement2);
|
|
2301
2500
|
const last = crumbs.length - 1;
|
|
2302
|
-
return /* @__PURE__ */
|
|
2501
|
+
return /* @__PURE__ */ jsx40("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-[13px]", className), ...props, children: /* @__PURE__ */ jsx40("ol", { className: "text-text-muted flex flex-wrap items-center gap-[6px]", children: crumbs.map((crumb, i) => {
|
|
2303
2502
|
const isCurrent = i === last;
|
|
2304
|
-
return /* @__PURE__ */
|
|
2305
|
-
isCurrent ? /* @__PURE__ */
|
|
2306
|
-
!isCurrent && /* @__PURE__ */
|
|
2503
|
+
return /* @__PURE__ */ jsxs33("li", { className: "inline-flex items-center gap-[6px]", children: [
|
|
2504
|
+
isCurrent ? /* @__PURE__ */ jsx40(Crumb, { ...crumb.props, current: true }) : crumb,
|
|
2505
|
+
!isCurrent && /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "text-text-dim", children: separator })
|
|
2307
2506
|
] }, i);
|
|
2308
2507
|
}) }) });
|
|
2309
2508
|
});
|
|
2310
2509
|
Breadcrumbs.displayName = "Breadcrumbs";
|
|
2311
|
-
var Crumb =
|
|
2510
|
+
var Crumb = forwardRef39(function Crumb2({ current, className, href, children, ...props }, ref) {
|
|
2312
2511
|
if (current) {
|
|
2313
|
-
return /* @__PURE__ */
|
|
2512
|
+
return /* @__PURE__ */ jsx40("span", { "aria-current": "page", className: cn("text-text", className), children });
|
|
2314
2513
|
}
|
|
2315
2514
|
if (href === void 0) {
|
|
2316
|
-
return /* @__PURE__ */
|
|
2515
|
+
return /* @__PURE__ */ jsx40("span", { className: cn("text-text-dim", className), children });
|
|
2317
2516
|
}
|
|
2318
|
-
return /* @__PURE__ */
|
|
2517
|
+
return /* @__PURE__ */ jsx40(
|
|
2319
2518
|
"a",
|
|
2320
2519
|
{
|
|
2321
2520
|
ref,
|
|
@@ -2330,14 +2529,14 @@ Crumb.displayName = "Crumb";
|
|
|
2330
2529
|
|
|
2331
2530
|
// src/patterns/Combobox/Combobox.tsx
|
|
2332
2531
|
import {
|
|
2333
|
-
forwardRef as
|
|
2334
|
-
useEffect as
|
|
2532
|
+
forwardRef as forwardRef40,
|
|
2533
|
+
useEffect as useEffect6,
|
|
2335
2534
|
useId as useId6,
|
|
2336
2535
|
useMemo as useMemo2,
|
|
2337
|
-
useRef as
|
|
2338
|
-
useState as
|
|
2536
|
+
useRef as useRef5,
|
|
2537
|
+
useState as useState9
|
|
2339
2538
|
} from "react";
|
|
2340
|
-
import { jsx as
|
|
2539
|
+
import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2341
2540
|
function normalize(option) {
|
|
2342
2541
|
if (typeof option === "string") {
|
|
2343
2542
|
return { value: option, label: option, searchText: option.toLowerCase() };
|
|
@@ -2353,7 +2552,7 @@ function normalize(option) {
|
|
|
2353
2552
|
};
|
|
2354
2553
|
}
|
|
2355
2554
|
var defaultFilter = (option, query) => option.searchText.includes(query.toLowerCase());
|
|
2356
|
-
var Combobox =
|
|
2555
|
+
var Combobox = forwardRef40(function Combobox2({
|
|
2357
2556
|
options,
|
|
2358
2557
|
value: valueProp,
|
|
2359
2558
|
defaultValue,
|
|
@@ -2392,8 +2591,8 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2392
2591
|
defaultValue: initialQuery,
|
|
2393
2592
|
onChange: onQueryChange
|
|
2394
2593
|
});
|
|
2395
|
-
const [open, setOpen] =
|
|
2396
|
-
const wrapperRef =
|
|
2594
|
+
const [open, setOpen] = useState9(false);
|
|
2595
|
+
const wrapperRef = useRef5(null);
|
|
2397
2596
|
useOutsideClick(wrapperRef, () => setOpen(false));
|
|
2398
2597
|
const filtered = useMemo2(
|
|
2399
2598
|
() => query ? normalized.filter((o) => filter(o, query)) : normalized,
|
|
@@ -2407,7 +2606,7 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2407
2606
|
if (item && !item.disabled) commit(item);
|
|
2408
2607
|
}
|
|
2409
2608
|
});
|
|
2410
|
-
|
|
2609
|
+
useEffect6(() => {
|
|
2411
2610
|
setCursor(0);
|
|
2412
2611
|
}, [query, setCursor]);
|
|
2413
2612
|
function commit(option) {
|
|
@@ -2430,8 +2629,8 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2430
2629
|
setOpen(false);
|
|
2431
2630
|
}
|
|
2432
2631
|
};
|
|
2433
|
-
return /* @__PURE__ */
|
|
2434
|
-
/* @__PURE__ */
|
|
2632
|
+
return /* @__PURE__ */ jsxs34("div", { ref: wrapperRef, className: "relative", style: { width }, children: [
|
|
2633
|
+
/* @__PURE__ */ jsx41(
|
|
2435
2634
|
"input",
|
|
2436
2635
|
{
|
|
2437
2636
|
ref,
|
|
@@ -2465,7 +2664,7 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2465
2664
|
)
|
|
2466
2665
|
}
|
|
2467
2666
|
),
|
|
2468
|
-
open && /* @__PURE__ */
|
|
2667
|
+
open && /* @__PURE__ */ jsx41(
|
|
2469
2668
|
"ul",
|
|
2470
2669
|
{
|
|
2471
2670
|
id: listboxId,
|
|
@@ -2475,9 +2674,9 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2475
2674
|
"z-dropdown absolute top-full right-0 left-0 mt-1 max-h-[220px] overflow-auto",
|
|
2476
2675
|
"border-border bg-panel rounded-md border p-1 shadow-lg"
|
|
2477
2676
|
),
|
|
2478
|
-
children: filtered.length === 0 ? /* @__PURE__ */
|
|
2677
|
+
children: filtered.length === 0 ? /* @__PURE__ */ jsx41("li", { className: "text-text-dim px-2 py-3 text-center text-[12px]", role: "presentation", children: emptyState ?? "No matches" }) : filtered.map((option, i) => {
|
|
2479
2678
|
const isActive = i === cursor;
|
|
2480
|
-
return /* @__PURE__ */
|
|
2679
|
+
return /* @__PURE__ */ jsxs34(
|
|
2481
2680
|
"li",
|
|
2482
2681
|
{
|
|
2483
2682
|
id: `${listboxId}-option-${i}`,
|
|
@@ -2495,8 +2694,8 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2495
2694
|
option.disabled && "pointer-events-none opacity-40"
|
|
2496
2695
|
),
|
|
2497
2696
|
children: [
|
|
2498
|
-
/* @__PURE__ */
|
|
2499
|
-
option.description && /* @__PURE__ */
|
|
2697
|
+
/* @__PURE__ */ jsx41("div", { children: option.label }),
|
|
2698
|
+
option.description && /* @__PURE__ */ jsx41("div", { className: "text-text-dim text-[11px]", children: option.description })
|
|
2500
2699
|
]
|
|
2501
2700
|
},
|
|
2502
2701
|
option.value
|
|
@@ -2504,19 +2703,19 @@ var Combobox = forwardRef39(function Combobox2({
|
|
|
2504
2703
|
})
|
|
2505
2704
|
}
|
|
2506
2705
|
),
|
|
2507
|
-
name && /* @__PURE__ */
|
|
2706
|
+
name && /* @__PURE__ */ jsx41("input", { type: "hidden", name, value: value ?? "", readOnly: true })
|
|
2508
2707
|
] });
|
|
2509
2708
|
});
|
|
2510
2709
|
Combobox.displayName = "Combobox";
|
|
2511
2710
|
|
|
2512
2711
|
// src/patterns/CommandPalette/CommandPalette.tsx
|
|
2513
2712
|
import * as RadixDialog4 from "@radix-ui/react-dialog";
|
|
2514
|
-
import { forwardRef as
|
|
2515
|
-
import { Fragment, jsx as
|
|
2713
|
+
import { forwardRef as forwardRef41, useEffect as useEffect7, useId as useId7, useMemo as useMemo3 } from "react";
|
|
2714
|
+
import { Fragment, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2516
2715
|
function flatItems(groups) {
|
|
2517
2716
|
return groups.flatMap((g) => g.items);
|
|
2518
2717
|
}
|
|
2519
|
-
var CommandPalette =
|
|
2718
|
+
var CommandPalette = forwardRef41(
|
|
2520
2719
|
function CommandPalette2({
|
|
2521
2720
|
open,
|
|
2522
2721
|
onOpenChange,
|
|
@@ -2542,11 +2741,11 @@ var CommandPalette = forwardRef40(
|
|
|
2542
2741
|
const listboxId = `${reactId}-listbox`;
|
|
2543
2742
|
const optionId = (i) => `${listboxId}-option-${i}`;
|
|
2544
2743
|
const hasMatches = flat.length > 0;
|
|
2545
|
-
|
|
2744
|
+
useEffect7(() => {
|
|
2546
2745
|
setCursor(0);
|
|
2547
2746
|
}, [query, groups, setCursor]);
|
|
2548
|
-
return /* @__PURE__ */
|
|
2549
|
-
/* @__PURE__ */
|
|
2747
|
+
return /* @__PURE__ */ jsx42(RadixDialog4.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(RadixDialog4.Portal, { children: [
|
|
2748
|
+
/* @__PURE__ */ jsx42(
|
|
2550
2749
|
RadixDialog4.Overlay,
|
|
2551
2750
|
{
|
|
2552
2751
|
className: cn(
|
|
@@ -2555,7 +2754,7 @@ var CommandPalette = forwardRef40(
|
|
|
2555
2754
|
)
|
|
2556
2755
|
}
|
|
2557
2756
|
),
|
|
2558
|
-
/* @__PURE__ */
|
|
2757
|
+
/* @__PURE__ */ jsxs35(
|
|
2559
2758
|
RadixDialog4.Content,
|
|
2560
2759
|
{
|
|
2561
2760
|
ref,
|
|
@@ -2569,10 +2768,10 @@ var CommandPalette = forwardRef40(
|
|
|
2569
2768
|
),
|
|
2570
2769
|
onKeyDown,
|
|
2571
2770
|
children: [
|
|
2572
|
-
/* @__PURE__ */
|
|
2573
|
-
/* @__PURE__ */
|
|
2574
|
-
/* @__PURE__ */
|
|
2575
|
-
/* @__PURE__ */
|
|
2771
|
+
/* @__PURE__ */ jsx42(RadixDialog4.Title, { className: "sr-only", children: "Command palette" }),
|
|
2772
|
+
/* @__PURE__ */ jsxs35("div", { className: "border-border flex items-center gap-[10px] border-b px-4 py-[14px]", children: [
|
|
2773
|
+
/* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: "text-text-dim", children: "\u2315" }),
|
|
2774
|
+
/* @__PURE__ */ jsx42(
|
|
2576
2775
|
"input",
|
|
2577
2776
|
{
|
|
2578
2777
|
autoFocus: true,
|
|
@@ -2589,9 +2788,9 @@ var CommandPalette = forwardRef40(
|
|
|
2589
2788
|
className: "text-text placeholder:text-text-dim flex-1 border-0 bg-transparent text-[14px] outline-none"
|
|
2590
2789
|
}
|
|
2591
2790
|
),
|
|
2592
|
-
/* @__PURE__ */
|
|
2791
|
+
/* @__PURE__ */ jsx42("span", { className: "border-border text-text-dim rounded-xs border px-[6px] py-[2px] font-mono text-[10px]", children: "ESC" })
|
|
2593
2792
|
] }),
|
|
2594
|
-
/* @__PURE__ */
|
|
2793
|
+
/* @__PURE__ */ jsx42("div", { id: listboxId, className: "min-h-[220px] p-2", role: "listbox", "aria-label": "Results", children: flat.length === 0 ? emptyState ?? /* @__PURE__ */ jsx42("div", { className: "text-text-dim px-3 py-5 text-center text-[12px]", children: "No matches" }) : /* @__PURE__ */ jsx42(
|
|
2595
2794
|
CommandGroups,
|
|
2596
2795
|
{
|
|
2597
2796
|
groups,
|
|
@@ -2601,7 +2800,7 @@ var CommandPalette = forwardRef40(
|
|
|
2601
2800
|
optionId
|
|
2602
2801
|
}
|
|
2603
2802
|
) }),
|
|
2604
|
-
footer && /* @__PURE__ */
|
|
2803
|
+
footer && /* @__PURE__ */ jsx42("div", { className: "border-border text-text-dim flex gap-4 border-t px-[14px] py-[10px] font-mono text-[10px]", children: footer })
|
|
2605
2804
|
]
|
|
2606
2805
|
}
|
|
2607
2806
|
)
|
|
@@ -2611,10 +2810,10 @@ var CommandPalette = forwardRef40(
|
|
|
2611
2810
|
CommandPalette.displayName = "CommandPalette";
|
|
2612
2811
|
function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
2613
2812
|
let runningIndex = 0;
|
|
2614
|
-
return /* @__PURE__ */
|
|
2813
|
+
return /* @__PURE__ */ jsx42(Fragment, { children: groups.map((group, gIdx) => {
|
|
2615
2814
|
if (group.items.length === 0) return null;
|
|
2616
|
-
return /* @__PURE__ */
|
|
2617
|
-
group.label && /* @__PURE__ */
|
|
2815
|
+
return /* @__PURE__ */ jsxs35("div", { children: [
|
|
2816
|
+
group.label && /* @__PURE__ */ jsxs35("div", { className: "text-text-dim px-2 pt-2 pb-1 font-mono text-[9px] tracking-[1.4px] uppercase", children: [
|
|
2618
2817
|
group.label,
|
|
2619
2818
|
" \xB7 ",
|
|
2620
2819
|
group.items.length
|
|
@@ -2622,7 +2821,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2622
2821
|
group.items.map((item) => {
|
|
2623
2822
|
const myIndex = runningIndex++;
|
|
2624
2823
|
const isActive = cursor === myIndex;
|
|
2625
|
-
return /* @__PURE__ */
|
|
2824
|
+
return /* @__PURE__ */ jsxs35(
|
|
2626
2825
|
"button",
|
|
2627
2826
|
{
|
|
2628
2827
|
id: optionId(myIndex),
|
|
@@ -2636,7 +2835,7 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2636
2835
|
isActive ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
|
|
2637
2836
|
),
|
|
2638
2837
|
children: [
|
|
2639
|
-
item.glyph != null && /* @__PURE__ */
|
|
2838
|
+
item.glyph != null && /* @__PURE__ */ jsx42(
|
|
2640
2839
|
"span",
|
|
2641
2840
|
{
|
|
2642
2841
|
"aria-hidden": true,
|
|
@@ -2647,11 +2846,11 @@ function CommandGroups({ groups, cursor, setCursor, onSelect, optionId }) {
|
|
|
2647
2846
|
children: item.glyph
|
|
2648
2847
|
}
|
|
2649
2848
|
),
|
|
2650
|
-
/* @__PURE__ */
|
|
2651
|
-
/* @__PURE__ */
|
|
2652
|
-
item.description && /* @__PURE__ */
|
|
2849
|
+
/* @__PURE__ */ jsxs35("span", { className: "min-w-0 flex-1", children: [
|
|
2850
|
+
/* @__PURE__ */ jsx42("span", { className: "block truncate text-[13px]", children: item.label }),
|
|
2851
|
+
item.description && /* @__PURE__ */ jsx42("span", { className: "text-text-dim block truncate text-[11px]", children: item.description })
|
|
2653
2852
|
] }),
|
|
2654
|
-
item.trailing && /* @__PURE__ */
|
|
2853
|
+
item.trailing && /* @__PURE__ */ jsx42("span", { className: "text-text-dim font-mono text-[10px]", children: item.trailing })
|
|
2655
2854
|
]
|
|
2656
2855
|
},
|
|
2657
2856
|
item.id
|
|
@@ -2673,8 +2872,8 @@ function filterCommandItems(query, groups) {
|
|
|
2673
2872
|
}
|
|
2674
2873
|
|
|
2675
2874
|
// src/patterns/DataTable/DataTable.tsx
|
|
2676
|
-
import { useEffect as
|
|
2677
|
-
import { jsx as
|
|
2875
|
+
import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6 } from "react";
|
|
2876
|
+
import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2678
2877
|
var alignClass = {
|
|
2679
2878
|
left: "text-left",
|
|
2680
2879
|
right: "text-right",
|
|
@@ -2730,8 +2929,8 @@ function DataTable(props) {
|
|
|
2730
2929
|
const selectedSet = selected ?? EMPTY_SET;
|
|
2731
2930
|
const allSelected = allIds.length > 0 && allIds.every((id) => selectedSet.has(id));
|
|
2732
2931
|
const someSelected = !allSelected && allIds.some((id) => selectedSet.has(id));
|
|
2733
|
-
const headerCheckRef =
|
|
2734
|
-
|
|
2932
|
+
const headerCheckRef = useRef6(null);
|
|
2933
|
+
useEffect8(() => {
|
|
2735
2934
|
if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
|
|
2736
2935
|
}, [someSelected]);
|
|
2737
2936
|
const toggleSort = (key) => {
|
|
@@ -2762,10 +2961,10 @@ function DataTable(props) {
|
|
|
2762
2961
|
return next;
|
|
2763
2962
|
});
|
|
2764
2963
|
};
|
|
2765
|
-
return /* @__PURE__ */
|
|
2766
|
-
caption && /* @__PURE__ */
|
|
2767
|
-
/* @__PURE__ */
|
|
2768
|
-
selectable && /* @__PURE__ */
|
|
2964
|
+
return /* @__PURE__ */ jsxs36("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
|
|
2965
|
+
caption && /* @__PURE__ */ jsx43("caption", { className: "sr-only", children: caption }),
|
|
2966
|
+
/* @__PURE__ */ jsx43("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ jsxs36("tr", { children: [
|
|
2967
|
+
selectable && /* @__PURE__ */ jsx43("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx43(
|
|
2769
2968
|
"input",
|
|
2770
2969
|
{
|
|
2771
2970
|
ref: headerCheckRef,
|
|
@@ -2781,8 +2980,8 @@ function DataTable(props) {
|
|
|
2781
2980
|
const isSorted = sort?.key === col.key;
|
|
2782
2981
|
const ariaSort = !sortable ? void 0 : isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : "none";
|
|
2783
2982
|
const align = col.align ?? "left";
|
|
2784
|
-
const indicator = sortable && isSorted && /* @__PURE__ */
|
|
2785
|
-
return /* @__PURE__ */
|
|
2983
|
+
const indicator = sortable && isSorted && /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: "ml-1", children: sort?.direction === "asc" ? "\u2191" : "\u2193" });
|
|
2984
|
+
return /* @__PURE__ */ jsx43(
|
|
2786
2985
|
"th",
|
|
2787
2986
|
{
|
|
2788
2987
|
scope: "col",
|
|
@@ -2794,7 +2993,7 @@ function DataTable(props) {
|
|
|
2794
2993
|
sortable && "cursor-pointer",
|
|
2795
2994
|
isSorted ? "text-accent" : "text-text-dim"
|
|
2796
2995
|
),
|
|
2797
|
-
children: sortable ? /* @__PURE__ */
|
|
2996
|
+
children: sortable ? /* @__PURE__ */ jsxs36(
|
|
2798
2997
|
"button",
|
|
2799
2998
|
{
|
|
2800
2999
|
type: "button",
|
|
@@ -2811,8 +3010,8 @@ function DataTable(props) {
|
|
|
2811
3010
|
);
|
|
2812
3011
|
})
|
|
2813
3012
|
] }) }),
|
|
2814
|
-
/* @__PURE__ */
|
|
2815
|
-
sortedData.length === 0 && /* @__PURE__ */
|
|
3013
|
+
/* @__PURE__ */ jsxs36("tbody", { children: [
|
|
3014
|
+
sortedData.length === 0 && /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43(
|
|
2816
3015
|
"td",
|
|
2817
3016
|
{
|
|
2818
3017
|
colSpan: columns.length + (selectable ? 1 : 0),
|
|
@@ -2823,7 +3022,7 @@ function DataTable(props) {
|
|
|
2823
3022
|
sortedData.map((row) => {
|
|
2824
3023
|
const id = rowKey(row);
|
|
2825
3024
|
const isSelected = selectedSet.has(id);
|
|
2826
|
-
return /* @__PURE__ */
|
|
3025
|
+
return /* @__PURE__ */ jsxs36(
|
|
2827
3026
|
"tr",
|
|
2828
3027
|
{
|
|
2829
3028
|
"data-state": isSelected ? "selected" : void 0,
|
|
@@ -2832,7 +3031,7 @@ function DataTable(props) {
|
|
|
2832
3031
|
isSelected ? "bg-accent-dim/50" : "hover:bg-panel-2"
|
|
2833
3032
|
),
|
|
2834
3033
|
children: [
|
|
2835
|
-
selectable && /* @__PURE__ */
|
|
3034
|
+
selectable && /* @__PURE__ */ jsx43("td", { className: "px-3 py-[10px]", children: /* @__PURE__ */ jsx43(
|
|
2836
3035
|
"input",
|
|
2837
3036
|
{
|
|
2838
3037
|
type: "checkbox",
|
|
@@ -2842,7 +3041,7 @@ function DataTable(props) {
|
|
|
2842
3041
|
className: "cursor-pointer accent-[var(--color-accent)]"
|
|
2843
3042
|
}
|
|
2844
3043
|
) }),
|
|
2845
|
-
columns.map((col) => /* @__PURE__ */
|
|
3044
|
+
columns.map((col) => /* @__PURE__ */ jsx43("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))
|
|
2846
3045
|
]
|
|
2847
3046
|
},
|
|
2848
3047
|
id
|
|
@@ -2854,13 +3053,13 @@ function DataTable(props) {
|
|
|
2854
3053
|
|
|
2855
3054
|
// src/patterns/DatePicker/Calendar.tsx
|
|
2856
3055
|
import {
|
|
2857
|
-
forwardRef as
|
|
2858
|
-
useCallback as
|
|
2859
|
-
useEffect as
|
|
2860
|
-
useRef as
|
|
2861
|
-
useState as
|
|
3056
|
+
forwardRef as forwardRef42,
|
|
3057
|
+
useCallback as useCallback8,
|
|
3058
|
+
useEffect as useEffect9,
|
|
3059
|
+
useRef as useRef7,
|
|
3060
|
+
useState as useState10
|
|
2862
3061
|
} from "react";
|
|
2863
|
-
import { jsx as
|
|
3062
|
+
import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2864
3063
|
var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
2865
3064
|
var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
|
|
2866
3065
|
function isSameDay(a, b) {
|
|
@@ -2871,7 +3070,7 @@ function clampDay(year, month, day) {
|
|
|
2871
3070
|
const max = new Date(year, month + 1, 0).getDate();
|
|
2872
3071
|
return Math.min(Math.max(1, day), max);
|
|
2873
3072
|
}
|
|
2874
|
-
var Calendar =
|
|
3073
|
+
var Calendar = forwardRef42(function Calendar2({
|
|
2875
3074
|
value,
|
|
2876
3075
|
defaultValue,
|
|
2877
3076
|
onValueChange,
|
|
@@ -2884,9 +3083,9 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
2884
3083
|
className,
|
|
2885
3084
|
...props
|
|
2886
3085
|
}, ref) {
|
|
2887
|
-
const [today] =
|
|
2888
|
-
const [hydrated, setHydrated] =
|
|
2889
|
-
|
|
3086
|
+
const [today] = useState10(() => /* @__PURE__ */ new Date());
|
|
3087
|
+
const [hydrated, setHydrated] = useState10(false);
|
|
3088
|
+
useEffect9(() => setHydrated(true), []);
|
|
2890
3089
|
const [selectedDate, setSelectedDate] = useControllableState({
|
|
2891
3090
|
value,
|
|
2892
3091
|
defaultValue,
|
|
@@ -2894,12 +3093,12 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
2894
3093
|
});
|
|
2895
3094
|
const initialMonth = defaultMonth ?? defaultValue?.getMonth() ?? today.getMonth();
|
|
2896
3095
|
const initialYear = defaultYear ?? defaultValue?.getFullYear() ?? today.getFullYear();
|
|
2897
|
-
const [internalMonth, setInternalMonth] =
|
|
2898
|
-
const [internalYear, setInternalYear] =
|
|
3096
|
+
const [internalMonth, setInternalMonth] = useState10(initialMonth);
|
|
3097
|
+
const [internalYear, setInternalYear] = useState10(initialYear);
|
|
2899
3098
|
const month = monthProp ?? internalMonth;
|
|
2900
3099
|
const year = yearProp ?? internalYear;
|
|
2901
3100
|
const isControlled = monthProp !== void 0 && yearProp !== void 0;
|
|
2902
|
-
const setVisible =
|
|
3101
|
+
const setVisible = useCallback8(
|
|
2903
3102
|
(m, y) => {
|
|
2904
3103
|
if (!isControlled) {
|
|
2905
3104
|
setInternalMonth(m);
|
|
@@ -2909,36 +3108,36 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
2909
3108
|
},
|
|
2910
3109
|
[isControlled, onVisibleMonthChange]
|
|
2911
3110
|
);
|
|
2912
|
-
const goPrev =
|
|
3111
|
+
const goPrev = useCallback8(() => {
|
|
2913
3112
|
const m = month === 0 ? 11 : month - 1;
|
|
2914
3113
|
const y = month === 0 ? year - 1 : year;
|
|
2915
3114
|
setVisible(m, y);
|
|
2916
3115
|
}, [month, year, setVisible]);
|
|
2917
|
-
const goNext =
|
|
3116
|
+
const goNext = useCallback8(() => {
|
|
2918
3117
|
const m = month === 11 ? 0 : month + 1;
|
|
2919
3118
|
const y = month === 11 ? year + 1 : year;
|
|
2920
3119
|
setVisible(m, y);
|
|
2921
3120
|
}, [month, year, setVisible]);
|
|
2922
3121
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
2923
3122
|
const firstDayOfMonth = new Date(year, month, 1).getDay();
|
|
2924
|
-
const [focusedDate, setFocusedDate] =
|
|
3123
|
+
const [focusedDate, setFocusedDate] = useState10(() => {
|
|
2925
3124
|
if (selectedDate) return selectedDate;
|
|
2926
3125
|
return new Date(initialYear, initialMonth, 1);
|
|
2927
3126
|
});
|
|
2928
|
-
|
|
3127
|
+
useEffect9(() => {
|
|
2929
3128
|
if (selectedDate) setFocusedDate(selectedDate);
|
|
2930
3129
|
}, [selectedDate]);
|
|
2931
3130
|
const focusedInVisibleMonth = focusedDate.getMonth() === month && focusedDate.getFullYear() === year;
|
|
2932
3131
|
const effectiveFocusDay = focusedInVisibleMonth ? focusedDate.getDate() : clampDay(year, month, focusedDate.getDate());
|
|
2933
|
-
const dayRefs =
|
|
2934
|
-
const shouldFocusRef =
|
|
2935
|
-
|
|
3132
|
+
const dayRefs = useRef7(/* @__PURE__ */ new Map());
|
|
3133
|
+
const shouldFocusRef = useRef7(false);
|
|
3134
|
+
useEffect9(() => {
|
|
2936
3135
|
if (!shouldFocusRef.current) return;
|
|
2937
3136
|
shouldFocusRef.current = false;
|
|
2938
3137
|
const node = dayRefs.current.get(effectiveFocusDay);
|
|
2939
3138
|
node?.focus();
|
|
2940
3139
|
}, [effectiveFocusDay, month, year]);
|
|
2941
|
-
const moveFocus =
|
|
3140
|
+
const moveFocus = useCallback8(
|
|
2942
3141
|
(next) => {
|
|
2943
3142
|
setFocusedDate(next);
|
|
2944
3143
|
shouldFocusRef.current = true;
|
|
@@ -2950,7 +3149,7 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
2950
3149
|
},
|
|
2951
3150
|
[month, year, setVisible]
|
|
2952
3151
|
);
|
|
2953
|
-
const onCellKeyDown =
|
|
3152
|
+
const onCellKeyDown = useCallback8(
|
|
2954
3153
|
(e, day) => {
|
|
2955
3154
|
const current = new Date(year, month, day);
|
|
2956
3155
|
let next = null;
|
|
@@ -3002,7 +3201,7 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3002
3201
|
},
|
|
3003
3202
|
[month, year, moveFocus]
|
|
3004
3203
|
);
|
|
3005
|
-
return /* @__PURE__ */
|
|
3204
|
+
return /* @__PURE__ */ jsxs37(
|
|
3006
3205
|
"div",
|
|
3007
3206
|
{
|
|
3008
3207
|
ref,
|
|
@@ -3014,14 +3213,14 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3014
3213
|
),
|
|
3015
3214
|
...props,
|
|
3016
3215
|
children: [
|
|
3017
|
-
/* @__PURE__ */
|
|
3018
|
-
/* @__PURE__ */
|
|
3216
|
+
/* @__PURE__ */ jsxs37("div", { className: "mb-3 flex items-center justify-between", children: [
|
|
3217
|
+
/* @__PURE__ */ jsxs37("span", { className: "text-[13px] font-medium", "aria-live": "polite", children: [
|
|
3019
3218
|
MONTHS[month],
|
|
3020
3219
|
" ",
|
|
3021
3220
|
year
|
|
3022
3221
|
] }),
|
|
3023
|
-
/* @__PURE__ */
|
|
3024
|
-
/* @__PURE__ */
|
|
3222
|
+
/* @__PURE__ */ jsxs37("div", { className: "flex gap-1", children: [
|
|
3223
|
+
/* @__PURE__ */ jsx44(
|
|
3025
3224
|
IconButton,
|
|
3026
3225
|
{
|
|
3027
3226
|
size: "sm",
|
|
@@ -3031,11 +3230,11 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3031
3230
|
onClick: goPrev
|
|
3032
3231
|
}
|
|
3033
3232
|
),
|
|
3034
|
-
/* @__PURE__ */
|
|
3233
|
+
/* @__PURE__ */ jsx44(IconButton, { size: "sm", variant: "ghost", icon: "\u203A", "aria-label": "Next month", onClick: goNext })
|
|
3035
3234
|
] })
|
|
3036
3235
|
] }),
|
|
3037
|
-
/* @__PURE__ */
|
|
3038
|
-
/* @__PURE__ */
|
|
3236
|
+
/* @__PURE__ */ jsxs37("div", { role: "grid", "aria-label": `${MONTHS[month]} ${year}`, className: "flex flex-col gap-[2px]", children: [
|
|
3237
|
+
/* @__PURE__ */ jsx44("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: DAYS.map((d, i) => /* @__PURE__ */ jsx44(
|
|
3039
3238
|
"div",
|
|
3040
3239
|
{
|
|
3041
3240
|
role: "columnheader",
|
|
@@ -3055,7 +3254,7 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3055
3254
|
const cellIndex = r * 7 + c;
|
|
3056
3255
|
const dayNum = cellIndex - firstDayOfMonth + 1;
|
|
3057
3256
|
if (dayNum < 1 || dayNum > daysInMonth) {
|
|
3058
|
-
cells.push(/* @__PURE__ */
|
|
3257
|
+
cells.push(/* @__PURE__ */ jsx44("div", { role: "gridcell", "aria-hidden": true }, `pad-${r}-${c}`));
|
|
3059
3258
|
continue;
|
|
3060
3259
|
}
|
|
3061
3260
|
const date = new Date(year, month, dayNum);
|
|
@@ -3065,7 +3264,7 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3065
3264
|
const isFocused = dayNum === effectiveFocusDay;
|
|
3066
3265
|
const day = dayNum;
|
|
3067
3266
|
cells.push(
|
|
3068
|
-
/* @__PURE__ */
|
|
3267
|
+
/* @__PURE__ */ jsx44("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx44(
|
|
3069
3268
|
"button",
|
|
3070
3269
|
{
|
|
3071
3270
|
ref: (node) => {
|
|
@@ -3096,7 +3295,7 @@ var Calendar = forwardRef41(function Calendar2({
|
|
|
3096
3295
|
);
|
|
3097
3296
|
}
|
|
3098
3297
|
rows.push(
|
|
3099
|
-
/* @__PURE__ */
|
|
3298
|
+
/* @__PURE__ */ jsx44("div", { role: "row", className: "grid grid-cols-7 gap-[2px]", children: cells }, `row-${r}`)
|
|
3100
3299
|
);
|
|
3101
3300
|
}
|
|
3102
3301
|
return rows;
|
|
@@ -3110,10 +3309,10 @@ Calendar.displayName = "Calendar";
|
|
|
3110
3309
|
|
|
3111
3310
|
// src/patterns/DatePicker/DatePicker.tsx
|
|
3112
3311
|
import * as RadixPopover2 from "@radix-ui/react-popover";
|
|
3113
|
-
import { forwardRef as
|
|
3114
|
-
import { jsx as
|
|
3312
|
+
import { forwardRef as forwardRef43, useState as useState11 } from "react";
|
|
3313
|
+
import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3115
3314
|
var defaultFormat = (d) => d.toLocaleDateString();
|
|
3116
|
-
var DatePicker =
|
|
3315
|
+
var DatePicker = forwardRef43(function DatePicker2({
|
|
3117
3316
|
value: valueProp,
|
|
3118
3317
|
defaultValue,
|
|
3119
3318
|
onValueChange,
|
|
@@ -3127,14 +3326,14 @@ var DatePicker = forwardRef42(function DatePicker2({
|
|
|
3127
3326
|
id,
|
|
3128
3327
|
name
|
|
3129
3328
|
}, ref) {
|
|
3130
|
-
const [open, setOpen] =
|
|
3329
|
+
const [open, setOpen] = useState11(false);
|
|
3131
3330
|
const [value, setValue] = useControllableState({
|
|
3132
3331
|
value: valueProp,
|
|
3133
3332
|
defaultValue,
|
|
3134
3333
|
onChange: onValueChange
|
|
3135
3334
|
});
|
|
3136
|
-
return /* @__PURE__ */
|
|
3137
|
-
/* @__PURE__ */
|
|
3335
|
+
return /* @__PURE__ */ jsxs38(RadixPopover2.Root, { open, onOpenChange: setOpen, children: [
|
|
3336
|
+
/* @__PURE__ */ jsx45(RadixPopover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs38(
|
|
3138
3337
|
"button",
|
|
3139
3338
|
{
|
|
3140
3339
|
ref,
|
|
@@ -3151,18 +3350,18 @@ var DatePicker = forwardRef42(function DatePicker2({
|
|
|
3151
3350
|
),
|
|
3152
3351
|
style: { width },
|
|
3153
3352
|
children: [
|
|
3154
|
-
/* @__PURE__ */
|
|
3155
|
-
/* @__PURE__ */
|
|
3353
|
+
/* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: "text-text-dim", children: "\u25A2" }),
|
|
3354
|
+
/* @__PURE__ */ jsx45("span", { className: cn("flex-1 truncate", !value && "text-text-dim"), children: value ? format(value) : emptyLabel ?? placeholder })
|
|
3156
3355
|
]
|
|
3157
3356
|
}
|
|
3158
3357
|
) }),
|
|
3159
|
-
/* @__PURE__ */
|
|
3358
|
+
/* @__PURE__ */ jsx45(RadixPopover2.Portal, { children: /* @__PURE__ */ jsx45(
|
|
3160
3359
|
RadixPopover2.Content,
|
|
3161
3360
|
{
|
|
3162
3361
|
align: "start",
|
|
3163
3362
|
sideOffset: 6,
|
|
3164
3363
|
className: "z-popover outline-none data-[state=open]:animate-[ship-pop-in_140ms_var(--easing-out)]",
|
|
3165
|
-
children: /* @__PURE__ */
|
|
3364
|
+
children: /* @__PURE__ */ jsx45(
|
|
3166
3365
|
Calendar,
|
|
3167
3366
|
{
|
|
3168
3367
|
value,
|
|
@@ -3177,17 +3376,17 @@ var DatePicker = forwardRef42(function DatePicker2({
|
|
|
3177
3376
|
)
|
|
3178
3377
|
}
|
|
3179
3378
|
) }),
|
|
3180
|
-
name && /* @__PURE__ */
|
|
3379
|
+
name && /* @__PURE__ */ jsx45("input", { type: "hidden", name, value: value ? value.toISOString() : "", readOnly: true })
|
|
3181
3380
|
] });
|
|
3182
3381
|
});
|
|
3183
3382
|
DatePicker.displayName = "DatePicker";
|
|
3184
3383
|
|
|
3185
3384
|
// src/patterns/Dots/Dots.tsx
|
|
3186
|
-
import { forwardRef as
|
|
3187
|
-
import { jsx as
|
|
3188
|
-
var Dots =
|
|
3385
|
+
import { forwardRef as forwardRef44 } from "react";
|
|
3386
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
3387
|
+
var Dots = forwardRef44(function Dots2({ total, current, onChange, className, "aria-label": ariaLabel = "Progress", ...props }, ref) {
|
|
3189
3388
|
const interactive = typeof onChange === "function";
|
|
3190
|
-
return /* @__PURE__ */
|
|
3389
|
+
return /* @__PURE__ */ jsx46(
|
|
3191
3390
|
"nav",
|
|
3192
3391
|
{
|
|
3193
3392
|
ref,
|
|
@@ -3201,7 +3400,7 @@ var Dots = forwardRef43(function Dots2({ total, current, onChange, className, "a
|
|
|
3201
3400
|
isActive ? "w-[18px] bg-accent" : "w-[6px] bg-panel-2"
|
|
3202
3401
|
);
|
|
3203
3402
|
if (interactive) {
|
|
3204
|
-
return /* @__PURE__ */
|
|
3403
|
+
return /* @__PURE__ */ jsx46(
|
|
3205
3404
|
"button",
|
|
3206
3405
|
{
|
|
3207
3406
|
type: "button",
|
|
@@ -3218,7 +3417,7 @@ var Dots = forwardRef43(function Dots2({ total, current, onChange, className, "a
|
|
|
3218
3417
|
i
|
|
3219
3418
|
);
|
|
3220
3419
|
}
|
|
3221
|
-
return /* @__PURE__ */
|
|
3420
|
+
return /* @__PURE__ */ jsx46("span", { "aria-hidden": true, className: sharedClass }, i);
|
|
3222
3421
|
})
|
|
3223
3422
|
}
|
|
3224
3423
|
);
|
|
@@ -3227,15 +3426,15 @@ Dots.displayName = "Dots";
|
|
|
3227
3426
|
|
|
3228
3427
|
// src/patterns/Dropzone/Dropzone.tsx
|
|
3229
3428
|
import {
|
|
3230
|
-
forwardRef as
|
|
3231
|
-
useState as
|
|
3429
|
+
forwardRef as forwardRef45,
|
|
3430
|
+
useState as useState12
|
|
3232
3431
|
} from "react";
|
|
3233
|
-
import { jsx as
|
|
3432
|
+
import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3234
3433
|
function listToArray(list) {
|
|
3235
3434
|
if (!list) return [];
|
|
3236
3435
|
return Array.from(list);
|
|
3237
3436
|
}
|
|
3238
|
-
var Dropzone =
|
|
3437
|
+
var Dropzone = forwardRef45(function Dropzone2({
|
|
3239
3438
|
onFiles,
|
|
3240
3439
|
accept,
|
|
3241
3440
|
multiple = true,
|
|
@@ -3246,7 +3445,7 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3246
3445
|
className,
|
|
3247
3446
|
...props
|
|
3248
3447
|
}, ref) {
|
|
3249
|
-
const [isDragging, setIsDragging] =
|
|
3448
|
+
const [isDragging, setIsDragging] = useState12(false);
|
|
3250
3449
|
const onDragOver = (e) => {
|
|
3251
3450
|
if (disabled) return;
|
|
3252
3451
|
e.preventDefault();
|
|
@@ -3260,7 +3459,7 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3260
3459
|
const files = listToArray(e.dataTransfer.files);
|
|
3261
3460
|
if (files.length) onFiles?.(files);
|
|
3262
3461
|
};
|
|
3263
|
-
return /* @__PURE__ */
|
|
3462
|
+
return /* @__PURE__ */ jsxs39(
|
|
3264
3463
|
"label",
|
|
3265
3464
|
{
|
|
3266
3465
|
ref,
|
|
@@ -3277,7 +3476,7 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3277
3476
|
),
|
|
3278
3477
|
...props,
|
|
3279
3478
|
children: [
|
|
3280
|
-
/* @__PURE__ */
|
|
3479
|
+
/* @__PURE__ */ jsx47(
|
|
3281
3480
|
"input",
|
|
3282
3481
|
{
|
|
3283
3482
|
type: "file",
|
|
@@ -3293,7 +3492,7 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3293
3492
|
}
|
|
3294
3493
|
}
|
|
3295
3494
|
),
|
|
3296
|
-
/* @__PURE__ */
|
|
3495
|
+
/* @__PURE__ */ jsx47(
|
|
3297
3496
|
"div",
|
|
3298
3497
|
{
|
|
3299
3498
|
"aria-hidden": true,
|
|
@@ -3301,8 +3500,8 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3301
3500
|
children: icon
|
|
3302
3501
|
}
|
|
3303
3502
|
),
|
|
3304
|
-
/* @__PURE__ */
|
|
3305
|
-
description && /* @__PURE__ */
|
|
3503
|
+
/* @__PURE__ */ jsx47("div", { className: "mb-1 text-[13px] font-medium", children: title }),
|
|
3504
|
+
description && /* @__PURE__ */ jsx47("div", { className: "text-text-dim text-[11px]", children: description })
|
|
3306
3505
|
]
|
|
3307
3506
|
}
|
|
3308
3507
|
);
|
|
@@ -3310,10 +3509,10 @@ var Dropzone = forwardRef44(function Dropzone2({
|
|
|
3310
3509
|
Dropzone.displayName = "Dropzone";
|
|
3311
3510
|
|
|
3312
3511
|
// src/patterns/EmptyState/EmptyState.tsx
|
|
3313
|
-
import { cva as
|
|
3314
|
-
import { forwardRef as
|
|
3315
|
-
import { jsx as
|
|
3316
|
-
var plateStyles =
|
|
3512
|
+
import { cva as cva11 } from "class-variance-authority";
|
|
3513
|
+
import { forwardRef as forwardRef46 } from "react";
|
|
3514
|
+
import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
3515
|
+
var plateStyles = cva11("grid h-12 w-12 place-items-center rounded-base text-[22px]", {
|
|
3317
3516
|
variants: {
|
|
3318
3517
|
tone: {
|
|
3319
3518
|
neutral: "bg-panel-2 text-text-muted",
|
|
@@ -3325,8 +3524,8 @@ var plateStyles = cva10("grid h-12 w-12 place-items-center rounded-base text-[22
|
|
|
3325
3524
|
},
|
|
3326
3525
|
defaultVariants: { tone: "neutral" }
|
|
3327
3526
|
});
|
|
3328
|
-
var EmptyState =
|
|
3329
|
-
return /* @__PURE__ */
|
|
3527
|
+
var EmptyState = forwardRef46(function EmptyState2({ icon, title, description, action, chips, tone, className, ...props }, ref) {
|
|
3528
|
+
return /* @__PURE__ */ jsxs40(
|
|
3330
3529
|
"div",
|
|
3331
3530
|
{
|
|
3332
3531
|
ref,
|
|
@@ -3336,10 +3535,10 @@ var EmptyState = forwardRef45(function EmptyState2({ icon, title, description, a
|
|
|
3336
3535
|
),
|
|
3337
3536
|
...props,
|
|
3338
3537
|
children: [
|
|
3339
|
-
icon != null && /* @__PURE__ */
|
|
3340
|
-
/* @__PURE__ */
|
|
3341
|
-
description && /* @__PURE__ */
|
|
3342
|
-
chips && chips.length > 0 && /* @__PURE__ */
|
|
3538
|
+
icon != null && /* @__PURE__ */ jsx48("span", { "aria-hidden": true, className: plateStyles({ tone: tone ?? "neutral" }), children: icon }),
|
|
3539
|
+
/* @__PURE__ */ jsx48("div", { className: "text-[14px] font-medium", children: title }),
|
|
3540
|
+
description && /* @__PURE__ */ jsx48("div", { className: "text-text-muted max-w-[260px] text-[12px] leading-[1.5]", children: description }),
|
|
3541
|
+
chips && chips.length > 0 && /* @__PURE__ */ jsx48("div", { className: "flex w-full flex-col gap-1", children: chips.map((c, i) => /* @__PURE__ */ jsx48(
|
|
3343
3542
|
"button",
|
|
3344
3543
|
{
|
|
3345
3544
|
type: "button",
|
|
@@ -3361,18 +3560,18 @@ var EmptyState = forwardRef45(function EmptyState2({ icon, title, description, a
|
|
|
3361
3560
|
EmptyState.displayName = "EmptyState";
|
|
3362
3561
|
|
|
3363
3562
|
// src/patterns/FileChip/FileChip.tsx
|
|
3364
|
-
import { forwardRef as
|
|
3365
|
-
import { jsx as
|
|
3563
|
+
import { forwardRef as forwardRef47 } from "react";
|
|
3564
|
+
import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
3366
3565
|
function deriveExt(name) {
|
|
3367
3566
|
const dot = name.lastIndexOf(".");
|
|
3368
3567
|
if (dot < 0) return "FILE";
|
|
3369
3568
|
return name.slice(dot + 1).slice(0, 4).toUpperCase();
|
|
3370
3569
|
}
|
|
3371
|
-
var FileChip =
|
|
3570
|
+
var FileChip = forwardRef47(function FileChip2({ name, size, progress, icon, onRemove, failed, className, ...props }, ref) {
|
|
3372
3571
|
const ext = deriveExt(name);
|
|
3373
3572
|
const showProgress = typeof progress === "number";
|
|
3374
3573
|
const isComplete = showProgress && progress >= 100;
|
|
3375
|
-
return /* @__PURE__ */
|
|
3574
|
+
return /* @__PURE__ */ jsxs41(
|
|
3376
3575
|
"div",
|
|
3377
3576
|
{
|
|
3378
3577
|
ref,
|
|
@@ -3382,7 +3581,7 @@ var FileChip = forwardRef46(function FileChip2({ name, size, progress, icon, onR
|
|
|
3382
3581
|
),
|
|
3383
3582
|
...props,
|
|
3384
3583
|
children: [
|
|
3385
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsx49(
|
|
3386
3585
|
"span",
|
|
3387
3586
|
{
|
|
3388
3587
|
"aria-hidden": true,
|
|
@@ -3390,17 +3589,17 @@ var FileChip = forwardRef46(function FileChip2({ name, size, progress, icon, onR
|
|
|
3390
3589
|
children: icon ?? ext
|
|
3391
3590
|
}
|
|
3392
3591
|
),
|
|
3393
|
-
/* @__PURE__ */
|
|
3394
|
-
/* @__PURE__ */
|
|
3395
|
-
/* @__PURE__ */
|
|
3592
|
+
/* @__PURE__ */ jsxs41("div", { className: "min-w-0 flex-1", children: [
|
|
3593
|
+
/* @__PURE__ */ jsx49("div", { className: "truncate text-[12px] font-medium", children: name }),
|
|
3594
|
+
/* @__PURE__ */ jsxs41("div", { className: cn("font-mono text-[10px]", failed ? "text-err" : "text-text-dim"), children: [
|
|
3396
3595
|
size,
|
|
3397
|
-
showProgress && !isComplete && /* @__PURE__ */
|
|
3596
|
+
showProgress && !isComplete && /* @__PURE__ */ jsxs41("span", { children: [
|
|
3398
3597
|
" \xB7 ",
|
|
3399
3598
|
Math.round(progress),
|
|
3400
3599
|
"%"
|
|
3401
3600
|
] })
|
|
3402
3601
|
] }),
|
|
3403
|
-
showProgress && !isComplete && /* @__PURE__ */
|
|
3602
|
+
showProgress && !isComplete && /* @__PURE__ */ jsx49("div", { className: "bg-panel mt-1 h-[2px] overflow-hidden rounded-full", children: /* @__PURE__ */ jsx49(
|
|
3404
3603
|
"div",
|
|
3405
3604
|
{
|
|
3406
3605
|
className: cn(
|
|
@@ -3411,7 +3610,7 @@ var FileChip = forwardRef46(function FileChip2({ name, size, progress, icon, onR
|
|
|
3411
3610
|
}
|
|
3412
3611
|
) })
|
|
3413
3612
|
] }),
|
|
3414
|
-
onRemove && /* @__PURE__ */
|
|
3613
|
+
onRemove && /* @__PURE__ */ jsx49(
|
|
3415
3614
|
"button",
|
|
3416
3615
|
{
|
|
3417
3616
|
type: "button",
|
|
@@ -3431,10 +3630,10 @@ var FileChip = forwardRef46(function FileChip2({ name, size, progress, icon, onR
|
|
|
3431
3630
|
FileChip.displayName = "FileChip";
|
|
3432
3631
|
|
|
3433
3632
|
// src/patterns/FilterPanel/FilterPanel.tsx
|
|
3434
|
-
import { forwardRef as
|
|
3435
|
-
import { jsx as
|
|
3633
|
+
import { forwardRef as forwardRef48, useCallback as useCallback9, useState as useState13 } from "react";
|
|
3634
|
+
import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
3436
3635
|
var EMPTY = Object.freeze({});
|
|
3437
|
-
var FilterPanel =
|
|
3636
|
+
var FilterPanel = forwardRef48(function FilterPanel2({
|
|
3438
3637
|
facets,
|
|
3439
3638
|
value,
|
|
3440
3639
|
defaultValue,
|
|
@@ -3452,7 +3651,7 @@ var FilterPanel = forwardRef47(function FilterPanel2({
|
|
|
3452
3651
|
onChange: onValueChange
|
|
3453
3652
|
});
|
|
3454
3653
|
const total = facets.reduce((sum, facet) => sum + (selection[facet.id]?.length ?? 0), 0);
|
|
3455
|
-
const toggle =
|
|
3654
|
+
const toggle = useCallback9(
|
|
3456
3655
|
(facetId, optionValue, next) => {
|
|
3457
3656
|
setSelection((prev) => {
|
|
3458
3657
|
const current = prev?.[facetId] ?? [];
|
|
@@ -3463,11 +3662,11 @@ var FilterPanel = forwardRef47(function FilterPanel2({
|
|
|
3463
3662
|
},
|
|
3464
3663
|
[setSelection]
|
|
3465
3664
|
);
|
|
3466
|
-
const handleReset =
|
|
3665
|
+
const handleReset = useCallback9(() => {
|
|
3467
3666
|
setSelection(EMPTY);
|
|
3468
3667
|
onReset?.();
|
|
3469
3668
|
}, [setSelection, onReset]);
|
|
3470
|
-
return /* @__PURE__ */
|
|
3669
|
+
return /* @__PURE__ */ jsxs42(
|
|
3471
3670
|
"div",
|
|
3472
3671
|
{
|
|
3473
3672
|
ref,
|
|
@@ -3479,10 +3678,10 @@ var FilterPanel = forwardRef47(function FilterPanel2({
|
|
|
3479
3678
|
),
|
|
3480
3679
|
...props,
|
|
3481
3680
|
children: [
|
|
3482
|
-
/* @__PURE__ */
|
|
3483
|
-
/* @__PURE__ */
|
|
3484
|
-
total > 0 && /* @__PURE__ */
|
|
3485
|
-
/* @__PURE__ */
|
|
3681
|
+
/* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
|
|
3682
|
+
/* @__PURE__ */ jsx50("span", { className: "text-text-dim font-mono text-[10px] tracking-[1.4px] uppercase", children: title }),
|
|
3683
|
+
total > 0 && /* @__PURE__ */ jsx50(Badge, { size: "sm", variant: "accent", children: total }),
|
|
3684
|
+
/* @__PURE__ */ jsx50(
|
|
3486
3685
|
Button,
|
|
3487
3686
|
{
|
|
3488
3687
|
type: "button",
|
|
@@ -3495,7 +3694,7 @@ var FilterPanel = forwardRef47(function FilterPanel2({
|
|
|
3495
3694
|
}
|
|
3496
3695
|
)
|
|
3497
3696
|
] }),
|
|
3498
|
-
facets.map((facet) => /* @__PURE__ */
|
|
3697
|
+
facets.map((facet) => /* @__PURE__ */ jsx50(
|
|
3499
3698
|
FilterFacetGroup,
|
|
3500
3699
|
{
|
|
3501
3700
|
facet,
|
|
@@ -3512,12 +3711,12 @@ var FilterPanel = forwardRef47(function FilterPanel2({
|
|
|
3512
3711
|
FilterPanel.displayName = "FilterPanel";
|
|
3513
3712
|
function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
3514
3713
|
const collapsible = facet.collapsible ?? true;
|
|
3515
|
-
const [open, setOpen] =
|
|
3714
|
+
const [open, setOpen] = useState13(facet.defaultOpen ?? true);
|
|
3516
3715
|
const isOpen = !collapsible || open;
|
|
3517
3716
|
const selectedCount = selected.length;
|
|
3518
3717
|
const headingClass = "text-text-muted flex items-center gap-[6px] font-mono text-[10px] tracking-[1.4px] uppercase";
|
|
3519
|
-
return /* @__PURE__ */
|
|
3520
|
-
collapsible ? /* @__PURE__ */
|
|
3718
|
+
return /* @__PURE__ */ jsxs42("section", { className: "flex flex-col gap-1", children: [
|
|
3719
|
+
collapsible ? /* @__PURE__ */ jsxs42(
|
|
3521
3720
|
"button",
|
|
3522
3721
|
{
|
|
3523
3722
|
type: "button",
|
|
@@ -3530,20 +3729,20 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
|
3530
3729
|
"hover:text-text"
|
|
3531
3730
|
),
|
|
3532
3731
|
children: [
|
|
3533
|
-
/* @__PURE__ */
|
|
3534
|
-
selectedCount > 0 && /* @__PURE__ */
|
|
3535
|
-
/* @__PURE__ */
|
|
3732
|
+
/* @__PURE__ */ jsx50("span", { className: "flex-1 text-left", children: facet.label }),
|
|
3733
|
+
selectedCount > 0 && /* @__PURE__ */ jsx50(Badge, { size: "sm", variant: "neutral", children: selectedCount }),
|
|
3734
|
+
/* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
|
|
3536
3735
|
]
|
|
3537
3736
|
}
|
|
3538
|
-
) : /* @__PURE__ */
|
|
3539
|
-
/* @__PURE__ */
|
|
3540
|
-
selectedCount > 0 && /* @__PURE__ */
|
|
3737
|
+
) : /* @__PURE__ */ jsxs42("div", { className: cn(headingClass, "px-1 py-[2px]"), children: [
|
|
3738
|
+
/* @__PURE__ */ jsx50("span", { className: "flex-1", children: facet.label }),
|
|
3739
|
+
selectedCount > 0 && /* @__PURE__ */ jsx50(Badge, { size: "sm", variant: "neutral", children: selectedCount })
|
|
3541
3740
|
] }),
|
|
3542
|
-
isOpen && /* @__PURE__ */
|
|
3741
|
+
isOpen && /* @__PURE__ */ jsx50("ul", { className: "m-0 flex list-none flex-col gap-[2px] p-0", children: facet.options.map((option) => {
|
|
3543
3742
|
const isSelected = selected.includes(option.value);
|
|
3544
3743
|
const count = counts?.[option.value];
|
|
3545
|
-
return /* @__PURE__ */
|
|
3546
|
-
/* @__PURE__ */
|
|
3744
|
+
return /* @__PURE__ */ jsxs42("li", { className: "flex items-center gap-2 px-1 py-[3px]", children: [
|
|
3745
|
+
/* @__PURE__ */ jsx50(
|
|
3547
3746
|
Checkbox,
|
|
3548
3747
|
{
|
|
3549
3748
|
checked: isSelected,
|
|
@@ -3551,25 +3750,25 @@ function FilterFacetGroup({ facet, selected, counts, onToggle }) {
|
|
|
3551
3750
|
label: option.label
|
|
3552
3751
|
}
|
|
3553
3752
|
),
|
|
3554
|
-
typeof count === "number" && /* @__PURE__ */
|
|
3753
|
+
typeof count === "number" && /* @__PURE__ */ jsx50("span", { className: "text-text-dim ml-auto font-mono text-[10px] tabular-nums", children: count })
|
|
3555
3754
|
] }, option.value);
|
|
3556
3755
|
}) })
|
|
3557
3756
|
] });
|
|
3558
3757
|
}
|
|
3559
3758
|
|
|
3560
3759
|
// src/patterns/HealthScore/HealthScore.tsx
|
|
3561
|
-
import { forwardRef as
|
|
3760
|
+
import { forwardRef as forwardRef50 } from "react";
|
|
3562
3761
|
|
|
3563
3762
|
// src/patterns/RadialProgress/RadialProgress.tsx
|
|
3564
|
-
import { forwardRef as
|
|
3565
|
-
import { jsx as
|
|
3763
|
+
import { forwardRef as forwardRef49 } from "react";
|
|
3764
|
+
import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
3566
3765
|
var toneStrokeClass = {
|
|
3567
3766
|
accent: "stroke-accent",
|
|
3568
3767
|
ok: "stroke-ok",
|
|
3569
3768
|
warn: "stroke-warn",
|
|
3570
3769
|
err: "stroke-err"
|
|
3571
3770
|
};
|
|
3572
|
-
var RadialProgress =
|
|
3771
|
+
var RadialProgress = forwardRef49(
|
|
3573
3772
|
function RadialProgress2({
|
|
3574
3773
|
value,
|
|
3575
3774
|
max = 100,
|
|
@@ -3587,7 +3786,7 @@ var RadialProgress = forwardRef48(
|
|
|
3587
3786
|
const c = 2 * Math.PI * r;
|
|
3588
3787
|
const dash = pct / 100 * c;
|
|
3589
3788
|
const resolvedTone = tone ?? (clamped >= max ? "ok" : "accent");
|
|
3590
|
-
return /* @__PURE__ */
|
|
3789
|
+
return /* @__PURE__ */ jsxs43(
|
|
3591
3790
|
"div",
|
|
3592
3791
|
{
|
|
3593
3792
|
ref,
|
|
@@ -3600,8 +3799,8 @@ var RadialProgress = forwardRef48(
|
|
|
3600
3799
|
style: { width: size, height: size },
|
|
3601
3800
|
...props,
|
|
3602
3801
|
children: [
|
|
3603
|
-
/* @__PURE__ */
|
|
3604
|
-
/* @__PURE__ */
|
|
3802
|
+
/* @__PURE__ */ jsxs43("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
|
|
3803
|
+
/* @__PURE__ */ jsx51(
|
|
3605
3804
|
"circle",
|
|
3606
3805
|
{
|
|
3607
3806
|
cx: size / 2,
|
|
@@ -3612,7 +3811,7 @@ var RadialProgress = forwardRef48(
|
|
|
3612
3811
|
className: "stroke-panel-2"
|
|
3613
3812
|
}
|
|
3614
3813
|
),
|
|
3615
|
-
/* @__PURE__ */
|
|
3814
|
+
/* @__PURE__ */ jsx51(
|
|
3616
3815
|
"circle",
|
|
3617
3816
|
{
|
|
3618
3817
|
cx: size / 2,
|
|
@@ -3630,7 +3829,7 @@ var RadialProgress = forwardRef48(
|
|
|
3630
3829
|
}
|
|
3631
3830
|
)
|
|
3632
3831
|
] }),
|
|
3633
|
-
/* @__PURE__ */
|
|
3832
|
+
/* @__PURE__ */ jsx51("div", { className: "absolute inset-0 grid place-items-center font-mono text-[11px] font-medium tabular-nums", children: children ?? `${Math.round(pct)}%` })
|
|
3634
3833
|
]
|
|
3635
3834
|
}
|
|
3636
3835
|
);
|
|
@@ -3639,7 +3838,7 @@ var RadialProgress = forwardRef48(
|
|
|
3639
3838
|
RadialProgress.displayName = "RadialProgress";
|
|
3640
3839
|
|
|
3641
3840
|
// src/patterns/HealthScore/HealthScore.tsx
|
|
3642
|
-
import { jsx as
|
|
3841
|
+
import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
3643
3842
|
function deltaTone(delta) {
|
|
3644
3843
|
if (delta > 0) return "ok";
|
|
3645
3844
|
if (delta < 0) return "err";
|
|
@@ -3656,7 +3855,7 @@ var toneTextClass = {
|
|
|
3656
3855
|
warn: "text-warn",
|
|
3657
3856
|
err: "text-err"
|
|
3658
3857
|
};
|
|
3659
|
-
var HealthScore =
|
|
3858
|
+
var HealthScore = forwardRef50(function HealthScore2({
|
|
3660
3859
|
value,
|
|
3661
3860
|
max = 100,
|
|
3662
3861
|
delta,
|
|
@@ -3671,7 +3870,7 @@ var HealthScore = forwardRef49(function HealthScore2({
|
|
|
3671
3870
|
const pct = max > 0 ? Math.round(Math.min(max, Math.max(0, value)) / max * 100) : 0;
|
|
3672
3871
|
const resolvedTone = tone ?? (pct >= 80 ? "ok" : pct >= 50 ? "accent" : "warn");
|
|
3673
3872
|
const indicatorTone = typeof delta === "number" ? deltaTone(delta) : "accent";
|
|
3674
|
-
const core = /* @__PURE__ */
|
|
3873
|
+
const core = /* @__PURE__ */ jsxs44(
|
|
3675
3874
|
"div",
|
|
3676
3875
|
{
|
|
3677
3876
|
ref,
|
|
@@ -3679,10 +3878,10 @@ var HealthScore = forwardRef49(function HealthScore2({
|
|
|
3679
3878
|
"aria-label": ariaLabel ?? `${pct}% health`,
|
|
3680
3879
|
...props,
|
|
3681
3880
|
children: [
|
|
3682
|
-
/* @__PURE__ */
|
|
3683
|
-
label && /* @__PURE__ */
|
|
3684
|
-
typeof delta === "number" && /* @__PURE__ */
|
|
3685
|
-
/* @__PURE__ */
|
|
3881
|
+
/* @__PURE__ */ jsx52(RadialProgress, { value, max, size, tone: resolvedTone }),
|
|
3882
|
+
label && /* @__PURE__ */ jsx52("div", { className: "text-text-muted mt-1 text-[12px] leading-tight", children: label }),
|
|
3883
|
+
typeof delta === "number" && /* @__PURE__ */ jsxs44("div", { className: cn("font-mono text-[11px] tabular-nums", toneTextClass[indicatorTone]), children: [
|
|
3884
|
+
/* @__PURE__ */ jsx52("span", { "aria-hidden": true, children: deltaGlyph(delta) }),
|
|
3686
3885
|
" ",
|
|
3687
3886
|
Math.abs(delta)
|
|
3688
3887
|
] })
|
|
@@ -3692,15 +3891,15 @@ var HealthScore = forwardRef49(function HealthScore2({
|
|
|
3692
3891
|
if (!breakdown || breakdown.length === 0) {
|
|
3693
3892
|
return core;
|
|
3694
3893
|
}
|
|
3695
|
-
return /* @__PURE__ */
|
|
3894
|
+
return /* @__PURE__ */ jsx52(
|
|
3696
3895
|
HoverCard,
|
|
3697
3896
|
{
|
|
3698
|
-
trigger: /* @__PURE__ */
|
|
3699
|
-
content: /* @__PURE__ */
|
|
3700
|
-
/* @__PURE__ */
|
|
3701
|
-
/* @__PURE__ */
|
|
3702
|
-
/* @__PURE__ */
|
|
3703
|
-
/* @__PURE__ */
|
|
3897
|
+
trigger: /* @__PURE__ */ jsx52("span", { className: "inline-flex", children: core }),
|
|
3898
|
+
content: /* @__PURE__ */ jsxs44("div", { className: "flex min-w-[180px] flex-col gap-2", children: [
|
|
3899
|
+
/* @__PURE__ */ jsx52("div", { className: "text-text-dim font-mono text-[9px] tracking-[1.4px] uppercase", children: "Breakdown" }),
|
|
3900
|
+
/* @__PURE__ */ jsx52("ul", { className: "m-0 flex list-none flex-col gap-1 p-0 text-[12px]", children: breakdown.map((entry, i) => /* @__PURE__ */ jsxs44("li", { className: "flex items-center gap-2", children: [
|
|
3901
|
+
/* @__PURE__ */ jsx52("span", { className: "text-text-muted flex-1 truncate", children: entry.label }),
|
|
3902
|
+
/* @__PURE__ */ jsx52(
|
|
3704
3903
|
"span",
|
|
3705
3904
|
{
|
|
3706
3905
|
className: cn(
|
|
@@ -3718,21 +3917,21 @@ var HealthScore = forwardRef49(function HealthScore2({
|
|
|
3718
3917
|
HealthScore.displayName = "HealthScore";
|
|
3719
3918
|
|
|
3720
3919
|
// src/patterns/LargeTitle/LargeTitle.tsx
|
|
3721
|
-
import { forwardRef as
|
|
3722
|
-
import { jsx as
|
|
3723
|
-
var LargeTitle =
|
|
3724
|
-
return /* @__PURE__ */
|
|
3920
|
+
import { forwardRef as forwardRef51 } from "react";
|
|
3921
|
+
import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
3922
|
+
var LargeTitle = forwardRef51(function LargeTitle2({ title, eyebrow, trailing, className, ...props }, ref) {
|
|
3923
|
+
return /* @__PURE__ */ jsxs45(
|
|
3725
3924
|
"header",
|
|
3726
3925
|
{
|
|
3727
3926
|
ref,
|
|
3728
3927
|
className: cn("px-screen flex items-end justify-between gap-3 py-3 pb-4", className),
|
|
3729
3928
|
...props,
|
|
3730
3929
|
children: [
|
|
3731
|
-
/* @__PURE__ */
|
|
3732
|
-
eyebrow && /* @__PURE__ */
|
|
3733
|
-
/* @__PURE__ */
|
|
3930
|
+
/* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1", children: [
|
|
3931
|
+
eyebrow && /* @__PURE__ */ jsx53("div", { className: "text-m-eyebrow text-accent mb-[6px] font-mono tracking-wide uppercase", children: eyebrow }),
|
|
3932
|
+
/* @__PURE__ */ jsx53("h1", { className: "text-m-h1 m-0 truncate leading-tight font-medium tracking-tight", children: title })
|
|
3734
3933
|
] }),
|
|
3735
|
-
trailing && /* @__PURE__ */
|
|
3934
|
+
trailing && /* @__PURE__ */ jsx53("div", { className: "shrink-0", children: trailing })
|
|
3736
3935
|
]
|
|
3737
3936
|
}
|
|
3738
3937
|
);
|
|
@@ -3741,10 +3940,10 @@ LargeTitle.displayName = "LargeTitle";
|
|
|
3741
3940
|
|
|
3742
3941
|
// src/patterns/Menubar/Menubar.tsx
|
|
3743
3942
|
import * as RadixMenubar from "@radix-ui/react-menubar";
|
|
3744
|
-
import { forwardRef as
|
|
3745
|
-
import { jsx as
|
|
3746
|
-
var Menubar =
|
|
3747
|
-
return /* @__PURE__ */
|
|
3943
|
+
import { forwardRef as forwardRef52 } from "react";
|
|
3944
|
+
import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
3945
|
+
var Menubar = forwardRef52(function Menubar2({ className, ...props }, ref) {
|
|
3946
|
+
return /* @__PURE__ */ jsx54(
|
|
3748
3947
|
RadixMenubar.Root,
|
|
3749
3948
|
{
|
|
3750
3949
|
ref,
|
|
@@ -3758,9 +3957,9 @@ var Menubar = forwardRef51(function Menubar2({ className, ...props }, ref) {
|
|
|
3758
3957
|
});
|
|
3759
3958
|
Menubar.displayName = "Menubar";
|
|
3760
3959
|
var MenubarMenu = RadixMenubar.Menu;
|
|
3761
|
-
var MenubarTrigger =
|
|
3960
|
+
var MenubarTrigger = forwardRef52(
|
|
3762
3961
|
function MenubarTrigger2({ className, ...props }, ref) {
|
|
3763
|
-
return /* @__PURE__ */
|
|
3962
|
+
return /* @__PURE__ */ jsx54(
|
|
3764
3963
|
RadixMenubar.Trigger,
|
|
3765
3964
|
{
|
|
3766
3965
|
ref,
|
|
@@ -3777,9 +3976,9 @@ var MenubarTrigger = forwardRef51(
|
|
|
3777
3976
|
}
|
|
3778
3977
|
);
|
|
3779
3978
|
MenubarTrigger.displayName = "MenubarTrigger";
|
|
3780
|
-
var MenubarContent =
|
|
3979
|
+
var MenubarContent = forwardRef52(
|
|
3781
3980
|
function MenubarContent2({ className, sideOffset = 6, align = "start", ...props }, ref) {
|
|
3782
|
-
return /* @__PURE__ */
|
|
3981
|
+
return /* @__PURE__ */ jsx54(RadixMenubar.Portal, { children: /* @__PURE__ */ jsx54(
|
|
3783
3982
|
RadixMenubar.Content,
|
|
3784
3983
|
{
|
|
3785
3984
|
ref,
|
|
@@ -3801,24 +4000,24 @@ var itemBase3 = cn(
|
|
|
3801
4000
|
"data-[highlighted]:bg-panel-2",
|
|
3802
4001
|
"data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed"
|
|
3803
4002
|
);
|
|
3804
|
-
var MenubarItem =
|
|
3805
|
-
return /* @__PURE__ */
|
|
4003
|
+
var MenubarItem = forwardRef52(function MenubarItem2({ trailing, destructive, className, children, ...props }, ref) {
|
|
4004
|
+
return /* @__PURE__ */ jsxs46(
|
|
3806
4005
|
RadixMenubar.Item,
|
|
3807
4006
|
{
|
|
3808
4007
|
ref,
|
|
3809
4008
|
className: cn(itemBase3, destructive ? "text-err" : "text-text", className),
|
|
3810
4009
|
...props,
|
|
3811
4010
|
children: [
|
|
3812
|
-
/* @__PURE__ */
|
|
3813
|
-
trailing && /* @__PURE__ */
|
|
4011
|
+
/* @__PURE__ */ jsx54("span", { className: "flex-1", children }),
|
|
4012
|
+
trailing && /* @__PURE__ */ jsx54("span", { className: "text-text-dim font-mono text-[10px]", children: trailing })
|
|
3814
4013
|
]
|
|
3815
4014
|
}
|
|
3816
4015
|
);
|
|
3817
4016
|
});
|
|
3818
4017
|
MenubarItem.displayName = "MenubarItem";
|
|
3819
|
-
var MenubarSeparator =
|
|
4018
|
+
var MenubarSeparator = forwardRef52(
|
|
3820
4019
|
function MenubarSeparator2({ className, ...props }, ref) {
|
|
3821
|
-
return /* @__PURE__ */
|
|
4020
|
+
return /* @__PURE__ */ jsx54(
|
|
3822
4021
|
RadixMenubar.Separator,
|
|
3823
4022
|
{
|
|
3824
4023
|
ref,
|
|
@@ -3833,22 +4032,22 @@ MenubarSeparator.displayName = "MenubarSeparator";
|
|
|
3833
4032
|
// src/patterns/NavBar/NavBar.tsx
|
|
3834
4033
|
import * as RadixNav from "@radix-ui/react-navigation-menu";
|
|
3835
4034
|
import {
|
|
3836
|
-
forwardRef as
|
|
3837
|
-
useCallback as
|
|
3838
|
-
useEffect as
|
|
3839
|
-
useRef as
|
|
3840
|
-
useState as
|
|
4035
|
+
forwardRef as forwardRef54,
|
|
4036
|
+
useCallback as useCallback11,
|
|
4037
|
+
useEffect as useEffect10,
|
|
4038
|
+
useRef as useRef8,
|
|
4039
|
+
useState as useState15
|
|
3841
4040
|
} from "react";
|
|
3842
4041
|
|
|
3843
4042
|
// src/patterns/Sidebar/Sidebar.tsx
|
|
3844
4043
|
import {
|
|
3845
|
-
forwardRef as
|
|
3846
|
-
useCallback as
|
|
3847
|
-
useState as
|
|
4044
|
+
forwardRef as forwardRef53,
|
|
4045
|
+
useCallback as useCallback10,
|
|
4046
|
+
useState as useState14
|
|
3848
4047
|
} from "react";
|
|
3849
|
-
import { Fragment as Fragment2, jsx as
|
|
3850
|
-
var Sidebar =
|
|
3851
|
-
return /* @__PURE__ */
|
|
4048
|
+
import { Fragment as Fragment2, jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
4049
|
+
var Sidebar = forwardRef53(function Sidebar2({ width = 240, className, style, ...props }, ref) {
|
|
4050
|
+
return /* @__PURE__ */ jsx55(
|
|
3852
4051
|
"aside",
|
|
3853
4052
|
{
|
|
3854
4053
|
ref,
|
|
@@ -3862,12 +4061,12 @@ var Sidebar = forwardRef52(function Sidebar2({ width = 240, className, style, ..
|
|
|
3862
4061
|
);
|
|
3863
4062
|
});
|
|
3864
4063
|
Sidebar.displayName = "Sidebar";
|
|
3865
|
-
var NavItem =
|
|
4064
|
+
var NavItem = forwardRef53(
|
|
3866
4065
|
function NavItem2({ icon, label, active, badge, href, disabled, className, ...props }, ref) {
|
|
3867
|
-
const inner = /* @__PURE__ */
|
|
3868
|
-
icon && /* @__PURE__ */
|
|
3869
|
-
/* @__PURE__ */
|
|
3870
|
-
badge != null && /* @__PURE__ */
|
|
4066
|
+
const inner = /* @__PURE__ */ jsxs47(Fragment2, { children: [
|
|
4067
|
+
icon && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: icon }),
|
|
4068
|
+
/* @__PURE__ */ jsx55("span", { className: "flex-1 truncate", children: label }),
|
|
4069
|
+
badge != null && /* @__PURE__ */ jsx55(
|
|
3871
4070
|
"span",
|
|
3872
4071
|
{
|
|
3873
4072
|
className: cn(
|
|
@@ -3888,7 +4087,7 @@ var NavItem = forwardRef52(
|
|
|
3888
4087
|
);
|
|
3889
4088
|
if (href) {
|
|
3890
4089
|
const anchorProps = props;
|
|
3891
|
-
return /* @__PURE__ */
|
|
4090
|
+
return /* @__PURE__ */ jsx55(
|
|
3892
4091
|
"a",
|
|
3893
4092
|
{
|
|
3894
4093
|
ref,
|
|
@@ -3902,7 +4101,7 @@ var NavItem = forwardRef52(
|
|
|
3902
4101
|
);
|
|
3903
4102
|
}
|
|
3904
4103
|
const buttonProps = props;
|
|
3905
|
-
return /* @__PURE__ */
|
|
4104
|
+
return /* @__PURE__ */ jsx55(
|
|
3906
4105
|
"button",
|
|
3907
4106
|
{
|
|
3908
4107
|
ref,
|
|
@@ -3917,7 +4116,7 @@ var NavItem = forwardRef52(
|
|
|
3917
4116
|
}
|
|
3918
4117
|
);
|
|
3919
4118
|
NavItem.displayName = "NavItem";
|
|
3920
|
-
var NavSection =
|
|
4119
|
+
var NavSection = forwardRef53(function NavSection2({
|
|
3921
4120
|
label,
|
|
3922
4121
|
icon,
|
|
3923
4122
|
action,
|
|
@@ -3931,16 +4130,16 @@ var NavSection = forwardRef52(function NavSection2({
|
|
|
3931
4130
|
...props
|
|
3932
4131
|
}, ref) {
|
|
3933
4132
|
const isControlled = open !== void 0;
|
|
3934
|
-
const [internalOpen, setInternalOpen] =
|
|
4133
|
+
const [internalOpen, setInternalOpen] = useState14(defaultOpen);
|
|
3935
4134
|
const isOpen = !collapsible || (isControlled ? open : internalOpen);
|
|
3936
|
-
const toggle =
|
|
4135
|
+
const toggle = useCallback10(() => {
|
|
3937
4136
|
const next = !isOpen;
|
|
3938
4137
|
if (!isControlled) setInternalOpen(next);
|
|
3939
4138
|
onOpenChange?.(next);
|
|
3940
4139
|
}, [isOpen, isControlled, onOpenChange]);
|
|
3941
4140
|
const eyebrowClass = "text-text-dim flex items-center gap-[6px] px-2 pt-2 font-mono text-[9px] tracking-[1.4px] uppercase";
|
|
3942
|
-
return /* @__PURE__ */
|
|
3943
|
-
collapsible ? /* @__PURE__ */
|
|
4141
|
+
return /* @__PURE__ */ jsxs47("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
|
|
4142
|
+
collapsible ? /* @__PURE__ */ jsxs47(
|
|
3944
4143
|
"button",
|
|
3945
4144
|
{
|
|
3946
4145
|
type: "button",
|
|
@@ -3953,18 +4152,18 @@ var NavSection = forwardRef52(function NavSection2({
|
|
|
3953
4152
|
"hover:text-text-muted"
|
|
3954
4153
|
),
|
|
3955
4154
|
children: [
|
|
3956
|
-
icon != null && /* @__PURE__ */
|
|
3957
|
-
/* @__PURE__ */
|
|
4155
|
+
icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
|
|
4156
|
+
/* @__PURE__ */ jsx55("span", { className: "flex-1 text-left", children: label }),
|
|
3958
4157
|
action,
|
|
3959
|
-
/* @__PURE__ */
|
|
4158
|
+
/* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "text-[10px] opacity-70", children: isOpen ? "\u25BE" : "\u25B8" })
|
|
3960
4159
|
]
|
|
3961
4160
|
}
|
|
3962
|
-
) : /* @__PURE__ */
|
|
3963
|
-
icon != null && /* @__PURE__ */
|
|
3964
|
-
/* @__PURE__ */
|
|
4161
|
+
) : /* @__PURE__ */ jsxs47("div", { className: eyebrowClass, children: [
|
|
4162
|
+
icon != null && /* @__PURE__ */ jsx55("span", { "aria-hidden": true, className: "opacity-80", children: icon }),
|
|
4163
|
+
/* @__PURE__ */ jsx55("span", { className: "flex-1", children: label }),
|
|
3965
4164
|
action
|
|
3966
4165
|
] }),
|
|
3967
|
-
isOpen && /* @__PURE__ */
|
|
4166
|
+
isOpen && /* @__PURE__ */ jsx55(
|
|
3968
4167
|
"div",
|
|
3969
4168
|
{
|
|
3970
4169
|
className: cn("flex flex-col gap-[2px]", indent > 0 && "border-border ml-2 border-l"),
|
|
@@ -3977,12 +4176,12 @@ var NavSection = forwardRef52(function NavSection2({
|
|
|
3977
4176
|
NavSection.displayName = "NavSection";
|
|
3978
4177
|
|
|
3979
4178
|
// src/patterns/NavBar/NavBar.tsx
|
|
3980
|
-
import { Fragment as Fragment3, jsx as
|
|
4179
|
+
import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
3981
4180
|
function isActiveTree(item, activeId) {
|
|
3982
4181
|
if (item.id === activeId) return true;
|
|
3983
4182
|
return item.children?.some((c) => isActiveTree(c, activeId)) ?? false;
|
|
3984
4183
|
}
|
|
3985
|
-
var NavBar =
|
|
4184
|
+
var NavBar = forwardRef54(function NavBar2({
|
|
3986
4185
|
orientation = "horizontal",
|
|
3987
4186
|
items,
|
|
3988
4187
|
brand,
|
|
@@ -3996,17 +4195,17 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
3996
4195
|
...props
|
|
3997
4196
|
}, ref) {
|
|
3998
4197
|
const isControlled = value !== void 0;
|
|
3999
|
-
const [internalValue, setInternalValue] =
|
|
4198
|
+
const [internalValue, setInternalValue] = useState15(defaultValue);
|
|
4000
4199
|
const activeId = isControlled ? value : internalValue;
|
|
4001
|
-
const [drawerOpen, setDrawerOpen] =
|
|
4002
|
-
const select =
|
|
4200
|
+
const [drawerOpen, setDrawerOpen] = useState15(false);
|
|
4201
|
+
const select = useCallback11(
|
|
4003
4202
|
(id) => {
|
|
4004
4203
|
if (!isControlled) setInternalValue(id);
|
|
4005
4204
|
onValueChange?.(id);
|
|
4006
4205
|
},
|
|
4007
4206
|
[isControlled, onValueChange]
|
|
4008
4207
|
);
|
|
4009
|
-
const handleItemActivate =
|
|
4208
|
+
const handleItemActivate = useCallback11(
|
|
4010
4209
|
(id) => {
|
|
4011
4210
|
select(id);
|
|
4012
4211
|
setDrawerOpen(false);
|
|
@@ -4018,7 +4217,7 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4018
4217
|
// drawer is open on a viewport that's resizing past `md`, both navs can
|
|
4019
4218
|
// sit in the DOM together. Identical accessible names would trip axe's
|
|
4020
4219
|
// `landmark-unique` rule.
|
|
4021
|
-
/* @__PURE__ */
|
|
4220
|
+
/* @__PURE__ */ jsx56("nav", { "aria-label": "Mobile navigation", className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx56(
|
|
4022
4221
|
VerticalItem,
|
|
4023
4222
|
{
|
|
4024
4223
|
item,
|
|
@@ -4028,14 +4227,14 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4028
4227
|
item.id
|
|
4029
4228
|
)) })
|
|
4030
4229
|
);
|
|
4031
|
-
const mobileBar = responsive ? /* @__PURE__ */
|
|
4230
|
+
const mobileBar = responsive ? /* @__PURE__ */ jsxs48(
|
|
4032
4231
|
"div",
|
|
4033
4232
|
{
|
|
4034
4233
|
className: cn(
|
|
4035
4234
|
"border-border bg-panel z-overlay sticky top-0 flex h-[52px] items-center gap-4 border-b px-5 md:hidden"
|
|
4036
4235
|
),
|
|
4037
4236
|
children: [
|
|
4038
|
-
/* @__PURE__ */
|
|
4237
|
+
/* @__PURE__ */ jsx56(
|
|
4039
4238
|
"button",
|
|
4040
4239
|
{
|
|
4041
4240
|
type: "button",
|
|
@@ -4045,15 +4244,15 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4045
4244
|
children: "\u2630"
|
|
4046
4245
|
}
|
|
4047
4246
|
),
|
|
4048
|
-
brand && /* @__PURE__ */
|
|
4049
|
-
actions && /* @__PURE__ */
|
|
4247
|
+
brand && /* @__PURE__ */ jsx56("div", { className: "flex flex-1 items-center text-[13px] font-medium whitespace-nowrap", children: brand }),
|
|
4248
|
+
actions && /* @__PURE__ */ jsx56("div", { className: "flex items-center gap-3", children: actions })
|
|
4050
4249
|
]
|
|
4051
4250
|
}
|
|
4052
4251
|
) : null;
|
|
4053
4252
|
if (orientation === "horizontal") {
|
|
4054
|
-
return /* @__PURE__ */
|
|
4253
|
+
return /* @__PURE__ */ jsxs48(Fragment3, { children: [
|
|
4055
4254
|
mobileBar,
|
|
4056
|
-
/* @__PURE__ */
|
|
4255
|
+
/* @__PURE__ */ jsxs48(
|
|
4057
4256
|
"header",
|
|
4058
4257
|
{
|
|
4059
4258
|
ref,
|
|
@@ -4064,10 +4263,10 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4064
4263
|
),
|
|
4065
4264
|
...props,
|
|
4066
4265
|
children: [
|
|
4067
|
-
brand && /* @__PURE__ */
|
|
4068
|
-
/* @__PURE__ */
|
|
4069
|
-
/* @__PURE__ */
|
|
4070
|
-
(item) => item.children?.length ? /* @__PURE__ */
|
|
4266
|
+
brand && /* @__PURE__ */ jsx56("div", { className: "shrink-0 text-[13px] font-medium whitespace-nowrap", children: brand }),
|
|
4267
|
+
/* @__PURE__ */ jsxs48(RadixNav.Root, { className: "relative flex-1", delayDuration: 120, children: [
|
|
4268
|
+
/* @__PURE__ */ jsx56(RadixNav.List, { className: "m-0! flex list-none! items-center gap-1 p-0! [&_li]:m-0!", children: items.map(
|
|
4269
|
+
(item) => item.children?.length ? /* @__PURE__ */ jsx56(
|
|
4071
4270
|
HorizontalDropdown,
|
|
4072
4271
|
{
|
|
4073
4272
|
item,
|
|
@@ -4076,7 +4275,7 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4076
4275
|
onActivate: handleItemActivate
|
|
4077
4276
|
},
|
|
4078
4277
|
item.id
|
|
4079
|
-
) : /* @__PURE__ */
|
|
4278
|
+
) : /* @__PURE__ */ jsx56(RadixNav.Item, { children: /* @__PURE__ */ jsx56(
|
|
4080
4279
|
HorizontalLink,
|
|
4081
4280
|
{
|
|
4082
4281
|
item,
|
|
@@ -4085,13 +4284,13 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4085
4284
|
}
|
|
4086
4285
|
) }, item.id)
|
|
4087
4286
|
) }),
|
|
4088
|
-
/* @__PURE__ */
|
|
4287
|
+
/* @__PURE__ */ jsx56("div", { className: "z-popover absolute top-full left-0 flex justify-start", children: /* @__PURE__ */ jsx56(RadixNav.Viewport, { className: "origin-top-left data-[state=open]:animate-[ship-fade-in_120ms_var(--easing-out)]" }) })
|
|
4089
4288
|
] }),
|
|
4090
|
-
actions && /* @__PURE__ */
|
|
4289
|
+
actions && /* @__PURE__ */ jsx56("div", { className: "flex items-center gap-3", children: actions })
|
|
4091
4290
|
]
|
|
4092
4291
|
}
|
|
4093
4292
|
),
|
|
4094
|
-
responsive && /* @__PURE__ */
|
|
4293
|
+
responsive && /* @__PURE__ */ jsx56(
|
|
4095
4294
|
Drawer,
|
|
4096
4295
|
{
|
|
4097
4296
|
open: drawerOpen,
|
|
@@ -4104,9 +4303,9 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4104
4303
|
)
|
|
4105
4304
|
] });
|
|
4106
4305
|
}
|
|
4107
|
-
return /* @__PURE__ */
|
|
4306
|
+
return /* @__PURE__ */ jsxs48(Fragment3, { children: [
|
|
4108
4307
|
mobileBar,
|
|
4109
|
-
/* @__PURE__ */
|
|
4308
|
+
/* @__PURE__ */ jsxs48(
|
|
4110
4309
|
"aside",
|
|
4111
4310
|
{
|
|
4112
4311
|
ref,
|
|
@@ -4119,8 +4318,8 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4119
4318
|
),
|
|
4120
4319
|
...props,
|
|
4121
4320
|
children: [
|
|
4122
|
-
brand && /* @__PURE__ */
|
|
4123
|
-
/* @__PURE__ */
|
|
4321
|
+
brand && /* @__PURE__ */ jsx56("div", { className: "px-2 py-1 text-[13px] font-medium", children: brand }),
|
|
4322
|
+
/* @__PURE__ */ jsx56("nav", { "aria-label": "Sidebar navigation", className: "flex flex-1 flex-col gap-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsx56(
|
|
4124
4323
|
VerticalItem,
|
|
4125
4324
|
{
|
|
4126
4325
|
item,
|
|
@@ -4129,11 +4328,11 @@ var NavBar = forwardRef53(function NavBar2({
|
|
|
4129
4328
|
},
|
|
4130
4329
|
item.id
|
|
4131
4330
|
)) }),
|
|
4132
|
-
actions && /* @__PURE__ */
|
|
4331
|
+
actions && /* @__PURE__ */ jsx56("div", { className: "border-border mt-auto flex flex-col gap-2 border-t pt-3", children: actions })
|
|
4133
4332
|
]
|
|
4134
4333
|
}
|
|
4135
4334
|
),
|
|
4136
|
-
responsive && /* @__PURE__ */
|
|
4335
|
+
responsive && /* @__PURE__ */ jsx56(
|
|
4137
4336
|
Drawer,
|
|
4138
4337
|
{
|
|
4139
4338
|
open: drawerOpen,
|
|
@@ -4162,13 +4361,13 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4162
4361
|
}
|
|
4163
4362
|
onActivate(item.id);
|
|
4164
4363
|
};
|
|
4165
|
-
const inner = /* @__PURE__ */
|
|
4166
|
-
item.icon != null && /* @__PURE__ */
|
|
4167
|
-
/* @__PURE__ */
|
|
4168
|
-
item.badge != null && /* @__PURE__ */
|
|
4364
|
+
const inner = /* @__PURE__ */ jsxs48(Fragment3, { children: [
|
|
4365
|
+
item.icon != null && /* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4366
|
+
/* @__PURE__ */ jsx56("span", { children: item.label }),
|
|
4367
|
+
item.badge != null && /* @__PURE__ */ jsx56(ItemBadge, { active, children: item.badge })
|
|
4169
4368
|
] });
|
|
4170
4369
|
if (item.href) {
|
|
4171
|
-
return /* @__PURE__ */
|
|
4370
|
+
return /* @__PURE__ */ jsx56(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx56(
|
|
4172
4371
|
"a",
|
|
4173
4372
|
{
|
|
4174
4373
|
href: item.href,
|
|
@@ -4180,7 +4379,7 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4180
4379
|
}
|
|
4181
4380
|
) });
|
|
4182
4381
|
}
|
|
4183
|
-
return /* @__PURE__ */
|
|
4382
|
+
return /* @__PURE__ */ jsx56(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx56(
|
|
4184
4383
|
"button",
|
|
4185
4384
|
{
|
|
4186
4385
|
type: "button",
|
|
@@ -4193,8 +4392,8 @@ function HorizontalLink({ item, active, onActivate }) {
|
|
|
4193
4392
|
) });
|
|
4194
4393
|
}
|
|
4195
4394
|
function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
4196
|
-
return /* @__PURE__ */
|
|
4197
|
-
/* @__PURE__ */
|
|
4395
|
+
return /* @__PURE__ */ jsxs48(RadixNav.Item, { children: [
|
|
4396
|
+
/* @__PURE__ */ jsxs48(
|
|
4198
4397
|
RadixNav.Trigger,
|
|
4199
4398
|
{
|
|
4200
4399
|
className: cn(
|
|
@@ -4206,9 +4405,9 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
|
4206
4405
|
),
|
|
4207
4406
|
disabled: item.disabled,
|
|
4208
4407
|
children: [
|
|
4209
|
-
item.icon != null && /* @__PURE__ */
|
|
4210
|
-
/* @__PURE__ */
|
|
4211
|
-
/* @__PURE__ */
|
|
4408
|
+
item.icon != null && /* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4409
|
+
/* @__PURE__ */ jsx56("span", { children: item.label }),
|
|
4410
|
+
/* @__PURE__ */ jsx56(
|
|
4212
4411
|
"span",
|
|
4213
4412
|
{
|
|
4214
4413
|
"aria-hidden": true,
|
|
@@ -4219,7 +4418,7 @@ function HorizontalDropdown({ item, active, activeId, onActivate }) {
|
|
|
4219
4418
|
]
|
|
4220
4419
|
}
|
|
4221
4420
|
),
|
|
4222
|
-
/* @__PURE__ */
|
|
4421
|
+
/* @__PURE__ */ jsx56(RadixNav.Content, { className: "border-border bg-panel min-w-[220px] rounded-xs border p-2 shadow-lg", children: /* @__PURE__ */ jsx56("ul", { className: "m-0! flex list-none! flex-col gap-[2px] p-0! [&_li]:m-0!", children: item.children.map((child) => /* @__PURE__ */ jsx56("li", { children: /* @__PURE__ */ jsx56(DropdownLink, { item: child, active: child.id === activeId, onActivate }) }, child.id)) }) })
|
|
4223
4422
|
] });
|
|
4224
4423
|
}
|
|
4225
4424
|
function DropdownLink({ item, active, onActivate }) {
|
|
@@ -4236,13 +4435,13 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4236
4435
|
}
|
|
4237
4436
|
onActivate(item.id);
|
|
4238
4437
|
};
|
|
4239
|
-
const inner = /* @__PURE__ */
|
|
4240
|
-
item.icon != null && /* @__PURE__ */
|
|
4241
|
-
/* @__PURE__ */
|
|
4242
|
-
item.badge != null && /* @__PURE__ */
|
|
4438
|
+
const inner = /* @__PURE__ */ jsxs48(Fragment3, { children: [
|
|
4439
|
+
item.icon != null && /* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: "opacity-80", children: item.icon }),
|
|
4440
|
+
/* @__PURE__ */ jsx56("span", { className: "flex-1", children: item.label }),
|
|
4441
|
+
item.badge != null && /* @__PURE__ */ jsx56(ItemBadge, { active, children: item.badge })
|
|
4243
4442
|
] });
|
|
4244
4443
|
if (item.href) {
|
|
4245
|
-
return /* @__PURE__ */
|
|
4444
|
+
return /* @__PURE__ */ jsx56(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx56(
|
|
4246
4445
|
"a",
|
|
4247
4446
|
{
|
|
4248
4447
|
href: item.href,
|
|
@@ -4254,7 +4453,7 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4254
4453
|
}
|
|
4255
4454
|
) });
|
|
4256
4455
|
}
|
|
4257
|
-
return /* @__PURE__ */
|
|
4456
|
+
return /* @__PURE__ */ jsx56(RadixNav.Link, { asChild: true, active, children: /* @__PURE__ */ jsx56(
|
|
4258
4457
|
"button",
|
|
4259
4458
|
{
|
|
4260
4459
|
type: "button",
|
|
@@ -4269,9 +4468,9 @@ function DropdownLink({ item, active, onActivate }) {
|
|
|
4269
4468
|
function VerticalItem({ item, activeId, onActivate }) {
|
|
4270
4469
|
const hasChildren = (item.children?.length ?? 0) > 0;
|
|
4271
4470
|
const treeActive = isActiveTree(item, activeId);
|
|
4272
|
-
const [open, setOpen] =
|
|
4273
|
-
const prevTreeActive =
|
|
4274
|
-
|
|
4471
|
+
const [open, setOpen] = useState15(treeActive);
|
|
4472
|
+
const prevTreeActive = useRef8(treeActive);
|
|
4473
|
+
useEffect10(() => {
|
|
4275
4474
|
if (treeActive && !prevTreeActive.current) setOpen(true);
|
|
4276
4475
|
prevTreeActive.current = treeActive;
|
|
4277
4476
|
}, [treeActive]);
|
|
@@ -4283,7 +4482,7 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4283
4482
|
}
|
|
4284
4483
|
onActivate(item.id);
|
|
4285
4484
|
};
|
|
4286
|
-
return /* @__PURE__ */
|
|
4485
|
+
return /* @__PURE__ */ jsx56(
|
|
4287
4486
|
NavItem,
|
|
4288
4487
|
{
|
|
4289
4488
|
icon: item.icon,
|
|
@@ -4296,8 +4495,8 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4296
4495
|
}
|
|
4297
4496
|
);
|
|
4298
4497
|
}
|
|
4299
|
-
return /* @__PURE__ */
|
|
4300
|
-
/* @__PURE__ */
|
|
4498
|
+
return /* @__PURE__ */ jsxs48("div", { className: "flex flex-col", children: [
|
|
4499
|
+
/* @__PURE__ */ jsxs48(
|
|
4301
4500
|
"button",
|
|
4302
4501
|
{
|
|
4303
4502
|
type: "button",
|
|
@@ -4313,18 +4512,18 @@ function VerticalItem({ item, activeId, onActivate }) {
|
|
|
4313
4512
|
item.disabled && "pointer-events-none opacity-50"
|
|
4314
4513
|
),
|
|
4315
4514
|
children: [
|
|
4316
|
-
item.icon != null && /* @__PURE__ */
|
|
4317
|
-
/* @__PURE__ */
|
|
4318
|
-
item.badge != null && /* @__PURE__ */
|
|
4319
|
-
/* @__PURE__ */
|
|
4515
|
+
item.icon != null && /* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: "w-[14px] text-center opacity-80", children: item.icon }),
|
|
4516
|
+
/* @__PURE__ */ jsx56("span", { className: "flex-1 truncate", children: item.label }),
|
|
4517
|
+
item.badge != null && /* @__PURE__ */ jsx56(ItemBadge, { active: treeActive, children: item.badge }),
|
|
4518
|
+
/* @__PURE__ */ jsx56("span", { "aria-hidden": true, className: "text-[10px] opacity-60", children: open ? "\u25BE" : "\u25B8" })
|
|
4320
4519
|
]
|
|
4321
4520
|
}
|
|
4322
4521
|
),
|
|
4323
|
-
open && /* @__PURE__ */
|
|
4522
|
+
open && /* @__PURE__ */ jsx56("div", { className: "border-border mt-1 ml-[18px] flex flex-col gap-[2px] border-l pl-3", children: item.children.map((child) => /* @__PURE__ */ jsx56(VerticalItem, { item: child, activeId, onActivate }, child.id)) })
|
|
4324
4523
|
] });
|
|
4325
4524
|
}
|
|
4326
4525
|
function ItemBadge({ active, children }) {
|
|
4327
|
-
return /* @__PURE__ */
|
|
4526
|
+
return /* @__PURE__ */ jsx56(
|
|
4328
4527
|
"span",
|
|
4329
4528
|
{
|
|
4330
4529
|
className: cn(
|
|
@@ -4337,8 +4536,8 @@ function ItemBadge({ active, children }) {
|
|
|
4337
4536
|
}
|
|
4338
4537
|
|
|
4339
4538
|
// src/patterns/OnboardingChecklist/OnboardingChecklist.tsx
|
|
4340
|
-
import { forwardRef as
|
|
4341
|
-
import { Fragment as Fragment4, jsx as
|
|
4539
|
+
import { forwardRef as forwardRef55 } from "react";
|
|
4540
|
+
import { Fragment as Fragment4, jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
4342
4541
|
var statusDot = {
|
|
4343
4542
|
pending: "off",
|
|
4344
4543
|
"in-progress": "sync",
|
|
@@ -4349,11 +4548,11 @@ var labelStateClass = {
|
|
|
4349
4548
|
"in-progress": "text-text",
|
|
4350
4549
|
done: "text-text-dim line-through"
|
|
4351
4550
|
};
|
|
4352
|
-
var OnboardingChecklist =
|
|
4551
|
+
var OnboardingChecklist = forwardRef55(
|
|
4353
4552
|
function OnboardingChecklist2({ items, onItemClick, title = "Get started", progressLabel, hideProgress, className, ...props }, ref) {
|
|
4354
4553
|
const total = items.length;
|
|
4355
4554
|
const done = items.filter((i) => i.status === "done").length;
|
|
4356
|
-
return /* @__PURE__ */
|
|
4555
|
+
return /* @__PURE__ */ jsxs49(
|
|
4357
4556
|
"section",
|
|
4358
4557
|
{
|
|
4359
4558
|
ref,
|
|
@@ -4364,11 +4563,11 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4364
4563
|
),
|
|
4365
4564
|
...props,
|
|
4366
4565
|
children: [
|
|
4367
|
-
/* @__PURE__ */
|
|
4368
|
-
/* @__PURE__ */
|
|
4369
|
-
/* @__PURE__ */
|
|
4566
|
+
/* @__PURE__ */ jsxs49("header", { className: "flex items-center gap-2", children: [
|
|
4567
|
+
/* @__PURE__ */ jsx57("span", { className: "text-[14px] font-medium", children: title }),
|
|
4568
|
+
/* @__PURE__ */ jsx57("span", { className: "text-text-dim ml-auto font-mono text-[11px] tabular-nums", children: progressLabel ?? `${done} of ${total} complete` })
|
|
4370
4569
|
] }),
|
|
4371
|
-
!hideProgress && total > 0 && /* @__PURE__ */
|
|
4570
|
+
!hideProgress && total > 0 && /* @__PURE__ */ jsx57(
|
|
4372
4571
|
"div",
|
|
4373
4572
|
{
|
|
4374
4573
|
role: "progressbar",
|
|
@@ -4377,7 +4576,7 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4377
4576
|
"aria-valuenow": done,
|
|
4378
4577
|
"aria-label": typeof title === "string" ? `${title} progress` : "Setup progress",
|
|
4379
4578
|
className: "bg-panel-2 h-[3px] w-full overflow-hidden rounded-full",
|
|
4380
|
-
children: /* @__PURE__ */
|
|
4579
|
+
children: /* @__PURE__ */ jsx57(
|
|
4381
4580
|
"span",
|
|
4382
4581
|
{
|
|
4383
4582
|
"aria-hidden": true,
|
|
@@ -4390,10 +4589,10 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4390
4589
|
)
|
|
4391
4590
|
}
|
|
4392
4591
|
),
|
|
4393
|
-
/* @__PURE__ */
|
|
4592
|
+
/* @__PURE__ */ jsx57("ul", { className: "m-0 flex list-none flex-col gap-1 p-0", children: items.map((item) => {
|
|
4394
4593
|
const interactive = typeof onItemClick === "function";
|
|
4395
|
-
const labelBlock = /* @__PURE__ */
|
|
4396
|
-
/* @__PURE__ */
|
|
4594
|
+
const labelBlock = /* @__PURE__ */ jsxs49(Fragment4, { children: [
|
|
4595
|
+
/* @__PURE__ */ jsx57(
|
|
4397
4596
|
StatusDot,
|
|
4398
4597
|
{
|
|
4399
4598
|
state: statusDot[item.status],
|
|
@@ -4402,17 +4601,17 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4402
4601
|
className: "mt-[3px]"
|
|
4403
4602
|
}
|
|
4404
4603
|
),
|
|
4405
|
-
/* @__PURE__ */
|
|
4406
|
-
/* @__PURE__ */
|
|
4407
|
-
item.description && /* @__PURE__ */
|
|
4604
|
+
/* @__PURE__ */ jsxs49("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
|
|
4605
|
+
/* @__PURE__ */ jsx57("span", { className: cn("text-[13px]", labelStateClass[item.status]), children: item.label }),
|
|
4606
|
+
item.description && /* @__PURE__ */ jsx57("span", { className: "text-text-muted text-[12px] leading-[1.45]", children: item.description })
|
|
4408
4607
|
] })
|
|
4409
4608
|
] });
|
|
4410
4609
|
const labelRegionClass = cn(
|
|
4411
4610
|
"flex flex-1 items-start gap-3 rounded-md px-2 py-2 text-left transition-colors duration-(--duration-micro)",
|
|
4412
4611
|
interactive && "cursor-pointer outline-none hover:bg-panel-2 focus-visible:ring-[3px] focus-visible:ring-accent-dim"
|
|
4413
4612
|
);
|
|
4414
|
-
return /* @__PURE__ */
|
|
4415
|
-
interactive ? /* @__PURE__ */
|
|
4613
|
+
return /* @__PURE__ */ jsxs49("li", { className: "flex items-start gap-2", children: [
|
|
4614
|
+
interactive ? /* @__PURE__ */ jsx57(
|
|
4416
4615
|
"button",
|
|
4417
4616
|
{
|
|
4418
4617
|
type: "button",
|
|
@@ -4421,8 +4620,8 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4421
4620
|
className: labelRegionClass,
|
|
4422
4621
|
children: labelBlock
|
|
4423
4622
|
}
|
|
4424
|
-
) : /* @__PURE__ */
|
|
4425
|
-
item.action && /* @__PURE__ */
|
|
4623
|
+
) : /* @__PURE__ */ jsx57("div", { className: labelRegionClass, children: labelBlock }),
|
|
4624
|
+
item.action && /* @__PURE__ */ jsx57("div", { className: "shrink-0 self-center", children: item.action })
|
|
4426
4625
|
] }, item.id);
|
|
4427
4626
|
}) })
|
|
4428
4627
|
]
|
|
@@ -4433,8 +4632,8 @@ var OnboardingChecklist = forwardRef54(
|
|
|
4433
4632
|
OnboardingChecklist.displayName = "OnboardingChecklist";
|
|
4434
4633
|
|
|
4435
4634
|
// src/patterns/Pagination/Pagination.tsx
|
|
4436
|
-
import { forwardRef as
|
|
4437
|
-
import { jsx as
|
|
4635
|
+
import { forwardRef as forwardRef56 } from "react";
|
|
4636
|
+
import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
4438
4637
|
function buildRange(page, total, siblings) {
|
|
4439
4638
|
if (total <= 0) return [];
|
|
4440
4639
|
const items = [];
|
|
@@ -4447,9 +4646,9 @@ function buildRange(page, total, siblings) {
|
|
|
4447
4646
|
if (total > 1) items.push(total);
|
|
4448
4647
|
return items;
|
|
4449
4648
|
}
|
|
4450
|
-
var Pagination =
|
|
4649
|
+
var Pagination = forwardRef56(function Pagination2({ page, total, onPageChange, siblings = 1, className, ...props }, ref) {
|
|
4451
4650
|
const items = buildRange(page, total, siblings);
|
|
4452
|
-
return /* @__PURE__ */
|
|
4651
|
+
return /* @__PURE__ */ jsxs50(
|
|
4453
4652
|
"nav",
|
|
4454
4653
|
{
|
|
4455
4654
|
ref,
|
|
@@ -4457,7 +4656,7 @@ var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange,
|
|
|
4457
4656
|
className: cn("inline-flex items-center gap-1", className),
|
|
4458
4657
|
...props,
|
|
4459
4658
|
children: [
|
|
4460
|
-
/* @__PURE__ */
|
|
4659
|
+
/* @__PURE__ */ jsx58(
|
|
4461
4660
|
IconButton,
|
|
4462
4661
|
{
|
|
4463
4662
|
size: "sm",
|
|
@@ -4470,7 +4669,7 @@ var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange,
|
|
|
4470
4669
|
),
|
|
4471
4670
|
items.map((item, i) => {
|
|
4472
4671
|
if (item === "start-ellipsis" || item === "end-ellipsis") {
|
|
4473
|
-
return /* @__PURE__ */
|
|
4672
|
+
return /* @__PURE__ */ jsx58(
|
|
4474
4673
|
"span",
|
|
4475
4674
|
{
|
|
4476
4675
|
"aria-hidden": true,
|
|
@@ -4481,7 +4680,7 @@ var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange,
|
|
|
4481
4680
|
);
|
|
4482
4681
|
}
|
|
4483
4682
|
const isActive = item === page;
|
|
4484
|
-
return /* @__PURE__ */
|
|
4683
|
+
return /* @__PURE__ */ jsx58(
|
|
4485
4684
|
"button",
|
|
4486
4685
|
{
|
|
4487
4686
|
type: "button",
|
|
@@ -4499,7 +4698,7 @@ var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange,
|
|
|
4499
4698
|
item
|
|
4500
4699
|
);
|
|
4501
4700
|
}),
|
|
4502
|
-
/* @__PURE__ */
|
|
4701
|
+
/* @__PURE__ */ jsx58(
|
|
4503
4702
|
IconButton,
|
|
4504
4703
|
{
|
|
4505
4704
|
size: "sm",
|
|
@@ -4517,10 +4716,10 @@ var Pagination = forwardRef55(function Pagination2({ page, total, onPageChange,
|
|
|
4517
4716
|
Pagination.displayName = "Pagination";
|
|
4518
4717
|
|
|
4519
4718
|
// src/patterns/Progress/Progress.tsx
|
|
4520
|
-
import { cva as
|
|
4521
|
-
import { forwardRef as
|
|
4522
|
-
import { jsx as
|
|
4523
|
-
var trackStyles =
|
|
4719
|
+
import { cva as cva12 } from "class-variance-authority";
|
|
4720
|
+
import { forwardRef as forwardRef57 } from "react";
|
|
4721
|
+
import { jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
4722
|
+
var trackStyles = cva12("w-full rounded-full bg-panel-2 overflow-hidden", {
|
|
4524
4723
|
variants: {
|
|
4525
4724
|
size: {
|
|
4526
4725
|
sm: "h-[3px]",
|
|
@@ -4530,7 +4729,7 @@ var trackStyles = cva11("w-full rounded-full bg-panel-2 overflow-hidden", {
|
|
|
4530
4729
|
},
|
|
4531
4730
|
defaultVariants: { size: "md" }
|
|
4532
4731
|
});
|
|
4533
|
-
var fillStyles =
|
|
4732
|
+
var fillStyles = cva12("h-full rounded-full transition-[width] duration-(--duration-step)", {
|
|
4534
4733
|
variants: {
|
|
4535
4734
|
tone: {
|
|
4536
4735
|
accent: "bg-accent",
|
|
@@ -4541,7 +4740,7 @@ var fillStyles = cva11("h-full rounded-full transition-[width] duration-(--durat
|
|
|
4541
4740
|
},
|
|
4542
4741
|
defaultVariants: { tone: "accent" }
|
|
4543
4742
|
});
|
|
4544
|
-
var Progress =
|
|
4743
|
+
var Progress = forwardRef57(function Progress2({
|
|
4545
4744
|
value = 0,
|
|
4546
4745
|
max = 100,
|
|
4547
4746
|
indeterminate = false,
|
|
@@ -4555,15 +4754,15 @@ var Progress = forwardRef56(function Progress2({
|
|
|
4555
4754
|
const clamped = Math.min(max, Math.max(0, value));
|
|
4556
4755
|
const pct = max > 0 ? clamped / max * 100 : 0;
|
|
4557
4756
|
const display = Math.round(pct);
|
|
4558
|
-
return /* @__PURE__ */
|
|
4559
|
-
label != null && /* @__PURE__ */
|
|
4560
|
-
/* @__PURE__ */
|
|
4561
|
-
showValue && !indeterminate && /* @__PURE__ */
|
|
4757
|
+
return /* @__PURE__ */ jsxs51("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
|
|
4758
|
+
label != null && /* @__PURE__ */ jsxs51("div", { className: "flex text-[12px]", children: [
|
|
4759
|
+
/* @__PURE__ */ jsx59("span", { className: "text-text-muted", children: label }),
|
|
4760
|
+
showValue && !indeterminate && /* @__PURE__ */ jsxs51("span", { className: "text-text ml-auto font-mono tabular-nums", children: [
|
|
4562
4761
|
display,
|
|
4563
4762
|
"%"
|
|
4564
4763
|
] })
|
|
4565
4764
|
] }),
|
|
4566
|
-
/* @__PURE__ */
|
|
4765
|
+
/* @__PURE__ */ jsx59(
|
|
4567
4766
|
"div",
|
|
4568
4767
|
{
|
|
4569
4768
|
role: "progressbar",
|
|
@@ -4572,7 +4771,7 @@ var Progress = forwardRef56(function Progress2({
|
|
|
4572
4771
|
"aria-valuenow": indeterminate ? void 0 : display,
|
|
4573
4772
|
"aria-label": typeof label === "string" ? label : void 0,
|
|
4574
4773
|
className: trackStyles({ size }),
|
|
4575
|
-
children: indeterminate ? /* @__PURE__ */
|
|
4774
|
+
children: indeterminate ? /* @__PURE__ */ jsx59(
|
|
4576
4775
|
"span",
|
|
4577
4776
|
{
|
|
4578
4777
|
"aria-hidden": true,
|
|
@@ -4582,7 +4781,7 @@ var Progress = forwardRef56(function Progress2({
|
|
|
4582
4781
|
"animate-[ship-indeterminate_1.4s_linear_infinite]"
|
|
4583
4782
|
)
|
|
4584
4783
|
}
|
|
4585
|
-
) : /* @__PURE__ */
|
|
4784
|
+
) : /* @__PURE__ */ jsx59("span", { "aria-hidden": true, className: fillStyles({ tone }), style: { width: `${pct}%` } })
|
|
4586
4785
|
}
|
|
4587
4786
|
)
|
|
4588
4787
|
] });
|
|
@@ -4590,18 +4789,18 @@ var Progress = forwardRef56(function Progress2({
|
|
|
4590
4789
|
Progress.displayName = "Progress";
|
|
4591
4790
|
|
|
4592
4791
|
// src/patterns/PullToRefresh/PullToRefresh.tsx
|
|
4593
|
-
import { forwardRef as
|
|
4594
|
-
import { jsx as
|
|
4792
|
+
import { forwardRef as forwardRef58 } from "react";
|
|
4793
|
+
import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
4595
4794
|
var labels = {
|
|
4596
4795
|
idle: "Pull to refresh",
|
|
4597
4796
|
pulling: "Pull to refresh",
|
|
4598
4797
|
ready: "Release to refresh",
|
|
4599
4798
|
loading: "Refreshing\u2026"
|
|
4600
4799
|
};
|
|
4601
|
-
var PullToRefresh =
|
|
4800
|
+
var PullToRefresh = forwardRef58(function PullToRefresh2({ state = "idle", label, className, ...props }, ref) {
|
|
4602
4801
|
const isLoading = state === "loading";
|
|
4603
4802
|
const transform = state === "ready" ? "rotate(180deg)" : state === "pulling" ? "rotate(90deg)" : "rotate(0deg)";
|
|
4604
|
-
return /* @__PURE__ */
|
|
4803
|
+
return /* @__PURE__ */ jsxs52(
|
|
4605
4804
|
"div",
|
|
4606
4805
|
{
|
|
4607
4806
|
ref,
|
|
@@ -4611,7 +4810,7 @@ var PullToRefresh = forwardRef57(function PullToRefresh2({ state = "idle", label
|
|
|
4611
4810
|
className: cn("text-text-muted flex flex-col items-center gap-[6px] py-3", className),
|
|
4612
4811
|
...props,
|
|
4613
4812
|
children: [
|
|
4614
|
-
/* @__PURE__ */
|
|
4813
|
+
/* @__PURE__ */ jsx60(
|
|
4615
4814
|
"div",
|
|
4616
4815
|
{
|
|
4617
4816
|
"aria-hidden": true,
|
|
@@ -4627,7 +4826,7 @@ var PullToRefresh = forwardRef57(function PullToRefresh2({ state = "idle", label
|
|
|
4627
4826
|
}
|
|
4628
4827
|
}
|
|
4629
4828
|
),
|
|
4630
|
-
/* @__PURE__ */
|
|
4829
|
+
/* @__PURE__ */ jsx60("span", { className: "text-m-eyebrow font-mono tracking-wide uppercase", children: label ?? labels[state] })
|
|
4631
4830
|
]
|
|
4632
4831
|
}
|
|
4633
4832
|
);
|
|
@@ -4635,8 +4834,8 @@ var PullToRefresh = forwardRef57(function PullToRefresh2({ state = "idle", label
|
|
|
4635
4834
|
PullToRefresh.displayName = "PullToRefresh";
|
|
4636
4835
|
|
|
4637
4836
|
// src/patterns/Sparkline/Sparkline.tsx
|
|
4638
|
-
import { forwardRef as
|
|
4639
|
-
import { jsx as
|
|
4837
|
+
import { forwardRef as forwardRef59, useMemo as useMemo5 } from "react";
|
|
4838
|
+
import { jsx as jsx61, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
4640
4839
|
function buildPath(values, w, h) {
|
|
4641
4840
|
if (values.length === 0) return { line: "", area: "" };
|
|
4642
4841
|
const pad = 2;
|
|
@@ -4655,7 +4854,7 @@ function buildPath(values, w, h) {
|
|
|
4655
4854
|
)} L${pad.toFixed(2)},${(h - pad).toFixed(2)} Z`;
|
|
4656
4855
|
return { line, area };
|
|
4657
4856
|
}
|
|
4658
|
-
var Sparkline =
|
|
4857
|
+
var Sparkline = forwardRef59(function Sparkline2({
|
|
4659
4858
|
values,
|
|
4660
4859
|
width = 160,
|
|
4661
4860
|
height = 32,
|
|
@@ -4667,7 +4866,7 @@ var Sparkline = forwardRef58(function Sparkline2({
|
|
|
4667
4866
|
...props
|
|
4668
4867
|
}, ref) {
|
|
4669
4868
|
const { line, area } = useMemo5(() => buildPath(values, width, height), [values, width, height]);
|
|
4670
|
-
return /* @__PURE__ */
|
|
4869
|
+
return /* @__PURE__ */ jsxs53(
|
|
4671
4870
|
"svg",
|
|
4672
4871
|
{
|
|
4673
4872
|
ref,
|
|
@@ -4679,8 +4878,8 @@ var Sparkline = forwardRef58(function Sparkline2({
|
|
|
4679
4878
|
className: cn("inline-block", className),
|
|
4680
4879
|
...props,
|
|
4681
4880
|
children: [
|
|
4682
|
-
fill && /* @__PURE__ */
|
|
4683
|
-
/* @__PURE__ */
|
|
4881
|
+
fill && /* @__PURE__ */ jsx61("path", { d: area, fill: stroke, fillOpacity: 0.16, stroke: "none" }),
|
|
4882
|
+
/* @__PURE__ */ jsx61(
|
|
4684
4883
|
"path",
|
|
4685
4884
|
{
|
|
4686
4885
|
d: line,
|
|
@@ -4698,16 +4897,16 @@ var Sparkline = forwardRef58(function Sparkline2({
|
|
|
4698
4897
|
Sparkline.displayName = "Sparkline";
|
|
4699
4898
|
|
|
4700
4899
|
// src/patterns/Spinner/Spinner.tsx
|
|
4701
|
-
import { forwardRef as
|
|
4702
|
-
import { jsx as
|
|
4900
|
+
import { forwardRef as forwardRef60 } from "react";
|
|
4901
|
+
import { jsx as jsx62 } from "react/jsx-runtime";
|
|
4703
4902
|
var sizes = {
|
|
4704
4903
|
sm: { box: "h-3 w-3", border: "border-[2px]" },
|
|
4705
4904
|
md: { box: "h-4 w-4", border: "border-[2px]" },
|
|
4706
4905
|
lg: { box: "h-5 w-5", border: "border-[2px]" }
|
|
4707
4906
|
};
|
|
4708
|
-
var Spinner2 =
|
|
4907
|
+
var Spinner2 = forwardRef60(function Spinner3({ size = "md", label = "Loading", className, ...props }, ref) {
|
|
4709
4908
|
const s = sizes[size];
|
|
4710
|
-
return /* @__PURE__ */
|
|
4909
|
+
return /* @__PURE__ */ jsx62(
|
|
4711
4910
|
"span",
|
|
4712
4911
|
{
|
|
4713
4912
|
ref,
|
|
@@ -4715,7 +4914,7 @@ var Spinner2 = forwardRef59(function Spinner3({ size = "md", label = "Loading",
|
|
|
4715
4914
|
"aria-label": label,
|
|
4716
4915
|
className: cn("inline-block", className),
|
|
4717
4916
|
...props,
|
|
4718
|
-
children: /* @__PURE__ */
|
|
4917
|
+
children: /* @__PURE__ */ jsx62(
|
|
4719
4918
|
"span",
|
|
4720
4919
|
{
|
|
4721
4920
|
"aria-hidden": true,
|
|
@@ -4732,8 +4931,8 @@ var Spinner2 = forwardRef59(function Spinner3({ size = "md", label = "Loading",
|
|
|
4732
4931
|
Spinner2.displayName = "Spinner";
|
|
4733
4932
|
|
|
4734
4933
|
// src/patterns/Stepper/Stepper.tsx
|
|
4735
|
-
import { forwardRef as
|
|
4736
|
-
import { jsx as
|
|
4934
|
+
import { forwardRef as forwardRef61, Fragment as Fragment5 } from "react";
|
|
4935
|
+
import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
4737
4936
|
var dotBase = "h-6 w-6 rounded-full grid place-items-center text-[11px] font-mono font-semibold border";
|
|
4738
4937
|
var dotStateClass = {
|
|
4739
4938
|
done: "bg-accent text-on-accent border-accent",
|
|
@@ -4750,8 +4949,8 @@ function stateFor(index, current) {
|
|
|
4750
4949
|
if (index === current) return "current";
|
|
4751
4950
|
return "upcoming";
|
|
4752
4951
|
}
|
|
4753
|
-
var Stepper =
|
|
4754
|
-
return /* @__PURE__ */
|
|
4952
|
+
var Stepper = forwardRef61(function Stepper2({ steps, current, className, ...props }, ref) {
|
|
4953
|
+
return /* @__PURE__ */ jsx63(
|
|
4755
4954
|
"ol",
|
|
4756
4955
|
{
|
|
4757
4956
|
ref,
|
|
@@ -4763,19 +4962,19 @@ var Stepper = forwardRef60(function Stepper2({ steps, current, className, ...pro
|
|
|
4763
4962
|
const id = typeof step === "string" ? void 0 : step.id;
|
|
4764
4963
|
const state = stateFor(i, current);
|
|
4765
4964
|
const connectorActive = i < current;
|
|
4766
|
-
return /* @__PURE__ */
|
|
4767
|
-
/* @__PURE__ */
|
|
4965
|
+
return /* @__PURE__ */ jsxs54(Fragment5, { children: [
|
|
4966
|
+
/* @__PURE__ */ jsxs54(
|
|
4768
4967
|
"li",
|
|
4769
4968
|
{
|
|
4770
4969
|
"aria-current": state === "current" ? "step" : void 0,
|
|
4771
4970
|
className: "flex items-center gap-2",
|
|
4772
4971
|
children: [
|
|
4773
|
-
/* @__PURE__ */
|
|
4774
|
-
/* @__PURE__ */
|
|
4972
|
+
/* @__PURE__ */ jsx63("span", { "aria-hidden": true, className: cn(dotBase, dotStateClass[state]), children: state === "done" ? "\u2713" : i + 1 }),
|
|
4973
|
+
/* @__PURE__ */ jsx63("span", { className: cn("text-[12px]", labelStateClass2[state]), children: label })
|
|
4775
4974
|
]
|
|
4776
4975
|
}
|
|
4777
4976
|
),
|
|
4778
|
-
i < steps.length - 1 && /* @__PURE__ */
|
|
4977
|
+
i < steps.length - 1 && /* @__PURE__ */ jsx63(
|
|
4779
4978
|
"span",
|
|
4780
4979
|
{
|
|
4781
4980
|
"aria-hidden": true,
|
|
@@ -4791,16 +4990,16 @@ Stepper.displayName = "Stepper";
|
|
|
4791
4990
|
|
|
4792
4991
|
// src/patterns/TabBar/TabBar.tsx
|
|
4793
4992
|
import {
|
|
4794
|
-
forwardRef as
|
|
4795
|
-
useCallback as
|
|
4796
|
-
useState as
|
|
4993
|
+
forwardRef as forwardRef62,
|
|
4994
|
+
useCallback as useCallback12,
|
|
4995
|
+
useState as useState16
|
|
4797
4996
|
} from "react";
|
|
4798
|
-
import { jsx as
|
|
4799
|
-
var TabBar =
|
|
4997
|
+
import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
4998
|
+
var TabBar = forwardRef62(function TabBar2({ items, value, defaultValue, onValueChange, className, ...props }, ref) {
|
|
4800
4999
|
const isControlled = value !== void 0;
|
|
4801
|
-
const [internalValue, setInternalValue] =
|
|
5000
|
+
const [internalValue, setInternalValue] = useState16(defaultValue);
|
|
4802
5001
|
const activeId = isControlled ? value : internalValue;
|
|
4803
|
-
const handleSelect =
|
|
5002
|
+
const handleSelect = useCallback12(
|
|
4804
5003
|
(id, e) => {
|
|
4805
5004
|
if (!isControlled) setInternalValue(id);
|
|
4806
5005
|
onValueChange?.(id);
|
|
@@ -4808,7 +5007,7 @@ var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValue
|
|
|
4808
5007
|
},
|
|
4809
5008
|
[isControlled, onValueChange]
|
|
4810
5009
|
);
|
|
4811
|
-
return /* @__PURE__ */
|
|
5010
|
+
return /* @__PURE__ */ jsx64(
|
|
4812
5011
|
"nav",
|
|
4813
5012
|
{
|
|
4814
5013
|
ref,
|
|
@@ -4823,7 +5022,7 @@ var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValue
|
|
|
4823
5022
|
children: items.map((item) => {
|
|
4824
5023
|
const isActive = item.id === activeId;
|
|
4825
5024
|
if (item.elevated) {
|
|
4826
|
-
return /* @__PURE__ */
|
|
5025
|
+
return /* @__PURE__ */ jsx64("div", { className: "grid place-items-center", children: /* @__PURE__ */ jsxs55(
|
|
4827
5026
|
"button",
|
|
4828
5027
|
{
|
|
4829
5028
|
type: "button",
|
|
@@ -4839,13 +5038,13 @@ var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValue
|
|
|
4839
5038
|
"disabled:cursor-not-allowed disabled:opacity-40"
|
|
4840
5039
|
),
|
|
4841
5040
|
children: [
|
|
4842
|
-
/* @__PURE__ */
|
|
4843
|
-
/* @__PURE__ */
|
|
5041
|
+
/* @__PURE__ */ jsx64("span", { "aria-hidden": true, children: item.icon }),
|
|
5042
|
+
/* @__PURE__ */ jsx64("span", { className: "sr-only", children: item.label })
|
|
4844
5043
|
]
|
|
4845
5044
|
}
|
|
4846
5045
|
) }, item.id);
|
|
4847
5046
|
}
|
|
4848
|
-
return /* @__PURE__ */
|
|
5047
|
+
return /* @__PURE__ */ jsxs55(
|
|
4849
5048
|
"button",
|
|
4850
5049
|
{
|
|
4851
5050
|
type: "button",
|
|
@@ -4860,9 +5059,9 @@ var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValue
|
|
|
4860
5059
|
isActive ? "text-accent-text" : "text-text-muted hover:text-text"
|
|
4861
5060
|
),
|
|
4862
5061
|
children: [
|
|
4863
|
-
/* @__PURE__ */
|
|
5062
|
+
/* @__PURE__ */ jsxs55("span", { className: "relative inline-flex", "aria-hidden": true, children: [
|
|
4864
5063
|
item.icon,
|
|
4865
|
-
item.badge != null && /* @__PURE__ */
|
|
5064
|
+
item.badge != null && /* @__PURE__ */ jsx64(
|
|
4866
5065
|
"span",
|
|
4867
5066
|
{
|
|
4868
5067
|
className: cn(
|
|
@@ -4873,9 +5072,9 @@ var TabBar = forwardRef61(function TabBar2({ items, value, defaultValue, onValue
|
|
|
4873
5072
|
}
|
|
4874
5073
|
)
|
|
4875
5074
|
] }),
|
|
4876
|
-
/* @__PURE__ */
|
|
5075
|
+
/* @__PURE__ */ jsxs55("span", { className: "text-[10px] font-medium tracking-tight", children: [
|
|
4877
5076
|
item.label,
|
|
4878
|
-
item.badge != null && /* @__PURE__ */
|
|
5077
|
+
item.badge != null && /* @__PURE__ */ jsxs55("span", { className: "sr-only", children: [
|
|
4879
5078
|
", ",
|
|
4880
5079
|
item.badge,
|
|
4881
5080
|
" unread"
|
|
@@ -4893,11 +5092,11 @@ TabBar.displayName = "TabBar";
|
|
|
4893
5092
|
|
|
4894
5093
|
// src/patterns/Tabs/Tabs.tsx
|
|
4895
5094
|
import * as RadixTabs from "@radix-ui/react-tabs";
|
|
4896
|
-
import { cva as
|
|
4897
|
-
import { createContext as createContext2, forwardRef as
|
|
4898
|
-
import { jsx as
|
|
5095
|
+
import { cva as cva13 } from "class-variance-authority";
|
|
5096
|
+
import { createContext as createContext2, forwardRef as forwardRef63, useContext as useContext2 } from "react";
|
|
5097
|
+
import { jsx as jsx65 } from "react/jsx-runtime";
|
|
4899
5098
|
var TabsVariantContext = createContext2("underline");
|
|
4900
|
-
var tabsListStyles =
|
|
5099
|
+
var tabsListStyles = cva13("", {
|
|
4901
5100
|
variants: {
|
|
4902
5101
|
variant: {
|
|
4903
5102
|
underline: "flex gap-6 border-b border-border",
|
|
@@ -4905,7 +5104,7 @@ var tabsListStyles = cva12("", {
|
|
|
4905
5104
|
}
|
|
4906
5105
|
}
|
|
4907
5106
|
});
|
|
4908
|
-
var tabsTriggerStyles =
|
|
5107
|
+
var tabsTriggerStyles = cva13(
|
|
4909
5108
|
"cursor-pointer outline-none transition-colors duration-(--duration-micro) focus-visible:ring-[3px] focus-visible:ring-accent-dim",
|
|
4910
5109
|
{
|
|
4911
5110
|
variants: {
|
|
@@ -4926,8 +5125,8 @@ var tabsTriggerStyles = cva12(
|
|
|
4926
5125
|
}
|
|
4927
5126
|
}
|
|
4928
5127
|
);
|
|
4929
|
-
var Tabs =
|
|
4930
|
-
return /* @__PURE__ */
|
|
5128
|
+
var Tabs = forwardRef63(function Tabs2({ variant = "underline", className, ...props }, ref) {
|
|
5129
|
+
return /* @__PURE__ */ jsx65(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx65(
|
|
4931
5130
|
RadixTabs.Root,
|
|
4932
5131
|
{
|
|
4933
5132
|
ref,
|
|
@@ -4937,14 +5136,14 @@ var Tabs = forwardRef62(function Tabs2({ variant = "underline", className, ...pr
|
|
|
4937
5136
|
) });
|
|
4938
5137
|
});
|
|
4939
5138
|
Tabs.displayName = "Tabs";
|
|
4940
|
-
var TabsList =
|
|
5139
|
+
var TabsList = forwardRef63(function TabsList2({ className, ...props }, ref) {
|
|
4941
5140
|
const variant = useContext2(TabsVariantContext);
|
|
4942
|
-
return /* @__PURE__ */
|
|
5141
|
+
return /* @__PURE__ */ jsx65(RadixTabs.List, { ref, className: cn(tabsListStyles({ variant }), className), ...props });
|
|
4943
5142
|
});
|
|
4944
5143
|
TabsList.displayName = "TabsList";
|
|
4945
|
-
var Tab =
|
|
5144
|
+
var Tab = forwardRef63(function Tab2({ className, ...props }, ref) {
|
|
4946
5145
|
const variant = useContext2(TabsVariantContext);
|
|
4947
|
-
return /* @__PURE__ */
|
|
5146
|
+
return /* @__PURE__ */ jsx65(
|
|
4948
5147
|
RadixTabs.Trigger,
|
|
4949
5148
|
{
|
|
4950
5149
|
ref,
|
|
@@ -4954,9 +5153,9 @@ var Tab = forwardRef62(function Tab2({ className, ...props }, ref) {
|
|
|
4954
5153
|
);
|
|
4955
5154
|
});
|
|
4956
5155
|
Tab.displayName = "Tab";
|
|
4957
|
-
var TabsContent =
|
|
5156
|
+
var TabsContent = forwardRef63(
|
|
4958
5157
|
function TabsContent2({ className, ...props }, ref) {
|
|
4959
|
-
return /* @__PURE__ */
|
|
5158
|
+
return /* @__PURE__ */ jsx65(
|
|
4960
5159
|
RadixTabs.Content,
|
|
4961
5160
|
{
|
|
4962
5161
|
ref,
|
|
@@ -4972,8 +5171,8 @@ var TabsContent = forwardRef62(
|
|
|
4972
5171
|
TabsContent.displayName = "TabsContent";
|
|
4973
5172
|
|
|
4974
5173
|
// src/patterns/Timeline/Timeline.tsx
|
|
4975
|
-
import { forwardRef as
|
|
4976
|
-
import { jsx as
|
|
5174
|
+
import { forwardRef as forwardRef64 } from "react";
|
|
5175
|
+
import { jsx as jsx66, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
4977
5176
|
var ringClass = {
|
|
4978
5177
|
accent: "border-accent",
|
|
4979
5178
|
ok: "border-ok",
|
|
@@ -4981,8 +5180,8 @@ var ringClass = {
|
|
|
4981
5180
|
err: "border-err",
|
|
4982
5181
|
muted: "border-text-dim"
|
|
4983
5182
|
};
|
|
4984
|
-
var Timeline =
|
|
4985
|
-
return /* @__PURE__ */
|
|
5183
|
+
var Timeline = forwardRef64(function Timeline2({ events, className, children, ...props }, ref) {
|
|
5184
|
+
return /* @__PURE__ */ jsx66(
|
|
4986
5185
|
"ol",
|
|
4987
5186
|
{
|
|
4988
5187
|
ref,
|
|
@@ -4992,14 +5191,14 @@ var Timeline = forwardRef63(function Timeline2({ events, className, children, ..
|
|
|
4992
5191
|
className
|
|
4993
5192
|
),
|
|
4994
5193
|
...props,
|
|
4995
|
-
children: events ? events.map((e, i) => /* @__PURE__ */
|
|
5194
|
+
children: events ? events.map((e, i) => /* @__PURE__ */ jsx66(TimelineItem, { tone: e.tone, time: e.time, description: e.description, children: e.title }, i)) : children
|
|
4996
5195
|
}
|
|
4997
5196
|
);
|
|
4998
5197
|
});
|
|
4999
5198
|
Timeline.displayName = "Timeline";
|
|
5000
|
-
var TimelineItem =
|
|
5001
|
-
return /* @__PURE__ */
|
|
5002
|
-
/* @__PURE__ */
|
|
5199
|
+
var TimelineItem = forwardRef64(function TimelineItem2({ tone = "accent", description, time, className, children, ...props }, ref) {
|
|
5200
|
+
return /* @__PURE__ */ jsxs56("li", { ref, className: cn("relative mb-[18px] last:mb-0", className), ...props, children: [
|
|
5201
|
+
/* @__PURE__ */ jsx66(
|
|
5003
5202
|
"span",
|
|
5004
5203
|
{
|
|
5005
5204
|
"aria-hidden": true,
|
|
@@ -5009,15 +5208,15 @@ var TimelineItem = forwardRef63(function TimelineItem2({ tone = "accent", descri
|
|
|
5009
5208
|
)
|
|
5010
5209
|
}
|
|
5011
5210
|
),
|
|
5012
|
-
/* @__PURE__ */
|
|
5013
|
-
description && /* @__PURE__ */
|
|
5014
|
-
time && /* @__PURE__ */
|
|
5211
|
+
/* @__PURE__ */ jsx66("div", { className: "text-[13px] font-medium", children }),
|
|
5212
|
+
description && /* @__PURE__ */ jsx66("div", { className: "text-text-muted text-[12px]", children: description }),
|
|
5213
|
+
time && /* @__PURE__ */ jsx66("div", { className: "text-text-dim mt-[2px] font-mono text-[10px]", children: time })
|
|
5015
5214
|
] });
|
|
5016
5215
|
});
|
|
5017
5216
|
TimelineItem.displayName = "TimelineItem";
|
|
5018
5217
|
|
|
5019
5218
|
// src/patterns/Timeline/ActivityTimeline.tsx
|
|
5020
|
-
import { forwardRef as
|
|
5219
|
+
import { forwardRef as forwardRef65 } from "react";
|
|
5021
5220
|
|
|
5022
5221
|
// src/patterns/Timeline/formatRelative.ts
|
|
5023
5222
|
var SECOND = 1e3;
|
|
@@ -5052,7 +5251,7 @@ function formatRelative(input, now = /* @__PURE__ */ new Date()) {
|
|
|
5052
5251
|
}
|
|
5053
5252
|
|
|
5054
5253
|
// src/patterns/Timeline/ActivityTimeline.tsx
|
|
5055
|
-
import { jsx as
|
|
5254
|
+
import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
5056
5255
|
var ringClass2 = {
|
|
5057
5256
|
accent: "border-accent",
|
|
5058
5257
|
ok: "border-ok",
|
|
@@ -5060,10 +5259,10 @@ var ringClass2 = {
|
|
|
5060
5259
|
err: "border-err",
|
|
5061
5260
|
muted: "border-text-dim"
|
|
5062
5261
|
};
|
|
5063
|
-
var ActivityTimeline =
|
|
5262
|
+
var ActivityTimeline = forwardRef65(
|
|
5064
5263
|
function ActivityTimeline2({ events, relativeNow, className, ...props }, ref) {
|
|
5065
5264
|
const now = relativeNow ?? /* @__PURE__ */ new Date();
|
|
5066
|
-
return /* @__PURE__ */
|
|
5265
|
+
return /* @__PURE__ */ jsx67(
|
|
5067
5266
|
"ol",
|
|
5068
5267
|
{
|
|
5069
5268
|
ref,
|
|
@@ -5076,8 +5275,8 @@ var ActivityTimeline = forwardRef64(
|
|
|
5076
5275
|
children: events.map((event) => {
|
|
5077
5276
|
const tone = event.tone ?? "accent";
|
|
5078
5277
|
const time = formatRelative(event.at, now);
|
|
5079
|
-
return /* @__PURE__ */
|
|
5080
|
-
/* @__PURE__ */
|
|
5278
|
+
return /* @__PURE__ */ jsxs57("li", { className: "relative mb-4 last:mb-0", children: [
|
|
5279
|
+
/* @__PURE__ */ jsx67(
|
|
5081
5280
|
"span",
|
|
5082
5281
|
{
|
|
5083
5282
|
"aria-hidden": true,
|
|
@@ -5087,16 +5286,16 @@ var ActivityTimeline = forwardRef64(
|
|
|
5087
5286
|
)
|
|
5088
5287
|
}
|
|
5089
5288
|
),
|
|
5090
|
-
/* @__PURE__ */
|
|
5091
|
-
event.icon && /* @__PURE__ */
|
|
5092
|
-
/* @__PURE__ */
|
|
5093
|
-
time && /* @__PURE__ */
|
|
5289
|
+
/* @__PURE__ */ jsxs57("div", { className: "flex items-baseline gap-2", children: [
|
|
5290
|
+
event.icon && /* @__PURE__ */ jsx67("span", { "aria-hidden": true, className: "text-text-muted font-mono text-[12px]", children: event.icon }),
|
|
5291
|
+
/* @__PURE__ */ jsx67("div", { className: "text-[13px] font-medium", children: event.title }),
|
|
5292
|
+
time && /* @__PURE__ */ jsx67("time", { className: "text-text-dim ml-auto font-mono text-[10px]", children: time })
|
|
5094
5293
|
] }),
|
|
5095
|
-
event.actor && /* @__PURE__ */
|
|
5096
|
-
event.actor.avatar && /* @__PURE__ */
|
|
5097
|
-
/* @__PURE__ */
|
|
5294
|
+
event.actor && /* @__PURE__ */ jsxs57("div", { className: "text-text-muted mt-[2px] flex items-center gap-[6px] text-[12px]", children: [
|
|
5295
|
+
event.actor.avatar && /* @__PURE__ */ jsx67("span", { "aria-hidden": true, className: "inline-flex", children: event.actor.avatar }),
|
|
5296
|
+
/* @__PURE__ */ jsx67("span", { children: event.actor.name })
|
|
5098
5297
|
] }),
|
|
5099
|
-
event.payload && /* @__PURE__ */
|
|
5298
|
+
event.payload && /* @__PURE__ */ jsx67("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 })
|
|
5100
5299
|
] }, event.id);
|
|
5101
5300
|
})
|
|
5102
5301
|
}
|
|
@@ -5106,9 +5305,9 @@ var ActivityTimeline = forwardRef64(
|
|
|
5106
5305
|
ActivityTimeline.displayName = "ActivityTimeline";
|
|
5107
5306
|
|
|
5108
5307
|
// src/patterns/Topbar/Topbar.tsx
|
|
5109
|
-
import { forwardRef as
|
|
5110
|
-
import { jsx as
|
|
5111
|
-
var Topbar =
|
|
5308
|
+
import { forwardRef as forwardRef66 } from "react";
|
|
5309
|
+
import { jsx as jsx68, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
5310
|
+
var Topbar = forwardRef66(function Topbar2({
|
|
5112
5311
|
title,
|
|
5113
5312
|
eyebrow,
|
|
5114
5313
|
leading,
|
|
@@ -5122,7 +5321,7 @@ var Topbar = forwardRef65(function Topbar2({
|
|
|
5122
5321
|
}, ref) {
|
|
5123
5322
|
const isTouch = density === "touch";
|
|
5124
5323
|
const backHandler = typeof back === "function" ? back : back ? onBack : void 0;
|
|
5125
|
-
return /* @__PURE__ */
|
|
5324
|
+
return /* @__PURE__ */ jsxs58(
|
|
5126
5325
|
"header",
|
|
5127
5326
|
{
|
|
5128
5327
|
ref,
|
|
@@ -5133,7 +5332,7 @@ var Topbar = forwardRef65(function Topbar2({
|
|
|
5133
5332
|
),
|
|
5134
5333
|
...props,
|
|
5135
5334
|
children: [
|
|
5136
|
-
isTouch && back && /* @__PURE__ */
|
|
5335
|
+
isTouch && back && /* @__PURE__ */ jsx68(
|
|
5137
5336
|
"button",
|
|
5138
5337
|
{
|
|
5139
5338
|
type: "button",
|
|
@@ -5147,7 +5346,7 @@ var Topbar = forwardRef65(function Topbar2({
|
|
|
5147
5346
|
"hover:bg-panel-2 h-touch w-touch",
|
|
5148
5347
|
"focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]"
|
|
5149
5348
|
),
|
|
5150
|
-
children: /* @__PURE__ */
|
|
5349
|
+
children: /* @__PURE__ */ jsx68(
|
|
5151
5350
|
"svg",
|
|
5152
5351
|
{
|
|
5153
5352
|
width: "20",
|
|
@@ -5157,15 +5356,15 @@ var Topbar = forwardRef65(function Topbar2({
|
|
|
5157
5356
|
stroke: "currentColor",
|
|
5158
5357
|
strokeWidth: "2",
|
|
5159
5358
|
"aria-hidden": true,
|
|
5160
|
-
children: /* @__PURE__ */
|
|
5359
|
+
children: /* @__PURE__ */ jsx68("path", { d: "m15 18-6-6 6-6" })
|
|
5161
5360
|
}
|
|
5162
5361
|
)
|
|
5163
5362
|
}
|
|
5164
5363
|
),
|
|
5165
5364
|
leading,
|
|
5166
|
-
(title || isTouch && eyebrow) && /* @__PURE__ */
|
|
5167
|
-
isTouch && eyebrow && /* @__PURE__ */
|
|
5168
|
-
title && /* @__PURE__ */
|
|
5365
|
+
(title || isTouch && eyebrow) && /* @__PURE__ */ jsxs58("div", { className: cn("min-w-0", isTouch && "flex-1"), children: [
|
|
5366
|
+
isTouch && eyebrow && /* @__PURE__ */ jsx68("div", { className: "text-m-eyebrow text-accent font-mono tracking-wide uppercase", children: eyebrow }),
|
|
5367
|
+
title && /* @__PURE__ */ jsx68(
|
|
5169
5368
|
"div",
|
|
5170
5369
|
{
|
|
5171
5370
|
className: cn(
|
|
@@ -5175,8 +5374,8 @@ var Topbar = forwardRef65(function Topbar2({
|
|
|
5175
5374
|
}
|
|
5176
5375
|
)
|
|
5177
5376
|
] }),
|
|
5178
|
-
!isTouch && /* @__PURE__ */
|
|
5179
|
-
actions && /* @__PURE__ */
|
|
5377
|
+
!isTouch && /* @__PURE__ */ jsx68("div", { className: "flex flex-1 items-center" }),
|
|
5378
|
+
actions && /* @__PURE__ */ jsx68("div", { className: cn("flex items-center", isTouch ? "gap-1" : "gap-3"), children: actions }),
|
|
5180
5379
|
children
|
|
5181
5380
|
]
|
|
5182
5381
|
}
|
|
@@ -5186,14 +5385,14 @@ Topbar.displayName = "Topbar";
|
|
|
5186
5385
|
|
|
5187
5386
|
// src/patterns/Tree/Tree.tsx
|
|
5188
5387
|
import {
|
|
5189
|
-
forwardRef as
|
|
5190
|
-
useCallback as
|
|
5191
|
-
useEffect as
|
|
5388
|
+
forwardRef as forwardRef67,
|
|
5389
|
+
useCallback as useCallback13,
|
|
5390
|
+
useEffect as useEffect11,
|
|
5192
5391
|
useMemo as useMemo6,
|
|
5193
|
-
useRef as
|
|
5194
|
-
useState as
|
|
5392
|
+
useRef as useRef9,
|
|
5393
|
+
useState as useState17
|
|
5195
5394
|
} from "react";
|
|
5196
|
-
import { jsx as
|
|
5395
|
+
import { jsx as jsx69, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
5197
5396
|
var EMPTY_SET2 = /* @__PURE__ */ new Set();
|
|
5198
5397
|
function flattenVisible(items, expanded, level, parentId, out) {
|
|
5199
5398
|
for (const item of items) {
|
|
@@ -5204,7 +5403,7 @@ function flattenVisible(items, expanded, level, parentId, out) {
|
|
|
5204
5403
|
}
|
|
5205
5404
|
}
|
|
5206
5405
|
}
|
|
5207
|
-
var Tree =
|
|
5406
|
+
var Tree = forwardRef67(function Tree2({
|
|
5208
5407
|
items,
|
|
5209
5408
|
expanded: expandedProp,
|
|
5210
5409
|
defaultExpanded,
|
|
@@ -5232,8 +5431,8 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5232
5431
|
flattenVisible(items, expandedSet, 1, null, out);
|
|
5233
5432
|
return out;
|
|
5234
5433
|
}, [items, expandedSet]);
|
|
5235
|
-
const [activeId, setActiveId] =
|
|
5236
|
-
|
|
5434
|
+
const [activeId, setActiveId] = useState17(null);
|
|
5435
|
+
useEffect11(() => {
|
|
5237
5436
|
if (activeId && !flatVisible.some((f) => f.id === activeId)) {
|
|
5238
5437
|
setActiveId(null);
|
|
5239
5438
|
}
|
|
@@ -5243,8 +5442,8 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5243
5442
|
if (value && flatVisible.some((f) => f.id === value)) return value;
|
|
5244
5443
|
return flatVisible[0]?.id ?? null;
|
|
5245
5444
|
}, [activeId, flatVisible, value]);
|
|
5246
|
-
const listRef =
|
|
5247
|
-
const setRefs =
|
|
5445
|
+
const listRef = useRef9(null);
|
|
5446
|
+
const setRefs = useCallback13(
|
|
5248
5447
|
(node) => {
|
|
5249
5448
|
listRef.current = node;
|
|
5250
5449
|
if (typeof ref === "function") ref(node);
|
|
@@ -5252,20 +5451,20 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5252
5451
|
},
|
|
5253
5452
|
[ref]
|
|
5254
5453
|
);
|
|
5255
|
-
const focusItem =
|
|
5454
|
+
const focusItem = useCallback13((id) => {
|
|
5256
5455
|
const root = listRef.current;
|
|
5257
5456
|
if (!root) return;
|
|
5258
5457
|
const el = root.querySelector(`[data-treeitem-id="${CSS.escape(id)}"]`);
|
|
5259
5458
|
el?.focus();
|
|
5260
5459
|
}, []);
|
|
5261
|
-
const moveActive =
|
|
5460
|
+
const moveActive = useCallback13(
|
|
5262
5461
|
(id) => {
|
|
5263
5462
|
setActiveId(id);
|
|
5264
5463
|
queueMicrotask(() => focusItem(id));
|
|
5265
5464
|
},
|
|
5266
5465
|
[focusItem]
|
|
5267
5466
|
);
|
|
5268
|
-
const toggle =
|
|
5467
|
+
const toggle = useCallback13(
|
|
5269
5468
|
(id) => {
|
|
5270
5469
|
setExpanded((prev) => {
|
|
5271
5470
|
const next = new Set(prev ?? EMPTY_SET2);
|
|
@@ -5276,7 +5475,7 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5276
5475
|
},
|
|
5277
5476
|
[setExpanded]
|
|
5278
5477
|
);
|
|
5279
|
-
const expand =
|
|
5478
|
+
const expand = useCallback13(
|
|
5280
5479
|
(id) => {
|
|
5281
5480
|
setExpanded((prev) => {
|
|
5282
5481
|
const base = prev ?? EMPTY_SET2;
|
|
@@ -5288,7 +5487,7 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5288
5487
|
},
|
|
5289
5488
|
[setExpanded]
|
|
5290
5489
|
);
|
|
5291
|
-
const collapse =
|
|
5490
|
+
const collapse = useCallback13(
|
|
5292
5491
|
(id) => {
|
|
5293
5492
|
setExpanded((prev) => {
|
|
5294
5493
|
const base = prev ?? EMPTY_SET2;
|
|
@@ -5300,13 +5499,13 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5300
5499
|
},
|
|
5301
5500
|
[setExpanded]
|
|
5302
5501
|
);
|
|
5303
|
-
const selectItem =
|
|
5502
|
+
const selectItem = useCallback13(
|
|
5304
5503
|
(id) => {
|
|
5305
5504
|
setValue(id);
|
|
5306
5505
|
},
|
|
5307
5506
|
[setValue]
|
|
5308
5507
|
);
|
|
5309
|
-
const handleKeyDown =
|
|
5508
|
+
const handleKeyDown = useCallback13(
|
|
5310
5509
|
(e) => {
|
|
5311
5510
|
onKeyDown?.(e);
|
|
5312
5511
|
if (e.defaultPrevented) return;
|
|
@@ -5386,7 +5585,7 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5386
5585
|
toggle
|
|
5387
5586
|
]
|
|
5388
5587
|
);
|
|
5389
|
-
return /* @__PURE__ */
|
|
5588
|
+
return /* @__PURE__ */ jsx69(
|
|
5390
5589
|
"ul",
|
|
5391
5590
|
{
|
|
5392
5591
|
ref: setRefs,
|
|
@@ -5394,7 +5593,7 @@ var Tree = forwardRef66(function Tree2({
|
|
|
5394
5593
|
className: cn("flex flex-col gap-px text-[12px]", className),
|
|
5395
5594
|
onKeyDown: handleKeyDown,
|
|
5396
5595
|
...props,
|
|
5397
|
-
children: items.map((item) => /* @__PURE__ */
|
|
5596
|
+
children: items.map((item) => /* @__PURE__ */ jsx69(
|
|
5398
5597
|
TreeItemRow,
|
|
5399
5598
|
{
|
|
5400
5599
|
item,
|
|
@@ -5429,8 +5628,8 @@ function TreeItemRow({
|
|
|
5429
5628
|
const isExpanded = hasChildren && expanded.has(item.id);
|
|
5430
5629
|
const isSelected = selected === item.id;
|
|
5431
5630
|
const isTabStop = tabStopId === item.id;
|
|
5432
|
-
return /* @__PURE__ */
|
|
5433
|
-
/* @__PURE__ */
|
|
5631
|
+
return /* @__PURE__ */ jsxs59("li", { role: "none", children: [
|
|
5632
|
+
/* @__PURE__ */ jsxs59(
|
|
5434
5633
|
"div",
|
|
5435
5634
|
{
|
|
5436
5635
|
role: "treeitem",
|
|
@@ -5453,14 +5652,14 @@ function TreeItemRow({
|
|
|
5453
5652
|
isSelected ? "bg-accent-dim text-accent" : "text-text hover:bg-panel-2"
|
|
5454
5653
|
),
|
|
5455
5654
|
children: [
|
|
5456
|
-
/* @__PURE__ */
|
|
5457
|
-
item.icon && /* @__PURE__ */
|
|
5458
|
-
/* @__PURE__ */
|
|
5655
|
+
/* @__PURE__ */ jsx69("span", { "aria-hidden": true, className: "text-text-dim grid w-3 place-items-center text-[10px]", children: hasChildren ? isExpanded ? "\u25BE" : "\u25B8" : "" }),
|
|
5656
|
+
item.icon && /* @__PURE__ */ jsx69("span", { "aria-hidden": true, className: "text-[12px] opacity-80", children: item.icon }),
|
|
5657
|
+
/* @__PURE__ */ jsx69("span", { className: "flex-1 truncate", children: item.label }),
|
|
5459
5658
|
item.trailing
|
|
5460
5659
|
]
|
|
5461
5660
|
}
|
|
5462
5661
|
),
|
|
5463
|
-
hasChildren && isExpanded && /* @__PURE__ */
|
|
5662
|
+
hasChildren && isExpanded && /* @__PURE__ */ jsx69("ul", { role: "group", className: "flex flex-col gap-px", children: (item.children ?? []).map((child) => /* @__PURE__ */ jsx69(
|
|
5464
5663
|
TreeItemRow,
|
|
5465
5664
|
{
|
|
5466
5665
|
item: child,
|
|
@@ -5479,9 +5678,9 @@ function TreeItemRow({
|
|
|
5479
5678
|
|
|
5480
5679
|
// src/patterns/WizardDialog/WizardDialog.tsx
|
|
5481
5680
|
import * as RadixDialog5 from "@radix-ui/react-dialog";
|
|
5482
|
-
import { forwardRef as
|
|
5483
|
-
import { jsx as
|
|
5484
|
-
var WizardDialog =
|
|
5681
|
+
import { forwardRef as forwardRef68, useCallback as useCallback14, useMemo as useMemo7, useState as useState18 } from "react";
|
|
5682
|
+
import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
5683
|
+
var WizardDialog = forwardRef68(function WizardDialog2({
|
|
5485
5684
|
open,
|
|
5486
5685
|
defaultOpen,
|
|
5487
5686
|
onOpenChange,
|
|
@@ -5497,18 +5696,18 @@ var WizardDialog = forwardRef67(function WizardDialog2({
|
|
|
5497
5696
|
cancelLabel,
|
|
5498
5697
|
onCancel
|
|
5499
5698
|
}, ref) {
|
|
5500
|
-
const [current, setCurrent] =
|
|
5699
|
+
const [current, setCurrent] = useState18(initialStep);
|
|
5501
5700
|
const total = steps.length;
|
|
5502
5701
|
const safeCurrent = Math.min(current, Math.max(0, total - 1));
|
|
5503
5702
|
const step = steps[safeCurrent];
|
|
5504
|
-
const goTo =
|
|
5703
|
+
const goTo = useCallback14(
|
|
5505
5704
|
(index) => {
|
|
5506
5705
|
setCurrent(Math.min(Math.max(0, index), Math.max(0, total - 1)));
|
|
5507
5706
|
},
|
|
5508
5707
|
[total]
|
|
5509
5708
|
);
|
|
5510
|
-
const goNext =
|
|
5511
|
-
const goBack =
|
|
5709
|
+
const goNext = useCallback14(() => setCurrent((c) => Math.min(c + 1, total - 1)), [total]);
|
|
5710
|
+
const goBack = useCallback14(() => setCurrent((c) => Math.max(c - 1, 0)), []);
|
|
5512
5711
|
const ctx = useMemo7(
|
|
5513
5712
|
() => ({
|
|
5514
5713
|
current: safeCurrent,
|
|
@@ -5532,23 +5731,23 @@ var WizardDialog = forwardRef67(function WizardDialog2({
|
|
|
5532
5731
|
goNext();
|
|
5533
5732
|
}
|
|
5534
5733
|
};
|
|
5535
|
-
return /* @__PURE__ */
|
|
5536
|
-
title && /* @__PURE__ */
|
|
5537
|
-
description && /* @__PURE__ */
|
|
5538
|
-
/* @__PURE__ */
|
|
5539
|
-
/* @__PURE__ */
|
|
5540
|
-
/* @__PURE__ */
|
|
5541
|
-
cancelLabel && /* @__PURE__ */
|
|
5542
|
-
/* @__PURE__ */
|
|
5543
|
-
/* @__PURE__ */
|
|
5734
|
+
return /* @__PURE__ */ jsx70(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs60(DialogContent, { ref, width, children: [
|
|
5735
|
+
title && /* @__PURE__ */ jsx70(WizardTitle, { children: title }),
|
|
5736
|
+
description && /* @__PURE__ */ jsx70(WizardDescription, { children: description }),
|
|
5737
|
+
/* @__PURE__ */ jsx70("div", { className: "mb-5", children: /* @__PURE__ */ jsx70(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
|
|
5738
|
+
/* @__PURE__ */ jsx70("div", { className: "mb-5", children: body }),
|
|
5739
|
+
/* @__PURE__ */ jsxs60("div", { className: "flex justify-end gap-2", children: [
|
|
5740
|
+
cancelLabel && /* @__PURE__ */ jsx70(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
|
|
5741
|
+
/* @__PURE__ */ jsx70(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
|
|
5742
|
+
/* @__PURE__ */ jsx70(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
|
|
5544
5743
|
] })
|
|
5545
5744
|
] }) });
|
|
5546
5745
|
});
|
|
5547
5746
|
function WizardTitle({ children }) {
|
|
5548
|
-
return /* @__PURE__ */
|
|
5747
|
+
return /* @__PURE__ */ jsx70(RadixDialog5.Title, { className: "mb-2 text-[16px] font-medium", children });
|
|
5549
5748
|
}
|
|
5550
5749
|
function WizardDescription({ children }) {
|
|
5551
|
-
return /* @__PURE__ */
|
|
5750
|
+
return /* @__PURE__ */ jsx70(RadixDialog5.Description, { className: "text-text-muted mb-4 text-[13px] leading-[1.55]", children });
|
|
5552
5751
|
}
|
|
5553
5752
|
WizardDialog.displayName = "WizardDialog";
|
|
5554
5753
|
export {
|
|
@@ -5613,6 +5812,7 @@ export {
|
|
|
5613
5812
|
HoverCardRoot,
|
|
5614
5813
|
HoverCardTrigger,
|
|
5615
5814
|
IconButton,
|
|
5815
|
+
InlineEdit,
|
|
5616
5816
|
Input,
|
|
5617
5817
|
Kbd,
|
|
5618
5818
|
LargeTitle,
|
|
@@ -5656,6 +5856,7 @@ export {
|
|
|
5656
5856
|
SelectValue,
|
|
5657
5857
|
Sheet,
|
|
5658
5858
|
Sidebar,
|
|
5859
|
+
SimpleTooltip,
|
|
5659
5860
|
Skeleton,
|
|
5660
5861
|
SkeletonGroup,
|
|
5661
5862
|
Slider,
|
|
@@ -5682,7 +5883,6 @@ export {
|
|
|
5682
5883
|
TooltipContent,
|
|
5683
5884
|
TooltipPortal,
|
|
5684
5885
|
TooltipProvider,
|
|
5685
|
-
TooltipRoot,
|
|
5686
5886
|
TooltipTrigger,
|
|
5687
5887
|
Topbar,
|
|
5688
5888
|
Tree,
|