@suphark/ui 0.18.0 → 0.20.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/CHANGELOG.md +47 -0
- package/package.json +14 -13
- package/scripts/audit.mjs +0 -0
- package/src/components/app-shell/app-shell.tsx +15 -9
- package/src/components/app-shell/index.ts +1 -0
- package/src/components/app-shell/mobile-tab-bar.tsx +104 -0
- package/src/components/shared/action-menu.tsx +155 -0
- package/src/components/shared/confirm-dialog.tsx +41 -2
- package/src/components/shared/count-badge.tsx +41 -0
- package/src/components/shared/filter-bar.tsx +108 -0
- package/src/components/shared/form/slider-field.tsx +79 -0
- package/src/components/shared/form-dialog.tsx +43 -4
- package/src/components/shared/month-stepper.tsx +124 -0
- package/src/components/shared/save-status.tsx +99 -0
- package/src/components/shared/segmented-control.tsx +73 -0
- package/src/components/shared/settings-layout.tsx +170 -0
- package/src/components/shared/settings-row.tsx +118 -0
- package/src/components/shared/setup-checklist.tsx +104 -0
- package/src/components/shared/simple-dialog.tsx +172 -0
- package/src/components/shared/simple-pagination.tsx +109 -0
- package/src/components/shared/simple-table.tsx +93 -0
- package/src/components/shared/simple-tabs.tsx +118 -0
- package/src/components/shared/simple-tooltip.tsx +87 -0
- package/src/components/shared/skip-link.tsx +30 -0
- package/src/components/shared/stat.tsx +110 -6
- package/src/components/shared/ui-text.tsx +35 -0
- package/src/components/shared/user-identity.tsx +61 -0
- package/src/components/ui/accordion.tsx +2 -2
- package/src/components/ui/alert-dialog.tsx +4 -4
- package/src/components/ui/alert.tsx +2 -2
- package/src/components/ui/attachment.tsx +9 -9
- package/src/components/ui/avatar.tsx +4 -4
- package/src/components/ui/badge.tsx +1 -1
- package/src/components/ui/breadcrumb.tsx +1 -1
- package/src/components/ui/bubble.tsx +123 -0
- package/src/components/ui/button-group.tsx +2 -2
- package/src/components/ui/button.tsx +6 -6
- package/src/components/ui/calendar.tsx +9 -9
- package/src/components/ui/card.tsx +3 -3
- package/src/components/ui/chart.tsx +2 -2
- package/src/components/ui/checkbox.tsx +1 -1
- package/src/components/ui/combobox.tsx +6 -6
- package/src/components/ui/command.tsx +4 -4
- package/src/components/ui/context-menu.tsx +7 -7
- package/src/components/ui/dialog.tsx +4 -4
- package/src/components/ui/direction.tsx +6 -0
- package/src/components/ui/drawer.tsx +10 -10
- package/src/components/ui/dropdown-menu.tsx +8 -8
- package/src/components/ui/empty.tsx +4 -4
- package/src/components/ui/field.tsx +8 -8
- package/src/components/ui/hover-card.tsx +1 -2
- package/src/components/ui/input-group.tsx +3 -3
- package/src/components/ui/input-otp.tsx +1 -1
- package/src/components/ui/input.tsx +1 -1
- package/src/components/ui/item.tsx +4 -4
- package/src/components/ui/kbd.tsx +1 -1
- package/src/components/ui/label.tsx +1 -1
- package/src/components/ui/marker.tsx +67 -0
- package/src/components/ui/menubar.tsx +9 -9
- package/src/components/ui/message-scroller.tsx +129 -0
- package/src/components/ui/message.tsx +84 -0
- package/src/components/ui/native-select.tsx +1 -1
- package/src/components/ui/navigation-menu.tsx +6 -6
- package/src/components/ui/popover.tsx +1 -1
- package/src/components/ui/progress.tsx +2 -3
- package/src/components/ui/questionnaire.tsx +314 -0
- package/src/components/ui/radio-group.tsx +1 -2
- package/src/components/ui/resizable.tsx +1 -1
- package/src/components/ui/select.tsx +4 -4
- package/src/components/ui/separator.tsx +0 -1
- package/src/components/ui/sheet.tsx +3 -3
- package/src/components/ui/sidebar.tsx +14 -14
- package/src/components/ui/switch.tsx +2 -3
- package/src/components/ui/textarea.tsx +1 -1
- package/src/components/ui/toast.tsx +221 -0
- package/src/components/ui/toggle-group.tsx +2 -2
- package/src/components/ui/toggle.tsx +1 -1
- package/src/components/ui/tooltip.tsx +0 -1
- package/src/hooks/use-confirm.tsx +2 -0
- package/src/index.ts +48 -1
- package/src/lib/month.ts +60 -0
- package/src/styles.css +10 -0
|
@@ -27,7 +27,7 @@ function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props)
|
|
|
27
27
|
<DialogPrimitive.Backdrop
|
|
28
28
|
data-slot="dialog-overlay"
|
|
29
29
|
className={cn(
|
|
30
|
-
"
|
|
30
|
+
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
|
31
31
|
className,
|
|
32
32
|
)}
|
|
33
33
|
{...props}
|
|
@@ -49,7 +49,7 @@ function DialogContent({
|
|
|
49
49
|
<DialogPrimitive.Popup
|
|
50
50
|
data-slot="dialog-content"
|
|
51
51
|
className={cn(
|
|
52
|
-
"
|
|
52
|
+
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
53
53
|
className,
|
|
54
54
|
)}
|
|
55
55
|
{...props}
|
|
@@ -104,7 +104,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
|
|
104
104
|
return (
|
|
105
105
|
<DialogPrimitive.Title
|
|
106
106
|
data-slot="dialog-title"
|
|
107
|
-
className={cn("
|
|
107
|
+
className={cn("text-base leading-none font-medium", className)}
|
|
108
108
|
{...props}
|
|
109
109
|
/>
|
|
110
110
|
);
|
|
@@ -115,7 +115,7 @@ function DialogDescription({ className, ...props }: DialogPrimitive.Description.
|
|
|
115
115
|
<DialogPrimitive.Description
|
|
116
116
|
data-slot="dialog-description"
|
|
117
117
|
className={cn(
|
|
118
|
-
"text-muted-foreground
|
|
118
|
+
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
|
119
119
|
className,
|
|
120
120
|
)}
|
|
121
121
|
{...props}
|
|
@@ -68,7 +68,7 @@ function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props)
|
|
|
68
68
|
<DrawerPrimitive.Backdrop
|
|
69
69
|
data-slot="drawer-overlay"
|
|
70
70
|
className={cn(
|
|
71
|
-
"fixed inset-0 z-50 min-h-dvh
|
|
71
|
+
"fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
|
|
72
72
|
className,
|
|
73
73
|
)}
|
|
74
74
|
{...props}
|
|
@@ -82,7 +82,7 @@ function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">)
|
|
|
82
82
|
data-slot="drawer-swipe-handle"
|
|
83
83
|
aria-hidden="true"
|
|
84
84
|
className={cn(
|
|
85
|
-
"relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200
|
|
85
|
+
"relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
|
|
86
86
|
className,
|
|
87
87
|
)}
|
|
88
88
|
{...props}
|
|
@@ -108,19 +108,19 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
|
|
|
108
108
|
data-snap-points={hasSnapPoints ? "" : undefined}
|
|
109
109
|
className={cn(
|
|
110
110
|
// Base.
|
|
111
|
-
"group/drawer-popup
|
|
111
|
+
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
|
|
112
112
|
// Nested.
|
|
113
113
|
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
|
114
114
|
// Bleed.
|
|
115
|
-
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=
|
|
115
|
+
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
|
|
116
116
|
// Sizing.
|
|
117
|
-
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=
|
|
117
|
+
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
|
|
118
118
|
// Stack.
|
|
119
119
|
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
|
|
120
120
|
// Transitions.
|
|
121
|
-
"data-ending-style:transform-(--closed-transform) data-
|
|
121
|
+
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
|
|
122
122
|
// Axis: y.
|
|
123
|
-
"data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)
|
|
123
|
+
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
|
124
124
|
// Axis: x.
|
|
125
125
|
"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
|
|
126
126
|
// Direction: down.
|
|
@@ -139,7 +139,7 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
|
|
|
139
139
|
<DrawerPrimitive.Content
|
|
140
140
|
data-slot="drawer-content"
|
|
141
141
|
className={cn(
|
|
142
|
-
"flex min-h-0 flex-1
|
|
142
|
+
"flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none",
|
|
143
143
|
)}
|
|
144
144
|
>
|
|
145
145
|
{children}
|
|
@@ -177,7 +177,7 @@ function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
|
|
|
177
177
|
return (
|
|
178
178
|
<DrawerPrimitive.Title
|
|
179
179
|
data-slot="drawer-title"
|
|
180
|
-
className={cn("font-medium text-
|
|
180
|
+
className={cn("text-base font-medium text-foreground", className)}
|
|
181
181
|
{...props}
|
|
182
182
|
/>
|
|
183
183
|
);
|
|
@@ -187,7 +187,7 @@ function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.
|
|
|
187
187
|
return (
|
|
188
188
|
<DrawerPrimitive.Description
|
|
189
189
|
data-slot="drawer-description"
|
|
190
|
-
className={cn("text-balance text-muted-foreground
|
|
190
|
+
className={cn("text-sm text-balance text-muted-foreground", className)}
|
|
191
191
|
{...props}
|
|
192
192
|
/>
|
|
193
193
|
);
|
|
@@ -38,7 +38,7 @@ function DropdownMenuContent({
|
|
|
38
38
|
<MenuPrimitive.Popup
|
|
39
39
|
data-slot="dropdown-menu-content"
|
|
40
40
|
className={cn(
|
|
41
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:fade-in-0 data-open:zoom-in-95 data-closed:
|
|
41
|
+
"z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
42
42
|
className,
|
|
43
43
|
)}
|
|
44
44
|
{...props}
|
|
@@ -64,7 +64,7 @@ function DropdownMenuLabel({
|
|
|
64
64
|
data-slot="dropdown-menu-label"
|
|
65
65
|
data-inset={inset}
|
|
66
66
|
className={cn(
|
|
67
|
-
"px-1.5 py-1 font-medium text-muted-foreground
|
|
67
|
+
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
|
68
68
|
className,
|
|
69
69
|
)}
|
|
70
70
|
{...props}
|
|
@@ -87,7 +87,7 @@ function DropdownMenuItem({
|
|
|
87
87
|
data-inset={inset}
|
|
88
88
|
data-variant={variant}
|
|
89
89
|
className={cn(
|
|
90
|
-
"group/dropdown-menu-item relative flex cursor-default
|
|
90
|
+
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
|
91
91
|
className,
|
|
92
92
|
)}
|
|
93
93
|
{...props}
|
|
@@ -112,7 +112,7 @@ function DropdownMenuSubTrigger({
|
|
|
112
112
|
data-slot="dropdown-menu-sub-trigger"
|
|
113
113
|
data-inset={inset}
|
|
114
114
|
className={cn(
|
|
115
|
-
"flex cursor-default
|
|
115
|
+
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
116
116
|
className,
|
|
117
117
|
)}
|
|
118
118
|
{...props}
|
|
@@ -135,7 +135,7 @@ function DropdownMenuSubContent({
|
|
|
135
135
|
<DropdownMenuContent
|
|
136
136
|
data-slot="dropdown-menu-sub-content"
|
|
137
137
|
className={cn(
|
|
138
|
-
"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-open:fade-in-0 data-open:zoom-in-95 data-closed:
|
|
138
|
+
"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
139
139
|
className,
|
|
140
140
|
)}
|
|
141
141
|
align={align}
|
|
@@ -161,7 +161,7 @@ function DropdownMenuCheckboxItem({
|
|
|
161
161
|
data-slot="dropdown-menu-checkbox-item"
|
|
162
162
|
data-inset={inset}
|
|
163
163
|
className={cn(
|
|
164
|
-
"relative flex cursor-default
|
|
164
|
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
165
165
|
className,
|
|
166
166
|
)}
|
|
167
167
|
checked={checked}
|
|
@@ -197,7 +197,7 @@ function DropdownMenuRadioItem({
|
|
|
197
197
|
data-slot="dropdown-menu-radio-item"
|
|
198
198
|
data-inset={inset}
|
|
199
199
|
className={cn(
|
|
200
|
-
"relative flex cursor-default
|
|
200
|
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
201
201
|
className,
|
|
202
202
|
)}
|
|
203
203
|
{...props}
|
|
@@ -230,7 +230,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
|
|
|
230
230
|
<span
|
|
231
231
|
data-slot="dropdown-menu-shortcut"
|
|
232
232
|
className={cn(
|
|
233
|
-
"ml-auto text-
|
|
233
|
+
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
|
234
234
|
className,
|
|
235
235
|
)}
|
|
236
236
|
{...props}
|
|
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
6
6
|
<div
|
|
7
7
|
data-slot="empty"
|
|
8
8
|
className={cn(
|
|
9
|
-
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4
|
|
9
|
+
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
|
10
10
|
className,
|
|
11
11
|
)}
|
|
12
12
|
{...props}
|
|
@@ -58,7 +58,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
58
58
|
return (
|
|
59
59
|
<div
|
|
60
60
|
data-slot="empty-title"
|
|
61
|
-
className={cn("font-medium
|
|
61
|
+
className={cn("text-sm font-medium tracking-tight", className)}
|
|
62
62
|
{...props}
|
|
63
63
|
/>
|
|
64
64
|
);
|
|
@@ -69,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
|
69
69
|
<div
|
|
70
70
|
data-slot="empty-description"
|
|
71
71
|
className={cn(
|
|
72
|
-
"text-
|
|
72
|
+
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
73
73
|
className,
|
|
74
74
|
)}
|
|
75
75
|
{...props}
|
|
@@ -82,7 +82,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
82
82
|
<div
|
|
83
83
|
data-slot="empty-content"
|
|
84
84
|
className={cn(
|
|
85
|
-
"flex w-full
|
|
85
|
+
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
|
|
86
86
|
className,
|
|
87
87
|
)}
|
|
88
88
|
{...props}
|
|
@@ -57,7 +57,7 @@ const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:tex
|
|
|
57
57
|
horizontal:
|
|
58
58
|
"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
59
59
|
responsive:
|
|
60
|
-
"@md/field-group:flex-row
|
|
60
|
+
"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
61
61
|
},
|
|
62
62
|
},
|
|
63
63
|
defaultVariants: {
|
|
@@ -96,7 +96,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
|
|
|
96
96
|
<Label
|
|
97
97
|
data-slot="field-label"
|
|
98
98
|
className={cn(
|
|
99
|
-
"group/field-label peer/field-label flex w-fit gap-2 leading-snug
|
|
99
|
+
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
|
|
100
100
|
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
|
101
101
|
className,
|
|
102
102
|
)}
|
|
@@ -110,7 +110,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
110
110
|
<div
|
|
111
111
|
data-slot="field-label"
|
|
112
112
|
className={cn(
|
|
113
|
-
"flex w-fit items-center gap-2 font-medium
|
|
113
|
+
"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
|
|
114
114
|
className,
|
|
115
115
|
)}
|
|
116
116
|
{...props}
|
|
@@ -123,9 +123,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
|
123
123
|
<p
|
|
124
124
|
data-slot="field-description"
|
|
125
125
|
className={cn(
|
|
126
|
-
"text-left font-normal text-muted-foreground
|
|
127
|
-
"nth-last-2:-mt-1
|
|
128
|
-
"[&>a
|
|
126
|
+
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
|
127
|
+
"last:mt-0 nth-last-2:-mt-1",
|
|
128
|
+
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
129
129
|
className,
|
|
130
130
|
)}
|
|
131
131
|
{...props}
|
|
@@ -182,7 +182,7 @@ function FieldError({
|
|
|
182
182
|
|
|
183
183
|
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
|
|
184
184
|
|
|
185
|
-
if (uniqueErrors?.length
|
|
185
|
+
if (uniqueErrors?.length == 1) {
|
|
186
186
|
return uniqueErrors[0]?.message;
|
|
187
187
|
}
|
|
188
188
|
|
|
@@ -201,7 +201,7 @@ function FieldError({
|
|
|
201
201
|
<div
|
|
202
202
|
role="alert"
|
|
203
203
|
data-slot="field-error"
|
|
204
|
-
className={cn("font-normal text-destructive
|
|
204
|
+
className={cn("text-sm font-normal text-destructive", className)}
|
|
205
205
|
{...props}
|
|
206
206
|
>
|
|
207
207
|
{content}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
|
|
4
|
-
|
|
5
4
|
import { cn } from "@suphark/ui/lib/utils";
|
|
6
5
|
|
|
7
6
|
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
|
|
@@ -33,7 +32,7 @@ function HoverCardContent({
|
|
|
33
32
|
<PreviewCardPrimitive.Popup
|
|
34
33
|
data-slot="hover-card-content"
|
|
35
34
|
className={cn(
|
|
36
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:fade-in-0 data-open:zoom-in-95 data-closed:
|
|
35
|
+
"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
37
36
|
className,
|
|
38
37
|
)}
|
|
39
38
|
{...props}
|
|
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
13
13
|
data-slot="input-group"
|
|
14
14
|
role="group"
|
|
15
15
|
className={cn(
|
|
16
|
-
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input outline-none
|
|
16
|
+
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
|
17
17
|
className,
|
|
18
18
|
)}
|
|
19
19
|
{...props}
|
|
@@ -22,7 +22,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
const inputGroupAddonVariants = cva(
|
|
25
|
-
"flex h-auto cursor-text
|
|
25
|
+
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
|
26
26
|
{
|
|
27
27
|
variants: {
|
|
28
28
|
align: {
|
|
@@ -101,7 +101,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
|
|
101
101
|
return (
|
|
102
102
|
<span
|
|
103
103
|
className={cn(
|
|
104
|
-
"flex items-center gap-2 text-muted-foreground
|
|
104
|
+
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
105
105
|
className,
|
|
106
106
|
)}
|
|
107
107
|
{...props}
|
|
@@ -54,7 +54,7 @@ function InputOTPSlot({
|
|
|
54
54
|
data-slot="input-otp-slot"
|
|
55
55
|
data-active={isActive}
|
|
56
56
|
className={cn(
|
|
57
|
-
"relative flex size-8 items-center justify-center border-
|
|
57
|
+
"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
|
|
58
58
|
className,
|
|
59
59
|
)}
|
|
60
60
|
{...props}
|
|
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
|
8
8
|
type={type}
|
|
9
9
|
data-slot="input"
|
|
10
10
|
className={cn(
|
|
11
|
-
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none
|
|
11
|
+
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
12
12
|
className,
|
|
13
13
|
)}
|
|
14
14
|
{...props}
|
|
@@ -31,7 +31,7 @@ function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Sepa
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
const itemVariants = cva(
|
|
34
|
-
"group/item flex w-full flex-wrap items-center rounded-lg border text-sm
|
|
34
|
+
"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
|
|
35
35
|
{
|
|
36
36
|
variants: {
|
|
37
37
|
variant: {
|
|
@@ -42,7 +42,7 @@ const itemVariants = cva(
|
|
|
42
42
|
size: {
|
|
43
43
|
default: "gap-2.5 px-3 py-2.5",
|
|
44
44
|
sm: "gap-2.5 px-3 py-2.5",
|
|
45
|
-
xs: "gap-2 in-data-[slot=dropdown-menu-content]:p-0
|
|
45
|
+
xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
|
|
46
46
|
},
|
|
47
47
|
},
|
|
48
48
|
defaultVariants: {
|
|
@@ -126,7 +126,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
126
126
|
<div
|
|
127
127
|
data-slot="item-title"
|
|
128
128
|
className={cn(
|
|
129
|
-
"line-clamp-1 flex w-fit items-center gap-2
|
|
129
|
+
"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
|
|
130
130
|
className,
|
|
131
131
|
)}
|
|
132
132
|
{...props}
|
|
@@ -139,7 +139,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
|
139
139
|
<p
|
|
140
140
|
data-slot="item-description"
|
|
141
141
|
className={cn(
|
|
142
|
-
"line-clamp-2 text-left font-normal text-muted-foreground
|
|
142
|
+
"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
143
143
|
className,
|
|
144
144
|
)}
|
|
145
145
|
{...props}
|
|
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
|
|
5
5
|
<kbd
|
|
6
6
|
data-slot="kbd"
|
|
7
7
|
className={cn(
|
|
8
|
-
"pointer-events-none inline-flex h-5 w-fit min-w-5
|
|
8
|
+
"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 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
|
|
9
9
|
className,
|
|
10
10
|
)}
|
|
11
11
|
{...props}
|
|
@@ -8,7 +8,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
|
|
|
8
8
|
<label
|
|
9
9
|
data-slot="label"
|
|
10
10
|
className={cn(
|
|
11
|
-
"flex
|
|
11
|
+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
12
12
|
className,
|
|
13
13
|
)}
|
|
14
14
|
{...props}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
import { cn } from "@suphark/ui/lib/utils";
|
|
4
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
5
|
+
import type * as React from "react";
|
|
6
|
+
|
|
7
|
+
const markerVariants = cva(
|
|
8
|
+
"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "",
|
|
13
|
+
separator:
|
|
14
|
+
"before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
|
|
15
|
+
border: "border-b border-border pb-2",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
function Marker({
|
|
22
|
+
className,
|
|
23
|
+
variant = "default",
|
|
24
|
+
render,
|
|
25
|
+
...props
|
|
26
|
+
}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
|
|
27
|
+
return useRender({
|
|
28
|
+
defaultTagName: "div",
|
|
29
|
+
props: mergeProps<"div">(
|
|
30
|
+
{
|
|
31
|
+
className: cn(markerVariants({ variant, className })),
|
|
32
|
+
},
|
|
33
|
+
props,
|
|
34
|
+
),
|
|
35
|
+
render,
|
|
36
|
+
state: {
|
|
37
|
+
slot: "marker",
|
|
38
|
+
variant,
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
|
|
44
|
+
return (
|
|
45
|
+
<span
|
|
46
|
+
data-slot="marker-icon"
|
|
47
|
+
aria-hidden="true"
|
|
48
|
+
className={cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
|
|
49
|
+
{...props}
|
|
50
|
+
/>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
|
|
55
|
+
return (
|
|
56
|
+
<span
|
|
57
|
+
data-slot="marker-content"
|
|
58
|
+
className={cn(
|
|
59
|
+
"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
|
60
|
+
className,
|
|
61
|
+
)}
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { Marker, MarkerContent, MarkerIcon, markerVariants };
|
|
@@ -48,7 +48,7 @@ function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof Dro
|
|
|
48
48
|
<DropdownMenuTrigger
|
|
49
49
|
data-slot="menubar-trigger"
|
|
50
50
|
className={cn(
|
|
51
|
-
"flex
|
|
51
|
+
"flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
|
|
52
52
|
className,
|
|
53
53
|
)}
|
|
54
54
|
{...props}
|
|
@@ -70,7 +70,7 @@ function MenubarContent({
|
|
|
70
70
|
alignOffset={alignOffset}
|
|
71
71
|
sideOffset={sideOffset}
|
|
72
72
|
className={cn(
|
|
73
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:
|
|
73
|
+
"min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
|
74
74
|
className,
|
|
75
75
|
)}
|
|
76
76
|
{...props}
|
|
@@ -90,7 +90,7 @@ function MenubarItem({
|
|
|
90
90
|
data-inset={inset}
|
|
91
91
|
data-variant={variant}
|
|
92
92
|
className={cn(
|
|
93
|
-
"group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-
|
|
93
|
+
"group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
94
94
|
className,
|
|
95
95
|
)}
|
|
96
96
|
{...props}
|
|
@@ -112,7 +112,7 @@ function MenubarCheckboxItem({
|
|
|
112
112
|
data-slot="menubar-checkbox-item"
|
|
113
113
|
data-inset={inset}
|
|
114
114
|
className={cn(
|
|
115
|
-
"relative flex cursor-default
|
|
115
|
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
116
116
|
className,
|
|
117
117
|
)}
|
|
118
118
|
checked={checked}
|
|
@@ -145,7 +145,7 @@ function MenubarRadioItem({
|
|
|
145
145
|
data-slot="menubar-radio-item"
|
|
146
146
|
data-inset={inset}
|
|
147
147
|
className={cn(
|
|
148
|
-
"relative flex cursor-default
|
|
148
|
+
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
149
149
|
className,
|
|
150
150
|
)}
|
|
151
151
|
{...props}
|
|
@@ -171,7 +171,7 @@ function MenubarLabel({
|
|
|
171
171
|
<DropdownMenuLabel
|
|
172
172
|
data-slot="menubar-label"
|
|
173
173
|
data-inset={inset}
|
|
174
|
-
className={cn("px-1.5 py-1 font-medium
|
|
174
|
+
className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
|
|
175
175
|
{...props}
|
|
176
176
|
/>
|
|
177
177
|
);
|
|
@@ -198,7 +198,7 @@ function MenubarShortcut({
|
|
|
198
198
|
<DropdownMenuShortcut
|
|
199
199
|
data-slot="menubar-shortcut"
|
|
200
200
|
className={cn(
|
|
201
|
-
"ml-auto text-
|
|
201
|
+
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
|
|
202
202
|
className,
|
|
203
203
|
)}
|
|
204
204
|
{...props}
|
|
@@ -222,7 +222,7 @@ function MenubarSubTrigger({
|
|
|
222
222
|
data-slot="menubar-sub-trigger"
|
|
223
223
|
data-inset={inset}
|
|
224
224
|
className={cn(
|
|
225
|
-
"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-
|
|
225
|
+
"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
|
|
226
226
|
className,
|
|
227
227
|
)}
|
|
228
228
|
{...props}
|
|
@@ -238,7 +238,7 @@ function MenubarSubContent({
|
|
|
238
238
|
<DropdownMenuSubContent
|
|
239
239
|
data-slot="menubar-sub-content"
|
|
240
240
|
className={cn(
|
|
241
|
-
"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-open:fade-in-0 data-open:zoom-in-95 data-closed:
|
|
241
|
+
"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
242
242
|
className,
|
|
243
243
|
)}
|
|
244
244
|
{...props}
|