@sovereignfs/ui 0.33.1 → 0.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/CheckableListRow.module.css +95 -0
- package/dist/FileDropzone.module.css +63 -0
- package/dist/IconPicker.module.css +63 -0
- package/dist/QuantityStepper.module.css +67 -0
- package/dist/SuggestionInput.module.css +103 -0
- package/dist/index.d.ts +196 -3
- package/dist/index.js +1175 -185
- package/package.json +1 -1
- package/src/components/CheckableListRow/CheckableListRow.module.css +95 -0
- package/src/components/CheckableListRow/CheckableListRow.stories.tsx +99 -0
- package/src/components/CheckableListRow/CheckableListRow.tsx +89 -0
- package/src/components/FileDropzone/FileDropzone.module.css +63 -0
- package/src/components/FileDropzone/FileDropzone.tsx +109 -0
- package/src/components/FileDropzone/__tests__/FileDropzone.test.tsx +67 -0
- package/src/components/Icon/icons/apple.tsx +21 -0
- package/src/components/Icon/icons/banana.tsx +21 -0
- package/src/components/Icon/icons/beef.tsx +22 -0
- package/src/components/Icon/icons/beer.tsx +24 -0
- package/src/components/Icon/icons/candy.tsx +24 -0
- package/src/components/Icon/icons/carrot.tsx +22 -0
- package/src/components/Icon/icons/coffee.tsx +23 -0
- package/src/components/Icon/icons/cookie.tsx +25 -0
- package/src/components/Icon/icons/croissant.tsx +24 -0
- package/src/components/Icon/icons/cup-soda.tsx +23 -0
- package/src/components/Icon/icons/drumstick.tsx +21 -0
- package/src/components/Icon/icons/egg.tsx +20 -0
- package/src/components/Icon/icons/external-link.tsx +22 -0
- package/src/components/Icon/icons/file.tsx +21 -0
- package/src/components/Icon/icons/fish.tsx +25 -0
- package/src/components/Icon/icons/index.ts +93 -1
- package/src/components/Icon/icons/milk.tsx +22 -0
- package/src/components/Icon/icons/pizza.tsx +24 -0
- package/src/components/Icon/icons/salad.tsx +24 -0
- package/src/components/Icon/icons/shopping-basket.tsx +26 -0
- package/src/components/Icon/icons/snowflake.tsx +31 -0
- package/src/components/Icon/icons/spray-can.tsx +29 -0
- package/src/components/Icon/icons/upload.tsx +22 -0
- package/src/components/Icon/icons/wine.tsx +23 -0
- package/src/components/IconPicker/IconPicker.module.css +63 -0
- package/src/components/IconPicker/IconPicker.stories.tsx +84 -0
- package/src/components/IconPicker/IconPicker.tsx +90 -0
- package/src/components/QuantityStepper/QuantityStepper.module.css +67 -0
- package/src/components/QuantityStepper/QuantityStepper.stories.tsx +79 -0
- package/src/components/QuantityStepper/QuantityStepper.tsx +107 -0
- package/src/components/SuggestionInput/SuggestionInput.module.css +103 -0
- package/src/components/SuggestionInput/SuggestionInput.stories.tsx +144 -0
- package/src/components/SuggestionInput/SuggestionInput.tsx +207 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useCommitOnEnterOrBlur.ts +39 -0
- package/src/index.ts +21 -2
- package/src/stories/DesignSystemOverview.stories.tsx +134 -1
- package/src/stories/FileDropzone.stories.tsx +69 -0
- package/src/stories/InteractionHooks.stories.tsx +55 -1
package/dist/index.js
CHANGED
|
@@ -667,6 +667,566 @@ function EllipsisVerticalIcon(props) {
|
|
|
667
667
|
);
|
|
668
668
|
}
|
|
669
669
|
|
|
670
|
+
// src/components/Icon/icons/file.tsx
|
|
671
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
672
|
+
function FileIcon(props) {
|
|
673
|
+
return /* @__PURE__ */ jsxs24(
|
|
674
|
+
"svg",
|
|
675
|
+
{
|
|
676
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
677
|
+
viewBox: "0 0 24 24",
|
|
678
|
+
fill: "none",
|
|
679
|
+
stroke: "currentColor",
|
|
680
|
+
strokeWidth: "2",
|
|
681
|
+
strokeLinecap: "round",
|
|
682
|
+
strokeLinejoin: "round",
|
|
683
|
+
...props,
|
|
684
|
+
children: [
|
|
685
|
+
/* @__PURE__ */ jsx31("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
|
|
686
|
+
/* @__PURE__ */ jsx31("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })
|
|
687
|
+
]
|
|
688
|
+
}
|
|
689
|
+
);
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
// src/components/Icon/icons/upload.tsx
|
|
693
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
694
|
+
function UploadIcon(props) {
|
|
695
|
+
return /* @__PURE__ */ jsxs25(
|
|
696
|
+
"svg",
|
|
697
|
+
{
|
|
698
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
699
|
+
viewBox: "0 0 24 24",
|
|
700
|
+
fill: "none",
|
|
701
|
+
stroke: "currentColor",
|
|
702
|
+
strokeWidth: "2",
|
|
703
|
+
strokeLinecap: "round",
|
|
704
|
+
strokeLinejoin: "round",
|
|
705
|
+
...props,
|
|
706
|
+
children: [
|
|
707
|
+
/* @__PURE__ */ jsx32("path", { d: "M12 3v12" }),
|
|
708
|
+
/* @__PURE__ */ jsx32("path", { d: "m17 8-5-5-5 5" }),
|
|
709
|
+
/* @__PURE__ */ jsx32("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" })
|
|
710
|
+
]
|
|
711
|
+
}
|
|
712
|
+
);
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// src/components/Icon/icons/external-link.tsx
|
|
716
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
717
|
+
function ExternalLinkIcon(props) {
|
|
718
|
+
return /* @__PURE__ */ jsxs26(
|
|
719
|
+
"svg",
|
|
720
|
+
{
|
|
721
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
722
|
+
viewBox: "0 0 24 24",
|
|
723
|
+
fill: "none",
|
|
724
|
+
stroke: "currentColor",
|
|
725
|
+
strokeWidth: "2",
|
|
726
|
+
strokeLinecap: "round",
|
|
727
|
+
strokeLinejoin: "round",
|
|
728
|
+
...props,
|
|
729
|
+
children: [
|
|
730
|
+
/* @__PURE__ */ jsx33("path", { d: "M15 3h6v6" }),
|
|
731
|
+
/* @__PURE__ */ jsx33("path", { d: "M10 14 21 3" }),
|
|
732
|
+
/* @__PURE__ */ jsx33("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
|
|
733
|
+
]
|
|
734
|
+
}
|
|
735
|
+
);
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
// src/components/Icon/icons/banana.tsx
|
|
739
|
+
import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
740
|
+
function BananaIcon(props) {
|
|
741
|
+
return /* @__PURE__ */ jsxs27(
|
|
742
|
+
"svg",
|
|
743
|
+
{
|
|
744
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
745
|
+
viewBox: "0 0 24 24",
|
|
746
|
+
fill: "none",
|
|
747
|
+
stroke: "currentColor",
|
|
748
|
+
strokeWidth: "2",
|
|
749
|
+
strokeLinecap: "round",
|
|
750
|
+
strokeLinejoin: "round",
|
|
751
|
+
...props,
|
|
752
|
+
children: [
|
|
753
|
+
/* @__PURE__ */ jsx34("path", { d: "M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5" }),
|
|
754
|
+
/* @__PURE__ */ jsx34("path", { d: "M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z" })
|
|
755
|
+
]
|
|
756
|
+
}
|
|
757
|
+
);
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
// src/components/Icon/icons/apple.tsx
|
|
761
|
+
import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
762
|
+
function AppleIcon(props) {
|
|
763
|
+
return /* @__PURE__ */ jsxs28(
|
|
764
|
+
"svg",
|
|
765
|
+
{
|
|
766
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
767
|
+
viewBox: "0 0 24 24",
|
|
768
|
+
fill: "none",
|
|
769
|
+
stroke: "currentColor",
|
|
770
|
+
strokeWidth: "2",
|
|
771
|
+
strokeLinecap: "round",
|
|
772
|
+
strokeLinejoin: "round",
|
|
773
|
+
...props,
|
|
774
|
+
children: [
|
|
775
|
+
/* @__PURE__ */ jsx35("path", { d: "M12 6.528V3a1 1 0 0 1 1-1h0" }),
|
|
776
|
+
/* @__PURE__ */ jsx35("path", { d: "M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" })
|
|
777
|
+
]
|
|
778
|
+
}
|
|
779
|
+
);
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
// src/components/Icon/icons/carrot.tsx
|
|
783
|
+
import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
784
|
+
function CarrotIcon(props) {
|
|
785
|
+
return /* @__PURE__ */ jsxs29(
|
|
786
|
+
"svg",
|
|
787
|
+
{
|
|
788
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
789
|
+
viewBox: "0 0 24 24",
|
|
790
|
+
fill: "none",
|
|
791
|
+
stroke: "currentColor",
|
|
792
|
+
strokeWidth: "2",
|
|
793
|
+
strokeLinecap: "round",
|
|
794
|
+
strokeLinejoin: "round",
|
|
795
|
+
...props,
|
|
796
|
+
children: [
|
|
797
|
+
/* @__PURE__ */ jsx36("path", { d: "M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46" }),
|
|
798
|
+
/* @__PURE__ */ jsx36("path", { d: "M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z" }),
|
|
799
|
+
/* @__PURE__ */ jsx36("path", { d: "M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z" })
|
|
800
|
+
]
|
|
801
|
+
}
|
|
802
|
+
);
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
// src/components/Icon/icons/egg.tsx
|
|
806
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
807
|
+
function EggIcon(props) {
|
|
808
|
+
return /* @__PURE__ */ jsx37(
|
|
809
|
+
"svg",
|
|
810
|
+
{
|
|
811
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
812
|
+
viewBox: "0 0 24 24",
|
|
813
|
+
fill: "none",
|
|
814
|
+
stroke: "currentColor",
|
|
815
|
+
strokeWidth: "2",
|
|
816
|
+
strokeLinecap: "round",
|
|
817
|
+
strokeLinejoin: "round",
|
|
818
|
+
...props,
|
|
819
|
+
children: /* @__PURE__ */ jsx37("path", { d: "M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12" })
|
|
820
|
+
}
|
|
821
|
+
);
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
// src/components/Icon/icons/beef.tsx
|
|
825
|
+
import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
826
|
+
function BeefIcon(props) {
|
|
827
|
+
return /* @__PURE__ */ jsxs30(
|
|
828
|
+
"svg",
|
|
829
|
+
{
|
|
830
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
831
|
+
viewBox: "0 0 24 24",
|
|
832
|
+
fill: "none",
|
|
833
|
+
stroke: "currentColor",
|
|
834
|
+
strokeWidth: "2",
|
|
835
|
+
strokeLinecap: "round",
|
|
836
|
+
strokeLinejoin: "round",
|
|
837
|
+
...props,
|
|
838
|
+
children: [
|
|
839
|
+
/* @__PURE__ */ jsx38("path", { d: "M16.4 13.7A6.5 6.5 0 1 0 6.28 6.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3" }),
|
|
840
|
+
/* @__PURE__ */ jsx38("path", { d: "m18.5 6 2.19 4.5a6.48 6.48 0 0 1-2.29 7.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" }),
|
|
841
|
+
/* @__PURE__ */ jsx38("circle", { cx: "12.5", cy: "8.5", r: "2.5" })
|
|
842
|
+
]
|
|
843
|
+
}
|
|
844
|
+
);
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
// src/components/Icon/icons/fish.tsx
|
|
848
|
+
import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
849
|
+
function FishIcon(props) {
|
|
850
|
+
return /* @__PURE__ */ jsxs31(
|
|
851
|
+
"svg",
|
|
852
|
+
{
|
|
853
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
854
|
+
viewBox: "0 0 24 24",
|
|
855
|
+
fill: "none",
|
|
856
|
+
stroke: "currentColor",
|
|
857
|
+
strokeWidth: "2",
|
|
858
|
+
strokeLinecap: "round",
|
|
859
|
+
strokeLinejoin: "round",
|
|
860
|
+
...props,
|
|
861
|
+
children: [
|
|
862
|
+
/* @__PURE__ */ jsx39("path", { d: "M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z" }),
|
|
863
|
+
/* @__PURE__ */ jsx39("path", { d: "M18 12v.5" }),
|
|
864
|
+
/* @__PURE__ */ jsx39("path", { d: "M16 17.93a9.77 9.77 0 0 1 0-11.86" }),
|
|
865
|
+
/* @__PURE__ */ jsx39("path", { d: "M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33" }),
|
|
866
|
+
/* @__PURE__ */ jsx39("path", { d: "M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4" }),
|
|
867
|
+
/* @__PURE__ */ jsx39("path", { d: "m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98" })
|
|
868
|
+
]
|
|
869
|
+
}
|
|
870
|
+
);
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
// src/components/Icon/icons/coffee.tsx
|
|
874
|
+
import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
875
|
+
function CoffeeIcon(props) {
|
|
876
|
+
return /* @__PURE__ */ jsxs32(
|
|
877
|
+
"svg",
|
|
878
|
+
{
|
|
879
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
880
|
+
viewBox: "0 0 24 24",
|
|
881
|
+
fill: "none",
|
|
882
|
+
stroke: "currentColor",
|
|
883
|
+
strokeWidth: "2",
|
|
884
|
+
strokeLinecap: "round",
|
|
885
|
+
strokeLinejoin: "round",
|
|
886
|
+
...props,
|
|
887
|
+
children: [
|
|
888
|
+
/* @__PURE__ */ jsx40("path", { d: "M10 2v2" }),
|
|
889
|
+
/* @__PURE__ */ jsx40("path", { d: "M14 2v2" }),
|
|
890
|
+
/* @__PURE__ */ jsx40("path", { d: "M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" }),
|
|
891
|
+
/* @__PURE__ */ jsx40("path", { d: "M6 2v2" })
|
|
892
|
+
]
|
|
893
|
+
}
|
|
894
|
+
);
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
// src/components/Icon/icons/wine.tsx
|
|
898
|
+
import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
899
|
+
function WineIcon(props) {
|
|
900
|
+
return /* @__PURE__ */ jsxs33(
|
|
901
|
+
"svg",
|
|
902
|
+
{
|
|
903
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
904
|
+
viewBox: "0 0 24 24",
|
|
905
|
+
fill: "none",
|
|
906
|
+
stroke: "currentColor",
|
|
907
|
+
strokeWidth: "2",
|
|
908
|
+
strokeLinecap: "round",
|
|
909
|
+
strokeLinejoin: "round",
|
|
910
|
+
...props,
|
|
911
|
+
children: [
|
|
912
|
+
/* @__PURE__ */ jsx41("path", { d: "M8 22h8" }),
|
|
913
|
+
/* @__PURE__ */ jsx41("path", { d: "M7 10h10" }),
|
|
914
|
+
/* @__PURE__ */ jsx41("path", { d: "M12 15v7" }),
|
|
915
|
+
/* @__PURE__ */ jsx41("path", { d: "M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" })
|
|
916
|
+
]
|
|
917
|
+
}
|
|
918
|
+
);
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
// src/components/Icon/icons/beer.tsx
|
|
922
|
+
import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
923
|
+
function BeerIcon(props) {
|
|
924
|
+
return /* @__PURE__ */ jsxs34(
|
|
925
|
+
"svg",
|
|
926
|
+
{
|
|
927
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
928
|
+
viewBox: "0 0 24 24",
|
|
929
|
+
fill: "none",
|
|
930
|
+
stroke: "currentColor",
|
|
931
|
+
strokeWidth: "2",
|
|
932
|
+
strokeLinecap: "round",
|
|
933
|
+
strokeLinejoin: "round",
|
|
934
|
+
...props,
|
|
935
|
+
children: [
|
|
936
|
+
/* @__PURE__ */ jsx42("path", { d: "M17 11h1a3 3 0 0 1 0 6h-1" }),
|
|
937
|
+
/* @__PURE__ */ jsx42("path", { d: "M9 12v6" }),
|
|
938
|
+
/* @__PURE__ */ jsx42("path", { d: "M13 12v6" }),
|
|
939
|
+
/* @__PURE__ */ jsx42("path", { d: "M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z" }),
|
|
940
|
+
/* @__PURE__ */ jsx42("path", { d: "M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8" })
|
|
941
|
+
]
|
|
942
|
+
}
|
|
943
|
+
);
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
// src/components/Icon/icons/cookie.tsx
|
|
947
|
+
import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
948
|
+
function CookieIcon(props) {
|
|
949
|
+
return /* @__PURE__ */ jsxs35(
|
|
950
|
+
"svg",
|
|
951
|
+
{
|
|
952
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
953
|
+
viewBox: "0 0 24 24",
|
|
954
|
+
fill: "none",
|
|
955
|
+
stroke: "currentColor",
|
|
956
|
+
strokeWidth: "2",
|
|
957
|
+
strokeLinecap: "round",
|
|
958
|
+
strokeLinejoin: "round",
|
|
959
|
+
...props,
|
|
960
|
+
children: [
|
|
961
|
+
/* @__PURE__ */ jsx43("path", { d: "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" }),
|
|
962
|
+
/* @__PURE__ */ jsx43("path", { d: "M8.5 8.5v.01" }),
|
|
963
|
+
/* @__PURE__ */ jsx43("path", { d: "M16 15.5v.01" }),
|
|
964
|
+
/* @__PURE__ */ jsx43("path", { d: "M12 12v.01" }),
|
|
965
|
+
/* @__PURE__ */ jsx43("path", { d: "M11 17v.01" }),
|
|
966
|
+
/* @__PURE__ */ jsx43("path", { d: "M7 14v.01" })
|
|
967
|
+
]
|
|
968
|
+
}
|
|
969
|
+
);
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
// src/components/Icon/icons/pizza.tsx
|
|
973
|
+
import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
974
|
+
function PizzaIcon(props) {
|
|
975
|
+
return /* @__PURE__ */ jsxs36(
|
|
976
|
+
"svg",
|
|
977
|
+
{
|
|
978
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
979
|
+
viewBox: "0 0 24 24",
|
|
980
|
+
fill: "none",
|
|
981
|
+
stroke: "currentColor",
|
|
982
|
+
strokeWidth: "2",
|
|
983
|
+
strokeLinecap: "round",
|
|
984
|
+
strokeLinejoin: "round",
|
|
985
|
+
...props,
|
|
986
|
+
children: [
|
|
987
|
+
/* @__PURE__ */ jsx44("path", { d: "m12 14-1 1" }),
|
|
988
|
+
/* @__PURE__ */ jsx44("path", { d: "m13.75 18.25-1.25 1.42" }),
|
|
989
|
+
/* @__PURE__ */ jsx44("path", { d: "M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12" }),
|
|
990
|
+
/* @__PURE__ */ jsx44("path", { d: "M18.8 9.3a1 1 0 0 0 2.1 7.7" }),
|
|
991
|
+
/* @__PURE__ */ jsx44("path", { d: "M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z" })
|
|
992
|
+
]
|
|
993
|
+
}
|
|
994
|
+
);
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
// src/components/Icon/icons/candy.tsx
|
|
998
|
+
import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
999
|
+
function CandyIcon(props) {
|
|
1000
|
+
return /* @__PURE__ */ jsxs37(
|
|
1001
|
+
"svg",
|
|
1002
|
+
{
|
|
1003
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1004
|
+
viewBox: "0 0 24 24",
|
|
1005
|
+
fill: "none",
|
|
1006
|
+
stroke: "currentColor",
|
|
1007
|
+
strokeWidth: "2",
|
|
1008
|
+
strokeLinecap: "round",
|
|
1009
|
+
strokeLinejoin: "round",
|
|
1010
|
+
...props,
|
|
1011
|
+
children: [
|
|
1012
|
+
/* @__PURE__ */ jsx45("path", { d: "M10 7v10.9" }),
|
|
1013
|
+
/* @__PURE__ */ jsx45("path", { d: "M14 6.1V17" }),
|
|
1014
|
+
/* @__PURE__ */ jsx45("path", { d: "M16 7V3a1 1 0 0 1 1.707-.707 2.5 2.5 0 0 0 2.152.717 1 1 0 0 1 1.131 1.131 2.5 2.5 0 0 0 .717 2.152A1 1 0 0 1 21 8h-4" }),
|
|
1015
|
+
/* @__PURE__ */ jsx45("path", { d: "M16.536 7.465a5 5 0 0 0-7.072 0l-2 2a5 5 0 0 0 0 7.07 5 5 0 0 0 7.072 0l2-2a5 5 0 0 0 0-7.07" }),
|
|
1016
|
+
/* @__PURE__ */ jsx45("path", { d: "M8 17v4a1 1 0 0 1-1.707.707 2.5 2.5 0 0 0-2.152-.717 1 1 0 0 1-1.131-1.131 2.5 2.5 0 0 0-.717-2.152A1 1 0 0 1 3 16h4" })
|
|
1017
|
+
]
|
|
1018
|
+
}
|
|
1019
|
+
);
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
// src/components/Icon/icons/salad.tsx
|
|
1023
|
+
import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
1024
|
+
function SaladIcon(props) {
|
|
1025
|
+
return /* @__PURE__ */ jsxs38(
|
|
1026
|
+
"svg",
|
|
1027
|
+
{
|
|
1028
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1029
|
+
viewBox: "0 0 24 24",
|
|
1030
|
+
fill: "none",
|
|
1031
|
+
stroke: "currentColor",
|
|
1032
|
+
strokeWidth: "2",
|
|
1033
|
+
strokeLinecap: "round",
|
|
1034
|
+
strokeLinejoin: "round",
|
|
1035
|
+
...props,
|
|
1036
|
+
children: [
|
|
1037
|
+
/* @__PURE__ */ jsx46("path", { d: "M7 21h10" }),
|
|
1038
|
+
/* @__PURE__ */ jsx46("path", { d: "M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" }),
|
|
1039
|
+
/* @__PURE__ */ jsx46("path", { d: "M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1" }),
|
|
1040
|
+
/* @__PURE__ */ jsx46("path", { d: "m13 12 4-4" }),
|
|
1041
|
+
/* @__PURE__ */ jsx46("path", { d: "M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2" })
|
|
1042
|
+
]
|
|
1043
|
+
}
|
|
1044
|
+
);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
// src/components/Icon/icons/milk.tsx
|
|
1048
|
+
import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
1049
|
+
function MilkIcon(props) {
|
|
1050
|
+
return /* @__PURE__ */ jsxs39(
|
|
1051
|
+
"svg",
|
|
1052
|
+
{
|
|
1053
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1054
|
+
viewBox: "0 0 24 24",
|
|
1055
|
+
fill: "none",
|
|
1056
|
+
stroke: "currentColor",
|
|
1057
|
+
strokeWidth: "2",
|
|
1058
|
+
strokeLinecap: "round",
|
|
1059
|
+
strokeLinejoin: "round",
|
|
1060
|
+
...props,
|
|
1061
|
+
children: [
|
|
1062
|
+
/* @__PURE__ */ jsx47("path", { d: "M8 2h8" }),
|
|
1063
|
+
/* @__PURE__ */ jsx47("path", { d: "M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" }),
|
|
1064
|
+
/* @__PURE__ */ jsx47("path", { d: "M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" })
|
|
1065
|
+
]
|
|
1066
|
+
}
|
|
1067
|
+
);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
// src/components/Icon/icons/drumstick.tsx
|
|
1071
|
+
import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
1072
|
+
function DrumstickIcon(props) {
|
|
1073
|
+
return /* @__PURE__ */ jsxs40(
|
|
1074
|
+
"svg",
|
|
1075
|
+
{
|
|
1076
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1077
|
+
viewBox: "0 0 24 24",
|
|
1078
|
+
fill: "none",
|
|
1079
|
+
stroke: "currentColor",
|
|
1080
|
+
strokeWidth: "2",
|
|
1081
|
+
strokeLinecap: "round",
|
|
1082
|
+
strokeLinejoin: "round",
|
|
1083
|
+
...props,
|
|
1084
|
+
children: [
|
|
1085
|
+
/* @__PURE__ */ jsx48("path", { d: "M15.4 15.63a7.875 6 135 1 1 6.23-6.23 4.5 3.43 135 0 0-6.23 6.23" }),
|
|
1086
|
+
/* @__PURE__ */ jsx48("path", { d: "m8.29 12.71-2.6 2.6a2.5 2.5 0 1 0-1.65 4.65A2.5 2.5 0 1 0 8.7 18.3l2.59-2.59" })
|
|
1087
|
+
]
|
|
1088
|
+
}
|
|
1089
|
+
);
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
// src/components/Icon/icons/croissant.tsx
|
|
1093
|
+
import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
1094
|
+
function CroissantIcon(props) {
|
|
1095
|
+
return /* @__PURE__ */ jsxs41(
|
|
1096
|
+
"svg",
|
|
1097
|
+
{
|
|
1098
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1099
|
+
viewBox: "0 0 24 24",
|
|
1100
|
+
fill: "none",
|
|
1101
|
+
stroke: "currentColor",
|
|
1102
|
+
strokeWidth: "2",
|
|
1103
|
+
strokeLinecap: "round",
|
|
1104
|
+
strokeLinejoin: "round",
|
|
1105
|
+
...props,
|
|
1106
|
+
children: [
|
|
1107
|
+
/* @__PURE__ */ jsx49("path", { d: "M10.2 18H4.774a1.5 1.5 0 0 1-1.352-.97 11 11 0 0 1 .132-6.487" }),
|
|
1108
|
+
/* @__PURE__ */ jsx49("path", { d: "M18 10.2V4.774a1.5 1.5 0 0 0-.97-1.352 11 11 0 0 0-6.486.132" }),
|
|
1109
|
+
/* @__PURE__ */ jsx49("path", { d: "M18 5a4 3 0 0 1 4 3 2 2 0 0 1-2 2 10 10 0 0 0-5.139 1.42" }),
|
|
1110
|
+
/* @__PURE__ */ jsx49("path", { d: "M5 18a3 4 0 0 0 3 4 2 2 0 0 0 2-2 10 10 0 0 1 1.42-5.14" }),
|
|
1111
|
+
/* @__PURE__ */ jsx49("path", { d: "M8.709 2.554a10 10 0 0 0-6.155 6.155 1.5 1.5 0 0 0 .676 1.626l9.807 5.42a2 2 0 0 0 2.718-2.718l-5.42-9.807a1.5 1.5 0 0 0-1.626-.676" })
|
|
1112
|
+
]
|
|
1113
|
+
}
|
|
1114
|
+
);
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
// src/components/Icon/icons/cup-soda.tsx
|
|
1118
|
+
import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
1119
|
+
function CupSodaIcon(props) {
|
|
1120
|
+
return /* @__PURE__ */ jsxs42(
|
|
1121
|
+
"svg",
|
|
1122
|
+
{
|
|
1123
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1124
|
+
viewBox: "0 0 24 24",
|
|
1125
|
+
fill: "none",
|
|
1126
|
+
stroke: "currentColor",
|
|
1127
|
+
strokeWidth: "2",
|
|
1128
|
+
strokeLinecap: "round",
|
|
1129
|
+
strokeLinejoin: "round",
|
|
1130
|
+
...props,
|
|
1131
|
+
children: [
|
|
1132
|
+
/* @__PURE__ */ jsx50("path", { d: "m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8" }),
|
|
1133
|
+
/* @__PURE__ */ jsx50("path", { d: "M5 8h14" }),
|
|
1134
|
+
/* @__PURE__ */ jsx50("path", { d: "M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0" }),
|
|
1135
|
+
/* @__PURE__ */ jsx50("path", { d: "m12 8 1-6h2" })
|
|
1136
|
+
]
|
|
1137
|
+
}
|
|
1138
|
+
);
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
// src/components/Icon/icons/spray-can.tsx
|
|
1142
|
+
import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
1143
|
+
function SprayCanIcon(props) {
|
|
1144
|
+
return /* @__PURE__ */ jsxs43(
|
|
1145
|
+
"svg",
|
|
1146
|
+
{
|
|
1147
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1148
|
+
viewBox: "0 0 24 24",
|
|
1149
|
+
fill: "none",
|
|
1150
|
+
stroke: "currentColor",
|
|
1151
|
+
strokeWidth: "2",
|
|
1152
|
+
strokeLinecap: "round",
|
|
1153
|
+
strokeLinejoin: "round",
|
|
1154
|
+
...props,
|
|
1155
|
+
children: [
|
|
1156
|
+
/* @__PURE__ */ jsx51("path", { d: "M3 3h.01" }),
|
|
1157
|
+
/* @__PURE__ */ jsx51("path", { d: "M7 5h.01" }),
|
|
1158
|
+
/* @__PURE__ */ jsx51("path", { d: "M11 7h.01" }),
|
|
1159
|
+
/* @__PURE__ */ jsx51("path", { d: "M3 7h.01" }),
|
|
1160
|
+
/* @__PURE__ */ jsx51("path", { d: "M7 9h.01" }),
|
|
1161
|
+
/* @__PURE__ */ jsx51("path", { d: "M3 11h.01" }),
|
|
1162
|
+
/* @__PURE__ */ jsx51("rect", { width: "4", height: "4", x: "15", y: "5" }),
|
|
1163
|
+
/* @__PURE__ */ jsx51("path", { d: "m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2" }),
|
|
1164
|
+
/* @__PURE__ */ jsx51("path", { d: "m13 14 8-2" }),
|
|
1165
|
+
/* @__PURE__ */ jsx51("path", { d: "m13 19 8-2" })
|
|
1166
|
+
]
|
|
1167
|
+
}
|
|
1168
|
+
);
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
// src/components/Icon/icons/snowflake.tsx
|
|
1172
|
+
import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
1173
|
+
function SnowflakeIcon(props) {
|
|
1174
|
+
return /* @__PURE__ */ jsxs44(
|
|
1175
|
+
"svg",
|
|
1176
|
+
{
|
|
1177
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1178
|
+
viewBox: "0 0 24 24",
|
|
1179
|
+
fill: "none",
|
|
1180
|
+
stroke: "currentColor",
|
|
1181
|
+
strokeWidth: "2",
|
|
1182
|
+
strokeLinecap: "round",
|
|
1183
|
+
strokeLinejoin: "round",
|
|
1184
|
+
...props,
|
|
1185
|
+
children: [
|
|
1186
|
+
/* @__PURE__ */ jsx52("path", { d: "m10 20-1.25-2.5L6 18" }),
|
|
1187
|
+
/* @__PURE__ */ jsx52("path", { d: "M10 4 8.75 6.5 6 6" }),
|
|
1188
|
+
/* @__PURE__ */ jsx52("path", { d: "m14 20 1.25-2.5L18 18" }),
|
|
1189
|
+
/* @__PURE__ */ jsx52("path", { d: "m14 4 1.25 2.5L18 6" }),
|
|
1190
|
+
/* @__PURE__ */ jsx52("path", { d: "m17 21-3-6h-4" }),
|
|
1191
|
+
/* @__PURE__ */ jsx52("path", { d: "m17 3-3 6 1.5 3" }),
|
|
1192
|
+
/* @__PURE__ */ jsx52("path", { d: "M2 12h6.5L10 9" }),
|
|
1193
|
+
/* @__PURE__ */ jsx52("path", { d: "m20 10-1.5 2 1.5 2" }),
|
|
1194
|
+
/* @__PURE__ */ jsx52("path", { d: "M22 12h-6.5L14 15" }),
|
|
1195
|
+
/* @__PURE__ */ jsx52("path", { d: "m4 10 1.5 2L4 14" }),
|
|
1196
|
+
/* @__PURE__ */ jsx52("path", { d: "m7 21 3-6-1.5-3" }),
|
|
1197
|
+
/* @__PURE__ */ jsx52("path", { d: "m7 3 3 6h4" })
|
|
1198
|
+
]
|
|
1199
|
+
}
|
|
1200
|
+
);
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
// src/components/Icon/icons/shopping-basket.tsx
|
|
1204
|
+
import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
1205
|
+
function ShoppingBasketIcon(props) {
|
|
1206
|
+
return /* @__PURE__ */ jsxs45(
|
|
1207
|
+
"svg",
|
|
1208
|
+
{
|
|
1209
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1210
|
+
viewBox: "0 0 24 24",
|
|
1211
|
+
fill: "none",
|
|
1212
|
+
stroke: "currentColor",
|
|
1213
|
+
strokeWidth: "2",
|
|
1214
|
+
strokeLinecap: "round",
|
|
1215
|
+
strokeLinejoin: "round",
|
|
1216
|
+
...props,
|
|
1217
|
+
children: [
|
|
1218
|
+
/* @__PURE__ */ jsx53("path", { d: "m15 11-1 9" }),
|
|
1219
|
+
/* @__PURE__ */ jsx53("path", { d: "m19 11-4-7" }),
|
|
1220
|
+
/* @__PURE__ */ jsx53("path", { d: "M2 11h20" }),
|
|
1221
|
+
/* @__PURE__ */ jsx53("path", { d: "m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4" }),
|
|
1222
|
+
/* @__PURE__ */ jsx53("path", { d: "M4.5 15.5h15" }),
|
|
1223
|
+
/* @__PURE__ */ jsx53("path", { d: "m5 11 4-7" }),
|
|
1224
|
+
/* @__PURE__ */ jsx53("path", { d: "m9 11 1 9" })
|
|
1225
|
+
]
|
|
1226
|
+
}
|
|
1227
|
+
);
|
|
1228
|
+
}
|
|
1229
|
+
|
|
670
1230
|
// src/components/Icon/icons/index.ts
|
|
671
1231
|
var ICONS = {
|
|
672
1232
|
house: HouseIcon,
|
|
@@ -697,12 +1257,35 @@ var ICONS = {
|
|
|
697
1257
|
"alert-triangle": AlertTriangleIcon,
|
|
698
1258
|
calendar: CalendarIcon,
|
|
699
1259
|
"sliders-horizontal": SlidersHorizontalIcon,
|
|
700
|
-
"ellipsis-vertical": EllipsisVerticalIcon
|
|
1260
|
+
"ellipsis-vertical": EllipsisVerticalIcon,
|
|
1261
|
+
file: FileIcon,
|
|
1262
|
+
upload: UploadIcon,
|
|
1263
|
+
"external-link": ExternalLinkIcon,
|
|
1264
|
+
banana: BananaIcon,
|
|
1265
|
+
apple: AppleIcon,
|
|
1266
|
+
carrot: CarrotIcon,
|
|
1267
|
+
egg: EggIcon,
|
|
1268
|
+
beef: BeefIcon,
|
|
1269
|
+
fish: FishIcon,
|
|
1270
|
+
coffee: CoffeeIcon,
|
|
1271
|
+
wine: WineIcon,
|
|
1272
|
+
beer: BeerIcon,
|
|
1273
|
+
cookie: CookieIcon,
|
|
1274
|
+
pizza: PizzaIcon,
|
|
1275
|
+
candy: CandyIcon,
|
|
1276
|
+
salad: SaladIcon,
|
|
1277
|
+
milk: MilkIcon,
|
|
1278
|
+
drumstick: DrumstickIcon,
|
|
1279
|
+
croissant: CroissantIcon,
|
|
1280
|
+
"cup-soda": CupSodaIcon,
|
|
1281
|
+
"spray-can": SprayCanIcon,
|
|
1282
|
+
snowflake: SnowflakeIcon,
|
|
1283
|
+
"shopping-basket": ShoppingBasketIcon
|
|
701
1284
|
};
|
|
702
1285
|
|
|
703
1286
|
// src/components/Icon/Icon.tsx
|
|
704
1287
|
import styles2 from "./Icon.module.css";
|
|
705
|
-
import { jsx as
|
|
1288
|
+
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
706
1289
|
function Icon({
|
|
707
1290
|
name,
|
|
708
1291
|
size = "md",
|
|
@@ -711,14 +1294,14 @@ function Icon({
|
|
|
711
1294
|
}) {
|
|
712
1295
|
const Svg = ICONS[name];
|
|
713
1296
|
const classes = [styles2.root, styles2[size], className].filter(Boolean).join(" ");
|
|
714
|
-
return /* @__PURE__ */
|
|
1297
|
+
return /* @__PURE__ */ jsx54(Svg, { className: classes, role: aria["aria-label"] ? "img" : void 0, ...aria });
|
|
715
1298
|
}
|
|
716
1299
|
|
|
717
1300
|
// src/components/Toggle/Toggle.tsx
|
|
718
1301
|
import styles3 from "./Toggle.module.css";
|
|
719
|
-
import { jsx as
|
|
1302
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
720
1303
|
function Toggle({ checked, onChange, disabled, className, ...rest }) {
|
|
721
|
-
return /* @__PURE__ */
|
|
1304
|
+
return /* @__PURE__ */ jsx55(
|
|
722
1305
|
"button",
|
|
723
1306
|
{
|
|
724
1307
|
type: "button",
|
|
@@ -728,14 +1311,14 @@ function Toggle({ checked, onChange, disabled, className, ...rest }) {
|
|
|
728
1311
|
className: [styles3.track, checked ? styles3.on : styles3.off, className].filter(Boolean).join(" "),
|
|
729
1312
|
onClick: () => onChange(!checked),
|
|
730
1313
|
...rest,
|
|
731
|
-
children: /* @__PURE__ */
|
|
1314
|
+
children: /* @__PURE__ */ jsx55("span", { className: styles3.thumb })
|
|
732
1315
|
}
|
|
733
1316
|
);
|
|
734
1317
|
}
|
|
735
1318
|
|
|
736
1319
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
737
1320
|
import styles4 from "./SegmentedControl.module.css";
|
|
738
|
-
import { jsx as
|
|
1321
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
739
1322
|
function SegmentedControl({
|
|
740
1323
|
value,
|
|
741
1324
|
onChange,
|
|
@@ -743,7 +1326,7 @@ function SegmentedControl({
|
|
|
743
1326
|
size = "md",
|
|
744
1327
|
"aria-label": ariaLabel
|
|
745
1328
|
}) {
|
|
746
|
-
return /* @__PURE__ */
|
|
1329
|
+
return /* @__PURE__ */ jsx56(
|
|
747
1330
|
"div",
|
|
748
1331
|
{
|
|
749
1332
|
role: "radiogroup",
|
|
@@ -751,7 +1334,7 @@ function SegmentedControl({
|
|
|
751
1334
|
className: [styles4.track, styles4[size]].join(" "),
|
|
752
1335
|
children: options.map((opt) => {
|
|
753
1336
|
const active = opt.value === value;
|
|
754
|
-
return /* @__PURE__ */
|
|
1337
|
+
return /* @__PURE__ */ jsx56(
|
|
755
1338
|
"button",
|
|
756
1339
|
{
|
|
757
1340
|
type: "button",
|
|
@@ -770,11 +1353,11 @@ function SegmentedControl({
|
|
|
770
1353
|
|
|
771
1354
|
// src/components/Tabs/Tabs.tsx
|
|
772
1355
|
import styles5 from "./Tabs.module.css";
|
|
773
|
-
import { jsx as
|
|
1356
|
+
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
774
1357
|
function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
|
|
775
|
-
return /* @__PURE__ */
|
|
1358
|
+
return /* @__PURE__ */ jsx57("div", { role: "tablist", "aria-label": ariaLabel, className: styles5.tablist, children: items.map((item) => {
|
|
776
1359
|
const active = item.value === value;
|
|
777
|
-
return /* @__PURE__ */
|
|
1360
|
+
return /* @__PURE__ */ jsx57(
|
|
778
1361
|
"button",
|
|
779
1362
|
{
|
|
780
1363
|
type: "button",
|
|
@@ -791,15 +1374,15 @@ function Tabs({ items, value, onChange, "aria-label": ariaLabel }) {
|
|
|
791
1374
|
|
|
792
1375
|
// src/components/Select/Select.tsx
|
|
793
1376
|
import styles6 from "./Select.module.css";
|
|
794
|
-
import { jsx as
|
|
1377
|
+
import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
795
1378
|
function Select({ className, size = "md", children, ...rest }) {
|
|
796
|
-
return /* @__PURE__ */
|
|
1379
|
+
return /* @__PURE__ */ jsxs46(
|
|
797
1380
|
"div",
|
|
798
1381
|
{
|
|
799
1382
|
className: [styles6.wrapper, size === "sm" ? styles6.sm : void 0, className].filter(Boolean).join(" "),
|
|
800
1383
|
children: [
|
|
801
|
-
/* @__PURE__ */
|
|
802
|
-
/* @__PURE__ */
|
|
1384
|
+
/* @__PURE__ */ jsx58("select", { className: styles6.select, ...rest, children }),
|
|
1385
|
+
/* @__PURE__ */ jsx58(
|
|
803
1386
|
"svg",
|
|
804
1387
|
{
|
|
805
1388
|
className: styles6.chevron,
|
|
@@ -812,7 +1395,7 @@ function Select({ className, size = "md", children, ...rest }) {
|
|
|
812
1395
|
strokeWidth: "2",
|
|
813
1396
|
strokeLinecap: "round",
|
|
814
1397
|
strokeLinejoin: "round",
|
|
815
|
-
children: /* @__PURE__ */
|
|
1398
|
+
children: /* @__PURE__ */ jsx58("polyline", { points: "6 9 12 15 18 9" })
|
|
816
1399
|
}
|
|
817
1400
|
)
|
|
818
1401
|
]
|
|
@@ -822,18 +1405,18 @@ function Select({ className, size = "md", children, ...rest }) {
|
|
|
822
1405
|
|
|
823
1406
|
// src/components/SystemBanner/SystemBanner.tsx
|
|
824
1407
|
import styles7 from "./SystemBanner.module.css";
|
|
825
|
-
import { jsx as
|
|
1408
|
+
import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
826
1409
|
function SystemBanner({ variant = "info", onDismiss, children }) {
|
|
827
|
-
return /* @__PURE__ */
|
|
828
|
-
/* @__PURE__ */
|
|
829
|
-
onDismiss && /* @__PURE__ */
|
|
1410
|
+
return /* @__PURE__ */ jsxs47("div", { role: "status", "aria-live": "polite", className: [styles7.banner, styles7[variant]].join(" "), children: [
|
|
1411
|
+
/* @__PURE__ */ jsx59("span", { className: styles7.content, children }),
|
|
1412
|
+
onDismiss && /* @__PURE__ */ jsx59(
|
|
830
1413
|
"button",
|
|
831
1414
|
{
|
|
832
1415
|
type: "button",
|
|
833
1416
|
className: styles7.dismiss,
|
|
834
1417
|
onClick: onDismiss,
|
|
835
1418
|
"aria-label": "Dismiss banner",
|
|
836
|
-
children: /* @__PURE__ */
|
|
1419
|
+
children: /* @__PURE__ */ jsx59(
|
|
837
1420
|
"svg",
|
|
838
1421
|
{
|
|
839
1422
|
width: "14",
|
|
@@ -842,7 +1425,7 @@ function SystemBanner({ variant = "info", onDismiss, children }) {
|
|
|
842
1425
|
fill: "none",
|
|
843
1426
|
xmlns: "http://www.w3.org/2000/svg",
|
|
844
1427
|
"aria-hidden": true,
|
|
845
|
-
children: /* @__PURE__ */
|
|
1428
|
+
children: /* @__PURE__ */ jsx59(
|
|
846
1429
|
"path",
|
|
847
1430
|
{
|
|
848
1431
|
d: "M1 1L13 13M13 1L1 13",
|
|
@@ -866,7 +1449,7 @@ import {
|
|
|
866
1449
|
useState
|
|
867
1450
|
} from "react";
|
|
868
1451
|
import styles8 from "./Popover.module.css";
|
|
869
|
-
import { jsx as
|
|
1452
|
+
import { jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
870
1453
|
var TRIGGER_GAP = 8;
|
|
871
1454
|
var VIEWPORT_MARGIN = 4;
|
|
872
1455
|
function Popover({
|
|
@@ -942,9 +1525,9 @@ function Popover({
|
|
|
942
1525
|
document.addEventListener("keydown", handleKeyDown);
|
|
943
1526
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
944
1527
|
}, [open, onClose]);
|
|
945
|
-
return /* @__PURE__ */
|
|
1528
|
+
return /* @__PURE__ */ jsxs48("div", { ref: containerRef, className: styles8.container, children: [
|
|
946
1529
|
trigger,
|
|
947
|
-
open && /* @__PURE__ */
|
|
1530
|
+
open && /* @__PURE__ */ jsx60(
|
|
948
1531
|
"div",
|
|
949
1532
|
{
|
|
950
1533
|
ref: panelRef,
|
|
@@ -965,7 +1548,7 @@ function Popover({
|
|
|
965
1548
|
|
|
966
1549
|
// src/components/Button/Button.tsx
|
|
967
1550
|
import styles9 from "./Button.module.css";
|
|
968
|
-
import { jsx as
|
|
1551
|
+
import { jsx as jsx61, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
969
1552
|
function Button({
|
|
970
1553
|
variant = "primary",
|
|
971
1554
|
size = "md",
|
|
@@ -977,7 +1560,7 @@ function Button({
|
|
|
977
1560
|
...rest
|
|
978
1561
|
}) {
|
|
979
1562
|
const classes = [styles9.button, styles9[variant], styles9[size], className].filter(Boolean).join(" ");
|
|
980
|
-
return /* @__PURE__ */
|
|
1563
|
+
return /* @__PURE__ */ jsxs49(
|
|
981
1564
|
"button",
|
|
982
1565
|
{
|
|
983
1566
|
type,
|
|
@@ -989,7 +1572,7 @@ function Button({
|
|
|
989
1572
|
loading && // aria-hidden: the button's own accessible name (its visible children,
|
|
990
1573
|
// unchanged below) plus aria-busy already communicate the pending
|
|
991
1574
|
// state — an unhidden Spinner-style status region would double-narrate it.
|
|
992
|
-
/* @__PURE__ */
|
|
1575
|
+
/* @__PURE__ */ jsx61("span", { className: styles9.spinner, "aria-hidden": "true" }),
|
|
993
1576
|
children
|
|
994
1577
|
]
|
|
995
1578
|
}
|
|
@@ -998,23 +1581,23 @@ function Button({
|
|
|
998
1581
|
|
|
999
1582
|
// src/components/Input/Input.tsx
|
|
1000
1583
|
import styles10 from "./Input.module.css";
|
|
1001
|
-
import { jsx as
|
|
1584
|
+
import { jsx as jsx62 } from "react/jsx-runtime";
|
|
1002
1585
|
function Input({ type = "text", className, ...rest }) {
|
|
1003
1586
|
const classes = [styles10.input, className].filter(Boolean).join(" ");
|
|
1004
|
-
return /* @__PURE__ */
|
|
1587
|
+
return /* @__PURE__ */ jsx62("input", { type, className: classes, ...rest });
|
|
1005
1588
|
}
|
|
1006
1589
|
|
|
1007
1590
|
// src/components/Textarea/Textarea.tsx
|
|
1008
1591
|
import styles11 from "./Textarea.module.css";
|
|
1009
|
-
import { jsx as
|
|
1592
|
+
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
1010
1593
|
function Textarea({ className, rows = 4, ...rest }) {
|
|
1011
1594
|
const classes = [styles11.textarea, className].filter(Boolean).join(" ");
|
|
1012
|
-
return /* @__PURE__ */
|
|
1595
|
+
return /* @__PURE__ */ jsx63("textarea", { rows, className: classes, ...rest });
|
|
1013
1596
|
}
|
|
1014
1597
|
|
|
1015
1598
|
// src/components/CodeTextarea/CodeTextarea.tsx
|
|
1016
1599
|
import styles12 from "./CodeTextarea.module.css";
|
|
1017
|
-
import { jsx as
|
|
1600
|
+
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
1018
1601
|
function CodeTextarea({
|
|
1019
1602
|
className,
|
|
1020
1603
|
rows = 12,
|
|
@@ -1025,7 +1608,7 @@ function CodeTextarea({
|
|
|
1025
1608
|
...rest
|
|
1026
1609
|
}) {
|
|
1027
1610
|
const classes = [styles12.textarea, invalid ? styles12.invalid : void 0, className].filter(Boolean).join(" ");
|
|
1028
|
-
return /* @__PURE__ */
|
|
1611
|
+
return /* @__PURE__ */ jsx64(
|
|
1029
1612
|
"textarea",
|
|
1030
1613
|
{
|
|
1031
1614
|
rows,
|
|
@@ -1040,7 +1623,7 @@ function CodeTextarea({
|
|
|
1040
1623
|
|
|
1041
1624
|
// src/components/StatusBadge/StatusBadge.tsx
|
|
1042
1625
|
import styles13 from "./StatusBadge.module.css";
|
|
1043
|
-
import { jsx as
|
|
1626
|
+
import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
1044
1627
|
var STATUS_CLASS = {
|
|
1045
1628
|
unmodified: styles13.neutral,
|
|
1046
1629
|
draft: styles13.info,
|
|
@@ -1068,14 +1651,14 @@ function StatusBadge({
|
|
|
1068
1651
|
"aria-label": ariaLabel
|
|
1069
1652
|
}) {
|
|
1070
1653
|
const label = children ?? STATUS_LABEL[status];
|
|
1071
|
-
return /* @__PURE__ */
|
|
1654
|
+
return /* @__PURE__ */ jsxs50(
|
|
1072
1655
|
"span",
|
|
1073
1656
|
{
|
|
1074
1657
|
className: [styles13.badge, STATUS_CLASS[status], className].filter(Boolean).join(" "),
|
|
1075
1658
|
"aria-label": ariaLabel,
|
|
1076
1659
|
children: [
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1660
|
+
/* @__PURE__ */ jsx65("span", { className: styles13.dot, "aria-hidden": "true" }),
|
|
1661
|
+
/* @__PURE__ */ jsx65("span", { className: styles13.label, children: label })
|
|
1079
1662
|
]
|
|
1080
1663
|
}
|
|
1081
1664
|
);
|
|
@@ -1084,7 +1667,7 @@ function StatusBadge({
|
|
|
1084
1667
|
// src/components/SplitPane/SplitPane.tsx
|
|
1085
1668
|
import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
1086
1669
|
import styles14 from "./SplitPane.module.css";
|
|
1087
|
-
import { jsx as
|
|
1670
|
+
import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
1088
1671
|
var clampSize = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
1089
1672
|
function SplitPane({
|
|
1090
1673
|
primary,
|
|
@@ -1170,15 +1753,15 @@ function SplitPane({
|
|
|
1170
1753
|
const style = {
|
|
1171
1754
|
"--split-pane-primary-size": `${primarySize}%`
|
|
1172
1755
|
};
|
|
1173
|
-
return /* @__PURE__ */
|
|
1756
|
+
return /* @__PURE__ */ jsxs51(
|
|
1174
1757
|
"div",
|
|
1175
1758
|
{
|
|
1176
1759
|
ref: containerRef,
|
|
1177
1760
|
className: [styles14.splitPane, className].filter(Boolean).join(" "),
|
|
1178
1761
|
style,
|
|
1179
1762
|
children: [
|
|
1180
|
-
/* @__PURE__ */
|
|
1181
|
-
resizable && /* @__PURE__ */
|
|
1763
|
+
/* @__PURE__ */ jsx66("section", { className: styles14.pane, "aria-label": primaryLabel, children: primary }),
|
|
1764
|
+
resizable && /* @__PURE__ */ jsx66(
|
|
1182
1765
|
"button",
|
|
1183
1766
|
{
|
|
1184
1767
|
type: "button",
|
|
@@ -1188,7 +1771,7 @@ function SplitPane({
|
|
|
1188
1771
|
onKeyDown: resizeWithKeyboard
|
|
1189
1772
|
}
|
|
1190
1773
|
),
|
|
1191
|
-
/* @__PURE__ */
|
|
1774
|
+
/* @__PURE__ */ jsx66("section", { className: styles14.pane, "aria-label": secondaryLabel, children: secondary })
|
|
1192
1775
|
]
|
|
1193
1776
|
}
|
|
1194
1777
|
);
|
|
@@ -1197,7 +1780,7 @@ function SplitPane({
|
|
|
1197
1780
|
// src/components/TagInput/TagInput.tsx
|
|
1198
1781
|
import { useMemo, useState as useState3 } from "react";
|
|
1199
1782
|
import styles15 from "./TagInput.module.css";
|
|
1200
|
-
import { jsx as
|
|
1783
|
+
import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
1201
1784
|
var DEFAULT_SEPARATORS = /[\n,]+/;
|
|
1202
1785
|
var splitTags = (value, separators) => value.split(separators).map((tag) => tag.trim()).filter(Boolean);
|
|
1203
1786
|
function TagInput({
|
|
@@ -1271,8 +1854,8 @@ function TagInput({
|
|
|
1271
1854
|
event.preventDefault();
|
|
1272
1855
|
addTags(tags);
|
|
1273
1856
|
};
|
|
1274
|
-
return /* @__PURE__ */
|
|
1275
|
-
/* @__PURE__ */
|
|
1857
|
+
return /* @__PURE__ */ jsxs52("div", { className: [styles15.wrapper, className].filter(Boolean).join(" "), children: [
|
|
1858
|
+
/* @__PURE__ */ jsxs52(
|
|
1276
1859
|
"div",
|
|
1277
1860
|
{
|
|
1278
1861
|
className: [
|
|
@@ -1281,9 +1864,9 @@ function TagInput({
|
|
|
1281
1864
|
error || localError || ariaInvalid ? styles15.invalid : void 0
|
|
1282
1865
|
].filter(Boolean).join(" "),
|
|
1283
1866
|
children: [
|
|
1284
|
-
value.map((tag, index) => /* @__PURE__ */
|
|
1285
|
-
/* @__PURE__ */
|
|
1286
|
-
/* @__PURE__ */
|
|
1867
|
+
value.map((tag, index) => /* @__PURE__ */ jsxs52("span", { className: styles15.tag, children: [
|
|
1868
|
+
/* @__PURE__ */ jsx67("span", { className: styles15.tagLabel, children: tag }),
|
|
1869
|
+
/* @__PURE__ */ jsx67(
|
|
1287
1870
|
"button",
|
|
1288
1871
|
{
|
|
1289
1872
|
type: "button",
|
|
@@ -1295,7 +1878,7 @@ function TagInput({
|
|
|
1295
1878
|
}
|
|
1296
1879
|
)
|
|
1297
1880
|
] }, `${tag}-${index}`)),
|
|
1298
|
-
/* @__PURE__ */
|
|
1881
|
+
/* @__PURE__ */ jsx67(
|
|
1299
1882
|
"input",
|
|
1300
1883
|
{
|
|
1301
1884
|
id,
|
|
@@ -1317,7 +1900,7 @@ function TagInput({
|
|
|
1317
1900
|
]
|
|
1318
1901
|
}
|
|
1319
1902
|
),
|
|
1320
|
-
message && /* @__PURE__ */
|
|
1903
|
+
message && /* @__PURE__ */ jsx67(
|
|
1321
1904
|
"p",
|
|
1322
1905
|
{
|
|
1323
1906
|
id: messageId,
|
|
@@ -1376,7 +1959,7 @@ function usePrefersReducedMotion() {
|
|
|
1376
1959
|
|
|
1377
1960
|
// src/components/OverlayHeader/OverlayHeader.tsx
|
|
1378
1961
|
import styles16 from "./OverlayHeader.module.css";
|
|
1379
|
-
import { jsx as
|
|
1962
|
+
import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
1380
1963
|
function OverlayHeader({
|
|
1381
1964
|
title,
|
|
1382
1965
|
onClose,
|
|
@@ -1385,20 +1968,20 @@ function OverlayHeader({
|
|
|
1385
1968
|
secondRow,
|
|
1386
1969
|
className
|
|
1387
1970
|
}) {
|
|
1388
|
-
return /* @__PURE__ */
|
|
1389
|
-
/* @__PURE__ */
|
|
1390
|
-
onBack && /* @__PURE__ */
|
|
1391
|
-
/* @__PURE__ */
|
|
1392
|
-
action && /* @__PURE__ */
|
|
1393
|
-
/* @__PURE__ */
|
|
1971
|
+
return /* @__PURE__ */ jsxs53("div", { className: [styles16.header, className].filter(Boolean).join(" "), children: [
|
|
1972
|
+
/* @__PURE__ */ jsxs53("div", { className: styles16.row, children: [
|
|
1973
|
+
onBack && /* @__PURE__ */ jsx68("button", { type: "button", className: styles16.backButton, "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ jsx68(Icon, { name: "chevron-left", size: "md", "aria-hidden": true }) }),
|
|
1974
|
+
/* @__PURE__ */ jsx68("span", { className: styles16.title, children: title }),
|
|
1975
|
+
action && /* @__PURE__ */ jsx68("div", { className: styles16.action, children: action }),
|
|
1976
|
+
/* @__PURE__ */ jsx68("button", { type: "button", className: styles16.closeButton, "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx68(Icon, { name: "x", size: "sm", "aria-hidden": true }) })
|
|
1394
1977
|
] }),
|
|
1395
|
-
secondRow && /* @__PURE__ */
|
|
1978
|
+
secondRow && /* @__PURE__ */ jsx68("div", { className: styles16.secondRow, children: secondRow })
|
|
1396
1979
|
] });
|
|
1397
1980
|
}
|
|
1398
1981
|
|
|
1399
1982
|
// src/components/Dialog/Dialog.tsx
|
|
1400
1983
|
import styles17 from "./Dialog.module.css";
|
|
1401
|
-
import { jsx as
|
|
1984
|
+
import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
1402
1985
|
var MOTION_DURATION_MS = 250;
|
|
1403
1986
|
var OverlaySecondRowContext = createContext(
|
|
1404
1987
|
void 0
|
|
@@ -1474,7 +2057,7 @@ function Dialog({
|
|
|
1474
2057
|
return (
|
|
1475
2058
|
// role="presentation" removes the scrim from the AT (it is purely visual).
|
|
1476
2059
|
// e.target check lets clicks inside the panel bubble without triggering dismiss.
|
|
1477
|
-
/* @__PURE__ */
|
|
2060
|
+
/* @__PURE__ */ jsx69(
|
|
1478
2061
|
"div",
|
|
1479
2062
|
{
|
|
1480
2063
|
className: [styles17.scrim, isOpenPhase ? styles17.scrimOpen : ""].filter(Boolean).join(" "),
|
|
@@ -1485,7 +2068,7 @@ function Dialog({
|
|
|
1485
2068
|
onKeyDown: (e) => {
|
|
1486
2069
|
if (e.key === "Escape") onClose();
|
|
1487
2070
|
},
|
|
1488
|
-
children: /* @__PURE__ */
|
|
2071
|
+
children: /* @__PURE__ */ jsxs54(
|
|
1489
2072
|
"div",
|
|
1490
2073
|
{
|
|
1491
2074
|
ref: panelRef,
|
|
@@ -1495,7 +2078,7 @@ function Dialog({
|
|
|
1495
2078
|
tabIndex: -1,
|
|
1496
2079
|
className: [styles17.panel, styles17[size], isOpenPhase ? styles17.panelOpen : ""].filter(Boolean).join(" "),
|
|
1497
2080
|
children: [
|
|
1498
|
-
/* @__PURE__ */
|
|
2081
|
+
/* @__PURE__ */ jsx69(
|
|
1499
2082
|
OverlayHeader,
|
|
1500
2083
|
{
|
|
1501
2084
|
title,
|
|
@@ -1504,8 +2087,8 @@ function Dialog({
|
|
|
1504
2087
|
className: styles17.mobileHeader
|
|
1505
2088
|
}
|
|
1506
2089
|
),
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
/* @__PURE__ */
|
|
2090
|
+
/* @__PURE__ */ jsx69("button", { type: "button", className: styles17.close, "aria-label": "Close", onClick: onClose, children: "\xD7" }),
|
|
2091
|
+
/* @__PURE__ */ jsx69("div", { className: styles17.content, children: /* @__PURE__ */ jsx69(OverlaySecondRowContext.Provider, { value: setSecondRow, children }) })
|
|
1509
2092
|
]
|
|
1510
2093
|
}
|
|
1511
2094
|
)
|
|
@@ -1517,7 +2100,7 @@ function Dialog({
|
|
|
1517
2100
|
// src/components/Drawer/Drawer.tsx
|
|
1518
2101
|
import { useEffect as useEffect5, useRef as useRef4 } from "react";
|
|
1519
2102
|
import styles18 from "./Drawer.module.css";
|
|
1520
|
-
import { jsx as
|
|
2103
|
+
import { jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
1521
2104
|
var MOTION_DURATION_MS2 = 250;
|
|
1522
2105
|
var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
1523
2106
|
var SWIPE_DISMISS_THRESHOLD_PX = 100;
|
|
@@ -1606,7 +2189,7 @@ function Drawer({
|
|
|
1606
2189
|
return (
|
|
1607
2190
|
// role="presentation" removes the scrim from the AT (it is purely visual).
|
|
1608
2191
|
// e.target check lets clicks inside the panel bubble without triggering dismiss.
|
|
1609
|
-
/* @__PURE__ */
|
|
2192
|
+
/* @__PURE__ */ jsx70(
|
|
1610
2193
|
"div",
|
|
1611
2194
|
{
|
|
1612
2195
|
className: [styles18.scrim, isOpenPhase ? styles18.scrimOpen : ""].filter(Boolean).join(" "),
|
|
@@ -1617,7 +2200,7 @@ function Drawer({
|
|
|
1617
2200
|
onKeyDown: (e) => {
|
|
1618
2201
|
if (e.key === "Escape") onClose();
|
|
1619
2202
|
},
|
|
1620
|
-
children: /* @__PURE__ */
|
|
2203
|
+
children: /* @__PURE__ */ jsxs55(
|
|
1621
2204
|
"div",
|
|
1622
2205
|
{
|
|
1623
2206
|
ref: panelRef,
|
|
@@ -1631,7 +2214,7 @@ function Drawer({
|
|
|
1631
2214
|
isOpenPhase ? styles18.panelOpen : ""
|
|
1632
2215
|
].filter(Boolean).join(" "),
|
|
1633
2216
|
children: [
|
|
1634
|
-
/* @__PURE__ */
|
|
2217
|
+
/* @__PURE__ */ jsx70(
|
|
1635
2218
|
"div",
|
|
1636
2219
|
{
|
|
1637
2220
|
className: styles18.handle,
|
|
@@ -1654,7 +2237,7 @@ function Drawer({
|
|
|
1654
2237
|
// src/components/Sheet/Sheet.tsx
|
|
1655
2238
|
import { useEffect as useEffect6, useRef as useRef5 } from "react";
|
|
1656
2239
|
import styles19 from "./Sheet.module.css";
|
|
1657
|
-
import { jsx as
|
|
2240
|
+
import { jsx as jsx71, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
1658
2241
|
var FOCUSABLE3 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
1659
2242
|
var MOTION_DURATION_MS3 = 250;
|
|
1660
2243
|
function Sheet({
|
|
@@ -1715,7 +2298,7 @@ function Sheet({
|
|
|
1715
2298
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1716
2299
|
}, [open, onClose]);
|
|
1717
2300
|
if (!mounted) return null;
|
|
1718
|
-
return /* @__PURE__ */
|
|
2301
|
+
return /* @__PURE__ */ jsxs56(
|
|
1719
2302
|
"div",
|
|
1720
2303
|
{
|
|
1721
2304
|
ref: panelRef,
|
|
@@ -1729,8 +2312,8 @@ function Sheet({
|
|
|
1729
2312
|
phase === "open" ? styles19.panelOpen : ""
|
|
1730
2313
|
].filter(Boolean).join(" "),
|
|
1731
2314
|
children: [
|
|
1732
|
-
title && /* @__PURE__ */
|
|
1733
|
-
/* @__PURE__ */
|
|
2315
|
+
title && /* @__PURE__ */ jsx71(OverlayHeader, { title, onClose, onBack, action: headerAction }),
|
|
2316
|
+
/* @__PURE__ */ jsx71("div", { className: styles19.content, children })
|
|
1734
2317
|
]
|
|
1735
2318
|
}
|
|
1736
2319
|
);
|
|
@@ -1739,7 +2322,7 @@ function Sheet({
|
|
|
1739
2322
|
// src/components/ConfirmDialog/ConfirmDialog.tsx
|
|
1740
2323
|
import { useEffect as useEffect7, useRef as useRef6 } from "react";
|
|
1741
2324
|
import styles20 from "./ConfirmDialog.module.css";
|
|
1742
|
-
import { jsx as
|
|
2325
|
+
import { jsx as jsx72, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
1743
2326
|
function ConfirmDialog({
|
|
1744
2327
|
open,
|
|
1745
2328
|
onClose,
|
|
@@ -1768,7 +2351,7 @@ function ConfirmDialog({
|
|
|
1768
2351
|
}, [onClose]);
|
|
1769
2352
|
return (
|
|
1770
2353
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
1771
|
-
/* @__PURE__ */
|
|
2354
|
+
/* @__PURE__ */ jsx72(
|
|
1772
2355
|
"dialog",
|
|
1773
2356
|
{
|
|
1774
2357
|
ref: dialogRef,
|
|
@@ -1777,12 +2360,12 @@ function ConfirmDialog({
|
|
|
1777
2360
|
onClick: (e) => {
|
|
1778
2361
|
if (e.target === e.currentTarget) onClose();
|
|
1779
2362
|
},
|
|
1780
|
-
children: /* @__PURE__ */
|
|
1781
|
-
/* @__PURE__ */
|
|
1782
|
-
/* @__PURE__ */
|
|
1783
|
-
error && /* @__PURE__ */
|
|
1784
|
-
/* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
2363
|
+
children: /* @__PURE__ */ jsxs57("div", { className: styles20.body, children: [
|
|
2364
|
+
/* @__PURE__ */ jsx72("h2", { className: styles20.title, children: title }),
|
|
2365
|
+
/* @__PURE__ */ jsx72("div", { className: styles20.message, children: message }),
|
|
2366
|
+
error && /* @__PURE__ */ jsx72("p", { className: styles20.error, children: error }),
|
|
2367
|
+
/* @__PURE__ */ jsxs57("div", { className: styles20.actions, children: [
|
|
2368
|
+
/* @__PURE__ */ jsx72(Button, { type: "button", variant: "secondary", onClick: onClose, disabled: pending, children: cancelLabel }),
|
|
1786
2369
|
destructive ? (
|
|
1787
2370
|
// A solid red fill, not Button's own `destructive` variant (an
|
|
1788
2371
|
// outlined/ghost style meant for lower-emphasis placements) — a
|
|
@@ -1791,7 +2374,7 @@ function ConfirmDialog({
|
|
|
1791
2374
|
// -text-on-error tokens the codebase already introduced for this
|
|
1792
2375
|
// exact "reads as a filled action button, not a tinted status
|
|
1793
2376
|
// surface" case (see semantic.css).
|
|
1794
|
-
/* @__PURE__ */
|
|
2377
|
+
/* @__PURE__ */ jsx72(
|
|
1795
2378
|
"button",
|
|
1796
2379
|
{
|
|
1797
2380
|
type: "button",
|
|
@@ -1801,7 +2384,7 @@ function ConfirmDialog({
|
|
|
1801
2384
|
children: confirmLabel
|
|
1802
2385
|
}
|
|
1803
2386
|
)
|
|
1804
|
-
) : /* @__PURE__ */
|
|
2387
|
+
) : /* @__PURE__ */ jsx72(Button, { type: "button", variant: "primary", onClick: onConfirm, disabled: pending, children: confirmLabel })
|
|
1805
2388
|
] })
|
|
1806
2389
|
] })
|
|
1807
2390
|
}
|
|
@@ -1963,20 +2546,30 @@ function useIsMobile(breakpointPx = MOBILE_BREAKPOINT_PX) {
|
|
|
1963
2546
|
return isMobile;
|
|
1964
2547
|
}
|
|
1965
2548
|
|
|
2549
|
+
// src/hooks/useCommitOnEnterOrBlur.ts
|
|
2550
|
+
function useCommitOnEnterOrBlur(onCommit) {
|
|
2551
|
+
return {
|
|
2552
|
+
onKeyDown: (e) => {
|
|
2553
|
+
if (e.key === "Enter") onCommit();
|
|
2554
|
+
},
|
|
2555
|
+
onBlur: onCommit
|
|
2556
|
+
};
|
|
2557
|
+
}
|
|
2558
|
+
|
|
1966
2559
|
// src/components/Menu/Menu.tsx
|
|
1967
2560
|
import styles21 from "./Menu.module.css";
|
|
1968
|
-
import { Fragment, jsx as
|
|
2561
|
+
import { Fragment, jsx as jsx73, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
1969
2562
|
function Menu({ trigger, open, onClose, items, "aria-label": ariaLabel, align }) {
|
|
1970
2563
|
const isMobile = useIsMobile();
|
|
1971
|
-
const list = /* @__PURE__ */
|
|
2564
|
+
const list = /* @__PURE__ */ jsx73("ul", { className: styles21.list, role: "menu", children: items.map((entry, index) => {
|
|
1972
2565
|
if (entry.type === "separator") {
|
|
1973
|
-
return /* @__PURE__ */
|
|
2566
|
+
return /* @__PURE__ */ jsx73("li", { role: "separator", className: styles21.separator }, index);
|
|
1974
2567
|
}
|
|
1975
2568
|
if (entry.type === "label") {
|
|
1976
|
-
return /* @__PURE__ */
|
|
2569
|
+
return /* @__PURE__ */ jsx73("li", { role: "presentation", className: styles21.label, children: entry.label }, index);
|
|
1977
2570
|
}
|
|
1978
2571
|
const isCheckable = entry.checked !== void 0;
|
|
1979
|
-
return /* @__PURE__ */
|
|
2572
|
+
return /* @__PURE__ */ jsx73("li", { role: "none", children: /* @__PURE__ */ jsxs58(
|
|
1980
2573
|
"button",
|
|
1981
2574
|
{
|
|
1982
2575
|
role: isCheckable ? "menuitemradio" : "menuitem",
|
|
@@ -1989,20 +2582,20 @@ function Menu({ trigger, open, onClose, items, "aria-label": ariaLabel, align })
|
|
|
1989
2582
|
entry.onSelect();
|
|
1990
2583
|
},
|
|
1991
2584
|
children: [
|
|
1992
|
-
isCheckable && /* @__PURE__ */
|
|
1993
|
-
entry.icon && /* @__PURE__ */
|
|
2585
|
+
isCheckable && /* @__PURE__ */ jsx73("span", { className: styles21.check, "aria-hidden": true, children: entry.checked && /* @__PURE__ */ jsx73(Icon, { name: "check", size: "sm", "aria-hidden": true }) }),
|
|
2586
|
+
entry.icon && /* @__PURE__ */ jsx73(Icon, { name: entry.icon, size: "sm", "aria-hidden": true }),
|
|
1994
2587
|
entry.label
|
|
1995
2588
|
]
|
|
1996
2589
|
}
|
|
1997
2590
|
) }, index);
|
|
1998
2591
|
}) });
|
|
1999
2592
|
if (isMobile) {
|
|
2000
|
-
return /* @__PURE__ */
|
|
2593
|
+
return /* @__PURE__ */ jsxs58(Fragment, { children: [
|
|
2001
2594
|
trigger,
|
|
2002
|
-
/* @__PURE__ */
|
|
2595
|
+
/* @__PURE__ */ jsx73(Drawer, { open, onClose, "aria-label": ariaLabel, children: list })
|
|
2003
2596
|
] });
|
|
2004
2597
|
}
|
|
2005
|
-
return /* @__PURE__ */
|
|
2598
|
+
return /* @__PURE__ */ jsx73(Popover, { trigger, open, onClose, "aria-label": ariaLabel, align, children: list });
|
|
2006
2599
|
}
|
|
2007
2600
|
|
|
2008
2601
|
// src/components/Toast/Toast.tsx
|
|
@@ -2017,7 +2610,7 @@ import {
|
|
|
2017
2610
|
useState as useState8
|
|
2018
2611
|
} from "react";
|
|
2019
2612
|
import styles22 from "./Toast.module.css";
|
|
2020
|
-
import { jsx as
|
|
2613
|
+
import { jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
2021
2614
|
var ToastContext = createContext2(null);
|
|
2022
2615
|
function useToast() {
|
|
2023
2616
|
const ctx = useContext2(ToastContext);
|
|
@@ -2055,16 +2648,16 @@ function ToastProvider({ children }) {
|
|
|
2055
2648
|
};
|
|
2056
2649
|
}, []);
|
|
2057
2650
|
const value = useMemo2(() => ({ show, dismiss }), [show, dismiss]);
|
|
2058
|
-
return /* @__PURE__ */
|
|
2651
|
+
return /* @__PURE__ */ jsxs59(ToastContext.Provider, { value, children: [
|
|
2059
2652
|
children,
|
|
2060
|
-
/* @__PURE__ */
|
|
2653
|
+
/* @__PURE__ */ jsx74(
|
|
2061
2654
|
"ol",
|
|
2062
2655
|
{
|
|
2063
2656
|
className: styles22.region,
|
|
2064
2657
|
"aria-label": "Notifications",
|
|
2065
2658
|
"aria-live": "polite",
|
|
2066
2659
|
"aria-atomic": "false",
|
|
2067
|
-
children: toasts.map((toast) => /* @__PURE__ */
|
|
2660
|
+
children: toasts.map((toast) => /* @__PURE__ */ jsx74(Toast, { ...toast, onDismiss: dismiss }, toast.id))
|
|
2068
2661
|
}
|
|
2069
2662
|
)
|
|
2070
2663
|
] });
|
|
@@ -2087,18 +2680,18 @@ function Toast({
|
|
|
2087
2680
|
}) {
|
|
2088
2681
|
const categoryClass = styles22[category] ?? styles22.info;
|
|
2089
2682
|
const iconName = CATEGORY_ICON[category] ?? "info";
|
|
2090
|
-
return /* @__PURE__ */
|
|
2683
|
+
return /* @__PURE__ */ jsxs59(
|
|
2091
2684
|
"li",
|
|
2092
2685
|
{
|
|
2093
2686
|
role: "status",
|
|
2094
2687
|
className: `${styles22.toast} ${String(categoryClass)} ${exiting ? styles22.exiting : ""}`,
|
|
2095
2688
|
children: [
|
|
2096
|
-
/* @__PURE__ */
|
|
2097
|
-
/* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2099
|
-
message && /* @__PURE__ */
|
|
2689
|
+
/* @__PURE__ */ jsx74("span", { className: styles22.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx74(Icon, { name: iconName, size: "sm", "aria-hidden": true }) }),
|
|
2690
|
+
/* @__PURE__ */ jsxs59("div", { className: styles22.body, children: [
|
|
2691
|
+
/* @__PURE__ */ jsx74("div", { className: styles22.title, children: title }),
|
|
2692
|
+
message && /* @__PURE__ */ jsx74("div", { className: styles22.message, children: message })
|
|
2100
2693
|
] }),
|
|
2101
|
-
/* @__PURE__ */
|
|
2694
|
+
/* @__PURE__ */ jsx74(
|
|
2102
2695
|
"button",
|
|
2103
2696
|
{
|
|
2104
2697
|
type: "button",
|
|
@@ -2115,7 +2708,7 @@ function Toast({
|
|
|
2115
2708
|
|
|
2116
2709
|
// src/components/Card/Card.tsx
|
|
2117
2710
|
import styles23 from "./Card.module.css";
|
|
2118
|
-
import { jsx as
|
|
2711
|
+
import { jsx as jsx75 } from "react/jsx-runtime";
|
|
2119
2712
|
var paddingClass = {
|
|
2120
2713
|
sm: styles23.paddingSm,
|
|
2121
2714
|
md: styles23.paddingMd,
|
|
@@ -2130,13 +2723,13 @@ function Card({
|
|
|
2130
2723
|
...rest
|
|
2131
2724
|
}) {
|
|
2132
2725
|
const cls = [styles23.card, paddingClass[padding], interactive && styles23.interactive, className].filter(Boolean).join(" ");
|
|
2133
|
-
return /* @__PURE__ */
|
|
2726
|
+
return /* @__PURE__ */ jsx75(Tag, { className: cls, ...rest, children });
|
|
2134
2727
|
}
|
|
2135
2728
|
|
|
2136
2729
|
// src/components/FormField/FormField.tsx
|
|
2137
2730
|
import { useId as useId2 } from "react";
|
|
2138
2731
|
import styles24 from "./FormField.module.css";
|
|
2139
|
-
import { jsx as
|
|
2732
|
+
import { jsx as jsx76, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
2140
2733
|
function FormField({
|
|
2141
2734
|
label,
|
|
2142
2735
|
hint,
|
|
@@ -2157,52 +2750,52 @@ function FormField({
|
|
|
2157
2750
|
"aria-invalid": error ? true : void 0,
|
|
2158
2751
|
required: required || void 0
|
|
2159
2752
|
};
|
|
2160
|
-
return /* @__PURE__ */
|
|
2161
|
-
/* @__PURE__ */
|
|
2753
|
+
return /* @__PURE__ */ jsxs60("div", { className: [styles24.field, className].filter(Boolean).join(" "), children: [
|
|
2754
|
+
/* @__PURE__ */ jsxs60("label", { className: styles24.label, htmlFor: fieldId, children: [
|
|
2162
2755
|
label,
|
|
2163
|
-
required && /* @__PURE__ */
|
|
2756
|
+
required && /* @__PURE__ */ jsx76("span", { className: styles24.required, "aria-hidden": "true", children: "*" })
|
|
2164
2757
|
] }),
|
|
2165
2758
|
children(field),
|
|
2166
|
-
hint && !error && /* @__PURE__ */
|
|
2167
|
-
error && /* @__PURE__ */
|
|
2759
|
+
hint && !error && /* @__PURE__ */ jsx76("p", { id: hintId, className: styles24.hint, children: hint }),
|
|
2760
|
+
error && /* @__PURE__ */ jsx76("p", { id: errorId, className: styles24.error, role: "alert", children: error })
|
|
2168
2761
|
] });
|
|
2169
2762
|
}
|
|
2170
2763
|
|
|
2171
2764
|
// src/components/PageHeader/PageHeader.tsx
|
|
2172
2765
|
import styles25 from "./PageHeader.module.css";
|
|
2173
|
-
import { jsx as
|
|
2766
|
+
import { jsx as jsx77, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
2174
2767
|
function PageHeader({ title, description, action, className }) {
|
|
2175
|
-
return /* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2177
|
-
/* @__PURE__ */
|
|
2178
|
-
description && /* @__PURE__ */
|
|
2768
|
+
return /* @__PURE__ */ jsxs61("header", { className: [styles25.header, className].filter(Boolean).join(" "), children: [
|
|
2769
|
+
/* @__PURE__ */ jsxs61("div", { className: styles25.text, children: [
|
|
2770
|
+
/* @__PURE__ */ jsx77("h1", { className: styles25.title, children: title }),
|
|
2771
|
+
description && /* @__PURE__ */ jsx77("p", { className: styles25.description, children: description })
|
|
2179
2772
|
] }),
|
|
2180
|
-
action && /* @__PURE__ */
|
|
2773
|
+
action && /* @__PURE__ */ jsx77("div", { className: styles25.action, children: action })
|
|
2181
2774
|
] });
|
|
2182
2775
|
}
|
|
2183
2776
|
|
|
2184
2777
|
// src/components/EmptyState/EmptyState.tsx
|
|
2185
2778
|
import styles26 from "./EmptyState.module.css";
|
|
2186
|
-
import { jsx as
|
|
2779
|
+
import { jsx as jsx78, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
2187
2780
|
function EmptyState({ icon, heading, description, action, className }) {
|
|
2188
|
-
return /* @__PURE__ */
|
|
2189
|
-
icon && /* @__PURE__ */
|
|
2190
|
-
/* @__PURE__ */
|
|
2191
|
-
description && /* @__PURE__ */
|
|
2781
|
+
return /* @__PURE__ */ jsxs62("div", { className: [styles26.root, className].filter(Boolean).join(" "), children: [
|
|
2782
|
+
icon && /* @__PURE__ */ jsx78("span", { className: styles26.icon, children: /* @__PURE__ */ jsx78(Icon, { name: icon, size: "lg", "aria-hidden": true }) }),
|
|
2783
|
+
/* @__PURE__ */ jsx78("h2", { className: styles26.heading, children: heading }),
|
|
2784
|
+
description && /* @__PURE__ */ jsx78("p", { className: styles26.description, children: description }),
|
|
2192
2785
|
action
|
|
2193
2786
|
] });
|
|
2194
2787
|
}
|
|
2195
2788
|
|
|
2196
2789
|
// src/components/Spinner/Spinner.tsx
|
|
2197
2790
|
import styles27 from "./Spinner.module.css";
|
|
2198
|
-
import { jsx as
|
|
2791
|
+
import { jsx as jsx79 } from "react/jsx-runtime";
|
|
2199
2792
|
var sizeClass = {
|
|
2200
2793
|
sm: styles27.sm,
|
|
2201
2794
|
md: styles27.md,
|
|
2202
2795
|
lg: styles27.lg
|
|
2203
2796
|
};
|
|
2204
2797
|
function Spinner({ size = "md", label = "Loading\u2026", className }) {
|
|
2205
|
-
return /* @__PURE__ */
|
|
2798
|
+
return /* @__PURE__ */ jsx79(
|
|
2206
2799
|
"span",
|
|
2207
2800
|
{
|
|
2208
2801
|
role: "status",
|
|
@@ -2215,7 +2808,7 @@ function Spinner({ size = "md", label = "Loading\u2026", className }) {
|
|
|
2215
2808
|
// src/components/Avatar/Avatar.tsx
|
|
2216
2809
|
import { useState as useState9 } from "react";
|
|
2217
2810
|
import styles28 from "./Avatar.module.css";
|
|
2218
|
-
import { jsx as
|
|
2811
|
+
import { jsx as jsx80 } from "react/jsx-runtime";
|
|
2219
2812
|
function initials(name) {
|
|
2220
2813
|
const parts = name.trim().split(/\s+/);
|
|
2221
2814
|
if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
|
|
@@ -2230,21 +2823,21 @@ function Avatar({ name, src, size = "md", className }) {
|
|
|
2230
2823
|
const [imgFailed, setImgFailed] = useState9(false);
|
|
2231
2824
|
const cls = [styles28.avatar, sizeClass2[size], className].filter(Boolean).join(" ");
|
|
2232
2825
|
if (src && !imgFailed) {
|
|
2233
|
-
return /* @__PURE__ */
|
|
2826
|
+
return /* @__PURE__ */ jsx80("span", { className: cls, "aria-label": name, children: /* @__PURE__ */ jsx80("img", { src, alt: name, className: styles28.img, onError: () => setImgFailed(true) }) });
|
|
2234
2827
|
}
|
|
2235
|
-
return /* @__PURE__ */
|
|
2828
|
+
return /* @__PURE__ */ jsx80("span", { className: cls, "aria-label": name, children: initials(name) });
|
|
2236
2829
|
}
|
|
2237
2830
|
|
|
2238
2831
|
// src/components/NavTabs/NavTabs.tsx
|
|
2239
2832
|
import styles29 from "./NavTabs.module.css";
|
|
2240
|
-
import { jsx as
|
|
2833
|
+
import { jsx as jsx81 } from "react/jsx-runtime";
|
|
2241
2834
|
function NavTabs({ items, className, "aria-label": ariaLabel }) {
|
|
2242
|
-
return /* @__PURE__ */
|
|
2835
|
+
return /* @__PURE__ */ jsx81(
|
|
2243
2836
|
"nav",
|
|
2244
2837
|
{
|
|
2245
2838
|
className: [styles29.nav, className].filter(Boolean).join(" "),
|
|
2246
2839
|
"aria-label": ariaLabel ?? "Page navigation",
|
|
2247
|
-
children: items.map((item) => /* @__PURE__ */
|
|
2840
|
+
children: items.map((item) => /* @__PURE__ */ jsx81(
|
|
2248
2841
|
"a",
|
|
2249
2842
|
{
|
|
2250
2843
|
href: item.href,
|
|
@@ -2261,7 +2854,7 @@ function NavTabs({ items, className, "aria-label": ariaLabel }) {
|
|
|
2261
2854
|
// src/components/Tooltip/Tooltip.tsx
|
|
2262
2855
|
import { useId as useId3 } from "react";
|
|
2263
2856
|
import styles30 from "./Tooltip.module.css";
|
|
2264
|
-
import { jsx as
|
|
2857
|
+
import { jsx as jsx82, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
2265
2858
|
var sideClass = {
|
|
2266
2859
|
top: styles30.top,
|
|
2267
2860
|
bottom: styles30.bottom,
|
|
@@ -2270,15 +2863,15 @@ var sideClass = {
|
|
|
2270
2863
|
};
|
|
2271
2864
|
function Tooltip({ content, children, side = "top" }) {
|
|
2272
2865
|
const tipId = useId3();
|
|
2273
|
-
return /* @__PURE__ */
|
|
2274
|
-
/* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2866
|
+
return /* @__PURE__ */ jsxs63("span", { className: styles30.wrapper, children: [
|
|
2867
|
+
/* @__PURE__ */ jsx82("span", { "aria-describedby": tipId, children }),
|
|
2868
|
+
/* @__PURE__ */ jsx82("span", { id: tipId, role: "tooltip", className: [styles30.tip, sideClass[side]].join(" "), children: content })
|
|
2276
2869
|
] });
|
|
2277
2870
|
}
|
|
2278
2871
|
|
|
2279
2872
|
// src/components/Checkbox/Checkbox.tsx
|
|
2280
2873
|
import styles31 from "./Checkbox.module.css";
|
|
2281
|
-
import { jsx as
|
|
2874
|
+
import { jsx as jsx83, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
2282
2875
|
function Checkbox({
|
|
2283
2876
|
checked,
|
|
2284
2877
|
onChange,
|
|
@@ -2290,9 +2883,9 @@ function Checkbox({
|
|
|
2290
2883
|
...rest
|
|
2291
2884
|
}) {
|
|
2292
2885
|
const inputId = id ?? `checkbox-${label.toLowerCase().replace(/\s+/g, "-")}`;
|
|
2293
|
-
return /* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ jsxs64("span", { className: [styles31.root, className].filter(Boolean).join(" "), children: [
|
|
2887
|
+
/* @__PURE__ */ jsxs64("span", { className: [styles31.box, checked ? styles31.checked : ""].filter(Boolean).join(" "), children: [
|
|
2888
|
+
/* @__PURE__ */ jsx83(
|
|
2296
2889
|
"input",
|
|
2297
2890
|
{
|
|
2298
2891
|
...rest,
|
|
@@ -2304,7 +2897,7 @@ function Checkbox({
|
|
|
2304
2897
|
onChange: (e) => onChange(e.target.checked)
|
|
2305
2898
|
}
|
|
2306
2899
|
),
|
|
2307
|
-
checked && /* @__PURE__ */
|
|
2900
|
+
checked && /* @__PURE__ */ jsx83("svg", { className: styles31.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx83(
|
|
2308
2901
|
"path",
|
|
2309
2902
|
{
|
|
2310
2903
|
d: "M1 4l3 3 5-6",
|
|
@@ -2315,7 +2908,7 @@ function Checkbox({
|
|
|
2315
2908
|
}
|
|
2316
2909
|
) })
|
|
2317
2910
|
] }),
|
|
2318
|
-
label && /* @__PURE__ */
|
|
2911
|
+
label && /* @__PURE__ */ jsx83(
|
|
2319
2912
|
"label",
|
|
2320
2913
|
{
|
|
2321
2914
|
htmlFor: inputId,
|
|
@@ -2332,7 +2925,7 @@ function Checkbox({
|
|
|
2332
2925
|
|
|
2333
2926
|
// src/components/DragHandleRow/DragHandleRow.tsx
|
|
2334
2927
|
import styles32 from "./DragHandleRow.module.css";
|
|
2335
|
-
import { jsx as
|
|
2928
|
+
import { jsx as jsx84, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
2336
2929
|
function DragHandleRow({
|
|
2337
2930
|
children,
|
|
2338
2931
|
handleProps,
|
|
@@ -2340,13 +2933,13 @@ function DragHandleRow({
|
|
|
2340
2933
|
className,
|
|
2341
2934
|
...rest
|
|
2342
2935
|
}) {
|
|
2343
|
-
return /* @__PURE__ */
|
|
2936
|
+
return /* @__PURE__ */ jsxs65(
|
|
2344
2937
|
"div",
|
|
2345
2938
|
{
|
|
2346
2939
|
...rest,
|
|
2347
2940
|
className: [styles32.row, isDragging ? styles32.dragging : "", className].filter(Boolean).join(" "),
|
|
2348
2941
|
children: [
|
|
2349
|
-
/* @__PURE__ */
|
|
2942
|
+
/* @__PURE__ */ jsx84(
|
|
2350
2943
|
"button",
|
|
2351
2944
|
{
|
|
2352
2945
|
type: "button",
|
|
@@ -2354,16 +2947,16 @@ function DragHandleRow({
|
|
|
2354
2947
|
className: styles32.handle,
|
|
2355
2948
|
tabIndex: -1,
|
|
2356
2949
|
...handleProps,
|
|
2357
|
-
children: /* @__PURE__ */
|
|
2950
|
+
children: /* @__PURE__ */ jsx84(DragIcon, {})
|
|
2358
2951
|
}
|
|
2359
2952
|
),
|
|
2360
|
-
/* @__PURE__ */
|
|
2953
|
+
/* @__PURE__ */ jsx84("div", { className: styles32.content, children })
|
|
2361
2954
|
]
|
|
2362
2955
|
}
|
|
2363
2956
|
);
|
|
2364
2957
|
}
|
|
2365
2958
|
function DragIcon() {
|
|
2366
|
-
return /* @__PURE__ */
|
|
2959
|
+
return /* @__PURE__ */ jsx84(
|
|
2367
2960
|
"svg",
|
|
2368
2961
|
{
|
|
2369
2962
|
width: "14",
|
|
@@ -2373,14 +2966,83 @@ function DragIcon() {
|
|
|
2373
2966
|
"aria-hidden": "true",
|
|
2374
2967
|
className: styles32.icon,
|
|
2375
2968
|
children: [3, 7, 11].map(
|
|
2376
|
-
(cy) => [4, 10].map((cx) => /* @__PURE__ */
|
|
2969
|
+
(cy) => [4, 10].map((cx) => /* @__PURE__ */ jsx84("circle", { cx, cy, r: 1.2, fill: "currentColor" }, `${cx}-${cy}`))
|
|
2377
2970
|
)
|
|
2378
2971
|
}
|
|
2379
2972
|
);
|
|
2380
2973
|
}
|
|
2381
2974
|
|
|
2382
|
-
// src/components/
|
|
2975
|
+
// src/components/FileDropzone/FileDropzone.tsx
|
|
2383
2976
|
import { useRef as useRef10, useState as useState10 } from "react";
|
|
2977
|
+
import styles33 from "./FileDropzone.module.css";
|
|
2978
|
+
import { jsx as jsx85, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
2979
|
+
function FileDropzone({
|
|
2980
|
+
name,
|
|
2981
|
+
accept,
|
|
2982
|
+
icon,
|
|
2983
|
+
label,
|
|
2984
|
+
hint,
|
|
2985
|
+
onFileSelect,
|
|
2986
|
+
ariaLabel,
|
|
2987
|
+
disabled,
|
|
2988
|
+
className
|
|
2989
|
+
}) {
|
|
2990
|
+
const [dragging, setDragging] = useState10(false);
|
|
2991
|
+
const inputRef = useRef10(null);
|
|
2992
|
+
return /* @__PURE__ */ jsxs66(
|
|
2993
|
+
"label",
|
|
2994
|
+
{
|
|
2995
|
+
className: [
|
|
2996
|
+
styles33.dropzone,
|
|
2997
|
+
dragging ? styles33.dropzoneActive : "",
|
|
2998
|
+
disabled ? styles33.dropzoneDisabled : "",
|
|
2999
|
+
className
|
|
3000
|
+
].filter(Boolean).join(" "),
|
|
3001
|
+
onDragOver: (event) => {
|
|
3002
|
+
if (disabled) return;
|
|
3003
|
+
event.preventDefault();
|
|
3004
|
+
setDragging(true);
|
|
3005
|
+
},
|
|
3006
|
+
onDragLeave: () => setDragging(false),
|
|
3007
|
+
onDrop: (event) => {
|
|
3008
|
+
if (disabled) return;
|
|
3009
|
+
event.preventDefault();
|
|
3010
|
+
setDragging(false);
|
|
3011
|
+
const dropped = event.dataTransfer.files[0];
|
|
3012
|
+
if (!dropped) return;
|
|
3013
|
+
if (inputRef.current && typeof DataTransfer !== "undefined") {
|
|
3014
|
+
const transfer = new DataTransfer();
|
|
3015
|
+
transfer.items.add(dropped);
|
|
3016
|
+
inputRef.current.files = transfer.files;
|
|
3017
|
+
}
|
|
3018
|
+
onFileSelect(dropped);
|
|
3019
|
+
},
|
|
3020
|
+
children: [
|
|
3021
|
+
/* @__PURE__ */ jsx85("span", { className: styles33.icon, "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx85(Icon, { name: "file", size: "lg", "aria-hidden": true }) }),
|
|
3022
|
+
/* @__PURE__ */ jsxs66("span", { className: styles33.text, children: [
|
|
3023
|
+
/* @__PURE__ */ jsx85("span", { className: styles33.title, children: label }),
|
|
3024
|
+
hint && /* @__PURE__ */ jsx85("span", { className: styles33.hint, children: hint })
|
|
3025
|
+
] }),
|
|
3026
|
+
/* @__PURE__ */ jsx85(
|
|
3027
|
+
"input",
|
|
3028
|
+
{
|
|
3029
|
+
ref: inputRef,
|
|
3030
|
+
type: "file",
|
|
3031
|
+
name,
|
|
3032
|
+
"aria-label": ariaLabel,
|
|
3033
|
+
accept,
|
|
3034
|
+
disabled,
|
|
3035
|
+
onChange: (event) => onFileSelect(event.target.files?.[0] ?? null),
|
|
3036
|
+
className: styles33.hiddenInput
|
|
3037
|
+
}
|
|
3038
|
+
)
|
|
3039
|
+
]
|
|
3040
|
+
}
|
|
3041
|
+
);
|
|
3042
|
+
}
|
|
3043
|
+
|
|
3044
|
+
// src/components/Calendar/Calendar.tsx
|
|
3045
|
+
import { useRef as useRef11, useState as useState11 } from "react";
|
|
2384
3046
|
|
|
2385
3047
|
// src/components/Calendar/dateUtils.ts
|
|
2386
3048
|
function startOfMonth(date) {
|
|
@@ -2446,8 +3108,8 @@ function formatDateLabel(date) {
|
|
|
2446
3108
|
}
|
|
2447
3109
|
|
|
2448
3110
|
// src/components/Calendar/Calendar.tsx
|
|
2449
|
-
import
|
|
2450
|
-
import { jsx as
|
|
3111
|
+
import styles34 from "./Calendar.module.css";
|
|
3112
|
+
import { jsx as jsx86, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
2451
3113
|
var WEEKDAY_LABEL_WEEK = getMonthGrid(new Date(2026, 0, 1))[0] ?? [];
|
|
2452
3114
|
function Calendar({
|
|
2453
3115
|
value,
|
|
@@ -2456,9 +3118,9 @@ function Calendar({
|
|
|
2456
3118
|
maxDate,
|
|
2457
3119
|
"aria-label": ariaLabel
|
|
2458
3120
|
}) {
|
|
2459
|
-
const [displayedMonth, setDisplayedMonth] =
|
|
2460
|
-
const [focusedDate, setFocusedDate] =
|
|
2461
|
-
const gridRef =
|
|
3121
|
+
const [displayedMonth, setDisplayedMonth] = useState11(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
3122
|
+
const [focusedDate, setFocusedDate] = useState11(() => value ?? /* @__PURE__ */ new Date());
|
|
3123
|
+
const gridRef = useRef11(null);
|
|
2462
3124
|
const weeks = getMonthGrid(displayedMonth);
|
|
2463
3125
|
function goToMonth(next) {
|
|
2464
3126
|
setDisplayedMonth(startOfMonth(next));
|
|
@@ -2517,51 +3179,51 @@ function Calendar({
|
|
|
2517
3179
|
default:
|
|
2518
3180
|
}
|
|
2519
3181
|
}
|
|
2520
|
-
return /* @__PURE__ */
|
|
2521
|
-
/* @__PURE__ */
|
|
2522
|
-
/* @__PURE__ */
|
|
3182
|
+
return /* @__PURE__ */ jsxs67("div", { className: styles34.calendar, "aria-label": ariaLabel, children: [
|
|
3183
|
+
/* @__PURE__ */ jsxs67("div", { className: styles34.header, children: [
|
|
3184
|
+
/* @__PURE__ */ jsx86(
|
|
2523
3185
|
"button",
|
|
2524
3186
|
{
|
|
2525
3187
|
type: "button",
|
|
2526
|
-
className:
|
|
3188
|
+
className: styles34.navButton,
|
|
2527
3189
|
"aria-label": "Previous month",
|
|
2528
3190
|
onClick: () => goToMonth(addMonths(displayedMonth, -1)),
|
|
2529
|
-
children: /* @__PURE__ */
|
|
3191
|
+
children: /* @__PURE__ */ jsx86(Icon, { name: "chevron-left", size: "sm", "aria-hidden": true })
|
|
2530
3192
|
}
|
|
2531
3193
|
),
|
|
2532
|
-
/* @__PURE__ */
|
|
2533
|
-
/* @__PURE__ */
|
|
3194
|
+
/* @__PURE__ */ jsx86("span", { className: styles34.monthLabel, children: formatMonthYear(displayedMonth) }),
|
|
3195
|
+
/* @__PURE__ */ jsx86(
|
|
2534
3196
|
"button",
|
|
2535
3197
|
{
|
|
2536
3198
|
type: "button",
|
|
2537
|
-
className:
|
|
3199
|
+
className: styles34.navButton,
|
|
2538
3200
|
"aria-label": "Next month",
|
|
2539
3201
|
onClick: () => goToMonth(addMonths(displayedMonth, 1)),
|
|
2540
|
-
children: /* @__PURE__ */
|
|
3202
|
+
children: /* @__PURE__ */ jsx86(Icon, { name: "chevron-right", size: "sm", "aria-hidden": true })
|
|
2541
3203
|
}
|
|
2542
3204
|
)
|
|
2543
3205
|
] }),
|
|
2544
|
-
/* @__PURE__ */
|
|
3206
|
+
/* @__PURE__ */ jsxs67(
|
|
2545
3207
|
"div",
|
|
2546
3208
|
{
|
|
2547
3209
|
ref: gridRef,
|
|
2548
3210
|
role: "grid",
|
|
2549
3211
|
"aria-label": formatMonthYear(displayedMonth),
|
|
2550
|
-
className:
|
|
3212
|
+
className: styles34.grid,
|
|
2551
3213
|
onKeyDown: handleKeyDown,
|
|
2552
3214
|
tabIndex: -1,
|
|
2553
3215
|
children: [
|
|
2554
|
-
/* @__PURE__ */
|
|
3216
|
+
/* @__PURE__ */ jsx86("div", { role: "row", className: styles34.weekdayRow, children: WEEKDAY_LABEL_WEEK.map((d) => /* @__PURE__ */ jsx86("span", { role: "columnheader", className: styles34.weekday, "aria-hidden": true, children: formatWeekdayShort(d) }, d.getDay())) }),
|
|
2555
3217
|
weeks.map((week) => {
|
|
2556
3218
|
const firstDayOfWeek = week[0];
|
|
2557
3219
|
if (!firstDayOfWeek) return null;
|
|
2558
|
-
return /* @__PURE__ */
|
|
3220
|
+
return /* @__PURE__ */ jsx86("div", { role: "row", className: styles34.week, children: week.map((date) => {
|
|
2559
3221
|
const isCurrentMonth = isSameMonth(date, displayedMonth);
|
|
2560
3222
|
const isSelected = value !== null && isSameDay(date, value);
|
|
2561
3223
|
const isToday = isSameDay(date, /* @__PURE__ */ new Date());
|
|
2562
3224
|
const isFocusTarget = isSameDay(date, focusedDate);
|
|
2563
3225
|
const disabled = !isWithinRange(date, minDate, maxDate);
|
|
2564
|
-
return /* @__PURE__ */
|
|
3226
|
+
return /* @__PURE__ */ jsx86("div", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx86(
|
|
2565
3227
|
"button",
|
|
2566
3228
|
{
|
|
2567
3229
|
type: "button",
|
|
@@ -2570,10 +3232,10 @@ function Calendar({
|
|
|
2570
3232
|
"aria-current": isToday ? "date" : void 0,
|
|
2571
3233
|
"aria-label": formatDateLabel(date),
|
|
2572
3234
|
className: [
|
|
2573
|
-
|
|
2574
|
-
!isCurrentMonth ?
|
|
2575
|
-
isSelected ?
|
|
2576
|
-
isToday && !isSelected ?
|
|
3235
|
+
styles34.day,
|
|
3236
|
+
!isCurrentMonth ? styles34.dayOutside : "",
|
|
3237
|
+
isSelected ? styles34.daySelected : "",
|
|
3238
|
+
isToday && !isSelected ? styles34.dayToday : ""
|
|
2577
3239
|
].filter(Boolean).join(" "),
|
|
2578
3240
|
onClick: () => selectDate(date),
|
|
2579
3241
|
onFocus: () => setFocusedDate(date),
|
|
@@ -2589,9 +3251,9 @@ function Calendar({
|
|
|
2589
3251
|
}
|
|
2590
3252
|
|
|
2591
3253
|
// src/components/DatePicker/DatePicker.tsx
|
|
2592
|
-
import { useState as
|
|
2593
|
-
import
|
|
2594
|
-
import { Fragment as Fragment2, jsx as
|
|
3254
|
+
import { useState as useState12 } from "react";
|
|
3255
|
+
import styles35 from "./DatePicker.module.css";
|
|
3256
|
+
import { Fragment as Fragment2, jsx as jsx87, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
2595
3257
|
var POPOVER_WIDTH = 320;
|
|
2596
3258
|
function DatePicker({
|
|
2597
3259
|
value,
|
|
@@ -2602,29 +3264,29 @@ function DatePicker({
|
|
|
2602
3264
|
"aria-label": ariaLabel,
|
|
2603
3265
|
disabled = false
|
|
2604
3266
|
}) {
|
|
2605
|
-
const [open, setOpen] =
|
|
3267
|
+
const [open, setOpen] = useState12(false);
|
|
2606
3268
|
const isMobile = useIsMobile();
|
|
2607
3269
|
function handleSelect(date) {
|
|
2608
3270
|
onChange(date);
|
|
2609
3271
|
setOpen(false);
|
|
2610
3272
|
}
|
|
2611
|
-
const trigger = /* @__PURE__ */
|
|
3273
|
+
const trigger = /* @__PURE__ */ jsxs68(
|
|
2612
3274
|
"button",
|
|
2613
3275
|
{
|
|
2614
3276
|
type: "button",
|
|
2615
|
-
className:
|
|
3277
|
+
className: styles35.trigger,
|
|
2616
3278
|
disabled,
|
|
2617
3279
|
"aria-label": ariaLabel,
|
|
2618
3280
|
"aria-haspopup": "dialog",
|
|
2619
3281
|
"aria-expanded": open,
|
|
2620
3282
|
onClick: () => setOpen((o) => !o),
|
|
2621
3283
|
children: [
|
|
2622
|
-
/* @__PURE__ */
|
|
2623
|
-
/* @__PURE__ */
|
|
3284
|
+
/* @__PURE__ */ jsx87("span", { className: value ? styles35.triggerValue : styles35.triggerPlaceholder, children: value ? formatDateShort(value) : placeholder }),
|
|
3285
|
+
/* @__PURE__ */ jsx87(Icon, { name: "calendar", size: "sm", "aria-hidden": true })
|
|
2624
3286
|
]
|
|
2625
3287
|
}
|
|
2626
3288
|
);
|
|
2627
|
-
const calendar = /* @__PURE__ */
|
|
3289
|
+
const calendar = /* @__PURE__ */ jsx87(
|
|
2628
3290
|
Calendar,
|
|
2629
3291
|
{
|
|
2630
3292
|
value,
|
|
@@ -2635,12 +3297,12 @@ function DatePicker({
|
|
|
2635
3297
|
}
|
|
2636
3298
|
);
|
|
2637
3299
|
if (isMobile) {
|
|
2638
|
-
return /* @__PURE__ */
|
|
3300
|
+
return /* @__PURE__ */ jsxs68(Fragment2, { children: [
|
|
2639
3301
|
trigger,
|
|
2640
|
-
/* @__PURE__ */
|
|
3302
|
+
/* @__PURE__ */ jsx87(Drawer, { open, onClose: () => setOpen(false), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx87("div", { className: styles35.drawerBody, children: calendar }) })
|
|
2641
3303
|
] });
|
|
2642
3304
|
}
|
|
2643
|
-
return /* @__PURE__ */
|
|
3305
|
+
return /* @__PURE__ */ jsx87(
|
|
2644
3306
|
Popover,
|
|
2645
3307
|
{
|
|
2646
3308
|
trigger,
|
|
@@ -2648,16 +3310,339 @@ function DatePicker({
|
|
|
2648
3310
|
onClose: () => setOpen(false),
|
|
2649
3311
|
"aria-label": ariaLabel,
|
|
2650
3312
|
width: POPOVER_WIDTH,
|
|
2651
|
-
children: /* @__PURE__ */
|
|
3313
|
+
children: /* @__PURE__ */ jsx87("div", { className: styles35.popoverBody, children: calendar })
|
|
3314
|
+
}
|
|
3315
|
+
);
|
|
3316
|
+
}
|
|
3317
|
+
|
|
3318
|
+
// src/components/SuggestionInput/SuggestionInput.tsx
|
|
3319
|
+
import { useId as useId4, useRef as useRef12, useState as useState13 } from "react";
|
|
3320
|
+
import styles36 from "./SuggestionInput.module.css";
|
|
3321
|
+
import { Fragment as Fragment3, jsx as jsx88, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
3322
|
+
function SuggestionInput({
|
|
3323
|
+
value,
|
|
3324
|
+
onChange,
|
|
3325
|
+
options,
|
|
3326
|
+
onSelect,
|
|
3327
|
+
placeholder,
|
|
3328
|
+
"aria-label": ariaLabel,
|
|
3329
|
+
id,
|
|
3330
|
+
disabled = false,
|
|
3331
|
+
loading = false,
|
|
3332
|
+
createLabel,
|
|
3333
|
+
onCreate,
|
|
3334
|
+
className
|
|
3335
|
+
}) {
|
|
3336
|
+
const generatedId = useId4();
|
|
3337
|
+
const inputId = id ?? generatedId;
|
|
3338
|
+
const listId = `${inputId}-suggestions`;
|
|
3339
|
+
const inputRef = useRef12(null);
|
|
3340
|
+
const [focused, setFocused] = useState13(false);
|
|
3341
|
+
const [activeIndex, setActiveIndex] = useState13(-1);
|
|
3342
|
+
const showCreateRow = Boolean(onCreate && createLabel && value.trim());
|
|
3343
|
+
const rowCount = options.length + (showCreateRow ? 1 : 0);
|
|
3344
|
+
const open = focused && (rowCount > 0 || loading);
|
|
3345
|
+
function close() {
|
|
3346
|
+
setFocused(false);
|
|
3347
|
+
setActiveIndex(-1);
|
|
3348
|
+
}
|
|
3349
|
+
function commitIndex(index) {
|
|
3350
|
+
if (index < 0 || index >= rowCount) return;
|
|
3351
|
+
const option = options[index];
|
|
3352
|
+
if (option) {
|
|
3353
|
+
onSelect(option);
|
|
3354
|
+
} else if (onCreate) {
|
|
3355
|
+
onCreate(value);
|
|
3356
|
+
}
|
|
3357
|
+
close();
|
|
3358
|
+
}
|
|
3359
|
+
function handleKeyDown(e) {
|
|
3360
|
+
if (!open) return;
|
|
3361
|
+
const isArrowDown = e.key === "ArrowDown" || e.keyCode === 40;
|
|
3362
|
+
const isArrowUp = e.key === "ArrowUp" || e.keyCode === 38;
|
|
3363
|
+
const isEnter = e.key === "Enter" || e.keyCode === 13;
|
|
3364
|
+
const isEscape = e.key === "Escape" || e.keyCode === 27;
|
|
3365
|
+
if (isArrowDown) {
|
|
3366
|
+
e.preventDefault();
|
|
3367
|
+
setActiveIndex((i) => (i + 1) % rowCount);
|
|
3368
|
+
} else if (isArrowUp) {
|
|
3369
|
+
e.preventDefault();
|
|
3370
|
+
setActiveIndex((i) => i <= 0 ? rowCount - 1 : i - 1);
|
|
3371
|
+
} else if (isEnter) {
|
|
3372
|
+
e.preventDefault();
|
|
3373
|
+
commitIndex(activeIndex === -1 ? 0 : activeIndex);
|
|
3374
|
+
} else if (isEscape) {
|
|
3375
|
+
close();
|
|
3376
|
+
}
|
|
3377
|
+
}
|
|
3378
|
+
const trigger = /* @__PURE__ */ jsx88(
|
|
3379
|
+
"input",
|
|
3380
|
+
{
|
|
3381
|
+
ref: inputRef,
|
|
3382
|
+
id: inputId,
|
|
3383
|
+
type: "text",
|
|
3384
|
+
role: "combobox",
|
|
3385
|
+
"aria-expanded": open,
|
|
3386
|
+
"aria-controls": listId,
|
|
3387
|
+
"aria-autocomplete": "list",
|
|
3388
|
+
"aria-activedescendant": activeIndex >= 0 ? `${listId}-option-${activeIndex}` : void 0,
|
|
3389
|
+
"aria-label": ariaLabel,
|
|
3390
|
+
className: [styles36.input, className].filter(Boolean).join(" "),
|
|
3391
|
+
value,
|
|
3392
|
+
placeholder,
|
|
3393
|
+
disabled,
|
|
3394
|
+
autoComplete: "off",
|
|
3395
|
+
onChange: (e) => {
|
|
3396
|
+
onChange(e.target.value);
|
|
3397
|
+
setActiveIndex(-1);
|
|
3398
|
+
},
|
|
3399
|
+
onFocus: () => setFocused(true),
|
|
3400
|
+
onKeyDown: handleKeyDown
|
|
3401
|
+
}
|
|
3402
|
+
);
|
|
3403
|
+
return /* @__PURE__ */ jsx88(
|
|
3404
|
+
Popover,
|
|
3405
|
+
{
|
|
3406
|
+
trigger,
|
|
3407
|
+
open,
|
|
3408
|
+
onClose: close,
|
|
3409
|
+
width: "trigger",
|
|
3410
|
+
"aria-label": `${ariaLabel} suggestions`,
|
|
3411
|
+
children: /* @__PURE__ */ jsx88("ul", { id: listId, role: "listbox", className: styles36.list, children: loading ? /* @__PURE__ */ jsx88("li", { className: styles36.status, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs69(Fragment3, { children: [
|
|
3412
|
+
options.map((option, index) => /* @__PURE__ */ jsx88("li", { role: "none", children: /* @__PURE__ */ jsxs69(
|
|
3413
|
+
"button",
|
|
3414
|
+
{
|
|
3415
|
+
id: `${listId}-option-${index}`,
|
|
3416
|
+
role: "option",
|
|
3417
|
+
"aria-selected": index === activeIndex,
|
|
3418
|
+
type: "button",
|
|
3419
|
+
className: [styles36.option, index === activeIndex ? styles36.optionActive : ""].filter(Boolean).join(" "),
|
|
3420
|
+
onMouseDown: (e) => {
|
|
3421
|
+
e.preventDefault();
|
|
3422
|
+
commitIndex(index);
|
|
3423
|
+
},
|
|
3424
|
+
children: [
|
|
3425
|
+
option.icon && /* @__PURE__ */ jsx88("span", { className: styles36.optionIcon, children: option.icon }),
|
|
3426
|
+
/* @__PURE__ */ jsx88("span", { className: styles36.optionLabel, children: option.label }),
|
|
3427
|
+
option.meta && /* @__PURE__ */ jsx88("span", { className: styles36.optionMeta, children: option.meta })
|
|
3428
|
+
]
|
|
3429
|
+
}
|
|
3430
|
+
) }, option.id)),
|
|
3431
|
+
showCreateRow && createLabel && /* @__PURE__ */ jsxs69("li", { role: "none", children: [
|
|
3432
|
+
options.length > 0 && /* @__PURE__ */ jsx88("div", { className: styles36.divider }),
|
|
3433
|
+
/* @__PURE__ */ jsx88(
|
|
3434
|
+
"button",
|
|
3435
|
+
{
|
|
3436
|
+
id: `${listId}-option-${options.length}`,
|
|
3437
|
+
role: "option",
|
|
3438
|
+
"aria-selected": options.length === activeIndex,
|
|
3439
|
+
type: "button",
|
|
3440
|
+
className: [
|
|
3441
|
+
styles36.option,
|
|
3442
|
+
styles36.optionCreate,
|
|
3443
|
+
options.length === activeIndex ? styles36.optionActive : ""
|
|
3444
|
+
].filter(Boolean).join(" "),
|
|
3445
|
+
onMouseDown: (e) => {
|
|
3446
|
+
e.preventDefault();
|
|
3447
|
+
commitIndex(options.length);
|
|
3448
|
+
},
|
|
3449
|
+
children: createLabel(value)
|
|
3450
|
+
}
|
|
3451
|
+
)
|
|
3452
|
+
] })
|
|
3453
|
+
] }) })
|
|
3454
|
+
}
|
|
3455
|
+
);
|
|
3456
|
+
}
|
|
3457
|
+
|
|
3458
|
+
// src/components/IconPicker/IconPicker.tsx
|
|
3459
|
+
import { useState as useState14 } from "react";
|
|
3460
|
+
import styles37 from "./IconPicker.module.css";
|
|
3461
|
+
import { jsx as jsx89, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
3462
|
+
function IconPicker({
|
|
3463
|
+
value,
|
|
3464
|
+
onChange,
|
|
3465
|
+
options,
|
|
3466
|
+
"aria-label": ariaLabel,
|
|
3467
|
+
triggerLabel,
|
|
3468
|
+
disabled = false,
|
|
3469
|
+
className
|
|
3470
|
+
}) {
|
|
3471
|
+
const [open, setOpen] = useState14(false);
|
|
3472
|
+
const trigger = /* @__PURE__ */ jsxs70(
|
|
3473
|
+
"button",
|
|
3474
|
+
{
|
|
3475
|
+
type: "button",
|
|
3476
|
+
className: [styles37.trigger, className].filter(Boolean).join(" "),
|
|
3477
|
+
onClick: () => setOpen((o) => !o),
|
|
3478
|
+
disabled,
|
|
3479
|
+
"aria-label": ariaLabel,
|
|
3480
|
+
"aria-haspopup": "true",
|
|
3481
|
+
"aria-expanded": open,
|
|
3482
|
+
children: [
|
|
3483
|
+
value ? /* @__PURE__ */ jsx89(Icon, { name: value, size: "md", "aria-hidden": true }) : /* @__PURE__ */ jsx89("span", { className: styles37.placeholder, "aria-hidden": true, children: "?" }),
|
|
3484
|
+
triggerLabel && /* @__PURE__ */ jsx89("span", { className: styles37.triggerLabel, children: triggerLabel })
|
|
3485
|
+
]
|
|
3486
|
+
}
|
|
3487
|
+
);
|
|
3488
|
+
return /* @__PURE__ */ jsx89(
|
|
3489
|
+
Popover,
|
|
3490
|
+
{
|
|
3491
|
+
trigger,
|
|
3492
|
+
open,
|
|
3493
|
+
onClose: () => setOpen(false),
|
|
3494
|
+
width: 240,
|
|
3495
|
+
"aria-label": `${ariaLabel} options`,
|
|
3496
|
+
children: /* @__PURE__ */ jsx89("div", { className: styles37.grid, role: "listbox", "aria-label": ariaLabel, children: options.map((name) => /* @__PURE__ */ jsx89(
|
|
3497
|
+
"button",
|
|
3498
|
+
{
|
|
3499
|
+
type: "button",
|
|
3500
|
+
role: "option",
|
|
3501
|
+
"aria-selected": name === value,
|
|
3502
|
+
className: [styles37.option, name === value ? styles37.optionSelected : ""].filter(Boolean).join(" "),
|
|
3503
|
+
onClick: () => {
|
|
3504
|
+
onChange(name);
|
|
3505
|
+
setOpen(false);
|
|
3506
|
+
},
|
|
3507
|
+
children: /* @__PURE__ */ jsx89(Icon, { name, size: "md", "aria-hidden": true })
|
|
3508
|
+
},
|
|
3509
|
+
name
|
|
3510
|
+
)) })
|
|
2652
3511
|
}
|
|
2653
3512
|
);
|
|
2654
3513
|
}
|
|
3514
|
+
|
|
3515
|
+
// src/components/QuantityStepper/QuantityStepper.tsx
|
|
3516
|
+
import { useId as useId5 } from "react";
|
|
3517
|
+
import styles38 from "./QuantityStepper.module.css";
|
|
3518
|
+
import { jsx as jsx90, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
3519
|
+
function QuantityStepper({
|
|
3520
|
+
value,
|
|
3521
|
+
onChange,
|
|
3522
|
+
min = 0,
|
|
3523
|
+
max,
|
|
3524
|
+
step = 1,
|
|
3525
|
+
unit,
|
|
3526
|
+
"aria-label": ariaLabel,
|
|
3527
|
+
disabled = false,
|
|
3528
|
+
id,
|
|
3529
|
+
className
|
|
3530
|
+
}) {
|
|
3531
|
+
const generatedId = useId5();
|
|
3532
|
+
const inputId = id ?? generatedId;
|
|
3533
|
+
function clamp(next) {
|
|
3534
|
+
let result = next;
|
|
3535
|
+
if (min !== void 0) result = Math.max(min, result);
|
|
3536
|
+
if (max !== void 0) result = Math.min(max, result);
|
|
3537
|
+
return Math.round(result * 1e3) / 1e3;
|
|
3538
|
+
}
|
|
3539
|
+
function handleInputChange(e) {
|
|
3540
|
+
const parsed = Number.parseFloat(e.target.value);
|
|
3541
|
+
if (!Number.isNaN(parsed)) onChange(clamp(parsed));
|
|
3542
|
+
}
|
|
3543
|
+
const decrementDisabled = disabled || min !== void 0 && value <= min;
|
|
3544
|
+
const incrementDisabled = disabled || max !== void 0 && value >= max;
|
|
3545
|
+
return /* @__PURE__ */ jsxs71("div", { className: [styles38.root, className].filter(Boolean).join(" "), children: [
|
|
3546
|
+
/* @__PURE__ */ jsx90(
|
|
3547
|
+
"button",
|
|
3548
|
+
{
|
|
3549
|
+
type: "button",
|
|
3550
|
+
className: styles38.button,
|
|
3551
|
+
onClick: () => onChange(clamp(value - step)),
|
|
3552
|
+
disabled: decrementDisabled,
|
|
3553
|
+
"aria-label": `Decrease ${ariaLabel}`,
|
|
3554
|
+
children: "\u2212"
|
|
3555
|
+
}
|
|
3556
|
+
),
|
|
3557
|
+
/* @__PURE__ */ jsx90(
|
|
3558
|
+
"input",
|
|
3559
|
+
{
|
|
3560
|
+
id: inputId,
|
|
3561
|
+
type: "number",
|
|
3562
|
+
className: styles38.input,
|
|
3563
|
+
value,
|
|
3564
|
+
onChange: handleInputChange,
|
|
3565
|
+
min,
|
|
3566
|
+
max,
|
|
3567
|
+
step,
|
|
3568
|
+
disabled,
|
|
3569
|
+
"aria-label": ariaLabel
|
|
3570
|
+
}
|
|
3571
|
+
),
|
|
3572
|
+
unit && /* @__PURE__ */ jsx90("span", { className: styles38.unit, "aria-hidden": true, children: unit }),
|
|
3573
|
+
/* @__PURE__ */ jsx90(
|
|
3574
|
+
"button",
|
|
3575
|
+
{
|
|
3576
|
+
type: "button",
|
|
3577
|
+
className: styles38.button,
|
|
3578
|
+
onClick: () => onChange(clamp(value + step)),
|
|
3579
|
+
disabled: incrementDisabled,
|
|
3580
|
+
"aria-label": `Increase ${ariaLabel}`,
|
|
3581
|
+
children: "+"
|
|
3582
|
+
}
|
|
3583
|
+
)
|
|
3584
|
+
] });
|
|
3585
|
+
}
|
|
3586
|
+
|
|
3587
|
+
// src/components/CheckableListRow/CheckableListRow.tsx
|
|
3588
|
+
import styles39 from "./CheckableListRow.module.css";
|
|
3589
|
+
import { jsx as jsx91, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
3590
|
+
function CheckableListRow({
|
|
3591
|
+
checked,
|
|
3592
|
+
onCheckedChange,
|
|
3593
|
+
label,
|
|
3594
|
+
icon,
|
|
3595
|
+
trailing,
|
|
3596
|
+
disabled = false,
|
|
3597
|
+
className
|
|
3598
|
+
}) {
|
|
3599
|
+
function toggle() {
|
|
3600
|
+
if (!disabled) onCheckedChange(!checked);
|
|
3601
|
+
}
|
|
3602
|
+
function handleKeyDown(e) {
|
|
3603
|
+
if (e.key === " " || e.key === "Enter") {
|
|
3604
|
+
e.preventDefault();
|
|
3605
|
+
toggle();
|
|
3606
|
+
}
|
|
3607
|
+
}
|
|
3608
|
+
return /* @__PURE__ */ jsxs72("div", { className: [styles39.row, className].filter(Boolean).join(" "), children: [
|
|
3609
|
+
/* @__PURE__ */ jsxs72(
|
|
3610
|
+
"div",
|
|
3611
|
+
{
|
|
3612
|
+
role: "checkbox",
|
|
3613
|
+
"aria-checked": checked,
|
|
3614
|
+
"aria-label": label,
|
|
3615
|
+
"aria-disabled": disabled || void 0,
|
|
3616
|
+
tabIndex: disabled ? -1 : 0,
|
|
3617
|
+
className: styles39.tapTarget,
|
|
3618
|
+
onClick: toggle,
|
|
3619
|
+
onKeyDown: handleKeyDown,
|
|
3620
|
+
children: [
|
|
3621
|
+
/* @__PURE__ */ jsx91("span", { className: [styles39.box, checked ? styles39.checked : ""].filter(Boolean).join(" "), children: checked && /* @__PURE__ */ jsx91("svg", { className: styles39.tick, viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx91(
|
|
3622
|
+
"path",
|
|
3623
|
+
{
|
|
3624
|
+
d: "M1 4l3 3 5-6",
|
|
3625
|
+
stroke: "currentColor",
|
|
3626
|
+
strokeWidth: "1.5",
|
|
3627
|
+
strokeLinecap: "round",
|
|
3628
|
+
strokeLinejoin: "round"
|
|
3629
|
+
}
|
|
3630
|
+
) }) }),
|
|
3631
|
+
icon && /* @__PURE__ */ jsx91("span", { className: styles39.icon, children: icon }),
|
|
3632
|
+
/* @__PURE__ */ jsx91("span", { className: [styles39.label, checked ? styles39.struck : ""].filter(Boolean).join(" "), children: label })
|
|
3633
|
+
]
|
|
3634
|
+
}
|
|
3635
|
+
),
|
|
3636
|
+
trailing && /* @__PURE__ */ jsx91("span", { className: styles39.trailing, children: trailing })
|
|
3637
|
+
] });
|
|
3638
|
+
}
|
|
2655
3639
|
export {
|
|
2656
3640
|
Avatar,
|
|
2657
3641
|
Badge,
|
|
2658
3642
|
Button,
|
|
2659
3643
|
Calendar,
|
|
2660
3644
|
Card,
|
|
3645
|
+
CheckableListRow,
|
|
2661
3646
|
Checkbox,
|
|
2662
3647
|
CodeTextarea,
|
|
2663
3648
|
ConfirmDialog,
|
|
@@ -2666,8 +3651,10 @@ export {
|
|
|
2666
3651
|
DragHandleRow,
|
|
2667
3652
|
Drawer,
|
|
2668
3653
|
EmptyState,
|
|
3654
|
+
FileDropzone,
|
|
2669
3655
|
FormField,
|
|
2670
3656
|
Icon,
|
|
3657
|
+
IconPicker,
|
|
2671
3658
|
Input,
|
|
2672
3659
|
MOBILE_BREAKPOINT_PX,
|
|
2673
3660
|
Menu,
|
|
@@ -2675,12 +3662,14 @@ export {
|
|
|
2675
3662
|
OverlayHeader,
|
|
2676
3663
|
PageHeader,
|
|
2677
3664
|
Popover,
|
|
3665
|
+
QuantityStepper,
|
|
2678
3666
|
SegmentedControl,
|
|
2679
3667
|
Select,
|
|
2680
3668
|
Sheet,
|
|
2681
3669
|
Spinner,
|
|
2682
3670
|
SplitPane,
|
|
2683
3671
|
StatusBadge,
|
|
3672
|
+
SuggestionInput,
|
|
2684
3673
|
SystemBanner,
|
|
2685
3674
|
Tabs,
|
|
2686
3675
|
TagInput,
|
|
@@ -2688,6 +3677,7 @@ export {
|
|
|
2688
3677
|
ToastProvider,
|
|
2689
3678
|
Toggle,
|
|
2690
3679
|
Tooltip,
|
|
3680
|
+
useCommitOnEnterOrBlur,
|
|
2691
3681
|
useDoubleTapHandler,
|
|
2692
3682
|
useIsMobile,
|
|
2693
3683
|
useLongPress,
|