@mesob/ui 0.2.0 → 0.2.1

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 (74) hide show
  1. package/dist/components/alert-dialog.js +22 -22
  2. package/dist/components/alert-dialog.js.map +1 -1
  3. package/dist/components/alert.js +1 -1
  4. package/dist/components/alert.js.map +1 -1
  5. package/dist/components/animated-tabs.js +1 -1
  6. package/dist/components/animated-tabs.js.map +1 -1
  7. package/dist/components/app-header-actions.js +118 -103
  8. package/dist/components/app-header-actions.js.map +1 -1
  9. package/dist/components/app-sidebar.js +69 -69
  10. package/dist/components/app-sidebar.js.map +1 -1
  11. package/dist/components/button-group.js +1 -1
  12. package/dist/components/button-group.js.map +1 -1
  13. package/dist/components/button.d.ts +6 -3
  14. package/dist/components/button.js +16 -8
  15. package/dist/components/button.js.map +1 -1
  16. package/dist/components/calendar.js +24 -16
  17. package/dist/components/calendar.js.map +1 -1
  18. package/dist/components/card.js +1 -1
  19. package/dist/components/card.js.map +1 -1
  20. package/dist/components/carousel.js +28 -20
  21. package/dist/components/carousel.js.map +1 -1
  22. package/dist/components/command.js +5 -5
  23. package/dist/components/command.js.map +1 -1
  24. package/dist/components/context-menu.js +2 -2
  25. package/dist/components/context-menu.js.map +1 -1
  26. package/dist/components/data-table/index.js +162 -153
  27. package/dist/components/data-table/index.js.map +1 -1
  28. package/dist/components/dialog.js +2 -2
  29. package/dist/components/dialog.js.map +1 -1
  30. package/dist/components/drawer.js +2 -2
  31. package/dist/components/drawer.js.map +1 -1
  32. package/dist/components/dropdown-menu.js +2 -2
  33. package/dist/components/dropdown-menu.js.map +1 -1
  34. package/dist/components/entity/index.js +261 -256
  35. package/dist/components/entity/index.js.map +1 -1
  36. package/dist/components/hover-card.js +1 -1
  37. package/dist/components/hover-card.js.map +1 -1
  38. package/dist/components/input-group.js +27 -19
  39. package/dist/components/input-group.js.map +1 -1
  40. package/dist/components/item.d.ts +1 -1
  41. package/dist/components/menubar.js +3 -3
  42. package/dist/components/menubar.js.map +1 -1
  43. package/dist/components/navigation-menu.js +1 -1
  44. package/dist/components/navigation-menu.js.map +1 -1
  45. package/dist/components/page/index.js +36 -28
  46. package/dist/components/page/index.js.map +1 -1
  47. package/dist/components/pagination.js +20 -20
  48. package/dist/components/pagination.js.map +1 -1
  49. package/dist/components/popover.js +1 -1
  50. package/dist/components/popover.js.map +1 -1
  51. package/dist/components/section/index.js +29 -21
  52. package/dist/components/section/index.js.map +1 -1
  53. package/dist/components/select.js +1 -1
  54. package/dist/components/select.js.map +1 -1
  55. package/dist/components/sheet.js +2 -2
  56. package/dist/components/sheet.js.map +1 -1
  57. package/dist/components/shell.js +44 -36
  58. package/dist/components/shell.js.map +1 -1
  59. package/dist/components/sidebar.js +83 -75
  60. package/dist/components/sidebar.js.map +1 -1
  61. package/dist/components/spotlight-search.js +67 -59
  62. package/dist/components/spotlight-search.js.map +1 -1
  63. package/dist/components/theme-toggle.js +21 -13
  64. package/dist/components/theme-toggle.js.map +1 -1
  65. package/dist/hooks/use-translation.js +3 -2
  66. package/dist/hooks/use-translation.js.map +1 -1
  67. package/dist/index.d.ts +1 -0
  68. package/dist/index.js +94 -1
  69. package/dist/index.js.map +1 -1
  70. package/dist/lib/theme-schema.d.ts +21 -0
  71. package/dist/lib/theme-schema.js +95 -0
  72. package/dist/lib/theme-schema.js.map +1 -0
  73. package/package.json +2 -5
  74. package/src/styles/globals.css +0 -130
