betterstart-cli 0.0.121 → 0.0.123

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.
Files changed (34) hide show
  1. package/dist/assets/adapters/next/templates/init/admin-globals.css +10 -16
  2. package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/copyable-code-block.tsx +5 -5
  3. package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/dev-mode-code-mirror.tsx +1 -2
  4. package/dist/assets/adapters/next/templates/init/components/shared/dev-mode-integrate.tsx +1 -1
  5. package/dist/assets/adapters/next/templates/init/components/shared/entity-filters-bar.tsx +1 -1
  6. package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-drawer.tsx +1 -1
  7. package/dist/assets/adapters/next/templates/init/components/shared/media/edit-media-dialog-content.tsx +1 -1
  8. package/dist/assets/adapters/next/templates/init/components/shared/media/media-filters-bar.tsx +1 -1
  9. package/dist/assets/adapters/next/templates/init/components/shared/page-header.tsx +1 -1
  10. package/dist/assets/adapters/next/templates/init/components/shared/sort-order-dialog.tsx +1 -1
  11. package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-source-mode.tsx +1 -1
  12. package/dist/assets/adapters/next/templates/init/pages/media/media-page-content.tsx +1 -1
  13. package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-detail-drawer.tsx +1 -1
  14. package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx +1 -1
  15. package/dist/assets/shared-assets/react-admin/ui/accordion.tsx +1 -1
  16. package/dist/assets/shared-assets/react-admin/ui/button.tsx +1 -1
  17. package/dist/assets/shared-assets/react-admin/ui/card.tsx +11 -7
  18. package/dist/assets/shared-assets/react-admin/ui/checkbox.tsx +1 -1
  19. package/dist/assets/shared-assets/react-admin/ui/combobox.tsx +1 -1
  20. package/dist/assets/shared-assets/react-admin/ui/drawer.tsx +1 -1
  21. package/dist/assets/shared-assets/react-admin/ui/input-group.tsx +1 -1
  22. package/dist/assets/shared-assets/react-admin/ui/input-otp.tsx +1 -1
  23. package/dist/assets/shared-assets/react-admin/ui/input.tsx +1 -1
  24. package/dist/assets/shared-assets/react-admin/ui/native-select.tsx +1 -1
  25. package/dist/assets/shared-assets/react-admin/ui/radio-group.tsx +1 -1
  26. package/dist/assets/shared-assets/react-admin/ui/select.tsx +1 -1
  27. package/dist/assets/shared-assets/react-admin/ui/sidebar.tsx +4 -3
  28. package/dist/assets/shared-assets/react-admin/ui/tabs.tsx +3 -3
  29. package/dist/assets/shared-assets/react-admin/ui/textarea.tsx +1 -1
  30. package/dist/assets/shared-assets/react-admin/ui/toggle.tsx +1 -1
  31. package/dist/cli.js +50 -23
  32. package/dist/cli.js.map +1 -1
  33. package/package.json +1 -1
  34. package/dist/assets/adapters/next/templates/init/pages/container-layout.tsx +0 -3
@@ -7,12 +7,14 @@
7
7
 
