@atom-learning/components 5.4.2 → 5.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/segmented-control/SegmentedControl.d.ts +369 -1
- package/dist/components/segmented-control/SegmentedControlItemList.d.ts +2 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js +1 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
- package/CHANGELOG.md +0 -207
|
@@ -2582,5 +2582,373 @@ export declare const SegmentedControl: {
|
|
|
2582
2582
|
};
|
|
2583
2583
|
}>>;
|
|
2584
2584
|
Badge: ({ css, ...props }: Omit<import("react").ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
|
|
2585
|
-
ItemList: import("react").
|
|
2585
|
+
ItemList: (props: import("react").ComponentProps<{
|
|
2586
|
+
({ children, colorScheme, ...rest }: import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
|
|
2587
|
+
sm: string;
|
|
2588
|
+
md: string;
|
|
2589
|
+
lg: string;
|
|
2590
|
+
xl: string;
|
|
2591
|
+
reducedMotion: string;
|
|
2592
|
+
allowMotion: string;
|
|
2593
|
+
hover: string;
|
|
2594
|
+
}, import("@atom-learning/stitches-react/types/css-util").CSS<{
|
|
2595
|
+
sm: string;
|
|
2596
|
+
md: string;
|
|
2597
|
+
lg: string;
|
|
2598
|
+
xl: string;
|
|
2599
|
+
reducedMotion: string;
|
|
2600
|
+
allowMotion: string;
|
|
2601
|
+
hover: string;
|
|
2602
|
+
}, {
|
|
2603
|
+
colors: {
|
|
2604
|
+
textBold: string;
|
|
2605
|
+
textRegular: string;
|
|
2606
|
+
textSubtle: string;
|
|
2607
|
+
textMinimal: string;
|
|
2608
|
+
background: string;
|
|
2609
|
+
backgroundAccent: string;
|
|
2610
|
+
grey100: string;
|
|
2611
|
+
grey200: string;
|
|
2612
|
+
grey300: string;
|
|
2613
|
+
grey400: string;
|
|
2614
|
+
grey500: string;
|
|
2615
|
+
grey600: string;
|
|
2616
|
+
grey700: string;
|
|
2617
|
+
grey800: string;
|
|
2618
|
+
grey900: string;
|
|
2619
|
+
grey1000: string;
|
|
2620
|
+
grey1100: string;
|
|
2621
|
+
grey1200: string;
|
|
2622
|
+
blue100: string;
|
|
2623
|
+
blue200: string;
|
|
2624
|
+
blue300: string;
|
|
2625
|
+
blue400: string;
|
|
2626
|
+
blue500: string;
|
|
2627
|
+
blue600: string;
|
|
2628
|
+
blue700: string;
|
|
2629
|
+
blue800: string;
|
|
2630
|
+
blue900: string;
|
|
2631
|
+
blue1000: string;
|
|
2632
|
+
blue1100: string;
|
|
2633
|
+
blue1200: string;
|
|
2634
|
+
pink100: string;
|
|
2635
|
+
pink200: string;
|
|
2636
|
+
pink300: string;
|
|
2637
|
+
pink400: string;
|
|
2638
|
+
pink500: string;
|
|
2639
|
+
pink600: string;
|
|
2640
|
+
pink700: string;
|
|
2641
|
+
pink800: string;
|
|
2642
|
+
pink900: string;
|
|
2643
|
+
pink1000: string;
|
|
2644
|
+
pink1100: string;
|
|
2645
|
+
pink1200: string;
|
|
2646
|
+
purple100: string;
|
|
2647
|
+
purple200: string;
|
|
2648
|
+
purple300: string;
|
|
2649
|
+
purple400: string;
|
|
2650
|
+
purple500: string;
|
|
2651
|
+
purple600: string;
|
|
2652
|
+
purple700: string;
|
|
2653
|
+
purple800: string;
|
|
2654
|
+
purple900: string;
|
|
2655
|
+
purple1000: string;
|
|
2656
|
+
purple1100: string;
|
|
2657
|
+
purple1200: string;
|
|
2658
|
+
cyan100: string;
|
|
2659
|
+
cyan200: string;
|
|
2660
|
+
cyan300: string;
|
|
2661
|
+
cyan400: string;
|
|
2662
|
+
cyan500: string;
|
|
2663
|
+
cyan600: string;
|
|
2664
|
+
cyan700: string;
|
|
2665
|
+
cyan800: string;
|
|
2666
|
+
cyan900: string;
|
|
2667
|
+
cyan1000: string;
|
|
2668
|
+
cyan1100: string;
|
|
2669
|
+
cyan1200: string;
|
|
2670
|
+
green100: string;
|
|
2671
|
+
green200: string;
|
|
2672
|
+
green300: string;
|
|
2673
|
+
green400: string;
|
|
2674
|
+
green500: string;
|
|
2675
|
+
green600: string;
|
|
2676
|
+
green700: string;
|
|
2677
|
+
green800: string;
|
|
2678
|
+
green900: string;
|
|
2679
|
+
green1000: string;
|
|
2680
|
+
green1100: string;
|
|
2681
|
+
green1200: string;
|
|
2682
|
+
magenta100: string;
|
|
2683
|
+
magenta200: string;
|
|
2684
|
+
magenta300: string;
|
|
2685
|
+
magenta400: string;
|
|
2686
|
+
magenta500: string;
|
|
2687
|
+
magenta600: string;
|
|
2688
|
+
magenta700: string;
|
|
2689
|
+
magenta800: string;
|
|
2690
|
+
magenta900: string;
|
|
2691
|
+
magenta1000: string;
|
|
2692
|
+
magenta1100: string;
|
|
2693
|
+
magenta1200: string;
|
|
2694
|
+
red100: string;
|
|
2695
|
+
red200: string;
|
|
2696
|
+
red300: string;
|
|
2697
|
+
red400: string;
|
|
2698
|
+
red500: string;
|
|
2699
|
+
red600: string;
|
|
2700
|
+
red700: string;
|
|
2701
|
+
red800: string;
|
|
2702
|
+
red900: string;
|
|
2703
|
+
red1000: string;
|
|
2704
|
+
red1100: string;
|
|
2705
|
+
red1200: string;
|
|
2706
|
+
teal100: string;
|
|
2707
|
+
teal200: string;
|
|
2708
|
+
teal300: string;
|
|
2709
|
+
teal400: string;
|
|
2710
|
+
teal500: string;
|
|
2711
|
+
teal600: string;
|
|
2712
|
+
teal700: string;
|
|
2713
|
+
teal800: string;
|
|
2714
|
+
teal900: string;
|
|
2715
|
+
teal1000: string;
|
|
2716
|
+
teal1100: string;
|
|
2717
|
+
teal1200: string;
|
|
2718
|
+
orange100: string;
|
|
2719
|
+
orange200: string;
|
|
2720
|
+
orange300: string;
|
|
2721
|
+
orange400: string;
|
|
2722
|
+
orange500: string;
|
|
2723
|
+
orange600: string;
|
|
2724
|
+
orange700: string;
|
|
2725
|
+
orange800: string;
|
|
2726
|
+
orange900: string;
|
|
2727
|
+
orange1000: string;
|
|
2728
|
+
orange1100: string;
|
|
2729
|
+
orange1200: string;
|
|
2730
|
+
yellow100: string;
|
|
2731
|
+
yellow200: string;
|
|
2732
|
+
yellow300: string;
|
|
2733
|
+
yellow400: string;
|
|
2734
|
+
yellow500: string;
|
|
2735
|
+
yellow600: string;
|
|
2736
|
+
yellow700: string;
|
|
2737
|
+
yellow800: string;
|
|
2738
|
+
yellow900: string;
|
|
2739
|
+
yellow1000: string;
|
|
2740
|
+
yellow1100: string;
|
|
2741
|
+
yellow1200: string;
|
|
2742
|
+
lime100: string;
|
|
2743
|
+
lime200: string;
|
|
2744
|
+
lime300: string;
|
|
2745
|
+
lime400: string;
|
|
2746
|
+
lime500: string;
|
|
2747
|
+
lime600: string;
|
|
2748
|
+
lime700: string;
|
|
2749
|
+
lime800: string;
|
|
2750
|
+
lime900: string;
|
|
2751
|
+
lime1000: string;
|
|
2752
|
+
lime1100: string;
|
|
2753
|
+
lime1200: string;
|
|
2754
|
+
lapis100: string;
|
|
2755
|
+
lapis200: string;
|
|
2756
|
+
lapis300: string;
|
|
2757
|
+
lapis400: string;
|
|
2758
|
+
lapis500: string;
|
|
2759
|
+
lapis600: string;
|
|
2760
|
+
lapis700: string;
|
|
2761
|
+
lapis800: string;
|
|
2762
|
+
lapis900: string;
|
|
2763
|
+
lapis1000: string;
|
|
2764
|
+
lapis1100: string;
|
|
2765
|
+
lapis1200: string;
|
|
2766
|
+
maroon100: string;
|
|
2767
|
+
maroon200: string;
|
|
2768
|
+
maroon300: string;
|
|
2769
|
+
maroon400: string;
|
|
2770
|
+
maroon500: string;
|
|
2771
|
+
maroon600: string;
|
|
2772
|
+
maroon700: string;
|
|
2773
|
+
maroon800: string;
|
|
2774
|
+
maroon900: string;
|
|
2775
|
+
maroon1000: string;
|
|
2776
|
+
maroon1100: string;
|
|
2777
|
+
maroon1200: string;
|
|
2778
|
+
marsh100: string;
|
|
2779
|
+
marsh200: string;
|
|
2780
|
+
marsh300: string;
|
|
2781
|
+
marsh400: string;
|
|
2782
|
+
marsh500: string;
|
|
2783
|
+
marsh600: string;
|
|
2784
|
+
marsh700: string;
|
|
2785
|
+
marsh800: string;
|
|
2786
|
+
marsh900: string;
|
|
2787
|
+
marsh1000: string;
|
|
2788
|
+
marsh1100: string;
|
|
2789
|
+
marsh1200: string;
|
|
2790
|
+
alpha100: string;
|
|
2791
|
+
alpha150: string;
|
|
2792
|
+
alpha200: string;
|
|
2793
|
+
alpha250: string;
|
|
2794
|
+
alpha600: string;
|
|
2795
|
+
infoLight: string;
|
|
2796
|
+
info: string;
|
|
2797
|
+
infoMid: string;
|
|
2798
|
+
infoDark: string;
|
|
2799
|
+
successLight: string;
|
|
2800
|
+
success: string;
|
|
2801
|
+
successMid: string;
|
|
2802
|
+
successDark: string;
|
|
2803
|
+
dangerLight: string;
|
|
2804
|
+
danger: string;
|
|
2805
|
+
dangerMid: string;
|
|
2806
|
+
dangerDark: string;
|
|
2807
|
+
warningLight: string;
|
|
2808
|
+
warning: string;
|
|
2809
|
+
warningMid: string;
|
|
2810
|
+
warningDark: string;
|
|
2811
|
+
warningText: string;
|
|
2812
|
+
subjectEnglish: string;
|
|
2813
|
+
subjectMaths: string;
|
|
2814
|
+
subjectScience: string;
|
|
2815
|
+
subjectVerbalReasoning: string;
|
|
2816
|
+
subjectNonVerbalReasoning: string;
|
|
2817
|
+
subjectCreativeWriting: string;
|
|
2818
|
+
subjectExamSkills: string;
|
|
2819
|
+
glBlueLight: string;
|
|
2820
|
+
glBluePrimary: string;
|
|
2821
|
+
glBlueDark: string;
|
|
2822
|
+
primary100: string;
|
|
2823
|
+
primary200: string;
|
|
2824
|
+
primary300: string;
|
|
2825
|
+
primary400: string;
|
|
2826
|
+
primary500: string;
|
|
2827
|
+
primary600: string;
|
|
2828
|
+
primary700: string;
|
|
2829
|
+
primary800: string;
|
|
2830
|
+
primary900: string;
|
|
2831
|
+
primary1000: string;
|
|
2832
|
+
primary1100: string;
|
|
2833
|
+
primary1200: string;
|
|
2834
|
+
};
|
|
2835
|
+
space: {
|
|
2836
|
+
"0": string;
|
|
2837
|
+
"1": string;
|
|
2838
|
+
"2": string;
|
|
2839
|
+
"3": string;
|
|
2840
|
+
"4": string;
|
|
2841
|
+
"5": string;
|
|
2842
|
+
"6": string;
|
|
2843
|
+
"7": string;
|
|
2844
|
+
"8": string;
|
|
2845
|
+
"9": string;
|
|
2846
|
+
"24": string;
|
|
2847
|
+
};
|
|
2848
|
+
fontSizes: {
|
|
2849
|
+
xs: string;
|
|
2850
|
+
sm: string;
|
|
2851
|
+
md: string;
|
|
2852
|
+
lg: string;
|
|
2853
|
+
xl: string;
|
|
2854
|
+
"2xl": string;
|
|
2855
|
+
"3xl": string;
|
|
2856
|
+
"4xl": string;
|
|
2857
|
+
};
|
|
2858
|
+
fonts: {
|
|
2859
|
+
sans: string;
|
|
2860
|
+
mono: string;
|
|
2861
|
+
display: string;
|
|
2862
|
+
body: string;
|
|
2863
|
+
};
|
|
2864
|
+
sizes: {
|
|
2865
|
+
"0": string;
|
|
2866
|
+
"1": string;
|
|
2867
|
+
"2": string;
|
|
2868
|
+
"3": string;
|
|
2869
|
+
"4": string;
|
|
2870
|
+
"5": string;
|
|
2871
|
+
"6": string;
|
|
2872
|
+
"7": string;
|
|
2873
|
+
"8": string;
|
|
2874
|
+
};
|
|
2875
|
+
radii: {
|
|
2876
|
+
"0": string;
|
|
2877
|
+
"1": string;
|
|
2878
|
+
"2": string;
|
|
2879
|
+
"3": string;
|
|
2880
|
+
round: string;
|
|
2881
|
+
};
|
|
2882
|
+
shadows: {
|
|
2883
|
+
"0": string;
|
|
2884
|
+
"1": string;
|
|
2885
|
+
"2": string;
|
|
2886
|
+
"3": string;
|
|
2887
|
+
};
|
|
2888
|
+
ratios: {
|
|
2889
|
+
"16-9": string;
|
|
2890
|
+
"3-2": string;
|
|
2891
|
+
"4-3": string;
|
|
2892
|
+
"1-1": string;
|
|
2893
|
+
"3-4": string;
|
|
2894
|
+
};
|
|
2895
|
+
}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
|
|
2896
|
+
bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
|
|
2897
|
+
background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
|
|
2898
|
+
};
|
|
2899
|
+
size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
|
|
2900
|
+
height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
|
|
2901
|
+
width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
|
|
2902
|
+
};
|
|
2903
|
+
p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2904
|
+
padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2905
|
+
};
|
|
2906
|
+
pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2907
|
+
paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2908
|
+
};
|
|
2909
|
+
pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2910
|
+
paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2911
|
+
};
|
|
2912
|
+
pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2913
|
+
paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2914
|
+
};
|
|
2915
|
+
pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2916
|
+
paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2917
|
+
};
|
|
2918
|
+
px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2919
|
+
paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2920
|
+
paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2921
|
+
};
|
|
2922
|
+
py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2923
|
+
paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2924
|
+
paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2925
|
+
};
|
|
2926
|
+
m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2927
|
+
margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2928
|
+
};
|
|
2929
|
+
mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2930
|
+
marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2931
|
+
};
|
|
2932
|
+
mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2933
|
+
marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2934
|
+
};
|
|
2935
|
+
mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2936
|
+
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2937
|
+
};
|
|
2938
|
+
ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2939
|
+
marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2940
|
+
};
|
|
2941
|
+
mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2942
|
+
marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2943
|
+
marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2944
|
+
};
|
|
2945
|
+
my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
|
|
2946
|
+
marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2947
|
+
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
2948
|
+
};
|
|
2949
|
+
}>>> & {
|
|
2950
|
+
colorScheme?: import("../..").TcolorScheme;
|
|
2951
|
+
}): import("react").JSX.Element;
|
|
2952
|
+
displayName: string;
|
|
2953
|
+
}>) => JSX.Element;
|
|
2586
2954
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
|
|
2
2
|
//# sourceMappingURL=SegmentedControlItemList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all 0.3s ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList
|
|
1
|
+
{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all 0.3s ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator\n css={{\n ...indicatorStyles\n }}\n interacted={hasInteracted}\n />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
|