@@ -10,18 +10,18 @@ function cn(...inputs) {
10
10
  // src/components/button.tsx
11
11
  import { Slot } from "@radix-ui/react-slot";
12
12
  import { cva } from "class-variance-authority";
13
- import { jsx } from "react/jsx-runtime";
13
+ import { jsxs } from "react/jsx-runtime";
14
14
  var buttonVariants = cva(
15
15
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
16
16
  {
17
17
  variants: {
18
18
  variant: {
19
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
20
- destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
21
- outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
22
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19
+ default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
20
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
21
+ outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
22
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
23
23
  ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
24
- link: "text-primary underline-offset-4 hover:underline"
24
+ link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
25
25
  },
26
26
  size: {
27
27
  default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -41,32 +41,32 @@ var buttonVariants = cva(
41
41
 
42
42
  // src/components/alert-dialog.tsx
43
43
  import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
44
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
44
+ import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
45
45
  function AlertDialog({
46
46
  ...props
47
47
  }) {
48
- return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
48
+ return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
49
49
  }
50
50
  function AlertDialogTrigger({
51
51
  ...props
52
52
  }) {
53
- return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
53
+ return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
54
54
  }
55
55
  function AlertDialogPortal({
56
56
  ...props
57
57
  }) {
58
- return /* @__PURE__ */ jsx2(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
58
+ return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
59
59
  }
60
60
  function AlertDialogOverlay({
61
61
  className,
62
62
  ...props
63
63
  }) {
64
- return /* @__PURE__ */ jsx2(
64
+ return /* @__PURE__ */ jsx(
65
65
  AlertDialogPrimitive.Overlay,
66
66
  {
67
67
  "data-slot": "alert-dialog-overlay",
68
68
  className: cn(
69
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
69
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
70
70
  className
71
71
  ),
72
72
  ...props
@@ -77,14 +77,14 @@ function AlertDialogContent({
77
77
  className,
78
78
  ...props
79
79
  }) {
80
- return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
81
- /* @__PURE__ */ jsx2(AlertDialogOverlay, {}),
82
- /* @__PURE__ */ jsx2(
80
+ return /* @__PURE__ */ jsxs2(AlertDialogPortal, { children: [
81
+ /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
82
+ /* @__PURE__ */ jsx(
83
83
  AlertDialogPrimitive.Content,
84
84
  {
85
85
  "data-slot": "alert-dialog-content",
86
86
  className: cn(
87
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
87
+ "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[51] grid w-full min-w-[280px] max-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:min-w-[320px] sm:max-w-[32rem]",
88
88
  className
89
89
  ),
90
90
  ...props
@@ -96,7 +96,7 @@ function AlertDialogHeader({
96
96
  className,
97
97
  ...props
98
98
  }) {
99
- return /* @__PURE__ */ jsx2(
99
+ return /* @__PURE__ */ jsx(
100
100
  "div",
101
101
  {
102
102
  "data-slot": "alert-dialog-header",
@@ -109,7 +109,7 @@ function AlertDialogFooter({
109
109
  className,
110
110
  ...props
111
111
  }) {
112
- return /* @__PURE__ */ jsx2(
112
+ return /* @__PURE__ */ jsx(
113
113
  "div",
114
114
  {
115
115
  "data-slot": "alert-dialog-footer",
@@ -125,7 +125,7 @@ function AlertDialogTitle({
125
125
  className,
126
126
  ...props
127
127
  }) {
128
- return /* @__PURE__ */ jsx2(
128
+ return /* @__PURE__ */ jsx(
129
129
  AlertDialogPrimitive.Title,
130
130
  {
131
131
  "data-slot": "alert-dialog-title",
@@ -138,7 +138,7 @@ function AlertDialogDescription({
138
138
  className,
139
139
  ...props
140
140
  }) {
141
- return /* @__PURE__ */ jsx2(
141
+ return /* @__PURE__ */ jsx(
142
142
  AlertDialogPrimitive.Description,
143
143
  {
144
144
  "data-slot": "alert-dialog-description",
@@ -151,7 +151,7 @@ function AlertDialogAction({
151
151
  className,
152
152
  ...props
153
153
  }) {
154
- return /* @__PURE__ */ jsx2(
154
+ return /* @__PURE__ */ jsx(
155
155
  AlertDialogPrimitive.Action,
156
156
  {
157
157
  className: cn(buttonVariants(), className),
@@ -163,7 +163,7 @@ function AlertDialogCancel({
163
163
  className,
164
164
  ...props
165
165
  }) {
166
- return /* @__PURE__ */ jsx2(
166
+ return /* @__PURE__ */ jsx(
167
167
  AlertDialogPrimitive.Cancel,
168
168
  {
169
169
  className: cn(buttonVariants({ variant: "outline" }), className),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/alert-dialog.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n icon: 'size-9',\n 'icon-sm': 'size-8',\n 'icon-lg': 'size-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { buttonVariants } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport type * as React from 'react';\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return (\n <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n );\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n return (\n <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n );\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n return (\n <AlertDialogPrimitive.Overlay\n data-slot=\"alert-dialog-overlay\"\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n return (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n className={cn(\n 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n className,\n )}\n {...props}\n />\n </AlertDialogPortal>\n );\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-dialog-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-dialog-footer\"\n className={cn(\n 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n return (\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n className={cn('text-lg font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n return (\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n return (\n <AlertDialogPrimitive.Action\n className={cn(buttonVariants(), className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogCancel({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n return (\n <AlertDialogPrimitive.Cancel\n className={cn(buttonVariants({ variant: 'outline' }), className)}\n {...props}\n />\n );\n}\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n"],"mappings":"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","names":["jsx"]}
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/alert-dialog.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n outline:\n 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400',\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline',\n },\n size: {\n default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n icon: 'size-9',\n 'icon-sm': 'size-8',\n 'icon-lg': 'size-10',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\ntype ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n };\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n leftIcon,\n rightIcon,\n children,\n ...props\n}: ButtonProps) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n >\n {leftIcon}\n {children}\n {rightIcon}\n </Comp>\n );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { buttonVariants } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport type * as React from 'react';\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return (\n <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n );\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n return (\n <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n );\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n return (\n <AlertDialogPrimitive.Overlay\n data-slot=\"alert-dialog-overlay\"\n className={cn(\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n return (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n className={cn(\n 'bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[51] grid w-full min-w-[280px] max-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:min-w-[320px] sm:max-w-[32rem]',\n className,\n )}\n {...props}\n />\n </AlertDialogPortal>\n );\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-dialog-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-dialog-footer\"\n className={cn(\n 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n return (\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n className={cn('text-lg font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n return (\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n return (\n <AlertDialogPrimitive.Action\n className={cn(buttonVariants(), className)}\n {...props}\n />\n );\n}\n\nfunction AlertDialogCancel({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n return (\n <AlertDialogPrimitive.Cancel\n className={cn(buttonVariants({ variant: 'outline' }), className)}\n {...props}\n />\n );\n}\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,YAAY;AACrB,SAAS,WAA8B;AAwDnC;AArDJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;AChCA,YAAY,0BAA0B;AAM7B,cAwCL,QAAAA,aAxCK;AAHT,SAAS,YAAY;AAAA,EACnB,GAAG;AACL,GAA2D;AACzD,SAAO,oBAAsB,2BAArB,EAA0B,aAAU,gBAAgB,GAAG,OAAO;AACxE;AAEA,SAAS,mBAAmB;AAAA,EAC1B,GAAG;AACL,GAA8D;AAC5D,SACE,oBAAsB,8BAArB,EAA6B,aAAU,wBAAwB,GAAG,OAAO;AAE9E;AAEA,SAAS,kBAAkB;AAAA,EACzB,GAAG;AACL,GAA6D;AAC3D,SACE,oBAAsB,6BAArB,EAA4B,aAAU,uBAAuB,GAAG,OAAO;AAE5E;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA8D;AAC5D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA8D;AAC5D,SACE,gBAAAA,MAAC,qBACC;AAAA,wBAAC,sBAAmB;AAAA,IACpB;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gDAAgD,SAAS;AAAA,MACtE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAA4D;AAC1D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAkE;AAChE,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["jsxs"]}
@@ -9,7 +9,7 @@ function cn(...inputs) {
9
9
  import { cva } from "class-variance-authority";
10
10
  import { jsx } from "react/jsx-runtime";
11
11
  var alertVariants = cva(
12
- "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
12
+ "border-border relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
13
13
  {
14
14
  variants: {
15
15
  variant: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/alert.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n {\n variants: {\n variant: {\n default: 'bg-card text-card-foreground',\n destructive:\n 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n return (\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(\n 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n 'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,WAA8B;AAyBnC;AAtBJ,IAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqE;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/alert.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst alertVariants = cva(\n 'border-border relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n {\n variants: {\n variant: {\n default: 'bg-card text-card-foreground',\n destructive:\n 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n return (\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(\n 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n 'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,WAA8B;AAyBnC;AAtBJ,IAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqE;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
@@ -43,7 +43,7 @@ function DropdownMenuContent({
43
43
  "data-slot": "dropdown-menu-content",
44
44
  sideOffset,
45
45
  className: cn(
46
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
46
+ "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
47
47
  className
48
48
  ),
49
49
  ...props
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/animated-tabs.tsx","../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { motion } from 'motion/react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport type AnimatedTabItem = {\n name: string;\n value: string;\n href?: string;\n content?: ReactNode;\n};\n\ntype LinkComponentProps = {\n href: string;\n className?: string;\n children: ReactNode;\n ref?: React.Ref<HTMLAnchorElement>;\n};\n\ntype AnimatedTabsProps = {\n tabs: AnimatedTabItem[];\n activeTab?: string;\n defaultTab?: string;\n onTabChange?: (value: string) => void;\n className?: string;\n linkComponent?: ComponentType<LinkComponentProps>;\n};\n\nexport function AnimatedTabs({\n tabs,\n activeTab: controlledActiveTab,\n defaultTab,\n onTabChange,\n className,\n linkComponent: LinkComponent,\n}: AnimatedTabsProps) {\n const [internalActiveTab, setInternalActiveTab] = useState(\n defaultTab ?? tabs[0]?.value ?? '',\n );\n const activeTab = controlledActiveTab ?? internalActiveTab;\n\n const [visibleTabs, setVisibleTabs] = useState<AnimatedTabItem[]>(tabs);\n const [overflowTabs, setOverflowTabs] = useState<AnimatedTabItem[]>([]);\n const containerRef = useRef<HTMLDivElement>(null);\n const tabsListRef = useRef<HTMLDivElement>(null);\n const dropdownTriggerRef = useRef<HTMLButtonElement>(null);\n const tabRefs = useRef<(HTMLElement | null)[]>([]);\n const [underlineStyle, setUnderlineStyle] = useState({ left: 0, width: 0 });\n\n const handleTabChange = (newValue: string) => {\n if (!controlledActiveTab) {\n setInternalActiveTab(newValue);\n }\n onTabChange?.(newValue);\n };\n\n useLayoutEffect(() => {\n const updateTabs = () => {\n if (!containerRef.current) {\n return;\n }\n if (!tabsListRef.current) {\n return;\n }\n\n const containerWidth = containerRef.current.offsetWidth;\n const dropdownWidth = 80;\n const padding = 16;\n const availableWidth = containerWidth - padding;\n\n let totalWidth = 0;\n const visible: AnimatedTabItem[] = [];\n const overflow: AnimatedTabItem[] = [];\n let hasOverflow = false;\n\n for (const [i, tab] of tabs.entries()) {\n const tabEl = tabRefs.current[i];\n\n if (!tabEl || tabEl.offsetWidth === 0) {\n if (hasOverflow) {\n overflow.push(tab);\n } else {\n visible.push(tab);\n }\n continue;\n }\n\n const tabWidth = tabEl.scrollWidth || tabEl.offsetWidth;\n const wouldFitWithoutDropdown = totalWidth + tabWidth <= availableWidth;\n const wouldFitWithDropdown =\n totalWidth + tabWidth + dropdownWidth <= availableWidth;\n\n if (!hasOverflow && wouldFitWithoutDropdown) {\n visible.push(tab);\n totalWidth += tabWidth;\n } else if (!hasOverflow && wouldFitWithDropdown) {\n visible.push(tab);\n totalWidth += tabWidth;\n hasOverflow = true;\n } else {\n hasOverflow = true;\n overflow.push(tab);\n }\n }\n\n setVisibleTabs(visible);\n setOverflowTabs(overflow);\n };\n\n const timeoutId = setTimeout(updateTabs, 100);\n\n const resizeObserver = new ResizeObserver(() => {\n setTimeout(updateTabs, 0);\n });\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n if (tabsListRef.current) {\n resizeObserver.observe(tabsListRef.current);\n }\n\n window.addEventListener('resize', updateTabs);\n\n return () => {\n clearTimeout(timeoutId);\n resizeObserver.disconnect();\n window.removeEventListener('resize', updateTabs);\n };\n }, [tabs]);\n\n useLayoutEffect(() => {\n const updateUnderline = () => {\n const isInOverflow = overflowTabs.some((tab) => tab.value === activeTab);\n\n if (isInOverflow && dropdownTriggerRef.current) {\n const { offsetLeft, offsetWidth } = dropdownTriggerRef.current;\n setUnderlineStyle({\n left: offsetLeft,\n width: offsetWidth,\n });\n return;\n }\n\n const activeTabIndex = tabs.findIndex((tab) => tab.value === activeTab);\n const activeTabElement = tabRefs.current[activeTabIndex];\n\n if (\n activeTabElement &&\n visibleTabs.some((tab) => tab.value === activeTab)\n ) {\n const { offsetLeft, offsetWidth } = activeTabElement;\n setUnderlineStyle({\n left: offsetLeft,\n width: offsetWidth,\n });\n }\n };\n\n updateUnderline();\n }, [activeTab, visibleTabs, overflowTabs, tabs]);\n\n const activeTabData = useMemo(\n () => tabs.find((tab) => tab.value === activeTab),\n [tabs, activeTab],\n );\n\n const renderTab = (tab: AnimatedTabItem, originalIndex: number) => {\n const isActive = activeTab === tab.value;\n\n const tabClassName = cn(\n 'relative z-10 px-4 py-3 text-sm font-medium transition-all duration-200',\n 'hover:bg-muted/60 rounded-t-md',\n isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground',\n );\n\n const setRef = (el: HTMLElement | null) => {\n if (originalIndex >= 0) {\n tabRefs.current[originalIndex] = el;\n }\n };\n\n if (tab.href && LinkComponent) {\n return (\n <LinkComponent\n key={tab.value}\n href={tab.href}\n className={tabClassName}\n ref={setRef as React.Ref<HTMLAnchorElement>}\n >\n {tab.name}\n </LinkComponent>\n );\n }\n\n return (\n <button\n key={tab.value}\n type=\"button\"\n ref={setRef}\n onClick={() => handleTabChange(tab.value)}\n className={tabClassName}\n >\n {tab.name}\n </button>\n );\n };\n\n const renderDropdownItem = (tab: AnimatedTabItem) => {\n const isActive = activeTab === tab.value;\n const itemClassName = cn(\n 'cursor-pointer',\n isActive && 'bg-accent font-medium',\n );\n\n if (tab.href && LinkComponent) {\n return (\n <DropdownMenuItem key={tab.value} asChild className={itemClassName}>\n <LinkComponent href={tab.href}>{tab.name}</LinkComponent>\n </DropdownMenuItem>\n );\n }\n\n return (\n <DropdownMenuItem\n key={tab.value}\n onClick={() => handleTabChange(tab.value)}\n className={itemClassName}\n >\n {tab.name}\n </DropdownMenuItem>\n );\n };\n\n return (\n <div className={cn('flex flex-col', className)}>\n <div ref={containerRef} className=\"w-full\">\n <div ref={tabsListRef} className=\"relative flex items-center\">\n {visibleTabs.map((tab) => {\n const originalIndex = tabs.findIndex((t) => t.value === tab.value);\n return renderTab(tab, originalIndex);\n })}\n\n {overflowTabs.length > 0 && (\n <DropdownMenu>\n <DropdownMenuTrigger\n ref={dropdownTriggerRef}\n className={cn(\n 'relative z-10 flex items-center gap-1 px-4 py-3 text-sm font-medium transition-all duration-200',\n 'hover:bg-muted/60 rounded-t-md',\n overflowTabs.some((tab) => tab.value === activeTab)\n ? 'text-primary'\n : 'text-muted-foreground hover:text-foreground',\n )}\n >\n More\n <IconChevronDown className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n {overflowTabs.map(renderDropdownItem)}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n\n <motion.div\n className=\"absolute bottom-0 left-0 z-20 h-0.5 bg-primary\"\n animate={{\n left: underlineStyle.left,\n width: underlineStyle.width,\n }}\n transition={{\n type: 'spring',\n stiffness: 400,\n damping: 40,\n }}\n />\n </div>\n </div>\n\n {activeTabData?.content && (\n <div className=\"flex-1\">{activeTabData.content}</div>\n )}\n </div>\n );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n );\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n );\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = 'default',\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: 'default' | 'destructive';\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <IconCheck className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <IconCircle className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn('bg-border -mx-1 my-1 h-px', className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n 'text-muted-foreground ml-auto text-xs tracking-widest',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <IconChevronRight className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}
1
+ {"version":3,"sources":["../../src/lib/utils.ts","../../src/components/animated-tabs.tsx","../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { motion } from 'motion/react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport type AnimatedTabItem = {\n name: string;\n value: string;\n href?: string;\n content?: ReactNode;\n};\n\ntype LinkComponentProps = {\n href: string;\n className?: string;\n children: ReactNode;\n ref?: React.Ref<HTMLAnchorElement>;\n};\n\ntype AnimatedTabsProps = {\n tabs: AnimatedTabItem[];\n activeTab?: string;\n defaultTab?: string;\n onTabChange?: (value: string) => void;\n className?: string;\n linkComponent?: ComponentType<LinkComponentProps>;\n};\n\nexport function AnimatedTabs({\n tabs,\n activeTab: controlledActiveTab,\n defaultTab,\n onTabChange,\n className,\n linkComponent: LinkComponent,\n}: AnimatedTabsProps) {\n const [internalActiveTab, setInternalActiveTab] = useState(\n defaultTab ?? tabs[0]?.value ?? '',\n );\n const activeTab = controlledActiveTab ?? internalActiveTab;\n\n const [visibleTabs, setVisibleTabs] = useState<AnimatedTabItem[]>(tabs);\n const [overflowTabs, setOverflowTabs] = useState<AnimatedTabItem[]>([]);\n const containerRef = useRef<HTMLDivElement>(null);\n const tabsListRef = useRef<HTMLDivElement>(null);\n const dropdownTriggerRef = useRef<HTMLButtonElement>(null);\n const tabRefs = useRef<(HTMLElement | null)[]>([]);\n const [underlineStyle, setUnderlineStyle] = useState({ left: 0, width: 0 });\n\n const handleTabChange = (newValue: string) => {\n if (!controlledActiveTab) {\n setInternalActiveTab(newValue);\n }\n onTabChange?.(newValue);\n };\n\n useLayoutEffect(() => {\n const updateTabs = () => {\n if (!containerRef.current) {\n return;\n }\n if (!tabsListRef.current) {\n return;\n }\n\n const containerWidth = containerRef.current.offsetWidth;\n const dropdownWidth = 80;\n const padding = 16;\n const availableWidth = containerWidth - padding;\n\n let totalWidth = 0;\n const visible: AnimatedTabItem[] = [];\n const overflow: AnimatedTabItem[] = [];\n let hasOverflow = false;\n\n for (const [i, tab] of tabs.entries()) {\n const tabEl = tabRefs.current[i];\n\n if (!tabEl || tabEl.offsetWidth === 0) {\n if (hasOverflow) {\n overflow.push(tab);\n } else {\n visible.push(tab);\n }\n continue;\n }\n\n const tabWidth = tabEl.scrollWidth || tabEl.offsetWidth;\n const wouldFitWithoutDropdown = totalWidth + tabWidth <= availableWidth;\n const wouldFitWithDropdown =\n totalWidth + tabWidth + dropdownWidth <= availableWidth;\n\n if (!hasOverflow && wouldFitWithoutDropdown) {\n visible.push(tab);\n totalWidth += tabWidth;\n } else if (!hasOverflow && wouldFitWithDropdown) {\n visible.push(tab);\n totalWidth += tabWidth;\n hasOverflow = true;\n } else {\n hasOverflow = true;\n overflow.push(tab);\n }\n }\n\n setVisibleTabs(visible);\n setOverflowTabs(overflow);\n };\n\n const timeoutId = setTimeout(updateTabs, 100);\n\n const resizeObserver = new ResizeObserver(() => {\n setTimeout(updateTabs, 0);\n });\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n if (tabsListRef.current) {\n resizeObserver.observe(tabsListRef.current);\n }\n\n window.addEventListener('resize', updateTabs);\n\n return () => {\n clearTimeout(timeoutId);\n resizeObserver.disconnect();\n window.removeEventListener('resize', updateTabs);\n };\n }, [tabs]);\n\n useLayoutEffect(() => {\n const updateUnderline = () => {\n const isInOverflow = overflowTabs.some((tab) => tab.value === activeTab);\n\n if (isInOverflow && dropdownTriggerRef.current) {\n const { offsetLeft, offsetWidth } = dropdownTriggerRef.current;\n setUnderlineStyle({\n left: offsetLeft,\n width: offsetWidth,\n });\n return;\n }\n\n const activeTabIndex = tabs.findIndex((tab) => tab.value === activeTab);\n const activeTabElement = tabRefs.current[activeTabIndex];\n\n if (\n activeTabElement &&\n visibleTabs.some((tab) => tab.value === activeTab)\n ) {\n const { offsetLeft, offsetWidth } = activeTabElement;\n setUnderlineStyle({\n left: offsetLeft,\n width: offsetWidth,\n });\n }\n };\n\n updateUnderline();\n }, [activeTab, visibleTabs, overflowTabs, tabs]);\n\n const activeTabData = useMemo(\n () => tabs.find((tab) => tab.value === activeTab),\n [tabs, activeTab],\n );\n\n const renderTab = (tab: AnimatedTabItem, originalIndex: number) => {\n const isActive = activeTab === tab.value;\n\n const tabClassName = cn(\n 'relative z-10 px-4 py-3 text-sm font-medium transition-all duration-200',\n 'hover:bg-muted/60 rounded-t-md',\n isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground',\n );\n\n const setRef = (el: HTMLElement | null) => {\n if (originalIndex >= 0) {\n tabRefs.current[originalIndex] = el;\n }\n };\n\n if (tab.href && LinkComponent) {\n return (\n <LinkComponent\n key={tab.value}\n href={tab.href}\n className={tabClassName}\n ref={setRef as React.Ref<HTMLAnchorElement>}\n >\n {tab.name}\n </LinkComponent>\n );\n }\n\n return (\n <button\n key={tab.value}\n type=\"button\"\n ref={setRef}\n onClick={() => handleTabChange(tab.value)}\n className={tabClassName}\n >\n {tab.name}\n </button>\n );\n };\n\n const renderDropdownItem = (tab: AnimatedTabItem) => {\n const isActive = activeTab === tab.value;\n const itemClassName = cn(\n 'cursor-pointer',\n isActive && 'bg-accent font-medium',\n );\n\n if (tab.href && LinkComponent) {\n return (\n <DropdownMenuItem key={tab.value} asChild className={itemClassName}>\n <LinkComponent href={tab.href}>{tab.name}</LinkComponent>\n </DropdownMenuItem>\n );\n }\n\n return (\n <DropdownMenuItem\n key={tab.value}\n onClick={() => handleTabChange(tab.value)}\n className={itemClassName}\n >\n {tab.name}\n </DropdownMenuItem>\n );\n };\n\n return (\n <div className={cn('flex flex-col', className)}>\n <div ref={containerRef} className=\"w-full\">\n <div ref={tabsListRef} className=\"relative flex items-center\">\n {visibleTabs.map((tab) => {\n const originalIndex = tabs.findIndex((t) => t.value === tab.value);\n return renderTab(tab, originalIndex);\n })}\n\n {overflowTabs.length > 0 && (\n <DropdownMenu>\n <DropdownMenuTrigger\n ref={dropdownTriggerRef}\n className={cn(\n 'relative z-10 flex items-center gap-1 px-4 py-3 text-sm font-medium transition-all duration-200',\n 'hover:bg-muted/60 rounded-t-md',\n overflowTabs.some((tab) => tab.value === activeTab)\n ? 'text-primary'\n : 'text-muted-foreground hover:text-foreground',\n )}\n >\n More\n <IconChevronDown className=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" className=\"min-w-40\">\n {overflowTabs.map(renderDropdownItem)}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n\n <motion.div\n className=\"absolute bottom-0 left-0 z-20 h-0.5 bg-primary\"\n animate={{\n left: underlineStyle.left,\n width: underlineStyle.width,\n }}\n transition={{\n type: 'spring',\n stiffness: 400,\n damping: 40,\n }}\n />\n </div>\n </div>\n\n {activeTabData?.content && (\n <div className=\"flex-1\">{activeTabData.content}</div>\n )}\n </div>\n );\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n );\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n );\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = 'default',\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: 'default' | 'destructive';\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <IconCheck className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <IconCircle className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n 'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn('bg-border -mx-1 my-1 h-px', className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n 'text-muted-foreground ml-auto text-xs tracking-widest',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <IconChevronRight className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n 'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}