8
8
  @theme inline {
9
9
  --color-background: var(--background);
10
+ --color-background-light: var(--background-light);
10
11
  --color-foreground: var(--foreground);
11
- --font-sans: var(--font-sans);
12
- --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
12
+ --font-sans: var(--font-geist-sans);
13
+ --font-mono: var(--font-geist-mono);
13
14
  --color-sidebar-ring: var(--sidebar-ring);
14
15
  --color-sidebar-border: var(--sidebar-border);
15
16
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
17
+ --color-sidebar-accent-light: var(--sidebar-accent-light);
16
18
  --color-sidebar-accent: var(--sidebar-accent);
17
19
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
18
20
  --color-sidebar-primary: var(--sidebar-primary);
@@ -47,6 +49,7 @@
47
49
  --text-*: initial;
48
50
  --radius-*: initial;
49
51
  --radius: 6px;
52
+ --radius-lg: calc(var(--radius) + 2px);
50
53
  --font-heading: var(--font-sans);
51
54
  --shadow-sm: var(--shadow-small);
52
55
  --shadow-md: var(--shadow-medium);
@@ -193,8 +196,9 @@
193
196
  --ds-pink-1000: lab(12.9204% 31.3916 -0.183001);
194
197
 
195
198
  --background: var(--ds-background-200);
199
+ --background-light: var(--ds-background-100);
196
200
  --foreground: var(--ds-gray-1000);
197
- --card: var(--ds-background-100);
201
+ --card: var(--color-white);
198
202
  --card-foreground: var(--ds-gray-1000);
199
203
  --popover: var(--ds-background-100);
200
204
  --popover-foreground: var(--ds-gray-1000);
@@ -203,7 +207,7 @@
203
207
  --secondary: var(--ds-gray-200);
204
208
  --secondary-foreground: var(--ds-gray-1000);
205
209
  --muted: var(--ds-gray-100);
206
- --muted-foreground: var(--ds-gray-900);
210
+ --muted-foreground: var(--ds-gray-800);
207
211
  --placeholder: var(--ds-gray-700);
208
212
  --accent: var(--ds-gray-100);
209
213
  --accent-foreground: var(--ds-gray-1000);
@@ -213,7 +217,7 @@
213
217
  --warning-foreground: var(--ds-amber-900);
214
218
  --border: var(--ds-gray-400);
215
219
  --highlight: var(--ds-gray-600);
216
- --input: var(--ds-gray-400);
220
+ --input: var(--color-white);
217
221
  --ring: var(--ds-gray-600);
218
222
  --chart-1: var(--ds-blue-700);
219
223
  --chart-2: var(--ds-purple-700);
@@ -259,6 +263,7 @@
259
263
  --sidebar-foreground: var(--ds-gray-900);
260
264
  --sidebar-primary: var(--ds-gray-1000);
261
265
  --sidebar-primary-foreground: var(--ds-background-100);
266
+ --sidebar-accent-light: var(--ds-gray-100);
262
267
  --sidebar-accent: var(--ds-gray-200);
263
268
  --sidebar-accent-foreground: var(--ds-gray-1000);
264
269
  --sidebar-border: var(--ds-gray-400);
@@ -296,22 +301,11 @@
296
301
  line-height: 20px;
297
302
  }
298
303
 
299
- .admin-root {
300
- font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
301
- }
302
-
303
304
  .admin-root .tiptap-button-icon,
304
305
  .admin-root .tiptap-button-icon-sub {
305
306
  @apply text-foreground;
306
307
  }
307
308
 
308
- .admin-root code,
309
- .admin-root pre,
310
- .admin-root kbd {
311
- font-family:
312
- var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
313
- }
314
-
315
309
  html {
316
310
  @apply font-sans;
317
311
  }
@@ -32,10 +32,10 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
32
32
  const hasTabs = codeTabs.length > 1
33
33
 
