@mesob/ui 0.2.0 → 0.2.2

package/dist/components/alert-dialog.js

@@ -10,18 +10,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        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",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        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",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -41,7 +41,7 @@ var buttonVariants = cva(
 
 // src/components/alert-dialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AlertDialog({
   ...props
 }) {
@@ -66,7 +66,7 @@ function AlertDialogOverlay({
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "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",
+        "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))]",
         className
       ),
       ...props
@@ -77,14 +77,14 @@ function AlertDialogContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  return /* @__PURE__ */ jsxs2(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx2(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx2(
       AlertDialogPrimitive.Content,
       {
         "data-slot": "alert-dialog-content",
         className: cn(
-          "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",
+          "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]",
           className
         ),
         ...props

package/dist/components/alert-dialog.js.map

@@ -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"]}
+{"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      {asChild ? (\n        children\n      ) : (\n        <>\n          {leftIcon}\n          {children}\n          {rightIcon}\n        </>\n      )}\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":"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","names":["jsx","jsxs"]}

package/dist/components/alert.js

@@ -9,7 +9,7 @@ function cn(...inputs) {
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var alertVariants = cva(
-  "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",
+  "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",
   {
     variants: {
       variant: {

package/dist/components/alert.js.map

@@ -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":[]}
+{"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":[]}

package/dist/components/animated-tabs.js

@@ -43,7 +43,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "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",
+        "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",
         className
       ),
       ...props

package/dist/components/animated-tabs.js.map

@@ -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":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACFA,SAAS,uBAAuB;AAChC,SAAS,cAAc;AAEvB,SAAS,iBAAiB,SAAS,QAAQ,gBAAgB;;;ACH3D,YAAY,2BAA2B;AACvC,SAAS,WAAW,kBAAkB,kBAAkB;AAM/C,cAgFL,YAhFK;AAHT,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAA4D;AAC1D,SAAO,oBAAuB,4BAAtB,EAA2B,aAAU,iBAAiB,GAAG,OAAO;AAC1E;AAUA,SAAS,oBAAoB;AAAA,EAC3B,GAAG;AACL,GAA+D;AAC7D,SACE;AAAA,IAAuB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAA+D;AAC7D,SACE,oBAAuB,8BAAtB,EACC;AAAA,IAAuB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAUA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGG;AACD,SACE;AAAA,IAAuB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ADiHQ,gBAAAA,MA6DM,QAAAC,aA7DN;AA7JD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAsB;AACpB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD,cAAc,KAAK,CAAC,GAAG,SAAS;AAAA,EAClC;AACA,QAAM,YAAY,uBAAuB;AAEzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAA4B,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAA4B,CAAC,CAAC;AACtE,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,qBAAqB,OAA0B,IAAI;AACzD,QAAM,UAAU,OAA+B,CAAC,CAAC;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;AAE1E,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,QAAI,CAAC,qBAAqB;AACxB,2BAAqB,QAAQ;AAAA,IAC/B;AACA,kBAAc,QAAQ;AAAA,EACxB;AAEA,kBAAgB,MAAM;AACpB,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,aAAa,SAAS;AACzB;AAAA,MACF;AACA,UAAI,CAAC,YAAY,SAAS;AACxB;AAAA,MACF;AAEA,YAAM,iBAAiB,aAAa,QAAQ;AAC5C,YAAM,gBAAgB;AACtB,YAAM,UAAU;AAChB,YAAM,iBAAiB,iBAAiB;AAExC,UAAI,aAAa;AACjB,YAAM,UAA6B,CAAC;AACpC,YAAM,WAA8B,CAAC;AACrC,UAAI,cAAc;AAElB,iBAAW,CAAC,GAAG,GAAG,KAAK,KAAK,QAAQ,GAAG;AACrC,cAAM,QAAQ,QAAQ,QAAQ,CAAC;AAE/B,YAAI,CAAC,SAAS,MAAM,gBAAgB,GAAG;AACrC,cAAI,aAAa;AACf,qBAAS,KAAK,GAAG;AAAA,UACnB,OAAO;AACL,oBAAQ,KAAK,GAAG;AAAA,UAClB;AACA;AAAA,QACF;AAEA,cAAM,WAAW,MAAM,eAAe,MAAM;AAC5C,cAAM,0BAA0B,aAAa,YAAY;AACzD,cAAM,uBACJ,aAAa,WAAW,iBAAiB;AAE3C,YAAI,CAAC,eAAe,yBAAyB;AAC3C,kBAAQ,KAAK,GAAG;AAChB,wBAAc;AAAA,QAChB,WAAW,CAAC,eAAe,sBAAsB;AAC/C,kBAAQ,KAAK,GAAG;AAChB,wBAAc;AACd,wBAAc;AAAA,QAChB,OAAO;AACL,wBAAc;AACd,mBAAS,KAAK,GAAG;AAAA,QACnB;AAAA,MACF;AAEA,qBAAe,OAAO;AACtB,sBAAgB,QAAQ;AAAA,IAC1B;AAEA,UAAM,YAAY,WAAW,YAAY,GAAG;AAE5C,UAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,iBAAW,YAAY,CAAC;AAAA,IAC1B,CAAC;AAED,QAAI,aAAa,SAAS;AACxB,qBAAe,QAAQ,aAAa,OAAO;AAAA,IAC7C;AAEA,QAAI,YAAY,SAAS;AACvB,qBAAe,QAAQ,YAAY,OAAO;AAAA,IAC5C;AAEA,WAAO,iBAAiB,UAAU,UAAU;AAE5C,WAAO,MAAM;AACX,mBAAa,SAAS;AACtB,qBAAe,WAAW;AAC1B,aAAO,oBAAoB,UAAU,UAAU;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,kBAAgB,MAAM;AACpB,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,aAAa,KAAK,CAAC,QAAQ,IAAI,UAAU,SAAS;AAEvE,UAAI,gBAAgB,mBAAmB,SAAS;AAC9C,cAAM,EAAE,YAAY,YAAY,IAAI,mBAAmB;AACvD,0BAAkB;AAAA,UAChB,MAAM;AAAA,UACN,OAAO;AAAA,QACT,CAAC;AACD;AAAA,MACF;AAEA,YAAM,iBAAiB,KAAK,UAAU,CAAC,QAAQ,IAAI,UAAU,SAAS;AACtE,YAAM,mBAAmB,QAAQ,QAAQ,cAAc;AAEvD,UACE,oBACA,YAAY,KAAK,CAAC,QAAQ,IAAI,UAAU,SAAS,GACjD;AACA,cAAM,EAAE,YAAY,YAAY,IAAI;AACpC,0BAAkB;AAAA,UAChB,MAAM;AAAA,UACN,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAEA,oBAAgB;AAAA,EAClB,GAAG,CAAC,WAAW,aAAa,cAAc,IAAI,CAAC;AAE/C,QAAM,gBAAgB;AAAA,IACpB,MAAM,KAAK,KAAK,CAAC,QAAQ,IAAI,UAAU,SAAS;AAAA,IAChD,CAAC,MAAM,SAAS;AAAA,EAClB;AAEA,QAAM,YAAY,CAAC,KAAsB,kBAA0B;AACjE,UAAM,WAAW,cAAc,IAAI;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,IAC9B;AAEA,UAAM,SAAS,CAAC,OAA2B;AACzC,UAAI,iBAAiB,GAAG;AACtB,gBAAQ,QAAQ,aAAa,IAAI;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,IAAI,QAAQ,eAAe;AAC7B,aACE,gBAAAD;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,IAAI;AAAA,UACV,WAAW;AAAA,UACX,KAAK;AAAA,UAEJ,cAAI;AAAA;AAAA,QALA,IAAI;AAAA,MAMX;AAAA,IAEJ;AAEA,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,SAAS,MAAM,gBAAgB,IAAI,KAAK;AAAA,QACxC,WAAW;AAAA,QAEV,cAAI;AAAA;AAAA,MANA,IAAI;AAAA,IAOX;AAAA,EAEJ;AAEA,QAAM,qBAAqB,CAAC,QAAyB;AACnD,UAAM,WAAW,cAAc,IAAI;AACnC,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA,YAAY;AAAA,IACd;AAEA,QAAI,IAAI,QAAQ,eAAe;AAC7B,aACE,gBAAAA,KAAC,oBAAiC,SAAO,MAAC,WAAW,eACnD,0BAAAA,KAAC,iBAAc,MAAM,IAAI,MAAO,cAAI,MAAK,KADpB,IAAI,KAE3B;AAAA,IAEJ;AAEA,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,MAAM,gBAAgB,IAAI,KAAK;AAAA,QACxC,WAAW;AAAA,QAEV,cAAI;AAAA;AAAA,MAJA,IAAI;AAAA,IAKX;AAAA,EAEJ;AAEA,SACE,gBAAAC,MAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAC3C;AAAA,oBAAAD,KAAC,SAAI,KAAK,cAAc,WAAU,UAChC,0BAAAC,MAAC,SAAI,KAAK,aAAa,WAAU,8BAC9B;AAAA,kBAAY,IAAI,CAAC,QAAQ;AACxB,cAAM,gBAAgB,KAAK,UAAU,CAAC,MAAM,EAAE,UAAU,IAAI,KAAK;AACjE,eAAO,UAAU,KAAK,aAAa;AAAA,MACrC,CAAC;AAAA,MAEA,aAAa,SAAS,KACrB,gBAAAA,MAAC,gBACC;AAAA,wBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,aAAa,KAAK,CAAC,QAAQ,IAAI,UAAU,SAAS,IAC9C,iBACA;AAAA,YACN;AAAA,YACD;AAAA;AAAA,cAEC,gBAAAD,KAAC,mBAAgB,WAAU,WAAU;AAAA;AAAA;AAAA,QACvC;AAAA,QACA,gBAAAA,KAAC,uBAAoB,OAAM,SAAQ,WAAU,YAC1C,uBAAa,IAAI,kBAAkB,GACtC;AAAA,SACF;AAAA,MAGF,gBAAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,YACP,MAAM,eAAe;AAAA,YACrB,OAAO,eAAe;AAAA,UACxB;AAAA,UACA,YAAY;AAAA,YACV,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS;AAAA,UACX;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,IAEC,eAAe,WACd,gBAAAA,KAAC,SAAI,WAAU,UAAU,wBAAc,SAAQ;AAAA,KAEnD;AAEJ;","names":["jsx","jsxs"]}
+{"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"]}

package/dist/components/app-header-actions.js

@@ -59,18 +59,18 @@ function AvatarFallback({
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        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",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        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",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -92,6 +92,9 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
@@ -100,7 +103,12 @@ function Button({
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon,
+        children,
+        rightIcon
+      ] })
     }
   );
 }
@@ -108,7 +116,7 @@ function Button({
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
@@ -136,7 +144,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "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",
+        "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",
         className
       ),
       ...props
@@ -179,7 +187,7 @@ function DropdownMenuSeparator({
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 
 // src/components/mesob-context.tsx
 import {
@@ -222,7 +230,7 @@ function Link({
 // src/components/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
@@ -242,7 +250,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "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",
+        "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))]",
         className
       ),
       ...props
@@ -255,20 +263,20 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
+  return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx7(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
-          "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",
+          "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]",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs3(
+          showCloseButton && /* @__PURE__ */ jsxs4(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
@@ -324,7 +332,7 @@ function DialogDescription({
 // src/components/command.tsx
 import { IconSearch } from "@tabler/icons-react";
 import { Command as CommandPrimitive } from "cmdk";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Command({
   className,
   ...props
@@ -334,7 +342,7 @@ function Command({
     {
       "data-slot": "command",
       className: cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        "bg-popover text-popover-foreground flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md",
         className
       ),
       ...props
@@ -349,8 +357,8 @@ function CommandDialog({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(Dialog, { ...props, children: [
-    /* @__PURE__ */ jsxs4(DialogHeader, { className: "sr-only", children: [
+  return /* @__PURE__ */ jsxs5(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs5(DialogHeader, { className: "sr-only", children: [
       /* @__PURE__ */ jsx8(DialogTitle, { children: title }),
       /* @__PURE__ */ jsx8(DialogDescription, { children: description })
     ] }),
@@ -368,11 +376,11 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
+      className: "border-border flex h-9 items-center gap-2 border-b px-3",
       children: [
         /* @__PURE__ */ jsx8(IconSearch, { className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsx8(
@@ -413,7 +421,7 @@ function CommandEmpty({
     CommandPrimitive.Empty,
     {
       "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
+      className: "text-muted-foreground py-6 text-center text-sm",
       ...props
     }
   );
@@ -467,7 +475,7 @@ function CommandItem({
 // src/components/spotlight-search.tsx
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
 import * as React from "react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SpotlightSearch({
   groups = [],
   placeholder = "Search...",
@@ -487,27 +495,27 @@ function SpotlightSearch({
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(
       Button,
       {
         variant: "outline",
         className: cn(
-          "relative h-9 w-9 p-0 xl:h-9 xl:w-60 xl:justify-start xl:px-3 xl:py-2",
+          "relative h-9 min-w-9 p-0 xl:h-9 xl:min-w-[12rem] xl:w-60 xl:justify-start xl:px-3 xl:py-2",
           triggerClassName
         ),
         onClick: () => setOpen(true),
         children: [
           /* @__PURE__ */ jsx9(IconSearch2, { className: "h-4 w-4 xl:mr-2" }),
           /* @__PURE__ */ jsx9("span", { className: "hidden xl:inline-flex", children: "Search..." }),
-          /* @__PURE__ */ jsxs5("kbd", { className: "pointer-events-none absolute right-1.5 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 xl:flex", children: [
+          /* @__PURE__ */ jsxs6("kbd", { className: "border-border pointer-events-none absolute right-1.5 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 xl:flex", children: [
             /* @__PURE__ */ jsx9("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       CommandDialog,
       {
         open,
@@ -518,11 +526,11 @@ function SpotlightSearch({
         className,
         children: [
           /* @__PURE__ */ jsx9(CommandInput, { placeholder, onValueChange: onSearch }),
-          /* @__PURE__ */ jsxs5(CommandList, { children: [
+          /* @__PURE__ */ jsxs6(CommandList, { children: [
             /* @__PURE__ */ jsx9(CommandEmpty, { children: emptyMessage }),
-            groups.map((group, index) => /* @__PURE__ */ jsxs5(React.Fragment, { children: [
+            groups.map((group, index) => /* @__PURE__ */ jsxs6(React.Fragment, { children: [
               index > 0 && /* @__PURE__ */ jsx9(CommandSeparator, {}),
-              /* @__PURE__ */ jsx9(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsx9(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs6(
                 CommandItem,
                 {
                   onSelect: () => {
@@ -532,7 +540,7 @@ function SpotlightSearch({
                   children: [
                     item.icon,
                     /* @__PURE__ */ jsx9("span", { children: item.title }),
-                    item.shortcut && /* @__PURE__ */ jsx9("kbd", { className: "pointer-events-none ml-auto hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: item.shortcut })
+                    item.shortcut && /* @__PURE__ */ jsx9("kbd", { className: "border-border pointer-events-none ml-auto hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: item.shortcut })
                   ]
                 },
                 item.id
@@ -547,7 +555,7 @@ function SpotlightSearch({
 
 // src/components/app-header-actions.tsx
 import { IconBell, IconLogout } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function AppHeaderActions({
   user,
   onLogout,
@@ -561,32 +569,39 @@ function AppHeaderActions({
   const initials = user?.fullName?.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) || "U";
   const displayName = user?.fullName ?? "Account";
   const displaySubtext = user?.email ?? user?.phone ?? user?.handle ?? "";
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx10(SpotlightSearch, { groups: searchGroups }),
     actions,
     /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "icon", className: "relative", children: /* @__PURE__ */ jsx10(IconBell, { className: "size-5" }) }),
-    /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(Button, { variant: "ghost", className: "flex items-center gap-2 px-2", children: [
-        /* @__PURE__ */ jsxs6(Avatar, { className: "size-8", children: [
-          /* @__PURE__ */ jsx10(AvatarImage, { src: user?.image ?? void 0 }),
-          /* @__PURE__ */ jsx10(AvatarFallback, { className: "text-xs", children: initials })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "hidden flex-col items-start text-left md:flex", children: [
-          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium", children: displayName }),
-          /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: displaySubtext })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "end", className: "w-56", children: [
+    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+        Button,
+        {
+          variant: "ghost",
+          className: "flex items-center gap-3 px-3 py-2 h-auto rounded-md min-h-9 hover:bg-accent/70 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          children: [
+            /* @__PURE__ */ jsxs7(Avatar, { className: "size-8 shrink-0", children: [
+              /* @__PURE__ */ jsx10(AvatarImage, { src: user?.image ?? void 0 }),
+              /* @__PURE__ */ jsx10(AvatarFallback, { className: "text-xs", children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "hidden flex-col items-start text-left md:flex min-w-0", children: [
+              /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium", children: displayName }),
+              /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: displaySubtext })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", className: "w-56", children: [
         topMenuItems.map((item) => /* @__PURE__ */ jsx10(
           DropdownMenuItem,
           {
             onClick: item.onClick,
             variant: item.variant,
             asChild: item.href ? true : void 0,
-            children: item.href ? /* @__PURE__ */ jsxs6(Link, { href: item.href, onClick: item.onClick, children: [
+            children: item.href ? /* @__PURE__ */ jsxs7(Link, { href: item.href, onClick: item.onClick, children: [
               item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
               item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
             ] })
@@ -600,10 +615,10 @@ function AppHeaderActions({
             onClick: item.onClick,
             variant: item.variant,
             asChild: item.href ? true : void 0,
-            children: item.href ? /* @__PURE__ */ jsxs6(Link, { href: item.href, onClick: item.onClick, children: [
+            children: item.href ? /* @__PURE__ */ jsxs7(Link, { href: item.href, onClick: item.onClick, children: [
               item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
-            ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
               item.icon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: item.icon }),
               item.label
             ] })
@@ -612,9 +627,9 @@ function AppHeaderActions({
         )),
         accountMenuFooter && (topMenuItems.length > 0 || menuItems.length > 0) && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
         accountMenuFooter,
-        onLogout && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        onLogout && /* @__PURE__ */ jsxs7(Fragment4, { children: [
           (topMenuItems.length > 0 || menuItems.length > 0 || accountMenuFooter) && /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs6(DropdownMenuItem, { onClick: onLogout, variant: "destructive", children: [
+          /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: onLogout, variant: "destructive", children: [
             isLoggingOut ? /* @__PURE__ */ jsx10("span", { className: "mr-2", children: "..." }) : /* @__PURE__ */ jsx10(IconLogout, { className: "mr-2 size-4" }),
             "Log out"
           ] })