@deriv-com/trading-game-design-system 0.2.17 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +34 -36
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +34 -36
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/styles.css +3 -0
package/dist/index.js
CHANGED
|
@@ -188,15 +188,15 @@ var buttonVariants = cva2(
|
|
|
188
188
|
tertiary: "bg-transparent text-primary hover:underline underline-offset-4"
|
|
189
189
|
},
|
|
190
190
|
size: {
|
|
191
|
-
lg: "h-12 gap-3 rounded-
|
|
191
|
+
lg: "h-12 gap-3 rounded-xs px-6 py-[14px] text-sm [&_svg:not([class*='size-'])]:size-4",
|
|
192
192
|
md: "h-10 gap-2 rounded-xs px-4 py-3 text-sm [&_svg:not([class*='size-'])]:size-4",
|
|
193
193
|
sm: "h-8 gap-1 rounded-xs px-3 py-2 text-xs [&_svg:not([class*='size-'])]:size-[14px]",
|
|
194
194
|
xs: "h-6 gap-1 rounded-xs px-2 py-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
|
|
195
|
-
icon: "size-12 rounded-
|
|
196
|
-
"icon-lg": "size-12 rounded-
|
|
197
|
-
"icon-md": "size-10 rounded-
|
|
198
|
-
"icon-sm": "size-7 rounded-
|
|
199
|
-
"icon-xs": "size-6 rounded-
|
|
195
|
+
icon: "size-12 rounded-xs [&_svg:not([class*='size-'])]:size-4",
|
|
196
|
+
"icon-lg": "size-12 rounded-xs [&_svg:not([class*='size-'])]:size-4",
|
|
197
|
+
"icon-md": "size-10 rounded-xs [&_svg:not([class*='size-'])]:size-4",
|
|
198
|
+
"icon-sm": "size-7 rounded-xs [&_svg:not([class*='size-'])]:size-4",
|
|
199
|
+
"icon-xs": "size-6 rounded-xs [&_svg:not([class*='size-'])]:size-3"
|
|
200
200
|
}
|
|
201
201
|
},
|
|
202
202
|
defaultVariants: {
|
|
@@ -780,11 +780,11 @@ function Calendar(_a) {
|
|
|
780
780
|
defaultClassNames.day
|
|
781
781
|
),
|
|
782
782
|
range_start: cn(
|
|
783
|
-
"rounded-l-md bg-
|
|
783
|
+
"rounded-l-md bg-primary/10",
|
|
784
784
|
defaultClassNames.range_start
|
|
785
785
|
),
|
|
786
786
|
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
787
|
-
range_end: cn("rounded-r-md bg-
|
|
787
|
+
range_end: cn("rounded-r-md bg-primary/10", defaultClassNames.range_end),
|
|
788
788
|
today: cn(
|
|
789
789
|
"rounded-md border border-primary/40 text-primary data-[selected=true]:rounded-none",
|
|
790
790
|
defaultClassNames.today
|
|
@@ -863,7 +863,7 @@ function CalendarDayButton(_a) {
|
|
|
863
863
|
"data-range-end": modifiers.range_end,
|
|
864
864
|
"data-range-middle": modifiers.range_middle,
|
|
865
865
|
className: cn(
|
|
866
|
-
"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-body font-normal bg-transparent border-transparent shadow-none text-foreground hover
|
|
866
|
+
"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-body font-normal bg-transparent border-transparent shadow-none text-foreground hover:!bg-hover hover:text-foreground hover:no-underline hover:shadow-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:hover:!bg-primary data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-primary/10 data-[range-middle=true]:text-primary data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:hover:!bg-primary data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:shadow-[0_0_12px_rgba(0,255,255,0.4)] data-[selected-single=true]:hover:!bg-primary [&>span]:text-xs [&>span]:opacity-70",
|
|
867
867
|
defaultClassNames.day,
|
|
868
868
|
className
|
|
869
869
|
)
|
|
@@ -1803,7 +1803,7 @@ function ComboboxItem(_a) {
|
|
|
1803
1803
|
__spreadProps(__spreadValues({
|
|
1804
1804
|
"data-slot": "combobox-item",
|
|
1805
1805
|
className: cn(
|
|
1806
|
-
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-
|
|
1806
|
+
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
1807
1807
|
className
|
|
1808
1808
|
)
|
|
1809
1809
|
}, props), {
|
|
@@ -2239,7 +2239,7 @@ function CommandItem(_a) {
|
|
|
2239
2239
|
__spreadValues({
|
|
2240
2240
|
"data-slot": "command-item",
|
|
2241
2241
|
className: cn(
|
|
2242
|
-
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-
|
|
2242
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-hover data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
2243
2243
|
className
|
|
2244
2244
|
)
|
|
2245
2245
|
}, props)
|
|
@@ -2676,7 +2676,7 @@ function DropdownMenuItem(_a) {
|
|
|
2676
2676
|
"data-inset": inset,
|
|
2677
2677
|
"data-variant": variant,
|
|
2678
2678
|
className: cn(
|
|
2679
|
-
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-
|
|
2679
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
2680
2680
|
className
|
|
2681
2681
|
)
|
|
2682
2682
|
}, props)
|
|
@@ -2697,7 +2697,7 @@ function DropdownMenuCheckboxItem(_a) {
|
|
|
2697
2697
|
__spreadProps(__spreadValues({
|
|
2698
2698
|
"data-slot": "dropdown-menu-checkbox-item",
|
|
2699
2699
|
className: cn(
|
|
2700
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-
|
|
2700
|
+
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
2701
2701
|
className
|
|
2702
2702
|
),
|
|
2703
2703
|
checked
|
|
@@ -2731,7 +2731,7 @@ function DropdownMenuRadioItem(_a) {
|
|
|
2731
2731
|
__spreadProps(__spreadValues({
|
|
2732
2732
|
"data-slot": "dropdown-menu-radio-item",
|
|
2733
2733
|
className: cn(
|
|
2734
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-
|
|
2734
|
+
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
2735
2735
|
className
|
|
2736
2736
|
)
|
|
2737
2737
|
}, props), {
|
|
@@ -2813,7 +2813,7 @@ function DropdownMenuSubTrigger(_a) {
|
|
|
2813
2813
|
"data-slot": "dropdown-menu-sub-trigger",
|
|
2814
2814
|
"data-inset": inset,
|
|
2815
2815
|
className: cn(
|
|
2816
|
-
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-
|
|
2816
|
+
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-hover focus:text-foreground data-[inset]:pl-8 data-[state=open]:bg-primary/10 data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
2817
2817
|
className
|
|
2818
2818
|
)
|
|
2819
2819
|
}, props), {
|
|
@@ -3626,7 +3626,7 @@ function Kbd(_a) {
|
|
|
3626
3626
|
className: cn(
|
|
3627
3627
|
"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
|
|
3628
3628
|
"[&_svg:not([class*='size-'])]:size-3",
|
|
3629
|
-
"[[data-slot=tooltip-content]_&]:bg-
|
|
3629
|
+
"[[data-slot=tooltip-content]_&]:bg-border [[data-slot=tooltip-content]_&]:text-foreground",
|
|
3630
3630
|
className
|
|
3631
3631
|
)
|
|
3632
3632
|
}, props)
|
|
@@ -3691,7 +3691,7 @@ function MenubarTrigger(_a) {
|
|
|
3691
3691
|
__spreadValues({
|
|
3692
3692
|
"data-slot": "menubar-trigger",
|
|
3693
3693
|
className: cn(
|
|
3694
|
-
"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-
|
|
3694
|
+
"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground data-[state=open]:bg-primary/10 data-[state=open]:text-primary",
|
|
3695
3695
|
className
|
|
3696
3696
|
)
|
|
3697
3697
|
}, props)
|
|
@@ -3740,7 +3740,7 @@ function MenubarItem(_a) {
|
|
|
3740
3740
|
"data-inset": inset,
|
|
3741
3741
|
"data-variant": variant,
|
|
3742
3742
|
className: cn(
|
|
3743
|
-
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-
|
|
3743
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
3744
3744
|
className
|
|
3745
3745
|
)
|
|
3746
3746
|
}, props)
|
|
@@ -3761,7 +3761,7 @@ function MenubarCheckboxItem(_a) {
|
|
|
3761
3761
|
__spreadProps(__spreadValues({
|
|
3762
3762
|
"data-slot": "menubar-checkbox-item",
|
|
3763
3763
|
className: cn(
|
|
3764
|
-
"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-
|
|
3764
|
+
"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
3765
3765
|
className
|
|
3766
3766
|
),
|
|
3767
3767
|
checked
|
|
@@ -3786,7 +3786,7 @@ function MenubarRadioItem(_a) {
|
|
|
3786
3786
|
__spreadProps(__spreadValues({
|
|
3787
3787
|
"data-slot": "menubar-radio-item",
|
|
3788
3788
|
className: cn(
|
|
3789
|
-
"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-
|
|
3789
|
+
"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
3790
3790
|
className
|
|
3791
3791
|
)
|
|
3792
3792
|
}, props), {
|
|
@@ -3868,7 +3868,7 @@ function MenubarSubTrigger(_a) {
|
|
|
3868
3868
|
"data-slot": "menubar-sub-trigger",
|
|
3869
3869
|
"data-inset": inset,
|
|
3870
3870
|
className: cn(
|
|
3871
|
-
"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-
|
|
3871
|
+
"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground data-[inset]:pl-8 data-[state=open]:bg-primary/10 data-[state=open]:text-foreground",
|
|
3872
3872
|
className
|
|
3873
3873
|
)
|
|
3874
3874
|
}, props), {
|
|
@@ -4022,7 +4022,7 @@ function NavigationMenuItem(_a) {
|
|
|
4022
4022
|
);
|
|
4023
4023
|
}
|
|
4024
4024
|
var navigationMenuTriggerStyle = cva8(
|
|
4025
|
-
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-
|
|
4025
|
+
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-primary/10 data-[state=open]:text-foreground data-[state=open]:hover:bg-hover data-[state=open]:focus:bg-hover"
|
|
4026
4026
|
);
|
|
4027
4027
|
function NavigationMenuTrigger(_a) {
|
|
4028
4028
|
var _b = _a, {
|
|
@@ -4106,7 +4106,7 @@ function NavigationMenuLink(_a) {
|
|
|
4106
4106
|
__spreadValues({
|
|
4107
4107
|
"data-slot": "navigation-menu-link",
|
|
4108
4108
|
className: cn(
|
|
4109
|
-
"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-
|
|
4109
|
+
"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-hover hover:text-foreground focus:bg-hover focus:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:hover:bg-hover data-[active=true]:focus:bg-hover [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
4110
4110
|
className
|
|
4111
4111
|
)
|
|
4112
4112
|
}, props)
|
|
@@ -4186,10 +4186,8 @@ function PaginationLink(_a) {
|
|
|
4186
4186
|
"data-slot": "pagination-link",
|
|
4187
4187
|
"data-active": isActive,
|
|
4188
4188
|
className: cn(
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
size
|
|
4192
|
-
}),
|
|
4189
|
+
"inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase tracking-[1.5px] whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
|
|
4190
|
+
isActive ? "bg-primary/10 border-primary/40 text-primary" : "bg-transparent border-transparent text-foreground hover:bg-hover",
|
|
4193
4191
|
className
|
|
4194
4192
|
)
|
|
4195
4193
|
}, props)
|
|
@@ -4603,7 +4601,7 @@ function SelectItem(_a) {
|
|
|
4603
4601
|
__spreadProps(__spreadValues({
|
|
4604
4602
|
"data-slot": "select-item",
|
|
4605
4603
|
className: cn(
|
|
4606
|
-
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-
|
|
4604
|
+
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
4607
4605
|
className
|
|
4608
4606
|
)
|
|
4609
4607
|
}, props), {
|
|
@@ -4875,13 +4873,13 @@ function TooltipContent(_a) {
|
|
|
4875
4873
|
"data-slot": "tooltip-content",
|
|
4876
4874
|
sideOffset,
|
|
4877
4875
|
className: cn(
|
|
4878
|
-
"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-
|
|
4876
|
+
"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-popover border border-border px-3 py-1.5 text-xs text-balance text-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
4879
4877
|
className
|
|
4880
4878
|
)
|
|
4881
4879
|
}, props), {
|
|
4882
4880
|
children: [
|
|
4883
4881
|
children,
|
|
4884
|
-
/* @__PURE__ */ jsx46(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-
|
|
4882
|
+
/* @__PURE__ */ jsx46(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-popover fill-popover" })
|
|
4885
4883
|
]
|
|
4886
4884
|
})
|
|
4887
4885
|
) });
|
|
@@ -5853,10 +5851,10 @@ function TabsTrigger(_a) {
|
|
|
5853
5851
|
__spreadValues({
|
|
5854
5852
|
"data-slot": "tabs-trigger",
|
|
5855
5853
|
className: cn(
|
|
5856
|
-
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-
|
|
5857
|
-
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent
|
|
5858
|
-
"data-[state=active]:bg-
|
|
5859
|
-
"after:absolute after:bg-
|
|
5854
|
+
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
5855
|
+
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
|
|
5856
|
+
"data-[state=active]:bg-primary/10 data-[state=active]:border-primary/40 data-[state=active]:text-primary",
|
|
5857
|
+
"after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
|
|
5860
5858
|
className
|
|
5861
5859
|
)
|
|
5862
5860
|
}, props)
|
|
@@ -5882,12 +5880,12 @@ import { cva as cva11 } from "class-variance-authority";
|
|
|
5882
5880
|
import { Toggle as TogglePrimitive } from "radix-ui";
|
|
5883
5881
|
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
5884
5882
|
var toggleVariants = cva11(
|
|
5885
|
-
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-
|
|
5883
|
+
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-primary/10 data-[state=on]:border-primary/40 data-[state=on]:text-primary dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
5886
5884
|
{
|
|
5887
5885
|
variants: {
|
|
5888
5886
|
variant: {
|
|
5889
5887
|
default: "bg-transparent",
|
|
5890
|
-
outline: "border border-input bg-transparent shadow-xs hover:bg-
|
|
5888
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-hover hover:text-foreground"
|
|
5891
5889
|
},
|
|
5892
5890
|
size: {
|
|
5893
5891
|
default: "h-9 min-w-9 px-2",
|