34
34
  return (
35
- <Card className="flex w-full flex-col gap-0 p-0">
35
+ <Card className="flex h-full w-full flex-col gap-0 p-0">
36
36
  {hasTabs ? (
37
37
  <Tabs value={activeTab.id} onValueChange={setActiveTabId} className="min-h-0 flex-1 gap-0">
38
- <CardHeader className="flex items-center justify-between gap-2 border-b border-border bg-background pt-[5px]! pr-1 pb-2! pl-3.5!">
38
+ <CardHeader className="flex items-center justify-between gap-2 py-1!">
39
39
  <div className="flex min-w-0 flex-1 items-center gap-2">
40
40
  <span className="min-w-0 truncate font-medium text-muted-foreground">{label}</span>
41
41
  <TabsList className="h-fit! shrink-0">
@@ -61,7 +61,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
61
61
 
62
62
  {codeTabs.map((tab) => (
63
63
  <TabsContent key={tab.id} value={tab.id} className="min-h-0 overflow-auto">
64
- <CardContent className="h-full overflow-auto p-0">
64
+ <CardContent className="h-full overflow-auto border-t p-0">
65
65
  <React.Suspense fallback={<PlainCodeFallback code={tab.code} />}>
66
66
  <LazyCodeMirror code={tab.code} language={tab.language} />
67
67
  </React.Suspense>
@@ -71,7 +71,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
71
71
  </Tabs>
72
72
  ) : (
73
73
  <>
74
- <CardHeader className="flex items-center justify-between gap-2 border-b border-border bg-background pt-[5px]! pr-1 pb-2! pl-3.5!">
74
+ <CardHeader className="flex items-center justify-between gap-2 py-1!">
75
75
  <span className="min-w-0 truncate font-medium text-muted-foreground">{label}</span>
76
76
  <Button
77
77
  type="button"
@@ -85,7 +85,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
85
85
  {isCopied ? <Check /> : <Copy />}
86
86
  </Button>
87
87
  </CardHeader>
88
- <CardContent className="overflow-auto p-0">
88
+ <CardContent className="h-full overflow-auto border-t p-0">
89
89
  <React.Suspense fallback={<PlainCodeFallback code={code} />}>
90
90
  <LazyCodeMirror code={code} language={language} />
91
91
  </React.Suspense>
@@ -35,8 +35,7 @@ const compactCodeTheme = EditorView.theme({
35
35
  padding: '0 16px'
36
36
  },
37
37
  '.cm-scroller': {
38
- fontFamily:
39
- 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
38
+ fontFamily: 'var(--font-geist-mono)'
40
39
  }
41
40
  })
42
41
 
@@ -60,7 +60,7 @@ export function DevModeIntegrateButton({
60
60
  </DrawerHeader>
61
61
 
62
62
  {loadedIntegration ? (
63
- <Tabs defaultValue="snippets" className="min-h-0 flex-1 gap-4 overflow-hidden px-6 pb-4">
63
+ <Tabs defaultValue="snippets" className="min-h-0 flex-1 gap-2 overflow-hidden px-6 pb-4">
64
64
  <TabsList className="w-full">
65
65
  <TabsTrigger value="snippets">Snippets</TabsTrigger>
66
66
  <TabsTrigger value="lifecycle-hooks">Lifecycle Hooks</TabsTrigger>
@@ -64,7 +64,7 @@ export function EntityFiltersBar({
64
64
  return (
65
65
  <div
66
66
  className={cn(
67
- 'sticky top-14 z-10 flex h-16 flex-row items-center justify-between gap-1 overflow-x-clip bg-background px-4 transition-shadow',
67
+ 'sticky top-14 z-10 mt-6 mb-3 flex flex-row items-center justify-between gap-1 overflow-x-clip bg-background px-6 transition-shadow',
68
68
  {
69
69
  'shadow-modal/3': hasScrolled
70
70
  }
@@ -43,7 +43,7 @@ export function EntityVersionsDrawer({
43
43
  }: EntityVersionsDrawerProps) {
44
44
  return (
45
45
  <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
46
- <DrawerContent className="h-full max-w-lg">
46
+ <DrawerContent className="w-full data-[swipe-direction=right]:max-w-lg">
47
47
  <DrawerHeader>
48
48
  <DrawerTitle>Versions</DrawerTitle>
49
49
  <DrawerDescription>
@@ -91,7 +91,7 @@ export function EditMediaDialogContent({
91
91
  }
92
92
 
93
93
  return (
94
- <DrawerContent className="h-full w-full overflow-hidden">
94
+ <DrawerContent className="w-full overflow-hidden">
95
95
  <div
96
96
  ref={handleDrawerContainerRef}
97
97
  className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded"
@@ -48,7 +48,7 @@ export function MediaFiltersBar({
48
48
  return (
49
49
  <div
50
50
  className={cn(
51
- 'sticky top-14 z-9 flex h-16 flex-row items-center justify-between gap-1 overflow-clip bg-background px-4 transition-shadow',
51
+ 'sticky top-14 z-9 mt-6 mb-3 flex flex-row items-center justify-between gap-1 overflow-clip bg-background px-6 transition-shadow',
52
52
  {
53
53
  'shadow-modal/3': hasScrolled
54
54
  }
@@ -23,7 +23,7 @@ export function PageHeader({
23
23
 
24
24
  return (
25
25
  <>
26
- <header className="fixed top-0 right-0 left-(--admin-shell-content-left) z-200 grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-t border-b border-border/80 bg-sidebar px-4 transition-[left] duration-200 ease-linear">
26
+ <header className="fixed top-0 right-0 left-(--admin-shell-content-left) z-30 grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-t border-b border-border/80 bg-sidebar px-4 transition-[left] duration-200 ease-linear">
27
27
  <div className="flex w-full items-center justify-start gap-2">
28
28
  {hasBackButton && (
29
29
  <Button variant="ghost" size="icon" onClick={() => router.back()}>
@@ -192,7 +192,7 @@ export function SortOrderDialog({
192
192
  onOpenChange={onOpenChange}
193
193
  onOpenChangeComplete={handleDrawerAnimationEnd}
194
194
  >
195
- <DrawerContent className="h-full w-full overflow-hidden">
195
+ <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:max-w-md">
196
196
  <div className="relative z-10 flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
197
197
  <DrawerHeader>
198
198
  <DrawerTitle>{title}</DrawerTitle>
@@ -39,7 +39,7 @@ import { githubLightInit } from '@uiw/codemirror-theme-github'
39
39
  import { NuqsAdapter } from 'nuqs/adapters/react'
40
40
  import { createRoot } from 'react-dom/client'
41
41
 
42
- const ADMIN_MONO_FONT_FAMILY = 'var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace'
42
+ const ADMIN_MONO_FONT_FAMILY = 'var(--font-geist-mono)'
43
43
  const editorTheme = githubLightInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } })
44
44
 
45
45
  type MarkdownMediaGalleryWidgetProps = {
@@ -206,7 +206,7 @@ export function MediaPageContent() {
206
206
  }
207
207
  />
208
208
 
209
- <main className="flex-1 space-y-3 px-4 pb-4">
209
+ <main className="flex-1 space-y-3 px-6 pb-6">
210
210
  <div className="flex w-full flex-col gap-4 pt-px">
211
211
  {activeTab === 'url' ? (
212
212
  <MediaUrlImporter
@@ -37,7 +37,7 @@ function formatMetadata(metadata: Record<string, unknown> | null): string {
37
37
  export function AuditLogDetailDrawer({ auditLog, open, onOpenChange }: AuditLogDetailDrawerProps) {
38
38
  return (
39
39
  <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
40
- <DrawerContent className="h-full max-w-xl">
40
+ <DrawerContent className="w-full data-[swipe-direction=right]:max-w-xl">
41
41
  <DrawerHeader>
42
42
  <DrawerTitle>Audit Event</DrawerTitle>
43
43
  <DrawerDescription>
@@ -83,7 +83,7 @@ export function FormNotificationsDrawer({
83
83
 
84
84
  return (
85
85
  <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
86
- <DrawerContent className="h-full max-w-xl">
86
+ <DrawerContent className="w-full data-[swipe-direction=right]:max-w-xl">
87
87
  <Form {...form}>
88
88
  <form
89
89
  autoComplete="off"
@@ -16,7 +16,7 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
16
16
  return (
17
17
  <AccordionPrimitive.Item
18
18
  data-slot="accordion-item"
19
- className={cn('not-last:border-b data-open:bg-muted/50', className)}
19
+ className={cn('not-last:border-b data-open:bg-background-light', className)}
20
20
  {...props}
21
21
  />
22
22
  )
@@ -10,7 +10,7 @@ const buttonVariants = cva(
10
10
  variant: {
11
11
  default: 'bg-primary text-primary-foreground hover:bg-primary/80',
12
12
  outline:
13
- 'border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
13
+ 'border-border bg-input hover:border-foreground/10 hover:bg-accent hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
14
14
  secondary:
15
15
  'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
16
16
  ghost:
@@ -11,7 +11,7 @@ function Card({
11
11
  data-slot="card"
12
12
  data-size={size}
13
13
  className={cn(
14
- 'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded bg-card py-(--card-spacing) text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t *:[img:last-child]:rounded-b',
14
+ 'group/card flex flex-col overflow-clip rounded-lg border bg-accent text-card-foreground has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b',
15
15
  className
16
16
  )}
17
17
  {...props}
@@ -24,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
24
24
  <div
25
25
  data-slot="card-header"
26
26
  className={cn(
27
- 'group/card-header grid auto-rows-min items-start gap-2 rounded-t px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
27
+ 'group/card-header grid auto-rows-min items-start gap-2 rounded-t-lg bg-accent px-5 py-2 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
28
28
  className
29
29
  )}
30
30
  {...props}
@@ -64,7 +64,14 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
64
64
 
65
65
  function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
66
66
  return (
67
- <div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
67
+ <div
68
+ data-slot="card-content"
69
+ className={cn(
70
+ 'overflow-clip rounded-t-lg bg-card px-5 py-5 [[data-slot=card-header]~&]:border-t',
71
+ className
72
+ )}
73
+ {...props}
74
+ />
68
75
  )
69
76
  }
70
77
 
@@ -72,10 +79,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
72
79
  return (
73
80
  <div
74
81
  data-slot="card-footer"
75
- className={cn(
76
- 'flex items-center rounded-b px-(--card-spacing) [.border-t]:pt-(--card-spacing)',
77
- className
78
- )}
82
+ className={cn('flex items-center rounded-b px-5 [.border-t]:pt-(--card-spacing)', className)}
79
83
  {...props}
80
84
  />
81
85
  )
@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
9
9
  <CheckboxPrimitive.Root
10
10
  data-slot="checkbox"
11
11
  className={cn(
12
- 'peer relative flex size-4 shrink-0 items-center justify-center rounded border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground',
12
+ 'peer relative flex size-4 shrink-0 items-center justify-center rounded border border-border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground',
13
13
  className
14
14
  )}
15
15
  {...props}
@@ -207,7 +207,7 @@ function ComboboxChips({
207
207
  <ComboboxPrimitive.Chips
208
208
  data-slot="combobox-chips"
209
209
  className={cn(
210
- 'flex min-h-9 flex-wrap items-center gap-1.5 rounded border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5',
210
+ 'flex min-h-9 flex-wrap items-center gap-1.5 rounded border border-border bg-input/30 bg-clip-padding px-2.5 py-1.5 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5',
211
211
  className
212
212
  )}
213
213
  {...props}
@@ -158,7 +158,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
158
158
  <div
159
159
  data-slot="drawer-header"
160
160
  className={cn(
161
- 'flex shrink-0 flex-col gap-1.5 p-4 pb-0 text-left group-data-[swipe-axis=y]/drawer-popup:text-center',
161
+ 'flex shrink-0 flex-col px-6 py-4 pb-0 text-left group-data-[swipe-axis=y]/drawer-popup:text-center',
162
162
  className
163
163
  )}
164
164
  {...props}
@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
14
14
  data-slot="input-group"
15
15
  role="group"
16
16
  className={cn(
17
- 'group/input-group relative flex h-9 w-full min-w-0 items-center rounded border border-input bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded has-data-[align=block-start]:rounded has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] 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-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded 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 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
+ 'group/input-group relative flex h-9 w-full min-w-0 items-center rounded border border-border bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded has-data-[align=block-start]:rounded has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] 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-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded 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 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',
18
18
  className
19
19
  )}
20
20
  {...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-9 items-center justify-center border-y border-r border-input bg-input/30 transition-all outline-none first:rounded-l first:border-l last:rounded-r aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20',
57
+ 'relative flex size-9 items-center justify-center border-y border-r border-border bg-input/30 transition-all outline-none first:rounded-l first:border-l last:rounded-r aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20',
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-9 w-full min-w-0 rounded border border-input bg-input/30 px-3 py-1 transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20',
11
+ 'h-9 w-full min-w-0 rounded border border-border bg-input px-3 py-1 transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20',
12
12
  className
13
13
  )}
14
14
  {...props}
@@ -19,7 +19,7 @@ function NativeSelect({ className, size = 'default', ...props }: NativeSelectPro
19
19
  <select
20
20
  data-slot="native-select"
21
21
  data-size={size}
22
- className="h-9 w-full min-w-0 appearance-none rounded border border-input bg-input/30 py-1 pr-8 pl-3 transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=sm]:h-8"
22
+ className="h-9 w-full min-w-0 appearance-none rounded border border-border bg-input/30 py-1 pr-8 pl-3 transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=sm]:h-8"
23
23
  {...props}
24
24
  />
25
25
  <ChevronDownIcon
@@ -19,7 +19,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
19
19
  <RadioPrimitive.Root
20
20
  data-slot="radio-group-item"
21
21
  className={cn(
22
- 'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground',
22
+ 'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded border border-border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground',
23
23
  className
24
24
  )}
25
25
  {...props}
@@ -40,7 +40,7 @@ function SelectTrigger({
40
40
  data-slot="select-trigger"
41
41
  data-size={size}
42
42
  className={cn(
43
- "flex w-fit items-center justify-between gap-1.5 rounded border border-input bg-input/30 px-3 py-2 whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-placeholder data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
43
+ "flex w-fit items-center justify-between gap-1.5 rounded border border-border bg-input/30 px-3 py-2 whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-placeholder data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
44
44
  className
45
45
  )}
46
46
  {...props}
@@ -415,13 +415,14 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
415
415
  }
416
416
 
417
417
  const sidebarMenuButtonVariants = cva(
418
- 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded px-3 py-2 text-left ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
418
+ 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded px-3 py-2 text-left font-medium ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent-light hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-active:hover:bg-sidebar-accent [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
419
419
  {
420
420
  variants: {
421
421
  variant: {
422
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
422
+ default:
423
+ 'hover:bg-sidebar-accent-light hover:text-sidebar-accent-foreground data-active:hover:bg-sidebar-accent',
423
424
  outline:
424
- 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
425
+ 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent-light hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)] data-active:hover:bg-sidebar-accent'
425
426
  },
426
427
  size: {
427
428
  default: 'h-9',
@@ -51,9 +51,9 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
51
51
  <TabsPrimitive.Tab
52
52
  data-slot="tabs-trigger"
53
53
  className={cn(
54
- "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded border border-transparent px-2 py-1 font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 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 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
55
- 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent',
56
- 'data-active:bg-background data-active:text-foreground',
54
+ "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded border border-transparent bg-clip-padding px-2 py-1 font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 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 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
55
+ 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent',
56
+ 'data-active:border-border data-active:bg-input data-active:text-foreground',
57
57
  'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
58
58
  className
59
59
  )}
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
6
6
  <textarea
7
7
  data-slot="textarea"
8
8
  className={cn(
9
- 'flex field-sizing-content min-h-16 w-full resize-none rounded border border-input bg-input/30 px-3 py-3 transition-colors outline-none placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20',
9
+ 'flex field-sizing-content min-h-16 w-full resize-none rounded border border-border bg-input/30 px-3 py-3 transition-colors outline-none placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20',
10
10
  className
11
11
  )}
12
12
  {...props}
@@ -11,7 +11,7 @@ const toggleVariants = cva(
11
11
  variants: {
12
12
  variant: {
13
13
  default: 'bg-transparent',
14
- outline: 'border border-input bg-transparent hover:bg-muted'
14
+ outline: 'border border-border bg-transparent hover:bg-muted'
15
15
  },
16
16
  size: {
17
17
  default: