diff --git a/package.json b/package.json
index d4fa59b..582dbc2 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,8 @@
     "prettier": "^3.8.1",
     "typescript": "^5.7.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "next-themes": "^0.4.6",
+    "sonner": "^2.0.7"
+  }
 }
diff --git a/packages/web/__registry__/index.tsx b/packages/web/__registry__/index.tsx
index f7a82eb..175e98b 100644
--- a/packages/web/__registry__/index.tsx
+++ b/packages/web/__registry__/index.tsx
@@ -2171,7 +2171,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-combobox.tsx',
         content:
-          "'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst McCombobox = ComboboxPrimitive.Root;\n\nfunction McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction McComboboxTrigger({\n  className,\n  placeholder,\n  ...props\n}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\n        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',\n        className\n      )}\n      {...props}\n    >\n      <McComboboxValue placeholder={placeholder} />\n      <ChevronsUpDown className=\"size-4 text-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction McComboboxSearch({\n  className,\n  placeholder,\n  ...props\n}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {\n  return (\n    <div className=\"flex items-center border-b px-3 h-fit w-full gap-2\" data-slot=\"combobox-search\">\n      <SearchIcon className=\"text-muted-foreground size-4\" />\n      <ComboboxPrimitive.Input\n        className={cn(\n          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',\n          className\n        )}\n        placeholder={placeholder}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction McComboboxContent({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn('p-1 h-fit w-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        'relative flex w-full rounded py-1.5 px-2 gap-2 justify-between paragraph-sm items-center',\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4 text-accent-foreground\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport {\n  McCombobox,\n  McComboboxTrigger,\n  McComboboxSearch,\n  McComboboxContent,\n  McComboboxList,\n  McComboboxItem,\n  McComboboxValue,\n};\n",
+          "'use client';\r\n\r\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\r\nimport { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst McCombobox = ComboboxPrimitive.Root;\r\n\r\nfunction McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\r\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\r\n}\r\n\r\nfunction McComboboxTrigger({\r\n  className,\r\n  placeholder,\r\n  ...props\r\n}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {\r\n  return (\r\n    <ComboboxPrimitive.Trigger\r\n      data-slot=\"combobox-trigger\"\r\n      className={cn(\r\n        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <McComboboxValue placeholder={placeholder} />\r\n      <ChevronsUpDown className=\"size-4 text-foreground\" />\r\n    </ComboboxPrimitive.Trigger>\r\n  );\r\n}\r\n\r\nfunction McComboboxSearch({\r\n  className,\r\n  placeholder,\r\n  ...props\r\n}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {\r\n  return (\r\n    <div className=\"flex items-center border-b px-3 h-fit w-full gap-2\" data-slot=\"combobox-search\">\r\n      <SearchIcon className=\"text-muted-foreground size-4\" />\r\n      <ComboboxPrimitive.Input\r\n        className={cn(\r\n          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',\r\n          className\r\n        )}\r\n        placeholder={placeholder}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction McComboboxContent({\r\n  className,\r\n  side = 'bottom',\r\n  sideOffset = 8,\r\n  align = 'start',\r\n  ...props\r\n}: ComboboxPrimitive.Popup.Props &\r\n  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {\r\n  return (\r\n    <ComboboxPrimitive.Portal>\r\n      <ComboboxPrimitive.Positioner\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        align={align}\r\n        className=\"isolate z-50\"\r\n      >\r\n        <ComboboxPrimitive.Popup\r\n          data-slot=\"combobox-content\"\r\n          className={cn(\r\n            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </ComboboxPrimitive.Positioner>\r\n    </ComboboxPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\r\n  return (\r\n    <ComboboxPrimitive.List\r\n      data-slot=\"combobox-list\"\r\n      className={cn('p-1 h-fit w-full', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\r\n  return (\r\n    <ComboboxPrimitive.Item\r\n      data-slot=\"combobox-item\"\r\n      className={cn(\r\n        'relative flex w-full rounded py-1.5 px-2 gap-2 justify-between paragraph-sm items-center',\r\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ComboboxPrimitive.ItemIndicator>\r\n        <CheckIcon className=\"size-4 text-accent-foreground\" />\r\n      </ComboboxPrimitive.ItemIndicator>\r\n    </ComboboxPrimitive.Item>\r\n  );\r\n}\r\n\r\nexport {\r\n  McCombobox,\r\n  McComboboxTrigger,\r\n  McComboboxSearch,\r\n  McComboboxContent,\r\n  McComboboxList,\r\n  McComboboxItem,\r\n  McComboboxValue,\r\n};\r\n",
         type: 'registry:component',
       },
     ],
@@ -2275,7 +2275,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-alert-dialog.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\n\nfunction McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction McAlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <McAlertDialogPortal>\n      <McAlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',\n          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',\n          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',\n          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </McAlertDialogPortal>\n  );\n}\n\nfunction McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',\n        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',\n        'sm:flex-row sm:justify-end',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'flex flex-col items-center gap-1.5 text-center',\n        // responsive alignment adjustments\n        'sm:group-data-[size=default]/alert-dialog-content:items-start',\n        'sm:group-data-[size=default]/alert-dialog-content:text-left',\n\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        ' inline-flex size-6 items-center justify-center ',\n        \"sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogTitle({\n  className,\n  media,\n  icon,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {\n  media?: boolean;\n  icon?: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        ' sm:flex items-center gap-2.5',\n        'group-data-[size=sm]/alert-dialog-content:flex-col'\n      )}\n    >\n      {media && icon && <McAlertDialogMedia className=\"\">{icon}</McAlertDialogMedia>}\n      <AlertDialogPrimitive.Title\n        data-slot=\"alert-dialog-title\"\n        className={cn(\n          'cn-font-heading font-bold font-dm-sans text-[18px] leading-7  text-foreground ',\n          'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction McAlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 ',\n        '*:[a]:hover:text-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\n}\n\nfunction McAlertDialogCancel({\n  className,\n  variant = 'outline',\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn('', className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McAlertDialog,\n  McAlertDialogAction,\n  McAlertDialogCancel,\n  McAlertDialogContent,\n  McAlertDialogDescription,\n  McAlertDialogFooter,\n  McAlertDialogHeader,\n  McAlertDialogMedia,\n  McAlertDialogOverlay,\n  McAlertDialogPortal,\n  McAlertDialogTitle,\n  McAlertDialogTrigger,\n};\n",
+          "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\r\n\r\nimport { cn } from '@/lib/utils';\r\nimport { Button } from '@/components/ui/button';\r\n\r\nfunction McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\r\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\r\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\r\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {\r\n  return (\r\n    <AlertDialogPrimitive.Backdrop\r\n      data-slot=\"alert-dialog-overlay\"\r\n      className={cn(\r\n        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogContent({\r\n  className,\r\n  size = 'default',\r\n  ...props\r\n}: AlertDialogPrimitive.Popup.Props & {\r\n  size?: 'default' | 'sm';\r\n}) {\r\n  return (\r\n    <McAlertDialogPortal>\r\n      <McAlertDialogOverlay />\r\n      <AlertDialogPrimitive.Popup\r\n        data-slot=\"alert-dialog-content\"\r\n        data-size={size}\r\n        className={cn(\r\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',\r\n          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',\r\n          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',\r\n          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </McAlertDialogPortal>\r\n  );\r\n}\r\n\r\nfunction McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-footer\"\r\n      className={cn(\r\n        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',\r\n        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',\r\n        'sm:flex-row sm:justify-end',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-header\"\r\n      className={cn(\r\n        'flex flex-col items-center gap-1.5 text-center',\r\n        // responsive alignment adjustments\r\n        'sm:group-data-[size=default]/alert-dialog-content:items-start',\r\n        'sm:group-data-[size=default]/alert-dialog-content:text-left',\r\n\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-media\"\r\n      className={cn(\r\n        ' inline-flex size-6 items-center justify-center ',\r\n        \"sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogTitle({\r\n  className,\r\n  media,\r\n  icon,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {\r\n  media?: boolean;\r\n  icon?: React.ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        ' sm:flex items-center gap-2.5',\r\n        'group-data-[size=sm]/alert-dialog-content:flex-col'\r\n      )}\r\n    >\r\n      {media && icon && <McAlertDialogMedia className=\"\">{icon}</McAlertDialogMedia>}\r\n      <AlertDialogPrimitive.Title\r\n        data-slot=\"alert-dialog-title\"\r\n        className={cn(\r\n          'cn-font-heading font-bold font-dm-sans text-[18px] leading-7  text-foreground ',\r\n          'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction McAlertDialogDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\r\n  return (\r\n    <AlertDialogPrimitive.Description\r\n      data-slot=\"alert-dialog-description\"\r\n      className={cn(\r\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 ',\r\n        '*:[a]:hover:text-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {\r\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction McAlertDialogCancel({\r\n  className,\r\n  variant = 'outline',\r\n  size = 'default',\r\n  ...props\r\n}: AlertDialogPrimitive.Close.Props &\r\n  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {\r\n  return (\r\n    <AlertDialogPrimitive.Close\r\n      data-slot=\"alert-dialog-cancel\"\r\n      className={cn('', className)}\r\n      render={<Button variant={variant} size={size} />}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McAlertDialog,\r\n  McAlertDialogAction,\r\n  McAlertDialogCancel,\r\n  McAlertDialogContent,\r\n  McAlertDialogDescription,\r\n  McAlertDialogFooter,\r\n  McAlertDialogHeader,\r\n  McAlertDialogMedia,\r\n  McAlertDialogOverlay,\r\n  McAlertDialogPortal,\r\n  McAlertDialogTitle,\r\n  McAlertDialogTrigger,\r\n};\r\n",
         type: 'registry:component',
       },
     ],
@@ -2301,7 +2301,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-sonner.tsx',
         content:
-          "'use client';\n\nimport { Toaster as SonnerComponent, toast as rawToast } from 'sonner';\nimport { CheckCircle2, AlertCircle } from 'lucide-react';\n\ntype ToasterProps = React.ComponentProps<typeof SonnerComponent>;\n\nconst toastIcons = {\n  success: <CheckCircle2 className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\n  warning: <AlertCircle className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\n  error: <AlertCircle className=\"text-muted-foreground  shrink-0 h-3.5 w-3.5\" />,\n};\n\ninterface ToastOptions {\n  description?: string;\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n}\n\nconst mcToastCustom = (\n  message: string,\n  variant?: 'success' | 'warning' | 'error',\n  options?: ToastOptions\n) => {\n  const Icon = variant ? toastIcons[variant] : null;\n\n  return rawToast(\n    <div className=\"w-full h-full flex flex-col items-start justify-center gap-0.5\">\n      <div className=\"flex items-center gap-1.5 w-full max-w-66.5\">\n        {Icon}\n        <span className=\"text-sm font-medium tracking-normal leading-5 text-card-foreground\">\n          {message}\n        </span>\n      </div>\n\n      {options?.description && (\n        <p className=\"text-sm font-normal tracking-normal leading-5 text-muted-foreground max-w-66.5\">\n          {options.description}\n        </p>\n      )}\n    </div>,\n    {\n      action: options?.action,\n    }\n  );\n};\n\nexport const toast = Object.assign(\n  (message: string, options?: ToastOptions) => mcToastCustom(message, undefined, options),\n  {\n    success: (message: string, options?: ToastOptions) =>\n      mcToastCustom(message, 'success', options),\n    warning: (message: string, options?: ToastOptions) =>\n      mcToastCustom(message, 'warning', options),\n    error: (message: string, options?: ToastOptions) => mcToastCustom(message, 'error', options),\n  }\n);\n\nconst McSonner = ({ ...props }: ToasterProps) => {\n  return (\n    <SonnerComponent\n      className=\"\"\n      position=\"top-center\"\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast:\n            'w-97.5 min-h-18.5 bg-background flex items-center justify-between gap-1.5 p-4 border-[1px] rounded-lg shadow-xs border-border',\n          actionButton:\n            'flex items-center justify-center bg-primary text-background text-sm py-2 px-3.5 min-w-15.5 max-w-21.5 min-h-9 rounded-[8px] shadow-xs shrink-0 cursor-pointer',\n        },\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default McSonner;\n",
+          "'use client';\r\n\r\nimport { Toaster as SonnerComponent, toast as rawToast } from 'sonner';\r\nimport { CheckCircle2, AlertCircle } from 'lucide-react';\r\n\r\ntype ToasterProps = React.ComponentProps<typeof SonnerComponent>;\r\n\r\nconst toastIcons = {\r\n  success: <CheckCircle2 className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\r\n  warning: <AlertCircle className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\r\n  error: <AlertCircle className=\"text-muted-foreground  shrink-0 h-3.5 w-3.5\" />,\r\n};\r\n\r\ninterface ToastOptions {\r\n  description?: string;\r\n  action?: {\r\n    label: string;\r\n    onClick: () => void;\r\n  };\r\n}\r\n\r\nconst mcToastCustom = (\r\n  message: string,\r\n  variant?: 'success' | 'warning' | 'error',\r\n  options?: ToastOptions\r\n) => {\r\n  const Icon = variant ? toastIcons[variant] : null;\r\n\r\n  return rawToast(\r\n    <div className=\"w-full h-full flex flex-col items-start justify-center gap-0.5\">\r\n      <div className=\"flex items-center gap-1.5 w-full max-w-66.5\">\r\n        {Icon}\r\n        <span className=\"text-sm font-medium tracking-normal leading-5 text-card-foreground\">\r\n          {message}\r\n        </span>\r\n      </div>\r\n\r\n      {options?.description && (\r\n        <p className=\"text-sm font-normal tracking-normal leading-5 text-muted-foreground max-w-66.5\">\r\n          {options.description}\r\n        </p>\r\n      )}\r\n    </div>,\r\n    {\r\n      action: options?.action,\r\n    }\r\n  );\r\n};\r\n\r\nexport const toast = Object.assign(\r\n  (message: string, options?: ToastOptions) => mcToastCustom(message, undefined, options),\r\n  {\r\n    success: (message: string, options?: ToastOptions) =>\r\n      mcToastCustom(message, 'success', options),\r\n    warning: (message: string, options?: ToastOptions) =>\r\n      mcToastCustom(message, 'warning', options),\r\n    error: (message: string, options?: ToastOptions) => mcToastCustom(message, 'error', options),\r\n  }\r\n);\r\n\r\nconst McSonner = ({ ...props }: ToasterProps) => {\r\n  return (\r\n    <SonnerComponent\r\n      className=\"\"\r\n      position=\"top-center\"\r\n      toastOptions={{\r\n        unstyled: true,\r\n        classNames: {\r\n          toast:\r\n            'w-97.5 min-h-18.5 bg-background flex items-center justify-between gap-1.5 p-4 border-[1px] rounded-lg shadow-xs border-border',\r\n          actionButton:\r\n            'flex items-center justify-center bg-primary text-background text-sm py-2 px-3.5 min-w-15.5 max-w-21.5 min-h-9 rounded-[8px] shadow-xs shrink-0 cursor-pointer',\r\n        },\r\n      }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport default McSonner;\r\n",
         type: 'registry:component',
       },
     ],
@@ -2314,7 +2314,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-tooltip.tsx',
         content:
-          '\'use client\';\n\nimport { Tooltip as TooltipPrimitive } from \'@base-ui/react/tooltip\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;\n}\n\nfunction McTooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;\n}\n\nfunction McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;\n}\n\nfunction McTooltipContent({\n  className,\n  side = \'top\',\n  sideOffset = 4,\n  align = \'center\',\n  alignOffset = 0,\n  children,\n  title,\n  desc,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, \'align\' | \'alignOffset\' | \'side\' | \'sideOffset\'> & {\n    desc?: string;\n    ttitle?: string;\n  }) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className="isolate z-50"\n      >\n        <TooltipPrimitive.Popup\n          data-slot="tooltip-content"\n          className={cn(\n            \'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\',\n            className\n          )}\n          {...props}\n        >\n          <div className=" flex flex-col gap-2 p-4 text-wrap">\n            {title && <p className=" text-foreground text-xs/semi-bold] text-wrap">{title}</p>}\n            {desc && (\n              <p className="text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere">\n                {desc}\n              </p>\n            )}\n          </div>\n          {children}\n          <TooltipPrimitive.Arrow className="z-50 size-4  translate-y-[calc(-50%-2px)]   rounded-xs bg-card-background   data-[side=bottom]:top-0.5  data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=left]:top-1.5 data-[side=left]:-right-1.5 data-[side=left]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=right]:top-1/2 data-[side=right]:-left-[6.80px] data-[side=right]:-translate-y-1/2 data-[side=top]:rotate-180 data-[side=top]:-bottom-4">\n            <svg width="21" height="18" viewBox="0 0 12 6" className="  fill-background">\n              <path d="M0 6L6 0L12 6H0Z" />\n            </svg>\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { McTooltip, McTooltipTrigger, McTooltipContent, McTooltipProvider };\n',
+          '\'use client\';\r\n\r\nimport { Tooltip as TooltipPrimitive } from \'@base-ui/react/tooltip\';\r\n\r\nimport { cn } from \'@/lib/utils\';\r\n\r\nfunction McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\r\n  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;\r\n}\r\n\r\nfunction McTooltip({ ...props }: TooltipPrimitive.Root.Props) {\r\n  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;\r\n}\r\n\r\nfunction McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\r\n  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;\r\n}\r\n\r\nfunction McTooltipContent({\r\n  className,\r\n  side = \'top\',\r\n  sideOffset = 4,\r\n  align = \'center\',\r\n  alignOffset = 0,\r\n  children,\r\n  title,\r\n  desc,\r\n  ...props\r\n}: TooltipPrimitive.Popup.Props &\r\n  Pick<TooltipPrimitive.Positioner.Props, \'align\' | \'alignOffset\' | \'side\' | \'sideOffset\'> & {\r\n    desc?: string;\r\n    ttitle?: string;\r\n  }) {\r\n  return (\r\n    <TooltipPrimitive.Portal>\r\n      <TooltipPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className="isolate z-50"\r\n      >\r\n        <TooltipPrimitive.Popup\r\n          data-slot="tooltip-content"\r\n          className={cn(\r\n            \'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\',\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          <div className=" flex flex-col gap-2 p-4 text-wrap">\r\n            {title && <p className=" text-foreground text-xs/semi-bold] text-wrap">{title}</p>}\r\n            {desc && (\r\n              <p className="text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere">\r\n                {desc}\r\n              </p>\r\n            )}\r\n          </div>\r\n          {children}\r\n          <TooltipPrimitive.Arrow className="z-50 size-4  translate-y-[calc(-50%-2px)]   rounded-xs bg-card-background   data-[side=bottom]:top-0.5  data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=left]:top-1.5 data-[side=left]:-right-1.5 data-[side=left]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=right]:top-1/2 data-[side=right]:-left-[6.80px] data-[side=right]:-translate-y-1/2 data-[side=top]:rotate-180 data-[side=top]:-bottom-4">\r\n            <svg width="21" height="18" viewBox="0 0 12 6" className="  fill-background">\r\n              <path d="M0 6L6 0L12 6H0Z" />\r\n            </svg>\r\n          </TooltipPrimitive.Arrow>\r\n        </TooltipPrimitive.Popup>\r\n      </TooltipPrimitive.Positioner>\r\n    </TooltipPrimitive.Portal>\r\n  );\r\n}\r\n\r\nexport { McTooltip, McTooltipTrigger, McTooltipContent, McTooltipProvider };\r\n',
         type: 'registry:component',
       },
     ],
@@ -2327,7 +2327,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-popover.tsx',
         content:
-          "'use client';\nimport * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { cn } from '@/lib/utils';\nfunction McPopover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\nfunction McPopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\nfunction McPopoverContent({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 23,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex h-[268px] w-[276px] origin-(--transform-origin) flex-col gap-[13px] rounded-lg bg-card p-4 text-sm text-card-foreground shadow-sm outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction McPopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-[9px] text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\n        'font-plus-jakarta-sans text-left text-[20px] leading-[30px] font-medium tracking-[0] text-card-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nfunction McPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\n        'font-dm-sans text-left text-[14px] leading-[20px] font-normal tracking-[0] text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nexport {\n  McPopover,\n  McPopoverContent,\n  McPopoverDescription,\n  McPopoverHeader,\n  McPopoverTitle,\n  McPopoverTrigger,\n};\n",
+          "'use client';\r\nimport * as React from 'react';\r\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\r\nimport { cn } from '@/lib/utils';\r\nfunction McPopover({ ...props }: PopoverPrimitive.Root.Props) {\r\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\r\n}\r\nfunction McPopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\r\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\r\n}\r\nfunction McPopoverContent({\r\n  className,\r\n  align = 'center',\r\n  alignOffset = 0,\r\n  side = 'bottom',\r\n  sideOffset = 23,\r\n  ...props\r\n}: PopoverPrimitive.Popup.Props &\r\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\r\n  return (\r\n    <PopoverPrimitive.Portal>\r\n      <PopoverPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className=\"isolate z-50\"\r\n      >\r\n        <PopoverPrimitive.Popup\r\n          data-slot=\"popover-content\"\r\n          className={cn(\r\n            'z-50 flex h-[268px] w-[276px] origin-(--transform-origin) flex-col gap-[13px] rounded-lg bg-card p-4 text-sm text-card-foreground shadow-sm outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </PopoverPrimitive.Positioner>\r\n    </PopoverPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McPopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"popover-header\"\r\n      className={cn('flex flex-col gap-[9px] text-sm', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\r\n  return (\r\n    <PopoverPrimitive.Title\r\n      data-slot=\"popover-title\"\r\n      className={cn(\r\n        'font-plus-jakarta-sans text-left text-[20px] leading-[30px] font-medium tracking-[0] text-card-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nfunction McPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\r\n  return (\r\n    <PopoverPrimitive.Description\r\n      data-slot=\"popover-description\"\r\n      className={cn(\r\n        'font-dm-sans text-left text-[14px] leading-[20px] font-normal tracking-[0] text-muted-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nexport {\r\n  McPopover,\r\n  McPopoverContent,\r\n  McPopoverDescription,\r\n  McPopoverHeader,\r\n  McPopoverTitle,\r\n  McPopoverTrigger,\r\n};\r\n",
         type: 'registry:component',
       },
     ],
@@ -2340,7 +2340,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-dropdown-menu.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction McDropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction McDropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction McDropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction McDropdownMenuContent({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground opacity-100 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction McDropdownMenuGroup({\n  className,\n  ...props\n}: MenuPrimitive.Group.Props & { className?: string }) {\n  return (\n    <MenuPrimitive.Group\n      data-slot=\"dropdown-menu-group\"\n      className={cn('w-56 h-[100px] opacity-100 pt-1 px-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'font-sans font-semibold text-sm leading-5 px-1.5 py-1 text-foreground data-inset:pl-7',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex cursor-default items-center gap-2 w-[208px] h-8 opacity-100 rounded-sm px-2 py-1.5 font-sans font-normal text-sm leading-5 outline-hidden select-none data-inset:pl-7 hover:bg-muted hover:text-muted-foreground focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction McDropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction McDropdownMenuSubContent({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof McDropdownMenuContent>) {\n  return (\n    <McDropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex w-[216px] h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-sm leading-5 font-normal text-muted-foreground outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none mr-2 flex items-center justify-center w-4\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      <span className=\"truncate\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction McDropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction McDropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      <span>{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction McDropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McDropdownMenu,\n  McDropdownMenuPortal,\n  McDropdownMenuTrigger,\n  McDropdownMenuContent,\n  McDropdownMenuGroup,\n  McDropdownMenuLabel,\n  McDropdownMenuItem,\n  McDropdownMenuCheckboxItem,\n  McDropdownMenuRadioGroup,\n  McDropdownMenuRadioItem,\n  McDropdownMenuSeparator,\n  McDropdownMenuShortcut,\n  McDropdownMenuSub,\n  McDropdownMenuSubTrigger,\n  McDropdownMenuSubContent,\n};\n",
+          "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\r\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McDropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\r\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\r\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\r\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuContent({\r\n  align = 'start',\r\n  alignOffset = 0,\r\n  side = 'bottom',\r\n  sideOffset = 4,\r\n  className,\r\n  ...props\r\n}: MenuPrimitive.Popup.Props &\r\n  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\r\n  return (\r\n    <MenuPrimitive.Portal>\r\n      <MenuPrimitive.Positioner\r\n        className=\"isolate z-50 outline-none\"\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n      >\r\n        <MenuPrimitive.Popup\r\n          data-slot=\"dropdown-menu-content\"\r\n          className={cn(\r\n            'z-50 w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground opacity-100 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </MenuPrimitive.Positioner>\r\n    </MenuPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuGroup({\r\n  className,\r\n  ...props\r\n}: MenuPrimitive.Group.Props & { className?: string }) {\r\n  return (\r\n    <MenuPrimitive.Group\r\n      data-slot=\"dropdown-menu-group\"\r\n      className={cn('w-56 h-[100px] opacity-100 pt-1 px-1', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuLabel({\r\n  className,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.GroupLabel.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.GroupLabel\r\n      data-slot=\"dropdown-menu-label\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        'font-sans font-semibold text-sm leading-5 px-1.5 py-1 text-foreground data-inset:pl-7',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuItem({\r\n  className,\r\n  inset,\r\n  variant = 'default',\r\n  ...props\r\n}: MenuPrimitive.Item.Props & {\r\n  inset?: boolean;\r\n  variant?: 'default' | 'destructive';\r\n}) {\r\n  return (\r\n    <MenuPrimitive.Item\r\n      data-slot=\"dropdown-menu-item\"\r\n      data-inset={inset}\r\n      data-variant={variant}\r\n      className={cn(\r\n        'group/dropdown-menu-item relative flex cursor-default items-center gap-2 w-[208px] h-8 opacity-100 rounded-sm px-2 py-1.5 font-sans font-normal text-sm leading-5 outline-hidden select-none data-inset:pl-7 hover:bg-muted hover:text-muted-foreground focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\r\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuSubTrigger({\r\n  className,\r\n  inset,\r\n  children,\r\n  ...props\r\n}: MenuPrimitive.SubmenuTrigger.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.SubmenuTrigger\r\n      data-slot=\"dropdown-menu-sub-trigger\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\r\n    </MenuPrimitive.SubmenuTrigger>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSubContent({\r\n  align = 'start',\r\n  alignOffset = -3,\r\n  side = 'right',\r\n  sideOffset = 0,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof McDropdownMenuContent>) {\r\n  return (\r\n    <McDropdownMenuContent\r\n      data-slot=\"dropdown-menu-sub-content\"\r\n      className={cn(\r\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n        className\r\n      )}\r\n      align={align}\r\n      alignOffset={alignOffset}\r\n      side={side}\r\n      sideOffset={sideOffset}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuCheckboxItem({\r\n  className,\r\n  children,\r\n  checked,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.CheckboxItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.CheckboxItem\r\n      data-slot=\"dropdown-menu-checkbox-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        'relative flex w-[216px] h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-sm leading-5 font-normal text-muted-foreground outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\r\n        className\r\n      )}\r\n      checked={checked}\r\n      {...props}\r\n    >\r\n      <span\r\n        className=\"pointer-events-none mr-2 flex items-center justify-center w-4\"\r\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\r\n      >\r\n        <MenuPrimitive.CheckboxItemIndicator>\r\n          <CheckIcon />\r\n        </MenuPrimitive.CheckboxItemIndicator>\r\n      </span>\r\n      <span className=\"truncate\">{children}</span>\r\n    </MenuPrimitive.CheckboxItem>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\r\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuRadioItem({\r\n  className,\r\n  children,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.RadioItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.RadioItem\r\n      data-slot=\"dropdown-menu-radio-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span\r\n        className=\"pointer-events-none flex items-center justify-center\"\r\n        data-slot=\"dropdown-menu-radio-item-indicator\"\r\n      >\r\n        <MenuPrimitive.RadioItemIndicator>\r\n          <CheckIcon />\r\n        </MenuPrimitive.RadioItemIndicator>\r\n      </span>\r\n      <span>{children}</span>\r\n    </MenuPrimitive.RadioItem>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\r\n  return (\r\n    <MenuPrimitive.Separator\r\n      data-slot=\"dropdown-menu-separator\"\r\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\r\n  return (\r\n    <span\r\n      data-slot=\"dropdown-menu-shortcut\"\r\n      className={cn(\r\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McDropdownMenu,\r\n  McDropdownMenuPortal,\r\n  McDropdownMenuTrigger,\r\n  McDropdownMenuContent,\r\n  McDropdownMenuGroup,\r\n  McDropdownMenuLabel,\r\n  McDropdownMenuItem,\r\n  McDropdownMenuCheckboxItem,\r\n  McDropdownMenuRadioGroup,\r\n  McDropdownMenuRadioItem,\r\n  McDropdownMenuSeparator,\r\n  McDropdownMenuShortcut,\r\n  McDropdownMenuSub,\r\n  McDropdownMenuSubTrigger,\r\n  McDropdownMenuSubContent,\r\n};\r\n",
         type: 'registry:component',
       },
     ],
@@ -2353,7 +2353,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-context-menu.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { ContextMenu as ContextMenuPrimitive } from \'@base-ui/react/context-menu\';\nimport { CheckIcon, ChevronRightIcon } from \'lucide-react\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;\n}\n\nfunction McContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;\n}\n\nfunction McContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot="context-menu-trigger"\n      className={cn(\'select-none\', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuContent({\n  className,\n  align = \'start\',\n  alignOffset = 4,\n  side = \'right\',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<ContextMenuPrimitive.Positioner.Props, \'align\' | \'alignOffset\' | \'side\' | \'sideOffset\'>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className="isolate z-50 outline-none"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot="context-menu-content"\n          className={cn(\n            \'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\',\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction McContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;\n}\n\nfunction McContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot="context-menu-label"\n      data-inset={inset}\n      className={cn(\n        \'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuItem({\n  className,\n  inset,\n  variant = \'default\',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \'default\' | \'destructive\';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot="context-menu-item"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;\n}\n\nfunction McContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot="context-menu-sub-trigger"\n      data-inset={inset}\n      className={cn(\n        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className="cn-rtl-flip ml-auto" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction McContextMenuSubContent({ ...props }: React.ComponentProps<typeof McContextMenuContent>) {\n  return (\n    <McContextMenuContent\n      data-slot="context-menu-sub-content"\n      className="shadow-lg"\n      side="right"\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot="context-menu-checkbox-item"\n      data-inset={inset}\n      className={cn(\n        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className="pointer-events-none absolute right-2">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction McContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {\n  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;\n}\n\nfunction McContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot="context-menu-radio-item"\n      data-inset={inset}\n      className={cn(\n        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\n        className\n      )}\n      {...props}\n    >\n      <span className="pointer-events-none absolute right-2">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction McContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot="context-menu-separator"\n      className={cn(\'-mx-1 my-1 h-px bg-border\', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuShortcut({ className, ...props }: React.ComponentProps<\'span\'>) {\n  return (\n    <span\n      data-slot="context-menu-shortcut"\n      className={cn(\n        \'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McContextMenu,\n  McContextMenuTrigger,\n  McContextMenuContent,\n  McContextMenuItem,\n  McContextMenuCheckboxItem,\n  McContextMenuRadioItem,\n  McContextMenuLabel,\n  McContextMenuSeparator,\n  McContextMenuShortcut,\n  McContextMenuGroup,\n  McContextMenuPortal,\n  McContextMenuSub,\n  McContextMenuSubContent,\n  McContextMenuSubTrigger,\n  McContextMenuRadioGroup,\n};\n',
+          '\'use client\';\r\n\r\nimport * as React from \'react\';\r\nimport { ContextMenu as ContextMenuPrimitive } from \'@base-ui/react/context-menu\';\r\nimport { CheckIcon, ChevronRightIcon } from \'lucide-react\';\r\n\r\nimport { cn } from \'@/lib/utils\';\r\n\r\nfunction McContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\r\n  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;\r\n}\r\n\r\nfunction McContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\r\n  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;\r\n}\r\n\r\nfunction McContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {\r\n  return (\r\n    <ContextMenuPrimitive.Trigger\r\n      data-slot="context-menu-trigger"\r\n      className={cn(\'select-none\', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuContent({\r\n  className,\r\n  align = \'start\',\r\n  alignOffset = 4,\r\n  side = \'right\',\r\n  sideOffset = 0,\r\n  ...props\r\n}: ContextMenuPrimitive.Popup.Props &\r\n  Pick<ContextMenuPrimitive.Positioner.Props, \'align\' | \'alignOffset\' | \'side\' | \'sideOffset\'>) {\r\n  return (\r\n    <ContextMenuPrimitive.Portal>\r\n      <ContextMenuPrimitive.Positioner\r\n        className="isolate z-50 outline-none"\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n      >\r\n        <ContextMenuPrimitive.Popup\r\n          data-slot="context-menu-content"\r\n          className={cn(\r\n            \'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </ContextMenuPrimitive.Positioner>\r\n    </ContextMenuPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\r\n  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;\r\n}\r\n\r\nfunction McContextMenuLabel({\r\n  className,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.GroupLabel.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.GroupLabel\r\n      data-slot="context-menu-label"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuItem({\r\n  className,\r\n  inset,\r\n  variant = \'default\',\r\n  ...props\r\n}: ContextMenuPrimitive.Item.Props & {\r\n  inset?: boolean;\r\n  variant?: \'default\' | \'destructive\';\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.Item\r\n      data-slot="context-menu-item"\r\n      data-inset={inset}\r\n      data-variant={variant}\r\n      className={cn(\r\n        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\r\n  return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;\r\n}\r\n\r\nfunction McContextMenuSubTrigger({\r\n  className,\r\n  inset,\r\n  children,\r\n  ...props\r\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.SubmenuTrigger\r\n      data-slot="context-menu-sub-trigger"\r\n      data-inset={inset}\r\n      className={cn(\r\n        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ChevronRightIcon className="cn-rtl-flip ml-auto" />\r\n    </ContextMenuPrimitive.SubmenuTrigger>\r\n  );\r\n}\r\n\r\nfunction McContextMenuSubContent({ ...props }: React.ComponentProps<typeof McContextMenuContent>) {\r\n  return (\r\n    <McContextMenuContent\r\n      data-slot="context-menu-sub-content"\r\n      className="shadow-lg"\r\n      side="right"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuCheckboxItem({\r\n  className,\r\n  children,\r\n  checked,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.CheckboxItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.CheckboxItem\r\n      data-slot="context-menu-checkbox-item"\r\n      data-inset={inset}\r\n      className={cn(\r\n        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\r\n        className\r\n      )}\r\n      checked={checked}\r\n      {...props}\r\n    >\r\n      <span className="pointer-events-none absolute right-2">\r\n        <ContextMenuPrimitive.CheckboxItemIndicator>\r\n          <CheckIcon />\r\n        </ContextMenuPrimitive.CheckboxItemIndicator>\r\n      </span>\r\n      {children}\r\n    </ContextMenuPrimitive.CheckboxItem>\r\n  );\r\n}\r\n\r\nfunction McContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {\r\n  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;\r\n}\r\n\r\nfunction McContextMenuRadioItem({\r\n  className,\r\n  children,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.RadioItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.RadioItem\r\n      data-slot="context-menu-radio-item"\r\n      data-inset={inset}\r\n      className={cn(\r\n        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span className="pointer-events-none absolute right-2">\r\n        <ContextMenuPrimitive.RadioItemIndicator>\r\n          <CheckIcon />\r\n        </ContextMenuPrimitive.RadioItemIndicator>\r\n      </span>\r\n      {children}\r\n    </ContextMenuPrimitive.RadioItem>\r\n  );\r\n}\r\n\r\nfunction McContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {\r\n  return (\r\n    <ContextMenuPrimitive.Separator\r\n      data-slot="context-menu-separator"\r\n      className={cn(\'-mx-1 my-1 h-px bg-border\', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuShortcut({ className, ...props }: React.ComponentProps<\'span\'>) {\r\n  return (\r\n    <span\r\n      data-slot="context-menu-shortcut"\r\n      className={cn(\r\n        \'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McContextMenu,\r\n  McContextMenuTrigger,\r\n  McContextMenuContent,\r\n  McContextMenuItem,\r\n  McContextMenuCheckboxItem,\r\n  McContextMenuRadioItem,\r\n  McContextMenuLabel,\r\n  McContextMenuSeparator,\r\n  McContextMenuShortcut,\r\n  McContextMenuGroup,\r\n  McContextMenuPortal,\r\n  McContextMenuSub,\r\n  McContextMenuSubContent,\r\n  McContextMenuSubTrigger,\r\n  McContextMenuRadioGroup,\r\n};\r\n',
         type: 'registry:component',
       },
     ],
@@ -2366,7 +2366,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-accordion.tsx',
         content:
-          'import { Accordion as AccordionPrimitive } from \'@base-ui/react/accordion\';\nimport { ChevronDownIcon, ChevronUpIcon } from \'lucide-react\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot="accordion"\n      className={cn(\'flex w-[503px] flex-col\', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot="accordion-item"\n      className={cn(\'not-last:border-b\', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className="flex">\n      <AccordionPrimitive.Trigger\n        data-slot="accordion-trigger"\n        className={cn(\n          \'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot="accordion-trigger-icon"\n          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"\n        />\n        <ChevronUpIcon\n          data-slot="accordion-trigger-icon"\n          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot="accordion-content"\n      className="paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up"\n      {...props}\n    >\n      <div\n        className={cn(\n          \'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\',\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  );\n}\n\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\n',
+          'import { Accordion as AccordionPrimitive } from \'@base-ui/react/accordion\';\r\nimport { ChevronDownIcon, ChevronUpIcon } from \'lucide-react\';\r\n\r\nimport { cn } from \'@/lib/utils\';\r\n\r\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot="accordion"\r\n      className={cn(\'flex w-[503px] flex-col\', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot="accordion-item"\r\n      className={cn(\'not-last:border-b\', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\r\n  return (\r\n    <AccordionPrimitive.Header className="flex">\r\n      <AccordionPrimitive.Trigger\r\n        data-slot="accordion-trigger"\r\n        className={cn(\r\n          \'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n        <ChevronDownIcon\r\n          data-slot="accordion-trigger-icon"\r\n          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"\r\n        />\r\n        <ChevronUpIcon\r\n          data-slot="accordion-trigger-icon"\r\n          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"\r\n        />\r\n      </AccordionPrimitive.Trigger>\r\n    </AccordionPrimitive.Header>\r\n  );\r\n}\r\n\r\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\r\n  return (\r\n    <AccordionPrimitive.Panel\r\n      data-slot="accordion-content"\r\n      className="paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up"\r\n      {...props}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\',\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AccordionPrimitive.Panel>\r\n  );\r\n}\r\n\r\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\r\n',
         type: 'registry:component',
       },
     ],
@@ -2392,7 +2392,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-scrollarea.tsx',
         content:
-          '\'use client\';\n\nimport { ScrollArea as ScrollAreaPrimitive } from \'@base-ui/react/scroll-area\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McScrollArea({\n  className,\n  children,\n  title,\n  desc,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot="scroll-area"\n      className={cn(\'relative  rounded-md ring-1 ring-inset ring-border bg-background\', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className=" size-full">\n        {title && (\n          <div className=" mb-4 mt-4 ml-4 gap-2.5 size-fit">\n            <p className=" font-dm-sans text-4 text-foreground text-normal">{title}</p>\n          </div>\n        )}\n        {desc && (\n          <div className="mx-4  flex flex-col gap-2.5 size-fit">\n            {desc.map((line, i) => (\n              <div key={i} className="px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5">\n                <p className="">{line}</p>\n              </div>\n            ))}\n          </div>\n        )}\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <McScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction McScrollBar({\n  className,\n  orientation = \'vertical\',\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot="scroll-area-scrollbar"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \'flex touch-none p-px transition-colors select-none \' +\n          \' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3\' +\n          \' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot="scroll-area-thumb"\n        className="relative flex-1 rounded-full bg-border"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { McScrollArea, McScrollBar };\n',
+          '\'use client\';\r\n\r\nimport { ScrollArea as ScrollAreaPrimitive } from \'@base-ui/react/scroll-area\';\r\n\r\nimport { cn } from \'@/lib/utils\';\r\n\r\nfunction McScrollArea({\r\n  className,\r\n  children,\r\n  title,\r\n  desc,\r\n  ...props\r\n}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {\r\n  return (\r\n    <ScrollAreaPrimitive.Root\r\n      data-slot="scroll-area"\r\n      className={cn(\'relative  rounded-md ring-1 ring-inset ring-border bg-background\', className)}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className=" size-full">\r\n        {title && (\r\n          <div className=" mb-4 mt-4 ml-4 gap-2.5 size-fit">\r\n            <p className=" font-dm-sans text-4 text-foreground text-normal">{title}</p>\r\n          </div>\r\n        )}\r\n        {desc && (\r\n          <div className="mx-4  flex flex-col gap-2.5 size-fit">\r\n            {desc.map((line, i) => (\r\n              <div key={i} className="px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5">\r\n                <p className="">{line}</p>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n        {children}\r\n      </ScrollAreaPrimitive.Viewport>\r\n      <McScrollBar />\r\n      <ScrollAreaPrimitive.Corner />\r\n    </ScrollAreaPrimitive.Root>\r\n  );\r\n}\r\n\r\nfunction McScrollBar({\r\n  className,\r\n  orientation = \'vertical\',\r\n  ...props\r\n}: ScrollAreaPrimitive.Scrollbar.Props) {\r\n  return (\r\n    <ScrollAreaPrimitive.Scrollbar\r\n      data-slot="scroll-area-scrollbar"\r\n      data-orientation={orientation}\r\n      orientation={orientation}\r\n      className={cn(\r\n        \'flex touch-none p-px transition-colors select-none \' +\r\n          \' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3\' +\r\n          \' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Thumb\r\n        data-slot="scroll-area-thumb"\r\n        className="relative flex-1 rounded-full bg-border"\r\n      />\r\n    </ScrollAreaPrimitive.Scrollbar>\r\n  );\r\n}\r\n\r\nexport { McScrollArea, McScrollBar };\r\n',
         type: 'registry:component',
       },
     ],
@@ -2418,7 +2418,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-badge.tsx',
         content:
-          "import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cloneElement, isValidElement } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst McBadgeVariants = cva(\n  'group/badge inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[16px] border border-[#E6E9FF] text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:self-center',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n        destructive:\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n        leading: 'bg-accent-foreground text-accent',\n      },\n      size: {\n        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',\n        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',\n        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'sm',\n    },\n  }\n);\n\nfunction McBadge({\n  className,\n  variant = 'default',\n  size = 'sm',\n  render,\n  icon,\n  iconPosition = 'start',\n  iconOnly = false,\n  image,\n  imageAlt = '',\n  imagePosition = 'start',\n  leadingBadge,\n  leadingBadgePosition = 'start',\n  leadingBadgeIcon,\n  groupSize = 'md',\n  children,\n  ...props\n}: useRender.ComponentProps<'span'> &\n  VariantProps<typeof McBadgeVariants> & {\n    icon?: ReactNode;\n    iconPosition?: 'start' | 'end';\n    iconOnly?: boolean;\n    image?: string;\n    imageAlt?: string;\n    imagePosition?: 'start' | 'end';\n    leadingBadge?: ReactNode;\n    leadingBadgePosition?: 'start' | 'end';\n    leadingBadgeIcon?: ReactNode;\n    groupSize?: 'md' | 'lg';\n  }) {\n  const groupSizeClasses = {\n    md: 'h-[30px] leading-[22px]',\n    lg: 'h-[36px] leading-[26px]',\n  } as const;\n  const groupChildSize = groupSize === 'md' ? 'groupMd' : 'groupLg';\n\n  const imageEl = image ? (\n    <img src={image} alt={imageAlt} className=\"size-4 shrink-0 rounded-full object-cover\" />\n  ) : null;\n\n  const useParentIcon = !leadingBadge || leadingBadgePosition === 'start';\n  const rawIcon = useParentIcon ? icon : undefined;\n  const parentIcon = rawIcon ? (\n    <span style={{ display: 'contents', pointerEvents: 'none' }}>\n      <span\n        style={{\n          width: 12,\n          height: 12,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n        }}\n      >\n        {rawIcon}\n      </span>\n    </span>\n  ) : undefined;\n\n  const parentIconPlacement = parentIcon\n    ? iconPosition === 'end'\n      ? 'inline-end'\n      : 'inline-start'\n    : undefined;\n\n  const contentWithIcon = parentIcon ? (\n    iconPosition === 'end' ? (\n      <>\n        {children}\n        {parentIcon}\n      </>\n    ) : (\n      <>\n        {parentIcon}\n        {children}\n      </>\n    )\n  ) : (\n    children\n  );\n\n  const content = imageEl ? (\n    imagePosition === 'end' ? (\n      <>\n        {contentWithIcon}\n        {imageEl}\n      </>\n    ) : (\n      <>\n        {imageEl}\n        {contentWithIcon}\n      </>\n    )\n  ) : (\n    contentWithIcon\n  );\n\n  const resolvedLeadingBadge = leadingBadge ? (\n    isValidElement(leadingBadge) ? (\n      cloneElement(leadingBadge as React.ReactElement<Record<string, unknown>>, {\n        size: groupChildSize,\n        variant: 'leading', // ← forcé\n        icon: leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined,\n        iconPosition: 'end',\n      })\n    ) : (\n      <McBadge\n        size={groupChildSize}\n        variant=\"leading\" // ← forcé\n        icon={leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined}\n        iconPosition=\"end\"\n      >\n        {leadingBadge}\n      </McBadge>\n    )\n  ) : null;\n\n  const groupedContent = resolvedLeadingBadge ? (\n    leadingBadgePosition === 'end' ? (\n      <div className=\"flex items-center gap-3\">\n        {content}\n        {resolvedLeadingBadge}\n      </div>\n    ) : (\n      <div className=\"flex items-center gap-3\">\n        {resolvedLeadingBadge}\n        {content}\n      </div>\n    )\n  ) : (\n    content\n  );\n\n  const dataIconProps = parentIconPlacement\n    ? ({ 'data-icon': parentIconPlacement } as Record<string, string>)\n    : undefined;\n\n  const iconOnlyClasses = iconOnly ? 'min-w-0 px-1.5' : undefined;\n\n  const imagePaddingClasses = image\n    ? imagePosition === 'start'\n      ? 'pl-[3px]'\n      : 'pr-[3px]'\n    : undefined;\n\n  const groupPaddingClasses = resolvedLeadingBadge\n    ? leadingBadgePosition === 'start'\n      ? 'pl-1 pr-[10px]'\n      : 'pl-[10px] pr-1'\n    : undefined;\n\n  return useRender({\n    defaultTagName: 'span',\n    props: mergeProps<'span'>(\n      {\n        className: cn(\n          McBadgeVariants({ variant, size }),\n          leadingBadge ? groupSizeClasses[groupSize] : undefined,\n          iconOnlyClasses,\n          imagePaddingClasses,\n          groupPaddingClasses,\n          className\n        ),\n        ...(dataIconProps ?? {}),\n        children: groupedContent,\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'badge',\n      variant,\n      size,\n    },\n  });\n}\n\nexport { McBadge, McBadgeVariants };\n",
+          "import { mergeProps } from '@base-ui/react/merge-props';\r\nimport { useRender } from '@base-ui/react/use-render';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport type { ReactNode } from 'react';\r\nimport { cloneElement, isValidElement } from 'react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst McBadgeVariants = cva(\r\n  'group/badge inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[16px] border border-[#E6E9FF] text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:self-center',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',\r\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\r\n        destructive:\r\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\r\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\r\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\r\n        leading: 'bg-accent-foreground text-accent',\r\n      },\r\n      size: {\r\n        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\r\n        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',\r\n        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',\r\n        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\r\n        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'default',\r\n      size: 'sm',\r\n    },\r\n  }\r\n);\r\n\r\nfunction McBadge({\r\n  className,\r\n  variant = 'default',\r\n  size = 'sm',\r\n  render,\r\n  icon,\r\n  iconPosition = 'start',\r\n  iconOnly = false,\r\n  image,\r\n  imageAlt = '',\r\n  imagePosition = 'start',\r\n  leadingBadge,\r\n  leadingBadgePosition = 'start',\r\n  leadingBadgeIcon,\r\n  groupSize = 'md',\r\n  children,\r\n  ...props\r\n}: useRender.ComponentProps<'span'> &\r\n  VariantProps<typeof McBadgeVariants> & {\r\n    icon?: ReactNode;\r\n    iconPosition?: 'start' | 'end';\r\n    iconOnly?: boolean;\r\n    image?: string;\r\n    imageAlt?: string;\r\n    imagePosition?: 'start' | 'end';\r\n    leadingBadge?: ReactNode;\r\n    leadingBadgePosition?: 'start' | 'end';\r\n    leadingBadgeIcon?: ReactNode;\r\n    groupSize?: 'md' | 'lg';\r\n  }) {\r\n  const groupSizeClasses = {\r\n    md: 'h-[30px] leading-[22px]',\r\n    lg: 'h-[36px] leading-[26px]',\r\n  } as const;\r\n  const groupChildSize = groupSize === 'md' ? 'groupMd' : 'groupLg';\r\n\r\n  const imageEl = image ? (\r\n    <img src={image} alt={imageAlt} className=\"size-4 shrink-0 rounded-full object-cover\" />\r\n  ) : null;\r\n\r\n  const useParentIcon = !leadingBadge || leadingBadgePosition === 'start';\r\n  const rawIcon = useParentIcon ? icon : undefined;\r\n  const parentIcon = rawIcon ? (\r\n    <span style={{ display: 'contents', pointerEvents: 'none' }}>\r\n      <span\r\n        style={{\r\n          width: 12,\r\n          height: 12,\r\n          display: 'inline-flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          flexShrink: 0,\r\n        }}\r\n      >\r\n        {rawIcon}\r\n      </span>\r\n    </span>\r\n  ) : undefined;\r\n\r\n  const parentIconPlacement = parentIcon\r\n    ? iconPosition === 'end'\r\n      ? 'inline-end'\r\n      : 'inline-start'\r\n    : undefined;\r\n\r\n  const contentWithIcon = parentIcon ? (\r\n    iconPosition === 'end' ? (\r\n      <>\r\n        {children}\r\n        {parentIcon}\r\n      </>\r\n    ) : (\r\n      <>\r\n        {parentIcon}\r\n        {children}\r\n      </>\r\n    )\r\n  ) : (\r\n    children\r\n  );\r\n\r\n  const content = imageEl ? (\r\n    imagePosition === 'end' ? (\r\n      <>\r\n        {contentWithIcon}\r\n        {imageEl}\r\n      </>\r\n    ) : (\r\n      <>\r\n        {imageEl}\r\n        {contentWithIcon}\r\n      </>\r\n    )\r\n  ) : (\r\n    contentWithIcon\r\n  );\r\n\r\n  const resolvedLeadingBadge = leadingBadge ? (\r\n    isValidElement(leadingBadge) ? (\r\n      cloneElement(leadingBadge as React.ReactElement<Record<string, unknown>>, {\r\n        size: groupChildSize,\r\n        variant: 'leading', // ← forcé\r\n        icon: leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined,\r\n        iconPosition: 'end',\r\n      })\r\n    ) : (\r\n      <McBadge\r\n        size={groupChildSize}\r\n        variant=\"leading\" // ← forcé\r\n        icon={leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined}\r\n        iconPosition=\"end\"\r\n      >\r\n        {leadingBadge}\r\n      </McBadge>\r\n    )\r\n  ) : null;\r\n\r\n  const groupedContent = resolvedLeadingBadge ? (\r\n    leadingBadgePosition === 'end' ? (\r\n      <div className=\"flex items-center gap-3\">\r\n        {content}\r\n        {resolvedLeadingBadge}\r\n      </div>\r\n    ) : (\r\n      <div className=\"flex items-center gap-3\">\r\n        {resolvedLeadingBadge}\r\n        {content}\r\n      </div>\r\n    )\r\n  ) : (\r\n    content\r\n  );\r\n\r\n  const dataIconProps = parentIconPlacement\r\n    ? ({ 'data-icon': parentIconPlacement } as Record<string, string>)\r\n    : undefined;\r\n\r\n  const iconOnlyClasses = iconOnly ? 'min-w-0 px-1.5' : undefined;\r\n\r\n  const imagePaddingClasses = image\r\n    ? imagePosition === 'start'\r\n      ? 'pl-[3px]'\r\n      : 'pr-[3px]'\r\n    : undefined;\r\n\r\n  const groupPaddingClasses = resolvedLeadingBadge\r\n    ? leadingBadgePosition === 'start'\r\n      ? 'pl-1 pr-[10px]'\r\n      : 'pl-[10px] pr-1'\r\n    : undefined;\r\n\r\n  return useRender({\r\n    defaultTagName: 'span',\r\n    props: mergeProps<'span'>(\r\n      {\r\n        className: cn(\r\n          McBadgeVariants({ variant, size }),\r\n          leadingBadge ? groupSizeClasses[groupSize] : undefined,\r\n          iconOnlyClasses,\r\n          imagePaddingClasses,\r\n          groupPaddingClasses,\r\n          className\r\n        ),\r\n        ...(dataIconProps ?? {}),\r\n        children: groupedContent,\r\n      },\r\n      props\r\n    ),\r\n    render,\r\n    state: {\r\n      slot: 'badge',\r\n      variant,\r\n      size,\r\n    },\r\n  });\r\n}\r\n\r\nexport { McBadge, McBadgeVariants };\r\n",
         type: 'registry:component',
       },
     ],
@@ -2431,7 +2431,7 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-avatar.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nfunction McAvatar({\n  className,\n  size = 'default',\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',\n        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',\n        ' ring-1 ring-border ring-inset ',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full rounded-full object-cover ', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',\n        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',\n        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',\n        'group-data-[size=2xl]/avatar:size-4 group-data-[size=2xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=xs]/avatar:size-2.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=md]/avatar:size-3.5 group-data-[size=md]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=lg]/avatar:size-4 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=xl]/avatar:size-4.5 group-data-[size=xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=2xl]/avatar:size-5 group-data-[size=2xl]/avatar:[&>svg]:size-3.5',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McAvatar,\n  McAvatarImage,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarBadge,\n};\n",
+          "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McAvatar({\r\n  className,\r\n  size = 'default',\r\n  ...props\r\n}: AvatarPrimitive.Root.Props & {\r\n  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n}) {\r\n  return (\r\n    <AvatarPrimitive.Root\r\n      data-slot=\"avatar\"\r\n      data-size={size}\r\n      className={cn(\r\n        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',\r\n        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',\r\n        ' ring-1 ring-border ring-inset ',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\r\n  return (\r\n    <AvatarPrimitive.Image\r\n      data-slot=\"avatar-image\"\r\n      className={cn('aspect-square size-full rounded-full object-cover ', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\r\n  return (\r\n    <AvatarPrimitive.Fallback\r\n      data-slot=\"avatar-fallback\"\r\n      className={cn(\r\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',\r\n        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\r\n  return (\r\n    <span\r\n      data-slot=\"avatar-badge\"\r\n      className={cn(\r\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',\r\n        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\r\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\r\n        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',\r\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\r\n        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',\r\n        'group-data-[size=2xl]/avatar:size-4 group-data-[size=2xl]/avatar:[&>svg]:size-3',\r\n        'not-empty:group-data-[size=xs]/avatar:size-2.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\r\n        'not-empty:group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:hidden',\r\n        'not-empty:group-data-[size=md]/avatar:size-3.5 group-data-[size=md]/avatar:[&>svg]:size-2.5',\r\n        'not-empty:group-data-[size=lg]/avatar:size-4 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\r\n        'not-empty:group-data-[size=xl]/avatar:size-4.5 group-data-[size=xl]/avatar:[&>svg]:size-3',\r\n        'not-empty:group-data-[size=2xl]/avatar:size-5 group-data-[size=2xl]/avatar:[&>svg]:size-3.5',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"avatar-group\"\r\n      className={cn(\r\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"avatar-group-count\"\r\n      className={cn(\r\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McAvatar,\r\n  McAvatarImage,\r\n  McAvatarFallback,\r\n  McAvatarGroup,\r\n  McAvatarGroupCount,\r\n  McAvatarBadge,\r\n};\r\n",
         type: 'registry:component',
       },
     ],
@@ -2444,7 +2444,20 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/ui/mc-hover-card.tsx',
         content:
-          "'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { cn } from '@/lib/utils';\n\nfunction McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nfunction McHoverCardContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  textAlign = 'start',\n  imageSrc = null,\n  imageposition = 'top',\n  title,\n  subtitle,\n  description,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    textAlign?: 'start' | 'center';\n    imageSrc?: string | null;\n    imageposition?: 'top' | 'bottom';\n    title?: string;\n    subtitle?: string;\n    description?: string;\n  }) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col \"\n      >\n        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>\n          {imageSrc && <img src={imageSrc} alt=\"Profile\" className={`w-full    `} />}\n          <div\n            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}\n          >\n            {title && <h4 className=\"font-semibold text-card-foreground\">{title}</h4>}\n            <div\n              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}\n            >\n              {subtitle && <p className=\" font-regular text-card-foreground\">{subtitle}</p>}\n              {description && <p className=\"font-regular text-card-foreground\">{description}</p>}\n            </div>\n          </div>\n        </div>\n\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            ' outline-hidden duration-100   ',\n            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',\n            ' data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ',\n            ' data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 ',\n            'data-closed:zoom-out-95 gap-4',\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { McHoverCard, McHoverCardTrigger, McHoverCardContent };\n",
+          "'use client';\r\n\r\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\r\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\r\n}\r\n\r\nfunction McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\r\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\r\n}\r\n\r\nfunction McHoverCardContent({\r\n  className,\r\n  side = 'bottom',\r\n  sideOffset = 4,\r\n  align = 'center',\r\n  alignOffset = 4,\r\n  textAlign = 'start',\r\n  imageSrc = null,\r\n  imageposition = 'top',\r\n  title,\r\n  subtitle,\r\n  description,\r\n  ...props\r\n}: PreviewCardPrimitive.Popup.Props &\r\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\r\n    textAlign?: 'start' | 'center';\r\n    imageSrc?: string | null;\r\n    imageposition?: 'top' | 'bottom';\r\n    title?: string;\r\n    subtitle?: string;\r\n    description?: string;\r\n  }) {\r\n  return (\r\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\r\n      <PreviewCardPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className=\"isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col \"\r\n      >\r\n        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>\r\n          {imageSrc && <img src={imageSrc} alt=\"Profile\" className={`w-full    `} />}\r\n          <div\r\n            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}\r\n          >\r\n            {title && <h4 className=\"font-semibold text-card-foreground\">{title}</h4>}\r\n            <div\r\n              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}\r\n            >\r\n              {subtitle && <p className=\" font-regular text-card-foreground\">{subtitle}</p>}\r\n              {description && <p className=\"font-regular text-card-foreground\">{description}</p>}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <PreviewCardPrimitive.Popup\r\n          data-slot=\"hover-card-content\"\r\n          className={cn(\r\n            ' outline-hidden duration-100   ',\r\n            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',\r\n            ' data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ',\r\n            ' data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 ',\r\n            'data-closed:zoom-out-95 gap-4',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </PreviewCardPrimitive.Positioner>\r\n    </PreviewCardPrimitive.Portal>\r\n  );\r\n}\r\n\r\nexport { McHoverCard, McHoverCardTrigger, McHoverCardContent };\r\n",
+        type: 'registry:component',
+      },
+    ],
+  },
+  'mc-slider': {
+    name: 'mc-slider',
+    description: 'A slider component for MicroClub UI',
+    type: 'registry:component',
+    files: [
+      {
+        path: 'registry/ui/mc-slider.tsx',
+        content:
+          'import { Slider as SliderPrimitive } from \'@base-ui/react/slider\';\n\nimport { cn } from \'@/lib/utils\';\n\nfunction McSlider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = Array.isArray(value)\n    ? value\n    : Array.isArray(defaultValue)\n      ? defaultValue\n      : [min, max];\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\'data-horizontal:w-full data-vertical:h-full\', className)}\n      data-slot="slider"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment="edge"\n      {...props}\n    >\n      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">\n        <SliderPrimitive.Track\n          data-slot="slider-track"\n          className="relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"\n        >\n          <SliderPrimitive.Indicator\n            data-slot="slider-range"\n            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot="slider-thumb"\n            key={index}\n            className="\n            relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl\n            transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 \n            focus-visible:outline-hidden active:ring-3 active:bg-primary disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { McSlider };\n',
         type: 'registry:component',
       },
     ],
@@ -2585,13 +2598,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-combobox-demo.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport {\n  McCombobox,\n  McComboboxTrigger,\n  McComboboxSearch,\n  McComboboxContent,\n  McComboboxList,\n  McComboboxItem,\n} from '@/registry/ui/mc-combobox';\n\nconst frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix'] as const;\n\nexport default function McComboboxDemo() {\n  const [selectedValue, setSelectedValue] = React.useState('select a framework');\n  return (\n    <div className=\"mb-50\">\n      <McCombobox\n        items={frameworks}\n        value={selectedValue}\n        onValueChange={(val) => setSelectedValue(val as string)}\n      >\n        <McComboboxTrigger className=\"shadow-sm border-slate-200\" />\n        <McComboboxContent>\n          <McComboboxSearch placeholder=\"Search framework...\" />\n          <McComboboxList>\n            {(item: string) => (\n              <McComboboxItem key={item} value={item}>\n                {item}\n              </McComboboxItem>\n            )}\n          </McComboboxList>\n        </McComboboxContent>\n      </McCombobox>\n    </div>\n  );\n}\n",
+          "'use client';\r\n\r\nimport * as React from 'react';\r\nimport {\r\n  McCombobox,\r\n  McComboboxTrigger,\r\n  McComboboxSearch,\r\n  McComboboxContent,\r\n  McComboboxList,\r\n  McComboboxItem,\r\n} from '@/registry/ui/mc-combobox';\r\n\r\nconst frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix'] as const;\r\n\r\nexport default function McComboboxDemo() {\r\n  const [selectedValue, setSelectedValue] = React.useState('select a framework');\r\n  return (\r\n    <div className=\"mb-50\">\r\n      <McCombobox\r\n        items={frameworks}\r\n        value={selectedValue}\r\n        onValueChange={(val) => setSelectedValue(val as string)}\r\n      >\r\n        <McComboboxTrigger className=\"shadow-sm border-slate-200\" />\r\n        <McComboboxContent>\r\n          <McComboboxSearch placeholder=\"Search framework...\" />\r\n          <McComboboxList>\r\n            {(item: string) => (\r\n              <McComboboxItem key={item} value={item}>\r\n                {item}\r\n              </McComboboxItem>\r\n            )}\r\n          </McComboboxList>\r\n        </McComboboxContent>\r\n      </McCombobox>\r\n    </div>\r\n  );\r\n}\r\n",
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-combobox-demo.tsx')),
     source:
-      "'use client';\n\nimport * as React from 'react';\nimport {\n  McCombobox,\n  McComboboxTrigger,\n  McComboboxSearch,\n  McComboboxContent,\n  McComboboxList,\n  McComboboxItem,\n} from '@/registry/ui/mc-combobox';\n\nconst frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix'] as const;\n\nexport default function McComboboxDemo() {\n  const [selectedValue, setSelectedValue] = React.useState('select a framework');\n  return (\n    <div className=\"mb-50\">\n      <McCombobox\n        items={frameworks}\n        value={selectedValue}\n        onValueChange={(val) => setSelectedValue(val as string)}\n      >\n        <McComboboxTrigger className=\"shadow-sm border-slate-200\" />\n        <McComboboxContent>\n          <McComboboxSearch placeholder=\"Search framework...\" />\n          <McComboboxList>\n            {(item: string) => (\n              <McComboboxItem key={item} value={item}>\n                {item}\n              </McComboboxItem>\n            )}\n          </McComboboxList>\n        </McComboboxContent>\n      </McCombobox>\n    </div>\n  );\n}\n",
+      "'use client';\r\n\r\nimport * as React from 'react';\r\nimport {\r\n  McCombobox,\r\n  McComboboxTrigger,\r\n  McComboboxSearch,\r\n  McComboboxContent,\r\n  McComboboxList,\r\n  McComboboxItem,\r\n} from '@/registry/ui/mc-combobox';\r\n\r\nconst frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix'] as const;\r\n\r\nexport default function McComboboxDemo() {\r\n  const [selectedValue, setSelectedValue] = React.useState('select a framework');\r\n  return (\r\n    <div className=\"mb-50\">\r\n      <McCombobox\r\n        items={frameworks}\r\n        value={selectedValue}\r\n        onValueChange={(val) => setSelectedValue(val as string)}\r\n      >\r\n        <McComboboxTrigger className=\"shadow-sm border-slate-200\" />\r\n        <McComboboxContent>\r\n          <McComboboxSearch placeholder=\"Search framework...\" />\r\n          <McComboboxList>\r\n            {(item: string) => (\r\n              <McComboboxItem key={item} value={item}>\r\n                {item}\r\n              </McComboboxItem>\r\n            )}\r\n          </McComboboxList>\r\n        </McComboboxContent>\r\n      </McCombobox>\r\n    </div>\r\n  );\r\n}\r\n",
   },
   'mc-switch-demo': {
     name: 'mc-switch-demo',
@@ -2617,13 +2630,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-navigation-menu-demo.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { CircleAlertIcon, CircleCheckIcon, CircleDashedIcon } from 'lucide-react';\n\nimport {\n  McNavigationMenu,\n  McNavigationMenuContent,\n  McNavigationMenuItem,\n  McNavigationMenuLink,\n  McNavigationMenuList,\n  McNavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '../ui/mc-navigation-menu';\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '#alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '#hover-card',\n    description: 'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '#progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '#scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '#tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '#tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n];\n\nexport default function NavigationMenuDemo() {\n  return (\n    <div className=\"w-full py-10\">\n      <McNavigationMenu>\n        <McNavigationMenuList>\n          <McNavigationMenuItem>\n            <McNavigationMenuTrigger>Getting started</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"#docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"#installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"#typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem className=\"hidden md:flex\">\n            <McNavigationMenuTrigger>Components</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem key={component.title} title={component.title} href={component.href}>\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem>\n            <McNavigationMenuTrigger>With Icon</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleAlertIcon />\n                        Backlog\n                      </Link>\n                    }\n                  />\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleDashedIcon />\n                        To Do\n                      </Link>\n                    }\n                  />\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleCheckIcon />\n                        Done\n                      </Link>\n                    }\n                  />\n                </li>\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem>\n            <McNavigationMenuLink\n              className={navigationMenuTriggerStyle()}\n              render={<Link href=\"#docs\">Docs</Link>}\n            />\n          </McNavigationMenuItem>\n        </McNavigationMenuList>\n      </McNavigationMenu>\n    </div>\n  );\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {\n  return (\n    <li {...props}>\n      <McNavigationMenuLink\n        render={\n          <Link href={href}>\n            <div className=\"flex flex-col gap-1 text-sm\">\n              <div className=\"leading-none font-medium\">{title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n            </div>\n          </Link>\n        }\n      />\n    </li>\n  );\n}\n",
+          "'use client';\r\n\r\nimport * as React from 'react';\r\nimport Link from 'next/link';\r\nimport { CircleAlertIcon, CircleCheckIcon, CircleDashedIcon } from 'lucide-react';\r\n\r\nimport {\r\n  McNavigationMenu,\r\n  McNavigationMenuContent,\r\n  McNavigationMenuItem,\r\n  McNavigationMenuLink,\r\n  McNavigationMenuList,\r\n  McNavigationMenuTrigger,\r\n  navigationMenuTriggerStyle,\r\n} from '../ui/mc-navigation-menu';\r\n\r\nconst components: { title: string; href: string; description: string }[] = [\r\n  {\r\n    title: 'Alert Dialog',\r\n    href: '#alert-dialog',\r\n    description:\r\n      'A modal dialog that interrupts the user with important content and expects a response.',\r\n  },\r\n  {\r\n    title: 'Hover Card',\r\n    href: '#hover-card',\r\n    description: 'For sighted users to preview content available behind a link.',\r\n  },\r\n  {\r\n    title: 'Progress',\r\n    href: '#progress',\r\n    description:\r\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\r\n  },\r\n  {\r\n    title: 'Scroll-area',\r\n    href: '#scroll-area',\r\n    description: 'Visually or semantically separates content.',\r\n  },\r\n  {\r\n    title: 'Tabs',\r\n    href: '#tabs',\r\n    description:\r\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\r\n  },\r\n  {\r\n    title: 'Tooltip',\r\n    href: '#tooltip',\r\n    description:\r\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\r\n  },\r\n];\r\n\r\nexport default function NavigationMenuDemo() {\r\n  return (\r\n    <div className=\"w-full py-10\">\r\n      <McNavigationMenu>\r\n        <McNavigationMenuList>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuTrigger>Getting started</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"w-96\">\r\n                <ListItem href=\"#docs\" title=\"Introduction\">\r\n                  Re-usable components built with Tailwind CSS.\r\n                </ListItem>\r\n                <ListItem href=\"#installation\" title=\"Installation\">\r\n                  How to install dependencies and structure your app.\r\n                </ListItem>\r\n                <ListItem href=\"#typography\" title=\"Typography\">\r\n                  Styles for headings, paragraphs, lists...etc\r\n                </ListItem>\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem className=\"hidden md:flex\">\r\n            <McNavigationMenuTrigger>Components</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\r\n                {components.map((component) => (\r\n                  <ListItem key={component.title} title={component.title} href={component.href}>\r\n                    {component.description}\r\n                  </ListItem>\r\n                ))}\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuTrigger>With Icon</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"grid w-[200px]\">\r\n                <li>\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleAlertIcon />\r\n                        Backlog\r\n                      </Link>\r\n                    }\r\n                  />\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleDashedIcon />\r\n                        To Do\r\n                      </Link>\r\n                    }\r\n                  />\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleCheckIcon />\r\n                        Done\r\n                      </Link>\r\n                    }\r\n                  />\r\n                </li>\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuLink\r\n              className={navigationMenuTriggerStyle()}\r\n              render={<Link href=\"#docs\">Docs</Link>}\r\n            />\r\n          </McNavigationMenuItem>\r\n        </McNavigationMenuList>\r\n      </McNavigationMenu>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction ListItem({\r\n  title,\r\n  children,\r\n  href,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {\r\n  return (\r\n    <li {...props}>\r\n      <McNavigationMenuLink\r\n        render={\r\n          <Link href={href}>\r\n            <div className=\"flex flex-col gap-1 text-sm\">\r\n              <div className=\"leading-none font-medium\">{title}</div>\r\n              <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\r\n            </div>\r\n          </Link>\r\n        }\r\n      />\r\n    </li>\r\n  );\r\n}\r\n",
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-navigation-menu-demo.tsx')),
     source:
-      "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { CircleAlertIcon, CircleCheckIcon, CircleDashedIcon } from 'lucide-react';\n\nimport {\n  McNavigationMenu,\n  McNavigationMenuContent,\n  McNavigationMenuItem,\n  McNavigationMenuLink,\n  McNavigationMenuList,\n  McNavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '../ui/mc-navigation-menu';\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '#alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '#hover-card',\n    description: 'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '#progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '#scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '#tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '#tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n];\n\nexport default function NavigationMenuDemo() {\n  return (\n    <div className=\"w-full py-10\">\n      <McNavigationMenu>\n        <McNavigationMenuList>\n          <McNavigationMenuItem>\n            <McNavigationMenuTrigger>Getting started</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"#docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"#installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"#typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem className=\"hidden md:flex\">\n            <McNavigationMenuTrigger>Components</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem key={component.title} title={component.title} href={component.href}>\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem>\n            <McNavigationMenuTrigger>With Icon</McNavigationMenuTrigger>\n            <McNavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleAlertIcon />\n                        Backlog\n                      </Link>\n                    }\n                  />\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleDashedIcon />\n                        To Do\n                      </Link>\n                    }\n                  />\n                  <McNavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\n                        <CircleCheckIcon />\n                        Done\n                      </Link>\n                    }\n                  />\n                </li>\n              </ul>\n            </McNavigationMenuContent>\n          </McNavigationMenuItem>\n          <McNavigationMenuItem>\n            <McNavigationMenuLink\n              className={navigationMenuTriggerStyle()}\n              render={<Link href=\"#docs\">Docs</Link>}\n            />\n          </McNavigationMenuItem>\n        </McNavigationMenuList>\n      </McNavigationMenu>\n    </div>\n  );\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {\n  return (\n    <li {...props}>\n      <McNavigationMenuLink\n        render={\n          <Link href={href}>\n            <div className=\"flex flex-col gap-1 text-sm\">\n              <div className=\"leading-none font-medium\">{title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n            </div>\n          </Link>\n        }\n      />\n    </li>\n  );\n}\n",
+      "'use client';\r\n\r\nimport * as React from 'react';\r\nimport Link from 'next/link';\r\nimport { CircleAlertIcon, CircleCheckIcon, CircleDashedIcon } from 'lucide-react';\r\n\r\nimport {\r\n  McNavigationMenu,\r\n  McNavigationMenuContent,\r\n  McNavigationMenuItem,\r\n  McNavigationMenuLink,\r\n  McNavigationMenuList,\r\n  McNavigationMenuTrigger,\r\n  navigationMenuTriggerStyle,\r\n} from '../ui/mc-navigation-menu';\r\n\r\nconst components: { title: string; href: string; description: string }[] = [\r\n  {\r\n    title: 'Alert Dialog',\r\n    href: '#alert-dialog',\r\n    description:\r\n      'A modal dialog that interrupts the user with important content and expects a response.',\r\n  },\r\n  {\r\n    title: 'Hover Card',\r\n    href: '#hover-card',\r\n    description: 'For sighted users to preview content available behind a link.',\r\n  },\r\n  {\r\n    title: 'Progress',\r\n    href: '#progress',\r\n    description:\r\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\r\n  },\r\n  {\r\n    title: 'Scroll-area',\r\n    href: '#scroll-area',\r\n    description: 'Visually or semantically separates content.',\r\n  },\r\n  {\r\n    title: 'Tabs',\r\n    href: '#tabs',\r\n    description:\r\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\r\n  },\r\n  {\r\n    title: 'Tooltip',\r\n    href: '#tooltip',\r\n    description:\r\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\r\n  },\r\n];\r\n\r\nexport default function NavigationMenuDemo() {\r\n  return (\r\n    <div className=\"w-full py-10\">\r\n      <McNavigationMenu>\r\n        <McNavigationMenuList>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuTrigger>Getting started</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"w-96\">\r\n                <ListItem href=\"#docs\" title=\"Introduction\">\r\n                  Re-usable components built with Tailwind CSS.\r\n                </ListItem>\r\n                <ListItem href=\"#installation\" title=\"Installation\">\r\n                  How to install dependencies and structure your app.\r\n                </ListItem>\r\n                <ListItem href=\"#typography\" title=\"Typography\">\r\n                  Styles for headings, paragraphs, lists...etc\r\n                </ListItem>\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem className=\"hidden md:flex\">\r\n            <McNavigationMenuTrigger>Components</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\r\n                {components.map((component) => (\r\n                  <ListItem key={component.title} title={component.title} href={component.href}>\r\n                    {component.description}\r\n                  </ListItem>\r\n                ))}\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuTrigger>With Icon</McNavigationMenuTrigger>\r\n            <McNavigationMenuContent>\r\n              <ul className=\"grid w-[200px]\">\r\n                <li>\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleAlertIcon />\r\n                        Backlog\r\n                      </Link>\r\n                    }\r\n                  />\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleDashedIcon />\r\n                        To Do\r\n                      </Link>\r\n                    }\r\n                  />\r\n                  <McNavigationMenuLink\r\n                    render={\r\n                      <Link href=\"#\" className=\"flex items-center gap-2\">\r\n                        <CircleCheckIcon />\r\n                        Done\r\n                      </Link>\r\n                    }\r\n                  />\r\n                </li>\r\n              </ul>\r\n            </McNavigationMenuContent>\r\n          </McNavigationMenuItem>\r\n          <McNavigationMenuItem>\r\n            <McNavigationMenuLink\r\n              className={navigationMenuTriggerStyle()}\r\n              render={<Link href=\"#docs\">Docs</Link>}\r\n            />\r\n          </McNavigationMenuItem>\r\n        </McNavigationMenuList>\r\n      </McNavigationMenu>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction ListItem({\r\n  title,\r\n  children,\r\n  href,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {\r\n  return (\r\n    <li {...props}>\r\n      <McNavigationMenuLink\r\n        render={\r\n          <Link href={href}>\r\n            <div className=\"flex flex-col gap-1 text-sm\">\r\n              <div className=\"leading-none font-medium\">{title}</div>\r\n              <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\r\n            </div>\r\n          </Link>\r\n        }\r\n      />\r\n    </li>\r\n  );\r\n}\r\n",
   },
   'mc-sidebar-demo': {
     name: 'mc-sidebar-demo',
@@ -2697,13 +2710,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-dialog-demo.tsx',
         content:
-          'import { McButton } from \'../ui/mc-button\';\nimport {\n  McDialog,\n  McDialogClose,\n  McDialogContent,\n  McDialogDescription,\n  McDialogFooter,\n  McDialogHeader,\n  McDialogTitle,\n  McDialogTrigger,\n} from \'@/registry/ui/mc-dialog\';\n\nexport default function McDialogDemo() {\n  return (\n    <div className="py-6">\n      <McDialog>\n        <McDialogTrigger\n          render={\n            <McButton variant="primary" size="md">\n              Open dialog\n            </McButton>\n          }\n        />\n        <McDialogContent className="gap-6">\n          <McDialogHeader className="gap-2.5">\n            <McDialogTitle>Edit profile</McDialogTitle>\n            <McDialogDescription>\n              Make changes to your profile here. Click save when you&apos;re done.\n            </McDialogDescription>\n          </McDialogHeader>\n\n          <form className="grid gap-5" onSubmit={(event) => event.preventDefault()}>\n            <div className="grid gap-2.5">\n              <label\n                htmlFor="name"\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\n              >\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n              />\n            </div>\n\n            <div className="grid gap-2.5">\n              <label\n                htmlFor="username"\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\n              >\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n              />\n            </div>\n          </form>\n\n          <McDialogFooter showCloseButton={false}>\n            <McDialogClose\n              render={\n                <McButton variant="secondary" size="md">\n                  Cancel\n                </McButton>\n              }\n            />\n            <McDialogClose\n              render={\n                <McButton variant="primary" size="md">\n                  Save changes\n                </McButton>\n              }\n            />\n          </McDialogFooter>\n        </McDialogContent>\n      </McDialog>\n    </div>\n  );\n}\n',
+          'import { McButton } from \'../ui/mc-button\';\r\nimport {\r\n  McDialog,\r\n  McDialogClose,\r\n  McDialogContent,\r\n  McDialogDescription,\r\n  McDialogFooter,\r\n  McDialogHeader,\r\n  McDialogTitle,\r\n  McDialogTrigger,\r\n} from \'@/registry/ui/mc-dialog\';\r\n\r\nexport default function McDialogDemo() {\r\n  return (\r\n    <div className="py-6">\r\n      <McDialog>\r\n        <McDialogTrigger\r\n          render={\r\n            <McButton variant="primary" size="md">\r\n              Open dialog\r\n            </McButton>\r\n          }\r\n        />\r\n        <McDialogContent className="gap-6">\r\n          <McDialogHeader className="gap-2.5">\r\n            <McDialogTitle>Edit profile</McDialogTitle>\r\n            <McDialogDescription>\r\n              Make changes to your profile here. Click save when you&apos;re done.\r\n            </McDialogDescription>\r\n          </McDialogHeader>\r\n\r\n          <form className="grid gap-5" onSubmit={(event) => event.preventDefault()}>\r\n            <div className="grid gap-2.5">\r\n              <label\r\n                htmlFor="name"\r\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\r\n              >\r\n                Name\r\n              </label>\r\n              <input\r\n                id="name"\r\n                defaultValue="Pedro Duarte"\r\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\r\n              />\r\n            </div>\r\n\r\n            <div className="grid gap-2.5">\r\n              <label\r\n                htmlFor="username"\r\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\r\n              >\r\n                Username\r\n              </label>\r\n              <input\r\n                id="username"\r\n                defaultValue="@peduarte"\r\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\r\n              />\r\n            </div>\r\n          </form>\r\n\r\n          <McDialogFooter showCloseButton={false}>\r\n            <McDialogClose\r\n              render={\r\n                <McButton variant="secondary" size="md">\r\n                  Cancel\r\n                </McButton>\r\n              }\r\n            />\r\n            <McDialogClose\r\n              render={\r\n                <McButton variant="primary" size="md">\r\n                  Save changes\r\n                </McButton>\r\n              }\r\n            />\r\n          </McDialogFooter>\r\n        </McDialogContent>\r\n      </McDialog>\r\n    </div>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-dialog-demo.tsx')),
     source:
-      'import { McButton } from \'../ui/mc-button\';\nimport {\n  McDialog,\n  McDialogClose,\n  McDialogContent,\n  McDialogDescription,\n  McDialogFooter,\n  McDialogHeader,\n  McDialogTitle,\n  McDialogTrigger,\n} from \'@/registry/ui/mc-dialog\';\n\nexport default function McDialogDemo() {\n  return (\n    <div className="py-6">\n      <McDialog>\n        <McDialogTrigger\n          render={\n            <McButton variant="primary" size="md">\n              Open dialog\n            </McButton>\n          }\n        />\n        <McDialogContent className="gap-6">\n          <McDialogHeader className="gap-2.5">\n            <McDialogTitle>Edit profile</McDialogTitle>\n            <McDialogDescription>\n              Make changes to your profile here. Click save when you&apos;re done.\n            </McDialogDescription>\n          </McDialogHeader>\n\n          <form className="grid gap-5" onSubmit={(event) => event.preventDefault()}>\n            <div className="grid gap-2.5">\n              <label\n                htmlFor="name"\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\n              >\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n              />\n            </div>\n\n            <div className="grid gap-2.5">\n              <label\n                htmlFor="username"\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\n              >\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\n              />\n            </div>\n          </form>\n\n          <McDialogFooter showCloseButton={false}>\n            <McDialogClose\n              render={\n                <McButton variant="secondary" size="md">\n                  Cancel\n                </McButton>\n              }\n            />\n            <McDialogClose\n              render={\n                <McButton variant="primary" size="md">\n                  Save changes\n                </McButton>\n              }\n            />\n          </McDialogFooter>\n        </McDialogContent>\n      </McDialog>\n    </div>\n  );\n}\n',
+      'import { McButton } from \'../ui/mc-button\';\r\nimport {\r\n  McDialog,\r\n  McDialogClose,\r\n  McDialogContent,\r\n  McDialogDescription,\r\n  McDialogFooter,\r\n  McDialogHeader,\r\n  McDialogTitle,\r\n  McDialogTrigger,\r\n} from \'@/registry/ui/mc-dialog\';\r\n\r\nexport default function McDialogDemo() {\r\n  return (\r\n    <div className="py-6">\r\n      <McDialog>\r\n        <McDialogTrigger\r\n          render={\r\n            <McButton variant="primary" size="md">\r\n              Open dialog\r\n            </McButton>\r\n          }\r\n        />\r\n        <McDialogContent className="gap-6">\r\n          <McDialogHeader className="gap-2.5">\r\n            <McDialogTitle>Edit profile</McDialogTitle>\r\n            <McDialogDescription>\r\n              Make changes to your profile here. Click save when you&apos;re done.\r\n            </McDialogDescription>\r\n          </McDialogHeader>\r\n\r\n          <form className="grid gap-5" onSubmit={(event) => event.preventDefault()}>\r\n            <div className="grid gap-2.5">\r\n              <label\r\n                htmlFor="name"\r\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\r\n              >\r\n                Name\r\n              </label>\r\n              <input\r\n                id="name"\r\n                defaultValue="Pedro Duarte"\r\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\r\n              />\r\n            </div>\r\n\r\n            <div className="grid gap-2.5">\r\n              <label\r\n                htmlFor="username"\r\n                className="font-sans text-sm leading-5 font-medium tracking-normal text-muted-foreground"\r\n              >\r\n                Username\r\n              </label>\r\n              <input\r\n                id="username"\r\n                defaultValue="@peduarte"\r\n                className="h-9 w-[375px] max-w-full rounded-md border border-blue-primary-200 bg-transparent px-3 py-1 font-sans text-sm leading-5 font-normal tracking-normal text-foreground opacity-100 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"\r\n              />\r\n            </div>\r\n          </form>\r\n\r\n          <McDialogFooter showCloseButton={false}>\r\n            <McDialogClose\r\n              render={\r\n                <McButton variant="secondary" size="md">\r\n                  Cancel\r\n                </McButton>\r\n              }\r\n            />\r\n            <McDialogClose\r\n              render={\r\n                <McButton variant="primary" size="md">\r\n                  Save changes\r\n                </McButton>\r\n              }\r\n            />\r\n          </McDialogFooter>\r\n        </McDialogContent>\r\n      </McDialog>\r\n    </div>\r\n  );\r\n}\r\n',
   },
   'mc-alert-dialog-demo': {
     name: 'mc-alert-dialog-demo',
@@ -2713,13 +2726,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-alert-dialog-demo.tsx',
         content:
-          "import {\n  McAlertDialog,\n  McAlertDialogAction,\n  McAlertDialogCancel,\n  McAlertDialogContent,\n  McAlertDialogDescription,\n  McAlertDialogFooter,\n  McAlertDialogHeader,\n  McAlertDialogTitle,\n  McAlertDialogTrigger,\n} from '@/registry/ui/mc-alert-dialog';\nimport { Button } from '@/components/ui/button';\n\nexport default function McAlertDialogDemo() {\n  return (\n    <McAlertDialog>\n      <McAlertDialogTrigger render={<Button variant=\"outline\">Show Dialog</Button>} />\n      <McAlertDialogContent>\n        <McAlertDialogHeader>\n          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>\n          <McAlertDialogDescription>\n            This action cannot be undone. This will permanently delete your account from our\n            servers.\n          </McAlertDialogDescription>\n        </McAlertDialogHeader>\n        <McAlertDialogFooter>\n          <McAlertDialogCancel>Cancel</McAlertDialogCancel>\n          <McAlertDialogAction>Continue</McAlertDialogAction>\n        </McAlertDialogFooter>\n      </McAlertDialogContent>\n    </McAlertDialog>\n  );\n}\n",
+          "import {\r\n  McAlertDialog,\r\n  McAlertDialogAction,\r\n  McAlertDialogCancel,\r\n  McAlertDialogContent,\r\n  McAlertDialogDescription,\r\n  McAlertDialogFooter,\r\n  McAlertDialogHeader,\r\n  McAlertDialogTitle,\r\n  McAlertDialogTrigger,\r\n} from '@/registry/ui/mc-alert-dialog';\r\nimport { Button } from '@/components/ui/button';\r\n\r\nexport default function McAlertDialogDemo() {\r\n  return (\r\n    <McAlertDialog>\r\n      <McAlertDialogTrigger render={<Button variant=\"outline\">Show Dialog</Button>} />\r\n      <McAlertDialogContent>\r\n        <McAlertDialogHeader>\r\n          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>\r\n          <McAlertDialogDescription>\r\n            This action cannot be undone. This will permanently delete your account from our\r\n            servers.\r\n          </McAlertDialogDescription>\r\n        </McAlertDialogHeader>\r\n        <McAlertDialogFooter>\r\n          <McAlertDialogCancel>Cancel</McAlertDialogCancel>\r\n          <McAlertDialogAction>Continue</McAlertDialogAction>\r\n        </McAlertDialogFooter>\r\n      </McAlertDialogContent>\r\n    </McAlertDialog>\r\n  );\r\n}\r\n",
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-alert-dialog-demo.tsx')),
     source:
-      "import {\n  McAlertDialog,\n  McAlertDialogAction,\n  McAlertDialogCancel,\n  McAlertDialogContent,\n  McAlertDialogDescription,\n  McAlertDialogFooter,\n  McAlertDialogHeader,\n  McAlertDialogTitle,\n  McAlertDialogTrigger,\n} from '@/registry/ui/mc-alert-dialog';\nimport { Button } from '@/components/ui/button';\n\nexport default function McAlertDialogDemo() {\n  return (\n    <McAlertDialog>\n      <McAlertDialogTrigger render={<Button variant=\"outline\">Show Dialog</Button>} />\n      <McAlertDialogContent>\n        <McAlertDialogHeader>\n          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>\n          <McAlertDialogDescription>\n            This action cannot be undone. This will permanently delete your account from our\n            servers.\n          </McAlertDialogDescription>\n        </McAlertDialogHeader>\n        <McAlertDialogFooter>\n          <McAlertDialogCancel>Cancel</McAlertDialogCancel>\n          <McAlertDialogAction>Continue</McAlertDialogAction>\n        </McAlertDialogFooter>\n      </McAlertDialogContent>\n    </McAlertDialog>\n  );\n}\n",
+      "import {\r\n  McAlertDialog,\r\n  McAlertDialogAction,\r\n  McAlertDialogCancel,\r\n  McAlertDialogContent,\r\n  McAlertDialogDescription,\r\n  McAlertDialogFooter,\r\n  McAlertDialogHeader,\r\n  McAlertDialogTitle,\r\n  McAlertDialogTrigger,\r\n} from '@/registry/ui/mc-alert-dialog';\r\nimport { Button } from '@/components/ui/button';\r\n\r\nexport default function McAlertDialogDemo() {\r\n  return (\r\n    <McAlertDialog>\r\n      <McAlertDialogTrigger render={<Button variant=\"outline\">Show Dialog</Button>} />\r\n      <McAlertDialogContent>\r\n        <McAlertDialogHeader>\r\n          <McAlertDialogTitle>Are you absolutely sure?</McAlertDialogTitle>\r\n          <McAlertDialogDescription>\r\n            This action cannot be undone. This will permanently delete your account from our\r\n            servers.\r\n          </McAlertDialogDescription>\r\n        </McAlertDialogHeader>\r\n        <McAlertDialogFooter>\r\n          <McAlertDialogCancel>Cancel</McAlertDialogCancel>\r\n          <McAlertDialogAction>Continue</McAlertDialogAction>\r\n        </McAlertDialogFooter>\r\n      </McAlertDialogContent>\r\n    </McAlertDialog>\r\n  );\r\n}\r\n",
   },
   'mc-alert-demo': {
     name: 'mc-alert-demo',
@@ -2745,13 +2758,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-sonner-demo.tsx',
         content:
-          "'use client';\nimport McSonner, { toast } from '../ui/mc-sonner';\nexport default function McSonnerDemo() {\n  return (\n    <div>\n      <button\n        onClick={() =>\n          toast('Event has been created', {\n            description: 'Sunday, December 03, 2023 at 9:00 AM',\n            action: {\n              label: 'undo',\n              onClick: () => console.log('Undo du toast simple cliqué'),\n            },\n          })\n        }\n        className=\"px-5 py-2.5 bg-primary text-background rounded-lg text-sm font-medium transition-all shadow-sm cursor-pointer\"\n      >\n        Show Toast\n      </button>\n      <McSonner />\n    </div>\n  );\n}\n",
+          "'use client';\r\nimport McSonner, { toast } from '../ui/mc-sonner';\r\nexport default function McSonnerDemo() {\r\n  return (\r\n    <div>\r\n      <button\r\n        onClick={() =>\r\n          toast('Event has been created', {\r\n            description: 'Sunday, December 03, 2023 at 9:00 AM',\r\n            action: {\r\n              label: 'undo',\r\n              onClick: () => console.log('Undo du toast simple cliqué'),\r\n            },\r\n          })\r\n        }\r\n        className=\"px-5 py-2.5 bg-primary text-background rounded-lg text-sm font-medium transition-all shadow-sm cursor-pointer\"\r\n      >\r\n        Show Toast\r\n      </button>\r\n      <McSonner />\r\n    </div>\r\n  );\r\n}\r\n",
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-sonner-demo.tsx')),
     source:
-      "'use client';\nimport McSonner, { toast } from '../ui/mc-sonner';\nexport default function McSonnerDemo() {\n  return (\n    <div>\n      <button\n        onClick={() =>\n          toast('Event has been created', {\n            description: 'Sunday, December 03, 2023 at 9:00 AM',\n            action: {\n              label: 'undo',\n              onClick: () => console.log('Undo du toast simple cliqué'),\n            },\n          })\n        }\n        className=\"px-5 py-2.5 bg-primary text-background rounded-lg text-sm font-medium transition-all shadow-sm cursor-pointer\"\n      >\n        Show Toast\n      </button>\n      <McSonner />\n    </div>\n  );\n}\n",
+      "'use client';\r\nimport McSonner, { toast } from '../ui/mc-sonner';\r\nexport default function McSonnerDemo() {\r\n  return (\r\n    <div>\r\n      <button\r\n        onClick={() =>\r\n          toast('Event has been created', {\r\n            description: 'Sunday, December 03, 2023 at 9:00 AM',\r\n            action: {\r\n              label: 'undo',\r\n              onClick: () => console.log('Undo du toast simple cliqué'),\r\n            },\r\n          })\r\n        }\r\n        className=\"px-5 py-2.5 bg-primary text-background rounded-lg text-sm font-medium transition-all shadow-sm cursor-pointer\"\r\n      >\r\n        Show Toast\r\n      </button>\r\n      <McSonner />\r\n    </div>\r\n  );\r\n}\r\n",
   },
   'mc-tooltip-demo': {
     name: 'mc-tooltip-demo',
@@ -2761,13 +2774,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-tooltip-demo.tsx',
         content:
-          'import { Button } from \'@/components/ui/button\';\nimport { McTooltip, McTooltipContent, McTooltipTrigger } from \'../ui/mc-tooltip\';\n\nexport default function McTooltipDemo() {\n  return (\n    <McTooltip>\n      <McTooltipTrigger render={<Button variant="outline">Hover</Button>} />\n      <McTooltipContent\n        title="Lovely tooltip title"\n        desc="There are a lot of things you can do in space."\n      />\n    </McTooltip>\n  );\n}\n',
+          'import { Button } from \'@/components/ui/button\';\r\nimport { McTooltip, McTooltipContent, McTooltipTrigger } from \'../ui/mc-tooltip\';\r\n\r\nexport default function McTooltipDemo() {\r\n  return (\r\n    <McTooltip>\r\n      <McTooltipTrigger render={<Button variant="outline">Hover</Button>} />\r\n      <McTooltipContent\r\n        title="Lovely tooltip title"\r\n        desc="There are a lot of things you can do in space."\r\n      />\r\n    </McTooltip>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-tooltip-demo.tsx')),
     source:
-      'import { Button } from \'@/components/ui/button\';\nimport { McTooltip, McTooltipContent, McTooltipTrigger } from \'../ui/mc-tooltip\';\n\nexport default function McTooltipDemo() {\n  return (\n    <McTooltip>\n      <McTooltipTrigger render={<Button variant="outline">Hover</Button>} />\n      <McTooltipContent\n        title="Lovely tooltip title"\n        desc="There are a lot of things you can do in space."\n      />\n    </McTooltip>\n  );\n}\n',
+      'import { Button } from \'@/components/ui/button\';\r\nimport { McTooltip, McTooltipContent, McTooltipTrigger } from \'../ui/mc-tooltip\';\r\n\r\nexport default function McTooltipDemo() {\r\n  return (\r\n    <McTooltip>\r\n      <McTooltipTrigger render={<Button variant="outline">Hover</Button>} />\r\n      <McTooltipContent\r\n        title="Lovely tooltip title"\r\n        desc="There are a lot of things you can do in space."\r\n      />\r\n    </McTooltip>\r\n  );\r\n}\r\n',
   },
   'mc-popover-demo': {
     name: 'mc-popover-demo',
@@ -2777,13 +2790,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-popover-demo.tsx',
         content:
-          "import { McButton } from '../ui/mc-button';\nimport {\n  McPopover,\n  McPopoverContent,\n  McPopoverDescription,\n  McPopoverHeader,\n  McPopoverTitle,\n  McPopoverTrigger,\n} from '../ui/mc-popover';\n\nconst fields = [\n  { id: 'width', label: 'Width' },\n  { id: 'height', label: 'Height' },\n  { id: 'depth', label: 'Depth' },\n  { id: 'offset', label: 'Offset' },\n] as const;\n\nexport default function McPopoverDemo() {\n  return (\n    <div className=\"relative -top-4 py-10\">\n      <McPopover>\n        <McPopoverTrigger\n          render={\n            <McButton variant=\"secondary\" size=\"md\">\n              Popover\n            </McButton>\n          }\n        />\n        <McPopoverContent>\n          <McPopoverHeader className=\"mb-4\">\n            <McPopoverTitle>Dimensions</McPopoverTitle>\n            <McPopoverDescription>Set the dimensions for the layer.</McPopoverDescription>\n          </McPopoverHeader>\n\n          <div className=\"flex flex-col gap-2 pl-4\">\n            {fields.map((field) => (\n              <div key={field.id} className=\"flex items-center gap-2\">\n                <label\n                  htmlFor={field.id}\n                  className=\"w-1/2 text-sm font-medium text-card-foreground\"\n                >\n                  {field.label}\n                </label>\n                <input\n                  id={field.id}\n                  defaultValue=\"100%\"\n                  className=\"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base text-foreground shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm\"\n                />\n              </div>\n            ))}\n          </div>\n        </McPopoverContent>\n      </McPopover>\n    </div>\n  );\n}\n",
+          "import { McButton } from '../ui/mc-button';\r\nimport {\r\n  McPopover,\r\n  McPopoverContent,\r\n  McPopoverDescription,\r\n  McPopoverHeader,\r\n  McPopoverTitle,\r\n  McPopoverTrigger,\r\n} from '../ui/mc-popover';\r\n\r\nconst fields = [\r\n  { id: 'width', label: 'Width' },\r\n  { id: 'height', label: 'Height' },\r\n  { id: 'depth', label: 'Depth' },\r\n  { id: 'offset', label: 'Offset' },\r\n] as const;\r\n\r\nexport default function McPopoverDemo() {\r\n  return (\r\n    <div className=\"relative -top-4 py-10\">\r\n      <McPopover>\r\n        <McPopoverTrigger\r\n          render={\r\n            <McButton variant=\"secondary\" size=\"md\">\r\n              Popover\r\n            </McButton>\r\n          }\r\n        />\r\n        <McPopoverContent>\r\n          <McPopoverHeader className=\"mb-4\">\r\n            <McPopoverTitle>Dimensions</McPopoverTitle>\r\n            <McPopoverDescription>Set the dimensions for the layer.</McPopoverDescription>\r\n          </McPopoverHeader>\r\n\r\n          <div className=\"flex flex-col gap-2 pl-4\">\r\n            {fields.map((field) => (\r\n              <div key={field.id} className=\"flex items-center gap-2\">\r\n                <label\r\n                  htmlFor={field.id}\r\n                  className=\"w-1/2 text-sm font-medium text-card-foreground\"\r\n                >\r\n                  {field.label}\r\n                </label>\r\n                <input\r\n                  id={field.id}\r\n                  defaultValue=\"100%\"\r\n                  className=\"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base text-foreground shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm\"\r\n                />\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </McPopoverContent>\r\n      </McPopover>\r\n    </div>\r\n  );\r\n}\r\n",
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-popover-demo.tsx')),
     source:
-      "import { McButton } from '../ui/mc-button';\nimport {\n  McPopover,\n  McPopoverContent,\n  McPopoverDescription,\n  McPopoverHeader,\n  McPopoverTitle,\n  McPopoverTrigger,\n} from '../ui/mc-popover';\n\nconst fields = [\n  { id: 'width', label: 'Width' },\n  { id: 'height', label: 'Height' },\n  { id: 'depth', label: 'Depth' },\n  { id: 'offset', label: 'Offset' },\n] as const;\n\nexport default function McPopoverDemo() {\n  return (\n    <div className=\"relative -top-4 py-10\">\n      <McPopover>\n        <McPopoverTrigger\n          render={\n            <McButton variant=\"secondary\" size=\"md\">\n              Popover\n            </McButton>\n          }\n        />\n        <McPopoverContent>\n          <McPopoverHeader className=\"mb-4\">\n            <McPopoverTitle>Dimensions</McPopoverTitle>\n            <McPopoverDescription>Set the dimensions for the layer.</McPopoverDescription>\n          </McPopoverHeader>\n\n          <div className=\"flex flex-col gap-2 pl-4\">\n            {fields.map((field) => (\n              <div key={field.id} className=\"flex items-center gap-2\">\n                <label\n                  htmlFor={field.id}\n                  className=\"w-1/2 text-sm font-medium text-card-foreground\"\n                >\n                  {field.label}\n                </label>\n                <input\n                  id={field.id}\n                  defaultValue=\"100%\"\n                  className=\"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base text-foreground shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm\"\n                />\n              </div>\n            ))}\n          </div>\n        </McPopoverContent>\n      </McPopover>\n    </div>\n  );\n}\n",
+      "import { McButton } from '../ui/mc-button';\r\nimport {\r\n  McPopover,\r\n  McPopoverContent,\r\n  McPopoverDescription,\r\n  McPopoverHeader,\r\n  McPopoverTitle,\r\n  McPopoverTrigger,\r\n} from '../ui/mc-popover';\r\n\r\nconst fields = [\r\n  { id: 'width', label: 'Width' },\r\n  { id: 'height', label: 'Height' },\r\n  { id: 'depth', label: 'Depth' },\r\n  { id: 'offset', label: 'Offset' },\r\n] as const;\r\n\r\nexport default function McPopoverDemo() {\r\n  return (\r\n    <div className=\"relative -top-4 py-10\">\r\n      <McPopover>\r\n        <McPopoverTrigger\r\n          render={\r\n            <McButton variant=\"secondary\" size=\"md\">\r\n              Popover\r\n            </McButton>\r\n          }\r\n        />\r\n        <McPopoverContent>\r\n          <McPopoverHeader className=\"mb-4\">\r\n            <McPopoverTitle>Dimensions</McPopoverTitle>\r\n            <McPopoverDescription>Set the dimensions for the layer.</McPopoverDescription>\r\n          </McPopoverHeader>\r\n\r\n          <div className=\"flex flex-col gap-2 pl-4\">\r\n            {fields.map((field) => (\r\n              <div key={field.id} className=\"flex items-center gap-2\">\r\n                <label\r\n                  htmlFor={field.id}\r\n                  className=\"w-1/2 text-sm font-medium text-card-foreground\"\r\n                >\r\n                  {field.label}\r\n                </label>\r\n                <input\r\n                  id={field.id}\r\n                  defaultValue=\"100%\"\r\n                  className=\"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base text-foreground shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm\"\r\n                />\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </McPopoverContent>\r\n      </McPopover>\r\n    </div>\r\n  );\r\n}\r\n",
   },
   'mc-dropdown-menu-demo': {
     name: 'mc-dropdown-menu-demo',
@@ -2793,13 +2806,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-dropdown-menu-demo.tsx',
         content:
-          '\'use client\';\n\nimport { Button } from \'@/components/ui/button\';\nimport {\n  McDropdownMenu,\n  McDropdownMenuContent,\n  McDropdownMenuGroup,\n  McDropdownMenuItem,\n  McDropdownMenuLabel,\n  McDropdownMenuPortal,\n  McDropdownMenuSeparator,\n  McDropdownMenuSub,\n  McDropdownMenuSubContent,\n  McDropdownMenuSubTrigger,\n  McDropdownMenuTrigger,\n} from \'@/registry/ui/mc-dropdown-menu\';\n\nexport default function McDropdownMenuDemo() {\n  return (\n    <McDropdownMenu>\n      <McDropdownMenuTrigger\n        render={\n          <Button\n            className="w-17 h-10 aria-expanded:shadow-[0_0_0_4px_var(--muted)] aria-expanded:text-primary"\n            variant="outline"\n          >\n            Open\n          </Button>\n        }\n      />\n      <McDropdownMenuContent className="w-56">\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuLabel>My Account</McDropdownMenuLabel>\n          <McDropdownMenuItem>Profile</McDropdownMenuItem>\n          <McDropdownMenuItem>Settings</McDropdownMenuItem>\n        </McDropdownMenuGroup>\n        <McDropdownMenuSeparator />\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuItem>Team</McDropdownMenuItem>\n          <McDropdownMenuSub>\n            <McDropdownMenuSubTrigger>Invite users</McDropdownMenuSubTrigger>\n            <McDropdownMenuPortal>\n              <McDropdownMenuSubContent>\n                <McDropdownMenuItem>Email</McDropdownMenuItem>\n                <McDropdownMenuItem>Message</McDropdownMenuItem>\n                <McDropdownMenuSeparator />\n                <McDropdownMenuItem>More...</McDropdownMenuItem>\n              </McDropdownMenuSubContent>\n            </McDropdownMenuPortal>\n          </McDropdownMenuSub>\n        </McDropdownMenuGroup>\n        <McDropdownMenuSeparator />\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuItem variant="destructive">Log out</McDropdownMenuItem>\n        </McDropdownMenuGroup>\n      </McDropdownMenuContent>\n    </McDropdownMenu>\n  );\n}\n',
+          '\'use client\';\r\n\r\nimport { Button } from \'@/components/ui/button\';\r\nimport {\r\n  McDropdownMenu,\r\n  McDropdownMenuContent,\r\n  McDropdownMenuGroup,\r\n  McDropdownMenuItem,\r\n  McDropdownMenuLabel,\r\n  McDropdownMenuPortal,\r\n  McDropdownMenuSeparator,\r\n  McDropdownMenuSub,\r\n  McDropdownMenuSubContent,\r\n  McDropdownMenuSubTrigger,\r\n  McDropdownMenuTrigger,\r\n} from \'@/registry/ui/mc-dropdown-menu\';\r\n\r\nexport default function McDropdownMenuDemo() {\r\n  return (\r\n    <McDropdownMenu>\r\n      <McDropdownMenuTrigger\r\n        render={\r\n          <Button\r\n            className="w-17 h-10 aria-expanded:shadow-[0_0_0_4px_var(--muted)] aria-expanded:text-primary"\r\n            variant="outline"\r\n          >\r\n            Open\r\n          </Button>\r\n        }\r\n      />\r\n      <McDropdownMenuContent className="w-56">\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuLabel>My Account</McDropdownMenuLabel>\r\n          <McDropdownMenuItem>Profile</McDropdownMenuItem>\r\n          <McDropdownMenuItem>Settings</McDropdownMenuItem>\r\n        </McDropdownMenuGroup>\r\n        <McDropdownMenuSeparator />\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuItem>Team</McDropdownMenuItem>\r\n          <McDropdownMenuSub>\r\n            <McDropdownMenuSubTrigger>Invite users</McDropdownMenuSubTrigger>\r\n            <McDropdownMenuPortal>\r\n              <McDropdownMenuSubContent>\r\n                <McDropdownMenuItem>Email</McDropdownMenuItem>\r\n                <McDropdownMenuItem>Message</McDropdownMenuItem>\r\n                <McDropdownMenuSeparator />\r\n                <McDropdownMenuItem>More...</McDropdownMenuItem>\r\n              </McDropdownMenuSubContent>\r\n            </McDropdownMenuPortal>\r\n          </McDropdownMenuSub>\r\n        </McDropdownMenuGroup>\r\n        <McDropdownMenuSeparator />\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuItem variant="destructive">Log out</McDropdownMenuItem>\r\n        </McDropdownMenuGroup>\r\n      </McDropdownMenuContent>\r\n    </McDropdownMenu>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-dropdown-menu-demo.tsx')),
     source:
-      '\'use client\';\n\nimport { Button } from \'@/components/ui/button\';\nimport {\n  McDropdownMenu,\n  McDropdownMenuContent,\n  McDropdownMenuGroup,\n  McDropdownMenuItem,\n  McDropdownMenuLabel,\n  McDropdownMenuPortal,\n  McDropdownMenuSeparator,\n  McDropdownMenuSub,\n  McDropdownMenuSubContent,\n  McDropdownMenuSubTrigger,\n  McDropdownMenuTrigger,\n} from \'@/registry/ui/mc-dropdown-menu\';\n\nexport default function McDropdownMenuDemo() {\n  return (\n    <McDropdownMenu>\n      <McDropdownMenuTrigger\n        render={\n          <Button\n            className="w-17 h-10 aria-expanded:shadow-[0_0_0_4px_var(--muted)] aria-expanded:text-primary"\n            variant="outline"\n          >\n            Open\n          </Button>\n        }\n      />\n      <McDropdownMenuContent className="w-56">\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuLabel>My Account</McDropdownMenuLabel>\n          <McDropdownMenuItem>Profile</McDropdownMenuItem>\n          <McDropdownMenuItem>Settings</McDropdownMenuItem>\n        </McDropdownMenuGroup>\n        <McDropdownMenuSeparator />\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuItem>Team</McDropdownMenuItem>\n          <McDropdownMenuSub>\n            <McDropdownMenuSubTrigger>Invite users</McDropdownMenuSubTrigger>\n            <McDropdownMenuPortal>\n              <McDropdownMenuSubContent>\n                <McDropdownMenuItem>Email</McDropdownMenuItem>\n                <McDropdownMenuItem>Message</McDropdownMenuItem>\n                <McDropdownMenuSeparator />\n                <McDropdownMenuItem>More...</McDropdownMenuItem>\n              </McDropdownMenuSubContent>\n            </McDropdownMenuPortal>\n          </McDropdownMenuSub>\n        </McDropdownMenuGroup>\n        <McDropdownMenuSeparator />\n        <McDropdownMenuGroup className="h-auto">\n          <McDropdownMenuItem variant="destructive">Log out</McDropdownMenuItem>\n        </McDropdownMenuGroup>\n      </McDropdownMenuContent>\n    </McDropdownMenu>\n  );\n}\n',
+      '\'use client\';\r\n\r\nimport { Button } from \'@/components/ui/button\';\r\nimport {\r\n  McDropdownMenu,\r\n  McDropdownMenuContent,\r\n  McDropdownMenuGroup,\r\n  McDropdownMenuItem,\r\n  McDropdownMenuLabel,\r\n  McDropdownMenuPortal,\r\n  McDropdownMenuSeparator,\r\n  McDropdownMenuSub,\r\n  McDropdownMenuSubContent,\r\n  McDropdownMenuSubTrigger,\r\n  McDropdownMenuTrigger,\r\n} from \'@/registry/ui/mc-dropdown-menu\';\r\n\r\nexport default function McDropdownMenuDemo() {\r\n  return (\r\n    <McDropdownMenu>\r\n      <McDropdownMenuTrigger\r\n        render={\r\n          <Button\r\n            className="w-17 h-10 aria-expanded:shadow-[0_0_0_4px_var(--muted)] aria-expanded:text-primary"\r\n            variant="outline"\r\n          >\r\n            Open\r\n          </Button>\r\n        }\r\n      />\r\n      <McDropdownMenuContent className="w-56">\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuLabel>My Account</McDropdownMenuLabel>\r\n          <McDropdownMenuItem>Profile</McDropdownMenuItem>\r\n          <McDropdownMenuItem>Settings</McDropdownMenuItem>\r\n        </McDropdownMenuGroup>\r\n        <McDropdownMenuSeparator />\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuItem>Team</McDropdownMenuItem>\r\n          <McDropdownMenuSub>\r\n            <McDropdownMenuSubTrigger>Invite users</McDropdownMenuSubTrigger>\r\n            <McDropdownMenuPortal>\r\n              <McDropdownMenuSubContent>\r\n                <McDropdownMenuItem>Email</McDropdownMenuItem>\r\n                <McDropdownMenuItem>Message</McDropdownMenuItem>\r\n                <McDropdownMenuSeparator />\r\n                <McDropdownMenuItem>More...</McDropdownMenuItem>\r\n              </McDropdownMenuSubContent>\r\n            </McDropdownMenuPortal>\r\n          </McDropdownMenuSub>\r\n        </McDropdownMenuGroup>\r\n        <McDropdownMenuSeparator />\r\n        <McDropdownMenuGroup className="h-auto">\r\n          <McDropdownMenuItem variant="destructive">Log out</McDropdownMenuItem>\r\n        </McDropdownMenuGroup>\r\n      </McDropdownMenuContent>\r\n    </McDropdownMenu>\r\n  );\r\n}\r\n',
   },
   'mc-context-menu-demo': {
     name: 'mc-context-menu-demo',
@@ -2809,13 +2822,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-context-menu-demo.tsx',
         content:
-          'import {\n  McContextMenu,\n  McContextMenuCheckboxItem,\n  McContextMenuContent,\n  McContextMenuGroup,\n  McContextMenuItem,\n  McContextMenuLabel,\n  McContextMenuRadioGroup,\n  McContextMenuRadioItem,\n  McContextMenuSeparator,\n  McContextMenuShortcut,\n  McContextMenuSub,\n  McContextMenuSubContent,\n  McContextMenuSubTrigger,\n  McContextMenuTrigger,\n} from \'@/registry/ui/mc-context-menu\';\n\nexport default function McContextMenuDemo() {\n  return (\n    <McContextMenu>\n      <McContextMenuTrigger className="flex h-40 w-72 items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm text-muted-foreground">\n        Right click here\n      </McContextMenuTrigger>\n      <McContextMenuContent className="w-56">\n        <McContextMenuGroup>\n          <McContextMenuLabel>Actions</McContextMenuLabel>\n          <McContextMenuItem>\n            Back\n            <McContextMenuShortcut>Alt+Left</McContextMenuShortcut>\n          </McContextMenuItem>\n          <McContextMenuItem>\n            Forward\n            <McContextMenuShortcut>Alt+Right</McContextMenuShortcut>\n          </McContextMenuItem>\n          <McContextMenuItem disabled>Reload</McContextMenuItem>\n        </McContextMenuGroup>\n        <McContextMenuSub>\n          <McContextMenuSubTrigger>More tools</McContextMenuSubTrigger>\n          <McContextMenuSubContent>\n            <McContextMenuItem>Save page as...</McContextMenuItem>\n            <McContextMenuItem>Create shortcut...</McContextMenuItem>\n            <McContextMenuItem>Inspect</McContextMenuItem>\n          </McContextMenuSubContent>\n        </McContextMenuSub>\n        <McContextMenuSeparator />\n        <McContextMenuCheckboxItem checked>Show bookmarks</McContextMenuCheckboxItem>\n        <McContextMenuCheckboxItem>Show full URLs</McContextMenuCheckboxItem>\n        <McContextMenuSeparator />\n        <McContextMenuGroup>\n          <McContextMenuLabel inset>Density</McContextMenuLabel>\n          <McContextMenuRadioGroup value="comfortable">\n            <McContextMenuRadioItem value="compact">Compact</McContextMenuRadioItem>\n            <McContextMenuRadioItem value="comfortable">Comfortable</McContextMenuRadioItem>\n          </McContextMenuRadioGroup>\n        </McContextMenuGroup>\n      </McContextMenuContent>\n    </McContextMenu>\n  );\n}\n',
+          'import {\r\n  McContextMenu,\r\n  McContextMenuCheckboxItem,\r\n  McContextMenuContent,\r\n  McContextMenuGroup,\r\n  McContextMenuItem,\r\n  McContextMenuLabel,\r\n  McContextMenuRadioGroup,\r\n  McContextMenuRadioItem,\r\n  McContextMenuSeparator,\r\n  McContextMenuShortcut,\r\n  McContextMenuSub,\r\n  McContextMenuSubContent,\r\n  McContextMenuSubTrigger,\r\n  McContextMenuTrigger,\r\n} from \'@/registry/ui/mc-context-menu\';\r\n\r\nexport default function McContextMenuDemo() {\r\n  return (\r\n    <McContextMenu>\r\n      <McContextMenuTrigger className="flex h-40 w-72 items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm text-muted-foreground">\r\n        Right click here\r\n      </McContextMenuTrigger>\r\n      <McContextMenuContent className="w-56">\r\n        <McContextMenuGroup>\r\n          <McContextMenuLabel>Actions</McContextMenuLabel>\r\n          <McContextMenuItem>\r\n            Back\r\n            <McContextMenuShortcut>Alt+Left</McContextMenuShortcut>\r\n          </McContextMenuItem>\r\n          <McContextMenuItem>\r\n            Forward\r\n            <McContextMenuShortcut>Alt+Right</McContextMenuShortcut>\r\n          </McContextMenuItem>\r\n          <McContextMenuItem disabled>Reload</McContextMenuItem>\r\n        </McContextMenuGroup>\r\n        <McContextMenuSub>\r\n          <McContextMenuSubTrigger>More tools</McContextMenuSubTrigger>\r\n          <McContextMenuSubContent>\r\n            <McContextMenuItem>Save page as...</McContextMenuItem>\r\n            <McContextMenuItem>Create shortcut...</McContextMenuItem>\r\n            <McContextMenuItem>Inspect</McContextMenuItem>\r\n          </McContextMenuSubContent>\r\n        </McContextMenuSub>\r\n        <McContextMenuSeparator />\r\n        <McContextMenuCheckboxItem checked>Show bookmarks</McContextMenuCheckboxItem>\r\n        <McContextMenuCheckboxItem>Show full URLs</McContextMenuCheckboxItem>\r\n        <McContextMenuSeparator />\r\n        <McContextMenuGroup>\r\n          <McContextMenuLabel inset>Density</McContextMenuLabel>\r\n          <McContextMenuRadioGroup value="comfortable">\r\n            <McContextMenuRadioItem value="compact">Compact</McContextMenuRadioItem>\r\n            <McContextMenuRadioItem value="comfortable">Comfortable</McContextMenuRadioItem>\r\n          </McContextMenuRadioGroup>\r\n        </McContextMenuGroup>\r\n      </McContextMenuContent>\r\n    </McContextMenu>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-context-menu-demo.tsx')),
     source:
-      'import {\n  McContextMenu,\n  McContextMenuCheckboxItem,\n  McContextMenuContent,\n  McContextMenuGroup,\n  McContextMenuItem,\n  McContextMenuLabel,\n  McContextMenuRadioGroup,\n  McContextMenuRadioItem,\n  McContextMenuSeparator,\n  McContextMenuShortcut,\n  McContextMenuSub,\n  McContextMenuSubContent,\n  McContextMenuSubTrigger,\n  McContextMenuTrigger,\n} from \'@/registry/ui/mc-context-menu\';\n\nexport default function McContextMenuDemo() {\n  return (\n    <McContextMenu>\n      <McContextMenuTrigger className="flex h-40 w-72 items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm text-muted-foreground">\n        Right click here\n      </McContextMenuTrigger>\n      <McContextMenuContent className="w-56">\n        <McContextMenuGroup>\n          <McContextMenuLabel>Actions</McContextMenuLabel>\n          <McContextMenuItem>\n            Back\n            <McContextMenuShortcut>Alt+Left</McContextMenuShortcut>\n          </McContextMenuItem>\n          <McContextMenuItem>\n            Forward\n            <McContextMenuShortcut>Alt+Right</McContextMenuShortcut>\n          </McContextMenuItem>\n          <McContextMenuItem disabled>Reload</McContextMenuItem>\n        </McContextMenuGroup>\n        <McContextMenuSub>\n          <McContextMenuSubTrigger>More tools</McContextMenuSubTrigger>\n          <McContextMenuSubContent>\n            <McContextMenuItem>Save page as...</McContextMenuItem>\n            <McContextMenuItem>Create shortcut...</McContextMenuItem>\n            <McContextMenuItem>Inspect</McContextMenuItem>\n          </McContextMenuSubContent>\n        </McContextMenuSub>\n        <McContextMenuSeparator />\n        <McContextMenuCheckboxItem checked>Show bookmarks</McContextMenuCheckboxItem>\n        <McContextMenuCheckboxItem>Show full URLs</McContextMenuCheckboxItem>\n        <McContextMenuSeparator />\n        <McContextMenuGroup>\n          <McContextMenuLabel inset>Density</McContextMenuLabel>\n          <McContextMenuRadioGroup value="comfortable">\n            <McContextMenuRadioItem value="compact">Compact</McContextMenuRadioItem>\n            <McContextMenuRadioItem value="comfortable">Comfortable</McContextMenuRadioItem>\n          </McContextMenuRadioGroup>\n        </McContextMenuGroup>\n      </McContextMenuContent>\n    </McContextMenu>\n  );\n}\n',
+      'import {\r\n  McContextMenu,\r\n  McContextMenuCheckboxItem,\r\n  McContextMenuContent,\r\n  McContextMenuGroup,\r\n  McContextMenuItem,\r\n  McContextMenuLabel,\r\n  McContextMenuRadioGroup,\r\n  McContextMenuRadioItem,\r\n  McContextMenuSeparator,\r\n  McContextMenuShortcut,\r\n  McContextMenuSub,\r\n  McContextMenuSubContent,\r\n  McContextMenuSubTrigger,\r\n  McContextMenuTrigger,\r\n} from \'@/registry/ui/mc-context-menu\';\r\n\r\nexport default function McContextMenuDemo() {\r\n  return (\r\n    <McContextMenu>\r\n      <McContextMenuTrigger className="flex h-40 w-72 items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm text-muted-foreground">\r\n        Right click here\r\n      </McContextMenuTrigger>\r\n      <McContextMenuContent className="w-56">\r\n        <McContextMenuGroup>\r\n          <McContextMenuLabel>Actions</McContextMenuLabel>\r\n          <McContextMenuItem>\r\n            Back\r\n            <McContextMenuShortcut>Alt+Left</McContextMenuShortcut>\r\n          </McContextMenuItem>\r\n          <McContextMenuItem>\r\n            Forward\r\n            <McContextMenuShortcut>Alt+Right</McContextMenuShortcut>\r\n          </McContextMenuItem>\r\n          <McContextMenuItem disabled>Reload</McContextMenuItem>\r\n        </McContextMenuGroup>\r\n        <McContextMenuSub>\r\n          <McContextMenuSubTrigger>More tools</McContextMenuSubTrigger>\r\n          <McContextMenuSubContent>\r\n            <McContextMenuItem>Save page as...</McContextMenuItem>\r\n            <McContextMenuItem>Create shortcut...</McContextMenuItem>\r\n            <McContextMenuItem>Inspect</McContextMenuItem>\r\n          </McContextMenuSubContent>\r\n        </McContextMenuSub>\r\n        <McContextMenuSeparator />\r\n        <McContextMenuCheckboxItem checked>Show bookmarks</McContextMenuCheckboxItem>\r\n        <McContextMenuCheckboxItem>Show full URLs</McContextMenuCheckboxItem>\r\n        <McContextMenuSeparator />\r\n        <McContextMenuGroup>\r\n          <McContextMenuLabel inset>Density</McContextMenuLabel>\r\n          <McContextMenuRadioGroup value="comfortable">\r\n            <McContextMenuRadioItem value="compact">Compact</McContextMenuRadioItem>\r\n            <McContextMenuRadioItem value="comfortable">Comfortable</McContextMenuRadioItem>\r\n          </McContextMenuRadioGroup>\r\n        </McContextMenuGroup>\r\n      </McContextMenuContent>\r\n    </McContextMenu>\r\n  );\r\n}\r\n',
   },
   'mc-accordion-demo': {
     name: 'mc-accordion-demo',
@@ -2825,13 +2838,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-accordion-demo.tsx',
         content:
-          'import {\n  McAccordion,\n  McAccordionContent,\n  McAccordionItem,\n  McAccordionTrigger,\n} from \'../ui/mc-accordion\';\n\nexport function AccordionDemo() {\n  return (\n    <McAccordion defaultValue={[\'product\']} className="max-w-lg">\n      <McAccordionItem value="product">\n        <McAccordionTrigger>Product Information</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Our flagship product combines cutting-edge technology with sleek design. Built with\n            premium materials, it offers unparalleled performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an intuitive user interface\n            designed for both beginners and experts.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="shipping">\n        <McAccordionTrigger>Shipping Details</McAccordionTrigger>\n        <McAccordionContent>\n          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>\n          <p>\n            Free shipping on international orders is available once the minimum order amount is\n            reached.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="returns">\n        <McAccordionTrigger>Return Policy</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n            processed within 5-7 business days.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n    </McAccordion>\n  );\n}\n\nexport default AccordionDemo;\n',
+          'import {\r\n  McAccordion,\r\n  McAccordionContent,\r\n  McAccordionItem,\r\n  McAccordionTrigger,\r\n} from \'../ui/mc-accordion\';\r\n\r\nexport function AccordionDemo() {\r\n  return (\r\n    <McAccordion defaultValue={[\'product\']} className="max-w-lg">\r\n      <McAccordionItem value="product">\r\n        <McAccordionTrigger>Product Information</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>\r\n            Our flagship product combines cutting-edge technology with sleek design. Built with\r\n            premium materials, it offers unparalleled performance and reliability.\r\n          </p>\r\n          <p>\r\n            Key features include advanced processing capabilities, and an intuitive user interface\r\n            designed for both beginners and experts.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n      <McAccordionItem value="shipping">\r\n        <McAccordionTrigger>Shipping Details</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>\r\n          <p>\r\n            Free shipping on international orders is available once the minimum order amount is\r\n            reached.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n      <McAccordionItem value="returns">\r\n        <McAccordionTrigger>Return Policy</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>\r\n            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\r\n            processed within 5-7 business days.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n    </McAccordion>\r\n  );\r\n}\r\n\r\nexport default AccordionDemo;\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-accordion-demo.tsx')),
     source:
-      'import {\n  McAccordion,\n  McAccordionContent,\n  McAccordionItem,\n  McAccordionTrigger,\n} from \'../ui/mc-accordion\';\n\nexport function AccordionDemo() {\n  return (\n    <McAccordion defaultValue={[\'product\']} className="max-w-lg">\n      <McAccordionItem value="product">\n        <McAccordionTrigger>Product Information</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Our flagship product combines cutting-edge technology with sleek design. Built with\n            premium materials, it offers unparalleled performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an intuitive user interface\n            designed for both beginners and experts.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="shipping">\n        <McAccordionTrigger>Shipping Details</McAccordionTrigger>\n        <McAccordionContent>\n          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>\n          <p>\n            Free shipping on international orders is available once the minimum order amount is\n            reached.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n      <McAccordionItem value="returns">\n        <McAccordionTrigger>Return Policy</McAccordionTrigger>\n        <McAccordionContent>\n          <p>\n            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n            processed within 5-7 business days.\n          </p>\n        </McAccordionContent>\n      </McAccordionItem>\n    </McAccordion>\n  );\n}\n\nexport default AccordionDemo;\n',
+      'import {\r\n  McAccordion,\r\n  McAccordionContent,\r\n  McAccordionItem,\r\n  McAccordionTrigger,\r\n} from \'../ui/mc-accordion\';\r\n\r\nexport function AccordionDemo() {\r\n  return (\r\n    <McAccordion defaultValue={[\'product\']} className="max-w-lg">\r\n      <McAccordionItem value="product">\r\n        <McAccordionTrigger>Product Information</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>\r\n            Our flagship product combines cutting-edge technology with sleek design. Built with\r\n            premium materials, it offers unparalleled performance and reliability.\r\n          </p>\r\n          <p>\r\n            Key features include advanced processing capabilities, and an intuitive user interface\r\n            designed for both beginners and experts.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n      <McAccordionItem value="shipping">\r\n        <McAccordionTrigger>Shipping Details</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>We offer standard (5-7 days), express (2-3 days), and overnight shipping.</p>\r\n          <p>\r\n            Free shipping on international orders is available once the minimum order amount is\r\n            reached.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n      <McAccordionItem value="returns">\r\n        <McAccordionTrigger>Return Policy</McAccordionTrigger>\r\n        <McAccordionContent>\r\n          <p>\r\n            Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\r\n            processed within 5-7 business days.\r\n          </p>\r\n        </McAccordionContent>\r\n      </McAccordionItem>\r\n    </McAccordion>\r\n  );\r\n}\r\n\r\nexport default AccordionDemo;\r\n',
   },
   'mc-separator-demo': {
     name: 'mc-separator-demo',
@@ -2857,13 +2870,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-scrollarea-demo.tsx',
         content:
-          'import { McScrollArea } from \'@/registry/ui/mc-scrollarea\';\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport default function McScrollAreaDemo() {\n  return <McScrollArea className="h-72 w-48" title="Tags" desc={tags}></McScrollArea>;\n}\n',
+          'import { McScrollArea } from \'@/registry/ui/mc-scrollarea\';\r\n\r\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\r\n\r\nexport default function McScrollAreaDemo() {\r\n  return <McScrollArea className="h-72 w-48" title="Tags" desc={tags}></McScrollArea>;\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-scrollarea-demo.tsx')),
     source:
-      'import { McScrollArea } from \'@/registry/ui/mc-scrollarea\';\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport default function McScrollAreaDemo() {\n  return <McScrollArea className="h-72 w-48" title="Tags" desc={tags}></McScrollArea>;\n}\n',
+      'import { McScrollArea } from \'@/registry/ui/mc-scrollarea\';\r\n\r\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\r\n\r\nexport default function McScrollAreaDemo() {\r\n  return <McScrollArea className="h-72 w-48" title="Tags" desc={tags}></McScrollArea>;\r\n}\r\n',
   },
   'mc-skeleton-demo': {
     name: 'mc-skeleton-demo',
@@ -2873,13 +2886,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-skeleton-demo.tsx',
         content:
-          'import { McSkeleton } from \'../ui/mc-skeleton\';\n\nexport default function McSkeletonDemo() {\n  return (\n    <div className="p-6">\n      <div className="w-full max-w-sm space-y-4">\n        {Array.from({ length: 3 }).map((_, i) => (\n          <div key={i} className="flex gap-3">\n            <McSkeleton className="h-12 w-12 shrink-0 rounded-full" />\n            <div className="flex-1 space-y-2">\n              <McSkeleton className="h-4 w-3/4" />\n              <McSkeleton className="h-3 w-full" />\n              <McSkeleton className="h-3 w-2/3" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n',
+          'import { McSkeleton } from \'../ui/mc-skeleton\';\r\n\r\nexport default function McSkeletonDemo() {\r\n  return (\r\n    <div className="p-6">\r\n      <div className="w-full max-w-sm space-y-4">\r\n        {Array.from({ length: 3 }).map((_, i) => (\r\n          <div key={i} className="flex gap-3">\r\n            <McSkeleton className="h-12 w-12 shrink-0 rounded-full" />\r\n            <div className="flex-1 space-y-2">\r\n              <McSkeleton className="h-4 w-3/4" />\r\n              <McSkeleton className="h-3 w-full" />\r\n              <McSkeleton className="h-3 w-2/3" />\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-skeleton-demo.tsx')),
     source:
-      'import { McSkeleton } from \'../ui/mc-skeleton\';\n\nexport default function McSkeletonDemo() {\n  return (\n    <div className="p-6">\n      <div className="w-full max-w-sm space-y-4">\n        {Array.from({ length: 3 }).map((_, i) => (\n          <div key={i} className="flex gap-3">\n            <McSkeleton className="h-12 w-12 shrink-0 rounded-full" />\n            <div className="flex-1 space-y-2">\n              <McSkeleton className="h-4 w-3/4" />\n              <McSkeleton className="h-3 w-full" />\n              <McSkeleton className="h-3 w-2/3" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n',
+      'import { McSkeleton } from \'../ui/mc-skeleton\';\r\n\r\nexport default function McSkeletonDemo() {\r\n  return (\r\n    <div className="p-6">\r\n      <div className="w-full max-w-sm space-y-4">\r\n        {Array.from({ length: 3 }).map((_, i) => (\r\n          <div key={i} className="flex gap-3">\r\n            <McSkeleton className="h-12 w-12 shrink-0 rounded-full" />\r\n            <div className="flex-1 space-y-2">\r\n              <McSkeleton className="h-4 w-3/4" />\r\n              <McSkeleton className="h-3 w-full" />\r\n              <McSkeleton className="h-3 w-2/3" />\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n',
   },
   'mc-badge-demo': {
     name: 'mc-badge-demo',
@@ -2889,13 +2902,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-badge-demo.tsx',
         content:
-          'import { ArrowRight } from \'lucide-react\';\nimport { McBadge } from \'../ui/mc-badge\';\n\nconst DotIcon = ({ className }: { className?: string }) => (\n  <span className={`rounded-full bg-current inline-block ${className ?? \'size-1.5\'}`} />\n);\n\nexport default function McBadgeDemo() {\n  return (\n    <div className="flex w-full flex-wrap gap-2">\n      <McBadge>Label</McBadge>\n      <McBadge variant="secondary">Secondary</McBadge>\n      <McBadge variant="destructive">Destructive</McBadge>\n      <McBadge variant="outline">Outline</McBadge>\n      <McBadge icon={<DotIcon className="size-1.5" />} iconPosition="start">\n        Status\n      </McBadge>\n      <McBadge icon={<ArrowRight />} iconPosition="end">\n        Learn more\n      </McBadge>\n      <McBadge\n        groupSize="md"\n        leadingBadge="New feature"\n        leadingBadgePosition="start"\n        icon={<ArrowRight />}\n        iconPosition="end"\n      >\n        We’ve just released a new feature\n      </McBadge>\n\n      <McBadge image="https://flagcdn.com/w40/au.png" imageAlt="Australia">\n        Label\n      </McBadge>\n    </div>\n  );\n}\n',
+          'import { ArrowRight } from \'lucide-react\';\r\nimport { McBadge } from \'../ui/mc-badge\';\r\n\r\nconst DotIcon = ({ className }: { className?: string }) => (\r\n  <span className={`rounded-full bg-current inline-block ${className ?? \'size-1.5\'}`} />\r\n);\r\n\r\nexport default function McBadgeDemo() {\r\n  return (\r\n    <div className="flex w-full flex-wrap gap-2">\r\n      <McBadge>Label</McBadge>\r\n      <McBadge variant="secondary">Secondary</McBadge>\r\n      <McBadge variant="destructive">Destructive</McBadge>\r\n      <McBadge variant="outline">Outline</McBadge>\r\n      <McBadge icon={<DotIcon className="size-1.5" />} iconPosition="start">\r\n        Status\r\n      </McBadge>\r\n      <McBadge icon={<ArrowRight />} iconPosition="end">\r\n        Learn more\r\n      </McBadge>\r\n      <McBadge\r\n        groupSize="md"\r\n        leadingBadge="New feature"\r\n        leadingBadgePosition="start"\r\n        icon={<ArrowRight />}\r\n        iconPosition="end"\r\n      >\r\n        We’ve just released a new feature\r\n      </McBadge>\r\n\r\n      <McBadge image="https://flagcdn.com/w40/au.png" imageAlt="Australia">\r\n        Label\r\n      </McBadge>\r\n    </div>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-badge-demo.tsx')),
     source:
-      'import { ArrowRight } from \'lucide-react\';\nimport { McBadge } from \'../ui/mc-badge\';\n\nconst DotIcon = ({ className }: { className?: string }) => (\n  <span className={`rounded-full bg-current inline-block ${className ?? \'size-1.5\'}`} />\n);\n\nexport default function McBadgeDemo() {\n  return (\n    <div className="flex w-full flex-wrap gap-2">\n      <McBadge>Label</McBadge>\n      <McBadge variant="secondary">Secondary</McBadge>\n      <McBadge variant="destructive">Destructive</McBadge>\n      <McBadge variant="outline">Outline</McBadge>\n      <McBadge icon={<DotIcon className="size-1.5" />} iconPosition="start">\n        Status\n      </McBadge>\n      <McBadge icon={<ArrowRight />} iconPosition="end">\n        Learn more\n      </McBadge>\n      <McBadge\n        groupSize="md"\n        leadingBadge="New feature"\n        leadingBadgePosition="start"\n        icon={<ArrowRight />}\n        iconPosition="end"\n      >\n        We’ve just released a new feature\n      </McBadge>\n\n      <McBadge image="https://flagcdn.com/w40/au.png" imageAlt="Australia">\n        Label\n      </McBadge>\n    </div>\n  );\n}\n',
+      'import { ArrowRight } from \'lucide-react\';\r\nimport { McBadge } from \'../ui/mc-badge\';\r\n\r\nconst DotIcon = ({ className }: { className?: string }) => (\r\n  <span className={`rounded-full bg-current inline-block ${className ?? \'size-1.5\'}`} />\r\n);\r\n\r\nexport default function McBadgeDemo() {\r\n  return (\r\n    <div className="flex w-full flex-wrap gap-2">\r\n      <McBadge>Label</McBadge>\r\n      <McBadge variant="secondary">Secondary</McBadge>\r\n      <McBadge variant="destructive">Destructive</McBadge>\r\n      <McBadge variant="outline">Outline</McBadge>\r\n      <McBadge icon={<DotIcon className="size-1.5" />} iconPosition="start">\r\n        Status\r\n      </McBadge>\r\n      <McBadge icon={<ArrowRight />} iconPosition="end">\r\n        Learn more\r\n      </McBadge>\r\n      <McBadge\r\n        groupSize="md"\r\n        leadingBadge="New feature"\r\n        leadingBadgePosition="start"\r\n        icon={<ArrowRight />}\r\n        iconPosition="end"\r\n      >\r\n        We’ve just released a new feature\r\n      </McBadge>\r\n\r\n      <McBadge image="https://flagcdn.com/w40/au.png" imageAlt="Australia">\r\n        Label\r\n      </McBadge>\r\n    </div>\r\n  );\r\n}\r\n',
   },
   'mc-avatar-demo': {
     name: 'mc-avatar-demo',
@@ -2905,13 +2918,13 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-avatar-demo.tsx',
         content:
-          'import {\n  McAvatar,\n  McAvatarBadge,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarImage,\n} from \'@/registry/ui/mc-avatar\';\n\nexport default function AvatarDemo() {\n  return (\n    <div className="flex flex-row flex-wrap gap-6 md:gap-12">\n      <McAvatar>\n        <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n        <McAvatarFallback>CN</McAvatarFallback>\n      </McAvatar>\n      <McAvatar>\n        <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n        <McAvatarFallback>ER</McAvatarFallback>\n        <McAvatarBadge className="bg-green-600 dark:bg-green-800" />\n      </McAvatar>\n      <McAvatarGroup className="grayscale">\n        <McAvatar>\n          <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n          <McAvatarFallback>CN</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />\n          <McAvatarFallback>LR</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n          <McAvatarFallback>ER</McAvatarFallback>\n        </McAvatar>\n        <McAvatarGroupCount>+3</McAvatarGroupCount>\n      </McAvatarGroup>\n    </div>\n  );\n}\n',
+          'import {\r\n  McAvatar,\r\n  McAvatarBadge,\r\n  McAvatarFallback,\r\n  McAvatarGroup,\r\n  McAvatarGroupCount,\r\n  McAvatarImage,\r\n} from \'@/registry/ui/mc-avatar\';\r\n\r\nexport default function AvatarDemo() {\r\n  return (\r\n    <div className="flex flex-row flex-wrap gap-6 md:gap-12">\r\n      <McAvatar>\r\n        <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\r\n        <McAvatarFallback>CN</McAvatarFallback>\r\n      </McAvatar>\r\n      <McAvatar>\r\n        <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\r\n        <McAvatarFallback>ER</McAvatarFallback>\r\n        <McAvatarBadge className="bg-green-600 dark:bg-green-800" />\r\n      </McAvatar>\r\n      <McAvatarGroup className="grayscale">\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\r\n          <McAvatarFallback>CN</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />\r\n          <McAvatarFallback>LR</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\r\n          <McAvatarFallback>ER</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatarGroupCount>+3</McAvatarGroupCount>\r\n      </McAvatarGroup>\r\n    </div>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-avatar-demo.tsx')),
     source:
-      'import {\n  McAvatar,\n  McAvatarBadge,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarImage,\n} from \'@/registry/ui/mc-avatar\';\n\nexport default function AvatarDemo() {\n  return (\n    <div className="flex flex-row flex-wrap gap-6 md:gap-12">\n      <McAvatar>\n        <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n        <McAvatarFallback>CN</McAvatarFallback>\n      </McAvatar>\n      <McAvatar>\n        <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n        <McAvatarFallback>ER</McAvatarFallback>\n        <McAvatarBadge className="bg-green-600 dark:bg-green-800" />\n      </McAvatar>\n      <McAvatarGroup className="grayscale">\n        <McAvatar>\n          <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\n          <McAvatarFallback>CN</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />\n          <McAvatarFallback>LR</McAvatarFallback>\n        </McAvatar>\n        <McAvatar>\n          <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\n          <McAvatarFallback>ER</McAvatarFallback>\n        </McAvatar>\n        <McAvatarGroupCount>+3</McAvatarGroupCount>\n      </McAvatarGroup>\n    </div>\n  );\n}\n',
+      'import {\r\n  McAvatar,\r\n  McAvatarBadge,\r\n  McAvatarFallback,\r\n  McAvatarGroup,\r\n  McAvatarGroupCount,\r\n  McAvatarImage,\r\n} from \'@/registry/ui/mc-avatar\';\r\n\r\nexport default function AvatarDemo() {\r\n  return (\r\n    <div className="flex flex-row flex-wrap gap-6 md:gap-12">\r\n      <McAvatar>\r\n        <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\r\n        <McAvatarFallback>CN</McAvatarFallback>\r\n      </McAvatar>\r\n      <McAvatar>\r\n        <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\r\n        <McAvatarFallback>ER</McAvatarFallback>\r\n        <McAvatarBadge className="bg-green-600 dark:bg-green-800" />\r\n      </McAvatar>\r\n      <McAvatarGroup className="grayscale">\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/Adel2411.png" alt="@Adel2411" />\r\n          <McAvatarFallback>CN</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />\r\n          <McAvatarFallback>LR</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatar>\r\n          <McAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />\r\n          <McAvatarFallback>ER</McAvatarFallback>\r\n        </McAvatar>\r\n        <McAvatarGroupCount>+3</McAvatarGroupCount>\r\n      </McAvatarGroup>\r\n    </div>\r\n  );\r\n}\r\n',
   },
   'mc-hover-card-demo': {
     name: 'mc-hover-card-demo',
@@ -2921,12 +2934,28 @@ export const Index: Record<string, any> = {
       {
         path: 'registry/examples/mc-hover-card-demo.tsx',
         content:
-          'import { McHoverCard, McHoverCardContent, McHoverCardTrigger } from \'../ui/mc-hover-card\';\n\nexport default function McHoverCardDemo() {\n  return (\n    <div>\n      <McHoverCard>\n        <McHoverCardTrigger>\n          <button type="button" className="cursor-pointer rounded-full">\n            hover me\n          </button>\n        </McHoverCardTrigger>\n        <McHoverCardContent\n          textAlign="start"\n          title="John Doe"\n          subtitle="Software Engineer"\n          description="John is a software engineer with 5 years of experience in web development. He loves working with React and TypeScript."\n        />\n      </McHoverCard>\n    </div>\n  );\n}\n',
+          'import { McHoverCard, McHoverCardContent, McHoverCardTrigger } from \'../ui/mc-hover-card\';\r\n\r\nexport default function McHoverCardDemo() {\r\n  return (\r\n    <div>\r\n      <McHoverCard>\r\n        <McHoverCardTrigger>\r\n          <button type="button" className="cursor-pointer rounded-full">\r\n            hover me\r\n          </button>\r\n        </McHoverCardTrigger>\r\n        <McHoverCardContent\r\n          textAlign="start"\r\n          title="John Doe"\r\n          subtitle="Software Engineer"\r\n          description="John is a software engineer with 5 years of experience in web development. He loves working with React and TypeScript."\r\n        />\r\n      </McHoverCard>\r\n    </div>\r\n  );\r\n}\r\n',
         type: 'registry:example',
       },
     ],
     component: React.lazy(() => import('@/registry/examples/mc-hover-card-demo.tsx')),
     source:
-      'import { McHoverCard, McHoverCardContent, McHoverCardTrigger } from \'../ui/mc-hover-card\';\n\nexport default function McHoverCardDemo() {\n  return (\n    <div>\n      <McHoverCard>\n        <McHoverCardTrigger>\n          <button type="button" className="cursor-pointer rounded-full">\n            hover me\n          </button>\n        </McHoverCardTrigger>\n        <McHoverCardContent\n          textAlign="start"\n          title="John Doe"\n          subtitle="Software Engineer"\n          description="John is a software engineer with 5 years of experience in web development. He loves working with React and TypeScript."\n        />\n      </McHoverCard>\n    </div>\n  );\n}\n',
+      'import { McHoverCard, McHoverCardContent, McHoverCardTrigger } from \'../ui/mc-hover-card\';\r\n\r\nexport default function McHoverCardDemo() {\r\n  return (\r\n    <div>\r\n      <McHoverCard>\r\n        <McHoverCardTrigger>\r\n          <button type="button" className="cursor-pointer rounded-full">\r\n            hover me\r\n          </button>\r\n        </McHoverCardTrigger>\r\n        <McHoverCardContent\r\n          textAlign="start"\r\n          title="John Doe"\r\n          subtitle="Software Engineer"\r\n          description="John is a software engineer with 5 years of experience in web development. He loves working with React and TypeScript."\r\n        />\r\n      </McHoverCard>\r\n    </div>\r\n  );\r\n}\r\n',
+  },
+  'mc-slider-demo': {
+    name: 'mc-slider-demo',
+    description: 'Demo for MicroClub Slider',
+    type: 'registry:example',
+    files: [
+      {
+        path: 'registry/examples/mc-slider-demo.tsx',
+        content:
+          'import { McSlider } from \'@/registry/ui/mc-slider\';\n\nexport default function SliderDemo() {\n  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;\n}\n',
+        type: 'registry:example',
+      },
+    ],
+    component: React.lazy(() => import('@/registry/examples/mc-slider-demo.tsx')),
+    source:
+      'import { McSlider } from \'@/registry/ui/mc-slider\';\n\nexport default function SliderDemo() {\n  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;\n}\n',
   },
 };
diff --git a/packages/web/__registry__/registry.autogenerated.json b/packages/web/__registry__/registry.autogenerated.json
index b3ef73f..28a6b6a 100644
--- a/packages/web/__registry__/registry.autogenerated.json
+++ b/packages/web/__registry__/registry.autogenerated.json
@@ -2544,6 +2544,19 @@
         }
       ],
       "type": "registry:component"
+    },
+    {
+      "name": "mc-slider",
+      "title": "MicroClub Slider",
+      "description": "A slider component for MicroClub UI",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/ui/mc-slider.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
     }
   ]
 }
diff --git a/packages/web/content/docs/components/mc-slider.mdx b/packages/web/content/docs/components/mc-slider.mdx
index 23f336c..b83ec24 100644
--- a/packages/web/content/docs/components/mc-slider.mdx
+++ b/packages/web/content/docs/components/mc-slider.mdx
@@ -1,9 +1,110 @@
 ---
 title: MC Slider
-description: A component for selecting a value from a range.
+description: A flexible slider for selecting a value from a range.
 ---
 
-<Callout type="warn">
-  This component is coming soon. Check our [contributing guide](/docs/introduction#contributing) for
-  more information.
-</Callout>
+## Overview
+
+The `mc-slider` is a core component of the MicroClub UI library. Built on the **@base-ui/react** slider primitive, it provides an accessible, keyboard-friendly range control with MicroClub's signature styling via **Tailwind CSS v4**.
+
+As part of the MicroClub library, this component is designed for **instant deployment into your codebase**, giving you full ownership of its look and behavior.
+
+## Preview
+
+<Tabs items={['preview', 'code']}>
+  <Tab>
+    <ComponentPreview name="mc-slider-demo" />
+  </Tab>
+  <Tab>
+    <ComponentSource name="mc-slider-demo" />
+  </Tab>
+</Tabs>
+
+## Add to Your Project
+
+Deploy the `mc-slider` directly to your `components/ui` directory:
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="pnpm">pnpm dlx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="yarn">yarn dlx mcoli-ui@latest add mc-slider</Tab>
+  <Tab value="bun">bunx mcoli-ui@latest add mc-slider</Tab>
+</Tabs>
+
+### Manual Setup
+
+If you prefer manual control:
+
+<Steps>
+
+<Step>Install the core dependencies</Step>
+
+<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
+  <Tab value="npm">npm install clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="pnpm">pnpm add clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="yarn">yarn add clsx tailwind-merge @base-ui/react</Tab>
+  <Tab value="bun">bun add clsx tailwind-merge @base-ui/react</Tab>
+</Tabs>
+
+<Step>Copy the source code</Step>
+
+<ComponentSource name="mc-slider" />
+
+<Step>Adjust import paths</Step>
+
+Ensure your `@/lib/utils` or equivalent classname helper is correctly imported.
+
+</Steps>
+
+## Usage
+
+```tsx
+import { McSlider } from '@/components/ui/mc-slider';
+
+export default function Example() {
+  return <McSlider defaultValue={[50]} max={100} step={1} />;
+}
+```
+
+## Examples
+
+### Basic
+
+```tsx
+<McSlider defaultValue={[40]} max={100} step={1} />
+```
+
+### Range
+
+```tsx
+<McSlider defaultValue={[20, 80]} max={100} step={1} />
+```
+
+### Vertical
+
+```tsx
+<McSlider defaultValue={[60]} max={100} orientation="vertical" className="h-48" />
+```
+
+### Disabled
+
+```tsx
+<McSlider defaultValue={[35]} max={100} disabled />
+```
+
+## API Reference
+
+### Props
+
+| Prop           | Type                         | Default        | Description                     |
+| -------------- | ---------------------------- | -------------- | ------------------------------- |
+| `defaultValue` | `number[]`                   | `undefined`    | Initial value(s) for the slider |
+| `value`        | `number[]`                   | `undefined`    | Controlled value(s)             |
+| `min`          | `number`                     | `0`            | Minimum slider value            |
+| `max`          | `number`                     | `100`          | Maximum slider value            |
+| `step`         | `number`                     | `1`            | Increment step                  |
+| `orientation`  | `"horizontal" \| "vertical"` | `"horizontal"` | Slider orientation              |
+| `disabled`     | `boolean`                    | `false`        | Disables interaction            |
+| `className`    | `string`                     | `undefined`    | Additional CSS classes          |
+
+All other props from `@base-ui/react/slider` are supported.
diff --git a/packages/web/public/r/mc-accordion.json b/packages/web/public/r/mc-accordion.json
index 9f2547d..97a43e6 100644
--- a/packages/web/public/r/mc-accordion.json
+++ b/packages/web/public/r/mc-accordion.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-accordion.tsx",
-      "content": "import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn('flex w-[503px] flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('not-last:border-b', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <ChevronUpIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  );\n}\n\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\n",
+      "content": "import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\r\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McAccordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot=\"accordion\"\r\n      className={cn('flex w-[503px] flex-col', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot=\"accordion-item\"\r\n      className={cn('not-last:border-b', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {\r\n  return (\r\n    <AccordionPrimitive.Header className=\"flex\">\r\n      <AccordionPrimitive.Trigger\r\n        data-slot=\"accordion-trigger\"\r\n        className={cn(\r\n          'group/accordion-trigger paragraph-md relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n        <ChevronDownIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\r\n        />\r\n        <ChevronUpIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\r\n        />\r\n      </AccordionPrimitive.Trigger>\r\n    </AccordionPrimitive.Header>\r\n  );\r\n}\r\n\r\nfunction McAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {\r\n  return (\r\n    <AccordionPrimitive.Panel\r\n      data-slot=\"accordion-content\"\r\n      className=\"paragraph-sm overflow-hidden font-normal text-muted-foreground data-open:animate-accordion-down data-closed:animate-accordion-up\"\r\n      {...props}\r\n    >\r\n      <div\r\n        className={cn(\r\n          'flex h-(--accordion-panel-height) flex-col gap-4 pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AccordionPrimitive.Panel>\r\n  );\r\n}\r\n\r\nexport { McAccordion, McAccordionItem, McAccordionTrigger, McAccordionContent };\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-alert-dialog.json b/packages/web/public/r/mc-alert-dialog.json
index 4c290cf..5badbfc 100644
--- a/packages/web/public/r/mc-alert-dialog.json
+++ b/packages/web/public/r/mc-alert-dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-alert-dialog.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\n\nfunction McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction McAlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <McAlertDialogPortal>\n      <McAlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',\n          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',\n          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',\n          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </McAlertDialogPortal>\n  );\n}\n\nfunction McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',\n        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',\n        'sm:flex-row sm:justify-end',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'flex flex-col items-center gap-1.5 text-center',\n        // responsive alignment adjustments\n        'sm:group-data-[size=default]/alert-dialog-content:items-start',\n        'sm:group-data-[size=default]/alert-dialog-content:text-left',\n\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        ' inline-flex size-6 items-center justify-center ',\n        \"sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogTitle({\n  className,\n  media,\n  icon,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {\n  media?: boolean;\n  icon?: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        ' sm:flex items-center gap-2.5',\n        'group-data-[size=sm]/alert-dialog-content:flex-col'\n      )}\n    >\n      {media && icon && <McAlertDialogMedia className=\"\">{icon}</McAlertDialogMedia>}\n      <AlertDialogPrimitive.Title\n        data-slot=\"alert-dialog-title\"\n        className={cn(\n          'cn-font-heading font-bold font-dm-sans text-[18px] leading-7  text-foreground ',\n          'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction McAlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 ',\n        '*:[a]:hover:text-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\n}\n\nfunction McAlertDialogCancel({\n  className,\n  variant = 'outline',\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn('', className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McAlertDialog,\n  McAlertDialogAction,\n  McAlertDialogCancel,\n  McAlertDialogContent,\n  McAlertDialogDescription,\n  McAlertDialogFooter,\n  McAlertDialogHeader,\n  McAlertDialogMedia,\n  McAlertDialogOverlay,\n  McAlertDialogPortal,\n  McAlertDialogTitle,\n  McAlertDialogTrigger,\n};\n",
+      "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\r\n\r\nimport { cn } from '@/lib/utils';\r\nimport { Button } from '@/components/ui/button';\r\n\r\nfunction McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\r\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\r\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\r\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\r\n}\r\n\r\nfunction McAlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {\r\n  return (\r\n    <AlertDialogPrimitive.Backdrop\r\n      data-slot=\"alert-dialog-overlay\"\r\n      className={cn(\r\n        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogContent({\r\n  className,\r\n  size = 'default',\r\n  ...props\r\n}: AlertDialogPrimitive.Popup.Props & {\r\n  size?: 'default' | 'sm';\r\n}) {\r\n  return (\r\n    <McAlertDialogPortal>\r\n      <McAlertDialogOverlay />\r\n      <AlertDialogPrimitive.Popup\r\n        data-slot=\"alert-dialog-content\"\r\n        data-size={size}\r\n        className={cn(\r\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',\r\n          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',\r\n          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',\r\n          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </McAlertDialogPortal>\r\n  );\r\n}\r\n\r\nfunction McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-footer\"\r\n      className={cn(\r\n        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',\r\n        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',\r\n        'sm:flex-row sm:justify-end',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-header\"\r\n      className={cn(\r\n        'flex flex-col items-center gap-1.5 text-center',\r\n        // responsive alignment adjustments\r\n        'sm:group-data-[size=default]/alert-dialog-content:items-start',\r\n        'sm:group-data-[size=default]/alert-dialog-content:text-left',\r\n\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-dialog-media\"\r\n      className={cn(\r\n        ' inline-flex size-6 items-center justify-center ',\r\n        \"sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogTitle({\r\n  className,\r\n  media,\r\n  icon,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title> & {\r\n  media?: boolean;\r\n  icon?: React.ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        ' sm:flex items-center gap-2.5',\r\n        'group-data-[size=sm]/alert-dialog-content:flex-col'\r\n      )}\r\n    >\r\n      {media && icon && <McAlertDialogMedia className=\"\">{icon}</McAlertDialogMedia>}\r\n      <AlertDialogPrimitive.Title\r\n        data-slot=\"alert-dialog-title\"\r\n        className={cn(\r\n          'cn-font-heading font-bold font-dm-sans text-[18px] leading-7  text-foreground ',\r\n          'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction McAlertDialogDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\r\n  return (\r\n    <AlertDialogPrimitive.Description\r\n      data-slot=\"alert-dialog-description\"\r\n      className={cn(\r\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 ',\r\n        '*:[a]:hover:text-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {\r\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\r\n}\r\n\r\nfunction McAlertDialogCancel({\r\n  className,\r\n  variant = 'outline',\r\n  size = 'default',\r\n  ...props\r\n}: AlertDialogPrimitive.Close.Props &\r\n  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {\r\n  return (\r\n    <AlertDialogPrimitive.Close\r\n      data-slot=\"alert-dialog-cancel\"\r\n      className={cn('', className)}\r\n      render={<Button variant={variant} size={size} />}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McAlertDialog,\r\n  McAlertDialogAction,\r\n  McAlertDialogCancel,\r\n  McAlertDialogContent,\r\n  McAlertDialogDescription,\r\n  McAlertDialogFooter,\r\n  McAlertDialogHeader,\r\n  McAlertDialogMedia,\r\n  McAlertDialogOverlay,\r\n  McAlertDialogPortal,\r\n  McAlertDialogTitle,\r\n  McAlertDialogTrigger,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-avatar.json b/packages/web/public/r/mc-avatar.json
index 07174ad..0018e11 100644
--- a/packages/web/public/r/mc-avatar.json
+++ b/packages/web/public/r/mc-avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-avatar.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\n\nimport { cn } from '@/lib/utils';\n\nfunction McAvatar({\n  className,\n  size = 'default',\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',\n        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',\n        ' ring-1 ring-border ring-inset ',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full rounded-full object-cover ', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',\n        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',\n        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',\n        'group-data-[size=2xl]/avatar:size-4 group-data-[size=2xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=xs]/avatar:size-2.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'not-empty:group-data-[size=md]/avatar:size-3.5 group-data-[size=md]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=lg]/avatar:size-4 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\n        'not-empty:group-data-[size=xl]/avatar:size-4.5 group-data-[size=xl]/avatar:[&>svg]:size-3',\n        'not-empty:group-data-[size=2xl]/avatar:size-5 group-data-[size=2xl]/avatar:[&>svg]:size-3.5',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McAvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McAvatar,\n  McAvatarImage,\n  McAvatarFallback,\n  McAvatarGroup,\n  McAvatarGroupCount,\n  McAvatarBadge,\n};\n",
+      "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McAvatar({\r\n  className,\r\n  size = 'default',\r\n  ...props\r\n}: AvatarPrimitive.Root.Props & {\r\n  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n}) {\r\n  return (\r\n    <AvatarPrimitive.Root\r\n      data-slot=\"avatar\"\r\n      data-size={size}\r\n      className={cn(\r\n        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',\r\n        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',\r\n        ' ring-1 ring-border ring-inset ',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\r\n  return (\r\n    <AvatarPrimitive.Image\r\n      data-slot=\"avatar-image\"\r\n      className={cn('aspect-square size-full rounded-full object-cover ', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\r\n  return (\r\n    <AvatarPrimitive.Fallback\r\n      data-slot=\"avatar-fallback\"\r\n      className={cn(\r\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',\r\n        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\r\n  return (\r\n    <span\r\n      data-slot=\"avatar-badge\"\r\n      className={cn(\r\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',\r\n        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\r\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\r\n        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',\r\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\r\n        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',\r\n        'group-data-[size=2xl]/avatar:size-4 group-data-[size=2xl]/avatar:[&>svg]:size-3',\r\n        'not-empty:group-data-[size=xs]/avatar:size-2.5 group-data-[size=xs]/avatar:[&>svg]:hidden',\r\n        'not-empty:group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:hidden',\r\n        'not-empty:group-data-[size=md]/avatar:size-3.5 group-data-[size=md]/avatar:[&>svg]:size-2.5',\r\n        'not-empty:group-data-[size=lg]/avatar:size-4 group-data-[size=lg]/avatar:[&>svg]:size-2.5',\r\n        'not-empty:group-data-[size=xl]/avatar:size-4.5 group-data-[size=xl]/avatar:[&>svg]:size-3',\r\n        'not-empty:group-data-[size=2xl]/avatar:size-5 group-data-[size=2xl]/avatar:[&>svg]:size-3.5',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"avatar-group\"\r\n      className={cn(\r\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McAvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"avatar-group-count\"\r\n      className={cn(\r\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McAvatar,\r\n  McAvatarImage,\r\n  McAvatarFallback,\r\n  McAvatarGroup,\r\n  McAvatarGroupCount,\r\n  McAvatarBadge,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-badge.json b/packages/web/public/r/mc-badge.json
index c2a213a..a23140a 100644
--- a/packages/web/public/r/mc-badge.json
+++ b/packages/web/public/r/mc-badge.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-badge.tsx",
-      "content": "import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cloneElement, isValidElement } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst McBadgeVariants = cva(\n  'group/badge inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[16px] border border-[#E6E9FF] text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:self-center',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n        destructive:\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n        leading: 'bg-accent-foreground text-accent',\n      },\n      size: {\n        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',\n        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',\n        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'sm',\n    },\n  }\n);\n\nfunction McBadge({\n  className,\n  variant = 'default',\n  size = 'sm',\n  render,\n  icon,\n  iconPosition = 'start',\n  iconOnly = false,\n  image,\n  imageAlt = '',\n  imagePosition = 'start',\n  leadingBadge,\n  leadingBadgePosition = 'start',\n  leadingBadgeIcon,\n  groupSize = 'md',\n  children,\n  ...props\n}: useRender.ComponentProps<'span'> &\n  VariantProps<typeof McBadgeVariants> & {\n    icon?: ReactNode;\n    iconPosition?: 'start' | 'end';\n    iconOnly?: boolean;\n    image?: string;\n    imageAlt?: string;\n    imagePosition?: 'start' | 'end';\n    leadingBadge?: ReactNode;\n    leadingBadgePosition?: 'start' | 'end';\n    leadingBadgeIcon?: ReactNode;\n    groupSize?: 'md' | 'lg';\n  }) {\n  const groupSizeClasses = {\n    md: 'h-[30px] leading-[22px]',\n    lg: 'h-[36px] leading-[26px]',\n  } as const;\n  const groupChildSize = groupSize === 'md' ? 'groupMd' : 'groupLg';\n\n  const imageEl = image ? (\n    <img src={image} alt={imageAlt} className=\"size-4 shrink-0 rounded-full object-cover\" />\n  ) : null;\n\n  const useParentIcon = !leadingBadge || leadingBadgePosition === 'start';\n  const rawIcon = useParentIcon ? icon : undefined;\n  const parentIcon = rawIcon ? (\n    <span style={{ display: 'contents', pointerEvents: 'none' }}>\n      <span\n        style={{\n          width: 12,\n          height: 12,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n        }}\n      >\n        {rawIcon}\n      </span>\n    </span>\n  ) : undefined;\n\n  const parentIconPlacement = parentIcon\n    ? iconPosition === 'end'\n      ? 'inline-end'\n      : 'inline-start'\n    : undefined;\n\n  const contentWithIcon = parentIcon ? (\n    iconPosition === 'end' ? (\n      <>\n        {children}\n        {parentIcon}\n      </>\n    ) : (\n      <>\n        {parentIcon}\n        {children}\n      </>\n    )\n  ) : (\n    children\n  );\n\n  const content = imageEl ? (\n    imagePosition === 'end' ? (\n      <>\n        {contentWithIcon}\n        {imageEl}\n      </>\n    ) : (\n      <>\n        {imageEl}\n        {contentWithIcon}\n      </>\n    )\n  ) : (\n    contentWithIcon\n  );\n\n  const resolvedLeadingBadge = leadingBadge ? (\n    isValidElement(leadingBadge) ? (\n      cloneElement(leadingBadge as React.ReactElement<Record<string, unknown>>, {\n        size: groupChildSize,\n        variant: 'leading', // ← forcé\n        icon: leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined,\n        iconPosition: 'end',\n      })\n    ) : (\n      <McBadge\n        size={groupChildSize}\n        variant=\"leading\" // ← forcé\n        icon={leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined}\n        iconPosition=\"end\"\n      >\n        {leadingBadge}\n      </McBadge>\n    )\n  ) : null;\n\n  const groupedContent = resolvedLeadingBadge ? (\n    leadingBadgePosition === 'end' ? (\n      <div className=\"flex items-center gap-3\">\n        {content}\n        {resolvedLeadingBadge}\n      </div>\n    ) : (\n      <div className=\"flex items-center gap-3\">\n        {resolvedLeadingBadge}\n        {content}\n      </div>\n    )\n  ) : (\n    content\n  );\n\n  const dataIconProps = parentIconPlacement\n    ? ({ 'data-icon': parentIconPlacement } as Record<string, string>)\n    : undefined;\n\n  const iconOnlyClasses = iconOnly ? 'min-w-0 px-1.5' : undefined;\n\n  const imagePaddingClasses = image\n    ? imagePosition === 'start'\n      ? 'pl-[3px]'\n      : 'pr-[3px]'\n    : undefined;\n\n  const groupPaddingClasses = resolvedLeadingBadge\n    ? leadingBadgePosition === 'start'\n      ? 'pl-1 pr-[10px]'\n      : 'pl-[10px] pr-1'\n    : undefined;\n\n  return useRender({\n    defaultTagName: 'span',\n    props: mergeProps<'span'>(\n      {\n        className: cn(\n          McBadgeVariants({ variant, size }),\n          leadingBadge ? groupSizeClasses[groupSize] : undefined,\n          iconOnlyClasses,\n          imagePaddingClasses,\n          groupPaddingClasses,\n          className\n        ),\n        ...(dataIconProps ?? {}),\n        children: groupedContent,\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'badge',\n      variant,\n      size,\n    },\n  });\n}\n\nexport { McBadge, McBadgeVariants };\n",
+      "content": "import { mergeProps } from '@base-ui/react/merge-props';\r\nimport { useRender } from '@base-ui/react/use-render';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport type { ReactNode } from 'react';\r\nimport { cloneElement, isValidElement } from 'react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst McBadgeVariants = cva(\r\n  'group/badge inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[16px] border border-[#E6E9FF] text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:self-center',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',\r\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\r\n        destructive:\r\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\r\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\r\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\r\n        leading: 'bg-accent-foreground text-accent',\r\n      },\r\n      size: {\r\n        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\r\n        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',\r\n        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',\r\n        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\r\n        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'default',\r\n      size: 'sm',\r\n    },\r\n  }\r\n);\r\n\r\nfunction McBadge({\r\n  className,\r\n  variant = 'default',\r\n  size = 'sm',\r\n  render,\r\n  icon,\r\n  iconPosition = 'start',\r\n  iconOnly = false,\r\n  image,\r\n  imageAlt = '',\r\n  imagePosition = 'start',\r\n  leadingBadge,\r\n  leadingBadgePosition = 'start',\r\n  leadingBadgeIcon,\r\n  groupSize = 'md',\r\n  children,\r\n  ...props\r\n}: useRender.ComponentProps<'span'> &\r\n  VariantProps<typeof McBadgeVariants> & {\r\n    icon?: ReactNode;\r\n    iconPosition?: 'start' | 'end';\r\n    iconOnly?: boolean;\r\n    image?: string;\r\n    imageAlt?: string;\r\n    imagePosition?: 'start' | 'end';\r\n    leadingBadge?: ReactNode;\r\n    leadingBadgePosition?: 'start' | 'end';\r\n    leadingBadgeIcon?: ReactNode;\r\n    groupSize?: 'md' | 'lg';\r\n  }) {\r\n  const groupSizeClasses = {\r\n    md: 'h-[30px] leading-[22px]',\r\n    lg: 'h-[36px] leading-[26px]',\r\n  } as const;\r\n  const groupChildSize = groupSize === 'md' ? 'groupMd' : 'groupLg';\r\n\r\n  const imageEl = image ? (\r\n    <img src={image} alt={imageAlt} className=\"size-4 shrink-0 rounded-full object-cover\" />\r\n  ) : null;\r\n\r\n  const useParentIcon = !leadingBadge || leadingBadgePosition === 'start';\r\n  const rawIcon = useParentIcon ? icon : undefined;\r\n  const parentIcon = rawIcon ? (\r\n    <span style={{ display: 'contents', pointerEvents: 'none' }}>\r\n      <span\r\n        style={{\r\n          width: 12,\r\n          height: 12,\r\n          display: 'inline-flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          flexShrink: 0,\r\n        }}\r\n      >\r\n        {rawIcon}\r\n      </span>\r\n    </span>\r\n  ) : undefined;\r\n\r\n  const parentIconPlacement = parentIcon\r\n    ? iconPosition === 'end'\r\n      ? 'inline-end'\r\n      : 'inline-start'\r\n    : undefined;\r\n\r\n  const contentWithIcon = parentIcon ? (\r\n    iconPosition === 'end' ? (\r\n      <>\r\n        {children}\r\n        {parentIcon}\r\n      </>\r\n    ) : (\r\n      <>\r\n        {parentIcon}\r\n        {children}\r\n      </>\r\n    )\r\n  ) : (\r\n    children\r\n  );\r\n\r\n  const content = imageEl ? (\r\n    imagePosition === 'end' ? (\r\n      <>\r\n        {contentWithIcon}\r\n        {imageEl}\r\n      </>\r\n    ) : (\r\n      <>\r\n        {imageEl}\r\n        {contentWithIcon}\r\n      </>\r\n    )\r\n  ) : (\r\n    contentWithIcon\r\n  );\r\n\r\n  const resolvedLeadingBadge = leadingBadge ? (\r\n    isValidElement(leadingBadge) ? (\r\n      cloneElement(leadingBadge as React.ReactElement<Record<string, unknown>>, {\r\n        size: groupChildSize,\r\n        variant: 'leading', // ← forcé\r\n        icon: leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined,\r\n        iconPosition: 'end',\r\n      })\r\n    ) : (\r\n      <McBadge\r\n        size={groupChildSize}\r\n        variant=\"leading\" // ← forcé\r\n        icon={leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined}\r\n        iconPosition=\"end\"\r\n      >\r\n        {leadingBadge}\r\n      </McBadge>\r\n    )\r\n  ) : null;\r\n\r\n  const groupedContent = resolvedLeadingBadge ? (\r\n    leadingBadgePosition === 'end' ? (\r\n      <div className=\"flex items-center gap-3\">\r\n        {content}\r\n        {resolvedLeadingBadge}\r\n      </div>\r\n    ) : (\r\n      <div className=\"flex items-center gap-3\">\r\n        {resolvedLeadingBadge}\r\n        {content}\r\n      </div>\r\n    )\r\n  ) : (\r\n    content\r\n  );\r\n\r\n  const dataIconProps = parentIconPlacement\r\n    ? ({ 'data-icon': parentIconPlacement } as Record<string, string>)\r\n    : undefined;\r\n\r\n  const iconOnlyClasses = iconOnly ? 'min-w-0 px-1.5' : undefined;\r\n\r\n  const imagePaddingClasses = image\r\n    ? imagePosition === 'start'\r\n      ? 'pl-[3px]'\r\n      : 'pr-[3px]'\r\n    : undefined;\r\n\r\n  const groupPaddingClasses = resolvedLeadingBadge\r\n    ? leadingBadgePosition === 'start'\r\n      ? 'pl-1 pr-[10px]'\r\n      : 'pl-[10px] pr-1'\r\n    : undefined;\r\n\r\n  return useRender({\r\n    defaultTagName: 'span',\r\n    props: mergeProps<'span'>(\r\n      {\r\n        className: cn(\r\n          McBadgeVariants({ variant, size }),\r\n          leadingBadge ? groupSizeClasses[groupSize] : undefined,\r\n          iconOnlyClasses,\r\n          imagePaddingClasses,\r\n          groupPaddingClasses,\r\n          className\r\n        ),\r\n        ...(dataIconProps ?? {}),\r\n        children: groupedContent,\r\n      },\r\n      props\r\n    ),\r\n    render,\r\n    state: {\r\n      slot: 'badge',\r\n      variant,\r\n      size,\r\n    },\r\n  });\r\n}\r\n\r\nexport { McBadge, McBadgeVariants };\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-combobox.json b/packages/web/public/r/mc-combobox.json
index 2dae2d6..f44babb 100644
--- a/packages/web/public/r/mc-combobox.json
+++ b/packages/web/public/r/mc-combobox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-combobox.tsx",
-      "content": "'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst McCombobox = ComboboxPrimitive.Root;\n\nfunction McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction McComboboxTrigger({\n  className,\n  placeholder,\n  ...props\n}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\n        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',\n        className\n      )}\n      {...props}\n    >\n      <McComboboxValue placeholder={placeholder} />\n      <ChevronsUpDown className=\"size-4 text-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction McComboboxSearch({\n  className,\n  placeholder,\n  ...props\n}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {\n  return (\n    <div className=\"flex items-center border-b px-3 h-fit w-full gap-2\" data-slot=\"combobox-search\">\n      <SearchIcon className=\"text-muted-foreground size-4\" />\n      <ComboboxPrimitive.Input\n        className={cn(\n          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',\n          className\n        )}\n        placeholder={placeholder}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction McComboboxContent({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn('p-1 h-fit w-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        'relative flex w-full rounded py-1.5 px-2 gap-2 justify-between paragraph-sm items-center',\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4 text-accent-foreground\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport {\n  McCombobox,\n  McComboboxTrigger,\n  McComboboxSearch,\n  McComboboxContent,\n  McComboboxList,\n  McComboboxItem,\n  McComboboxValue,\n};\n",
+      "content": "'use client';\r\n\r\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\r\nimport { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst McCombobox = ComboboxPrimitive.Root;\r\n\r\nfunction McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\r\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\r\n}\r\n\r\nfunction McComboboxTrigger({\r\n  className,\r\n  placeholder,\r\n  ...props\r\n}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {\r\n  return (\r\n    <ComboboxPrimitive.Trigger\r\n      data-slot=\"combobox-trigger\"\r\n      className={cn(\r\n        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <McComboboxValue placeholder={placeholder} />\r\n      <ChevronsUpDown className=\"size-4 text-foreground\" />\r\n    </ComboboxPrimitive.Trigger>\r\n  );\r\n}\r\n\r\nfunction McComboboxSearch({\r\n  className,\r\n  placeholder,\r\n  ...props\r\n}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {\r\n  return (\r\n    <div className=\"flex items-center border-b px-3 h-fit w-full gap-2\" data-slot=\"combobox-search\">\r\n      <SearchIcon className=\"text-muted-foreground size-4\" />\r\n      <ComboboxPrimitive.Input\r\n        className={cn(\r\n          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',\r\n          className\r\n        )}\r\n        placeholder={placeholder}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction McComboboxContent({\r\n  className,\r\n  side = 'bottom',\r\n  sideOffset = 8,\r\n  align = 'start',\r\n  ...props\r\n}: ComboboxPrimitive.Popup.Props &\r\n  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {\r\n  return (\r\n    <ComboboxPrimitive.Portal>\r\n      <ComboboxPrimitive.Positioner\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        align={align}\r\n        className=\"isolate z-50\"\r\n      >\r\n        <ComboboxPrimitive.Popup\r\n          data-slot=\"combobox-content\"\r\n          className={cn(\r\n            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </ComboboxPrimitive.Positioner>\r\n    </ComboboxPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\r\n  return (\r\n    <ComboboxPrimitive.List\r\n      data-slot=\"combobox-list\"\r\n      className={cn('p-1 h-fit w-full', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\r\n  return (\r\n    <ComboboxPrimitive.Item\r\n      data-slot=\"combobox-item\"\r\n      className={cn(\r\n        'relative flex w-full rounded py-1.5 px-2 gap-2 justify-between paragraph-sm items-center',\r\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ComboboxPrimitive.ItemIndicator>\r\n        <CheckIcon className=\"size-4 text-accent-foreground\" />\r\n      </ComboboxPrimitive.ItemIndicator>\r\n    </ComboboxPrimitive.Item>\r\n  );\r\n}\r\n\r\nexport {\r\n  McCombobox,\r\n  McComboboxTrigger,\r\n  McComboboxSearch,\r\n  McComboboxContent,\r\n  McComboboxList,\r\n  McComboboxItem,\r\n  McComboboxValue,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-context-menu.json b/packages/web/public/r/mc-context-menu.json
index e5e8202..f67376a 100644
--- a/packages/web/public/r/mc-context-menu.json
+++ b/packages/web/public/r/mc-context-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-context-menu.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction McContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction McContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\nfunction McContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn('select-none', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuContent({\n  className,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction McContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\nfunction McContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n}\n\nfunction McContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction McContextMenuSubContent({ ...props }: React.ComponentProps<typeof McContextMenuContent>) {\n  return (\n    <McContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction McContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\nfunction McContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction McContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McContextMenu,\n  McContextMenuTrigger,\n  McContextMenuContent,\n  McContextMenuItem,\n  McContextMenuCheckboxItem,\n  McContextMenuRadioItem,\n  McContextMenuLabel,\n  McContextMenuSeparator,\n  McContextMenuShortcut,\n  McContextMenuGroup,\n  McContextMenuPortal,\n  McContextMenuSub,\n  McContextMenuSubContent,\n  McContextMenuSubTrigger,\n  McContextMenuRadioGroup,\n};\n",
+      "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\r\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\r\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\r\n}\r\n\r\nfunction McContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\r\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\r\n}\r\n\r\nfunction McContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {\r\n  return (\r\n    <ContextMenuPrimitive.Trigger\r\n      data-slot=\"context-menu-trigger\"\r\n      className={cn('select-none', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuContent({\r\n  className,\r\n  align = 'start',\r\n  alignOffset = 4,\r\n  side = 'right',\r\n  sideOffset = 0,\r\n  ...props\r\n}: ContextMenuPrimitive.Popup.Props &\r\n  Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\r\n  return (\r\n    <ContextMenuPrimitive.Portal>\r\n      <ContextMenuPrimitive.Positioner\r\n        className=\"isolate z-50 outline-none\"\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n      >\r\n        <ContextMenuPrimitive.Popup\r\n          data-slot=\"context-menu-content\"\r\n          className={cn(\r\n            'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </ContextMenuPrimitive.Positioner>\r\n    </ContextMenuPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\r\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\r\n}\r\n\r\nfunction McContextMenuLabel({\r\n  className,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.GroupLabel.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.GroupLabel\r\n      data-slot=\"context-menu-label\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuItem({\r\n  className,\r\n  inset,\r\n  variant = 'default',\r\n  ...props\r\n}: ContextMenuPrimitive.Item.Props & {\r\n  inset?: boolean;\r\n  variant?: 'default' | 'destructive';\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.Item\r\n      data-slot=\"context-menu-item\"\r\n      data-inset={inset}\r\n      data-variant={variant}\r\n      className={cn(\r\n        \"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\r\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\r\n}\r\n\r\nfunction McContextMenuSubTrigger({\r\n  className,\r\n  inset,\r\n  children,\r\n  ...props\r\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.SubmenuTrigger\r\n      data-slot=\"context-menu-sub-trigger\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\r\n    </ContextMenuPrimitive.SubmenuTrigger>\r\n  );\r\n}\r\n\r\nfunction McContextMenuSubContent({ ...props }: React.ComponentProps<typeof McContextMenuContent>) {\r\n  return (\r\n    <McContextMenuContent\r\n      data-slot=\"context-menu-sub-content\"\r\n      className=\"shadow-lg\"\r\n      side=\"right\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuCheckboxItem({\r\n  className,\r\n  children,\r\n  checked,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.CheckboxItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.CheckboxItem\r\n      data-slot=\"context-menu-checkbox-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      checked={checked}\r\n      {...props}\r\n    >\r\n      <span className=\"pointer-events-none absolute right-2\">\r\n        <ContextMenuPrimitive.CheckboxItemIndicator>\r\n          <CheckIcon />\r\n        </ContextMenuPrimitive.CheckboxItemIndicator>\r\n      </span>\r\n      {children}\r\n    </ContextMenuPrimitive.CheckboxItem>\r\n  );\r\n}\r\n\r\nfunction McContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {\r\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\r\n}\r\n\r\nfunction McContextMenuRadioItem({\r\n  className,\r\n  children,\r\n  inset,\r\n  ...props\r\n}: ContextMenuPrimitive.RadioItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <ContextMenuPrimitive.RadioItem\r\n      data-slot=\"context-menu-radio-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span className=\"pointer-events-none absolute right-2\">\r\n        <ContextMenuPrimitive.RadioItemIndicator>\r\n          <CheckIcon />\r\n        </ContextMenuPrimitive.RadioItemIndicator>\r\n      </span>\r\n      {children}\r\n    </ContextMenuPrimitive.RadioItem>\r\n  );\r\n}\r\n\r\nfunction McContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {\r\n  return (\r\n    <ContextMenuPrimitive.Separator\r\n      data-slot=\"context-menu-separator\"\r\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\r\n  return (\r\n    <span\r\n      data-slot=\"context-menu-shortcut\"\r\n      className={cn(\r\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McContextMenu,\r\n  McContextMenuTrigger,\r\n  McContextMenuContent,\r\n  McContextMenuItem,\r\n  McContextMenuCheckboxItem,\r\n  McContextMenuRadioItem,\r\n  McContextMenuLabel,\r\n  McContextMenuSeparator,\r\n  McContextMenuShortcut,\r\n  McContextMenuGroup,\r\n  McContextMenuPortal,\r\n  McContextMenuSub,\r\n  McContextMenuSubContent,\r\n  McContextMenuSubTrigger,\r\n  McContextMenuRadioGroup,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-dropdown-menu.json b/packages/web/public/r/mc-dropdown-menu.json
index ffe0464..4199ddd 100644
--- a/packages/web/public/r/mc-dropdown-menu.json
+++ b/packages/web/public/r/mc-dropdown-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-dropdown-menu.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nfunction McDropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction McDropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction McDropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction McDropdownMenuContent({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground opacity-100 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction McDropdownMenuGroup({\n  className,\n  ...props\n}: MenuPrimitive.Group.Props & { className?: string }) {\n  return (\n    <MenuPrimitive.Group\n      data-slot=\"dropdown-menu-group\"\n      className={cn('w-56 h-[100px] opacity-100 pt-1 px-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'font-sans font-semibold text-sm leading-5 px-1.5 py-1 text-foreground data-inset:pl-7',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex cursor-default items-center gap-2 w-[208px] h-8 opacity-100 rounded-sm px-2 py-1.5 font-sans font-normal text-sm leading-5 outline-hidden select-none data-inset:pl-7 hover:bg-muted hover:text-muted-foreground focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction McDropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction McDropdownMenuSubContent({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof McDropdownMenuContent>) {\n  return (\n    <McDropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex w-[216px] h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-sm leading-5 font-normal text-muted-foreground outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none mr-2 flex items-center justify-center w-4\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      <span className=\"truncate\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction McDropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction McDropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      <span>{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction McDropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  McDropdownMenu,\n  McDropdownMenuPortal,\n  McDropdownMenuTrigger,\n  McDropdownMenuContent,\n  McDropdownMenuGroup,\n  McDropdownMenuLabel,\n  McDropdownMenuItem,\n  McDropdownMenuCheckboxItem,\n  McDropdownMenuRadioGroup,\n  McDropdownMenuRadioItem,\n  McDropdownMenuSeparator,\n  McDropdownMenuShortcut,\n  McDropdownMenuSub,\n  McDropdownMenuSubTrigger,\n  McDropdownMenuSubContent,\n};\n",
+      "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\r\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McDropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\r\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\r\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\r\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuContent({\r\n  align = 'start',\r\n  alignOffset = 0,\r\n  side = 'bottom',\r\n  sideOffset = 4,\r\n  className,\r\n  ...props\r\n}: MenuPrimitive.Popup.Props &\r\n  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\r\n  return (\r\n    <MenuPrimitive.Portal>\r\n      <MenuPrimitive.Positioner\r\n        className=\"isolate z-50 outline-none\"\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n      >\r\n        <MenuPrimitive.Popup\r\n          data-slot=\"dropdown-menu-content\"\r\n          className={cn(\r\n            'z-50 w-56 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground opacity-100 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </MenuPrimitive.Positioner>\r\n    </MenuPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuGroup({\r\n  className,\r\n  ...props\r\n}: MenuPrimitive.Group.Props & { className?: string }) {\r\n  return (\r\n    <MenuPrimitive.Group\r\n      data-slot=\"dropdown-menu-group\"\r\n      className={cn('w-56 h-[100px] opacity-100 pt-1 px-1', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuLabel({\r\n  className,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.GroupLabel.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.GroupLabel\r\n      data-slot=\"dropdown-menu-label\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        'font-sans font-semibold text-sm leading-5 px-1.5 py-1 text-foreground data-inset:pl-7',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuItem({\r\n  className,\r\n  inset,\r\n  variant = 'default',\r\n  ...props\r\n}: MenuPrimitive.Item.Props & {\r\n  inset?: boolean;\r\n  variant?: 'default' | 'destructive';\r\n}) {\r\n  return (\r\n    <MenuPrimitive.Item\r\n      data-slot=\"dropdown-menu-item\"\r\n      data-inset={inset}\r\n      data-variant={variant}\r\n      className={cn(\r\n        'group/dropdown-menu-item relative flex cursor-default items-center gap-2 w-[208px] h-8 opacity-100 rounded-sm px-2 py-1.5 font-sans font-normal text-sm leading-5 outline-hidden select-none data-inset:pl-7 hover:bg-muted hover:text-muted-foreground focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\r\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuSubTrigger({\r\n  className,\r\n  inset,\r\n  children,\r\n  ...props\r\n}: MenuPrimitive.SubmenuTrigger.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.SubmenuTrigger\r\n      data-slot=\"dropdown-menu-sub-trigger\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\r\n    </MenuPrimitive.SubmenuTrigger>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSubContent({\r\n  align = 'start',\r\n  alignOffset = -3,\r\n  side = 'right',\r\n  sideOffset = 0,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof McDropdownMenuContent>) {\r\n  return (\r\n    <McDropdownMenuContent\r\n      data-slot=\"dropdown-menu-sub-content\"\r\n      className={cn(\r\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n        className\r\n      )}\r\n      align={align}\r\n      alignOffset={alignOffset}\r\n      side={side}\r\n      sideOffset={sideOffset}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuCheckboxItem({\r\n  className,\r\n  children,\r\n  checked,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.CheckboxItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.CheckboxItem\r\n      data-slot=\"dropdown-menu-checkbox-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        'relative flex w-[216px] h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-sm leading-5 font-normal text-muted-foreground outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\r\n        className\r\n      )}\r\n      checked={checked}\r\n      {...props}\r\n    >\r\n      <span\r\n        className=\"pointer-events-none mr-2 flex items-center justify-center w-4\"\r\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\r\n      >\r\n        <MenuPrimitive.CheckboxItemIndicator>\r\n          <CheckIcon />\r\n        </MenuPrimitive.CheckboxItemIndicator>\r\n      </span>\r\n      <span className=\"truncate\">{children}</span>\r\n    </MenuPrimitive.CheckboxItem>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\r\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\r\n}\r\n\r\nfunction McDropdownMenuRadioItem({\r\n  className,\r\n  children,\r\n  inset,\r\n  ...props\r\n}: MenuPrimitive.RadioItem.Props & {\r\n  inset?: boolean;\r\n}) {\r\n  return (\r\n    <MenuPrimitive.RadioItem\r\n      data-slot=\"dropdown-menu-radio-item\"\r\n      data-inset={inset}\r\n      className={cn(\r\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span\r\n        className=\"pointer-events-none flex items-center justify-center\"\r\n        data-slot=\"dropdown-menu-radio-item-indicator\"\r\n      >\r\n        <MenuPrimitive.RadioItemIndicator>\r\n          <CheckIcon />\r\n        </MenuPrimitive.RadioItemIndicator>\r\n      </span>\r\n      <span>{children}</span>\r\n    </MenuPrimitive.RadioItem>\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\r\n  return (\r\n    <MenuPrimitive.Separator\r\n      data-slot=\"dropdown-menu-separator\"\r\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McDropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\r\n  return (\r\n    <span\r\n      data-slot=\"dropdown-menu-shortcut\"\r\n      className={cn(\r\n        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  McDropdownMenu,\r\n  McDropdownMenuPortal,\r\n  McDropdownMenuTrigger,\r\n  McDropdownMenuContent,\r\n  McDropdownMenuGroup,\r\n  McDropdownMenuLabel,\r\n  McDropdownMenuItem,\r\n  McDropdownMenuCheckboxItem,\r\n  McDropdownMenuRadioGroup,\r\n  McDropdownMenuRadioItem,\r\n  McDropdownMenuSeparator,\r\n  McDropdownMenuShortcut,\r\n  McDropdownMenuSub,\r\n  McDropdownMenuSubTrigger,\r\n  McDropdownMenuSubContent,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-hover-card.json b/packages/web/public/r/mc-hover-card.json
index b88e434..ada0b77 100644
--- a/packages/web/public/r/mc-hover-card.json
+++ b/packages/web/public/r/mc-hover-card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-hover-card.tsx",
-      "content": "'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { cn } from '@/lib/utils';\n\nfunction McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nfunction McHoverCardContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  textAlign = 'start',\n  imageSrc = null,\n  imageposition = 'top',\n  title,\n  subtitle,\n  description,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    textAlign?: 'start' | 'center';\n    imageSrc?: string | null;\n    imageposition?: 'top' | 'bottom';\n    title?: string;\n    subtitle?: string;\n    description?: string;\n  }) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col \"\n      >\n        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>\n          {imageSrc && <img src={imageSrc} alt=\"Profile\" className={`w-full    `} />}\n          <div\n            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}\n          >\n            {title && <h4 className=\"font-semibold text-card-foreground\">{title}</h4>}\n            <div\n              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}\n            >\n              {subtitle && <p className=\" font-regular text-card-foreground\">{subtitle}</p>}\n              {description && <p className=\"font-regular text-card-foreground\">{description}</p>}\n            </div>\n          </div>\n        </div>\n\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            ' outline-hidden duration-100   ',\n            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',\n            ' data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ',\n            ' data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 ',\n            'data-closed:zoom-out-95 gap-4',\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { McHoverCard, McHoverCardTrigger, McHoverCardContent };\n",
+      "content": "'use client';\r\n\r\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\r\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\r\n}\r\n\r\nfunction McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\r\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\r\n}\r\n\r\nfunction McHoverCardContent({\r\n  className,\r\n  side = 'bottom',\r\n  sideOffset = 4,\r\n  align = 'center',\r\n  alignOffset = 4,\r\n  textAlign = 'start',\r\n  imageSrc = null,\r\n  imageposition = 'top',\r\n  title,\r\n  subtitle,\r\n  description,\r\n  ...props\r\n}: PreviewCardPrimitive.Popup.Props &\r\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\r\n    textAlign?: 'start' | 'center';\r\n    imageSrc?: string | null;\r\n    imageposition?: 'top' | 'bottom';\r\n    title?: string;\r\n    subtitle?: string;\r\n    description?: string;\r\n  }) {\r\n  return (\r\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\r\n      <PreviewCardPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className=\"isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col \"\r\n      >\r\n        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>\r\n          {imageSrc && <img src={imageSrc} alt=\"Profile\" className={`w-full    `} />}\r\n          <div\r\n            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}\r\n          >\r\n            {title && <h4 className=\"font-semibold text-card-foreground\">{title}</h4>}\r\n            <div\r\n              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}\r\n            >\r\n              {subtitle && <p className=\" font-regular text-card-foreground\">{subtitle}</p>}\r\n              {description && <p className=\"font-regular text-card-foreground\">{description}</p>}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <PreviewCardPrimitive.Popup\r\n          data-slot=\"hover-card-content\"\r\n          className={cn(\r\n            ' outline-hidden duration-100   ',\r\n            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',\r\n            ' data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ',\r\n            ' data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 ',\r\n            'data-closed:zoom-out-95 gap-4',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </PreviewCardPrimitive.Positioner>\r\n    </PreviewCardPrimitive.Portal>\r\n  );\r\n}\r\n\r\nexport { McHoverCard, McHoverCardTrigger, McHoverCardContent };\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-popover.json b/packages/web/public/r/mc-popover.json
index 6dc08fb..3b1f2c6 100644
--- a/packages/web/public/r/mc-popover.json
+++ b/packages/web/public/r/mc-popover.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-popover.tsx",
-      "content": "'use client';\nimport * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { cn } from '@/lib/utils';\nfunction McPopover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\nfunction McPopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\nfunction McPopoverContent({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 23,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex h-[268px] w-[276px] origin-(--transform-origin) flex-col gap-[13px] rounded-lg bg-card p-4 text-sm text-card-foreground shadow-sm outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction McPopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-[9px] text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\n        'font-plus-jakarta-sans text-left text-[20px] leading-[30px] font-medium tracking-[0] text-card-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nfunction McPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\n        'font-dm-sans text-left text-[14px] leading-[20px] font-normal tracking-[0] text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\nexport {\n  McPopover,\n  McPopoverContent,\n  McPopoverDescription,\n  McPopoverHeader,\n  McPopoverTitle,\n  McPopoverTrigger,\n};\n",
+      "content": "'use client';\r\nimport * as React from 'react';\r\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\r\nimport { cn } from '@/lib/utils';\r\nfunction McPopover({ ...props }: PopoverPrimitive.Root.Props) {\r\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\r\n}\r\nfunction McPopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\r\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\r\n}\r\nfunction McPopoverContent({\r\n  className,\r\n  align = 'center',\r\n  alignOffset = 0,\r\n  side = 'bottom',\r\n  sideOffset = 23,\r\n  ...props\r\n}: PopoverPrimitive.Popup.Props &\r\n  Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {\r\n  return (\r\n    <PopoverPrimitive.Portal>\r\n      <PopoverPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className=\"isolate z-50\"\r\n      >\r\n        <PopoverPrimitive.Popup\r\n          data-slot=\"popover-content\"\r\n          className={cn(\r\n            'z-50 flex h-[268px] w-[276px] origin-(--transform-origin) flex-col gap-[13px] rounded-lg bg-card p-4 text-sm text-card-foreground shadow-sm outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n      </PopoverPrimitive.Positioner>\r\n    </PopoverPrimitive.Portal>\r\n  );\r\n}\r\n\r\nfunction McPopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\r\n  return (\r\n    <div\r\n      data-slot=\"popover-header\"\r\n      className={cn('flex flex-col gap-[9px] text-sm', className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction McPopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\r\n  return (\r\n    <PopoverPrimitive.Title\r\n      data-slot=\"popover-title\"\r\n      className={cn(\r\n        'font-plus-jakarta-sans text-left text-[20px] leading-[30px] font-medium tracking-[0] text-card-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nfunction McPopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\r\n  return (\r\n    <PopoverPrimitive.Description\r\n      data-slot=\"popover-description\"\r\n      className={cn(\r\n        'font-dm-sans text-left text-[14px] leading-[20px] font-normal tracking-[0] text-muted-foreground',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\nexport {\r\n  McPopover,\r\n  McPopoverContent,\r\n  McPopoverDescription,\r\n  McPopoverHeader,\r\n  McPopoverTitle,\r\n  McPopoverTrigger,\r\n};\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-scrollarea.json b/packages/web/public/r/mc-scrollarea.json
index 7e022d9..dc82ee6 100644
--- a/packages/web/public/r/mc-scrollarea.json
+++ b/packages/web/public/r/mc-scrollarea.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-scrollarea.tsx",
-      "content": "'use client';\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\nfunction McScrollArea({\n  className,\n  children,\n  title,\n  desc,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative  rounded-md ring-1 ring-inset ring-border bg-background', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport data-slot=\"scroll-area-viewport\" className=\" size-full\">\n        {title && (\n          <div className=\" mb-4 mt-4 ml-4 gap-2.5 size-fit\">\n            <p className=\" font-dm-sans text-4 text-foreground text-normal\">{title}</p>\n          </div>\n        )}\n        {desc && (\n          <div className=\"mx-4  flex flex-col gap-2.5 size-fit\">\n            {desc.map((line, i) => (\n              <div key={i} className=\"px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5\">\n                <p className=\"\">{line}</p>\n              </div>\n            ))}\n          </div>\n        )}\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <McScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction McScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none ' +\n          ' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3' +\n          ' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { McScrollArea, McScrollBar };\n",
+      "content": "'use client';\r\n\r\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McScrollArea({\r\n  className,\r\n  children,\r\n  title,\r\n  desc,\r\n  ...props\r\n}: ScrollAreaPrimitive.Root.Props & { title?: string; desc?: string[] }) {\r\n  return (\r\n    <ScrollAreaPrimitive.Root\r\n      data-slot=\"scroll-area\"\r\n      className={cn('relative  rounded-md ring-1 ring-inset ring-border bg-background', className)}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Viewport data-slot=\"scroll-area-viewport\" className=\" size-full\">\r\n        {title && (\r\n          <div className=\" mb-4 mt-4 ml-4 gap-2.5 size-fit\">\r\n            <p className=\" font-dm-sans text-4 text-foreground text-normal\">{title}</p>\r\n          </div>\r\n        )}\r\n        {desc && (\r\n          <div className=\"mx-4  flex flex-col gap-2.5 size-fit\">\r\n            {desc.map((line, i) => (\r\n              <div key={i} className=\"px-1.5 py-3.5 border-b-px border-b h-fit min-w-39.5\">\r\n                <p className=\"\">{line}</p>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n        {children}\r\n      </ScrollAreaPrimitive.Viewport>\r\n      <McScrollBar />\r\n      <ScrollAreaPrimitive.Corner />\r\n    </ScrollAreaPrimitive.Root>\r\n  );\r\n}\r\n\r\nfunction McScrollBar({\r\n  className,\r\n  orientation = 'vertical',\r\n  ...props\r\n}: ScrollAreaPrimitive.Scrollbar.Props) {\r\n  return (\r\n    <ScrollAreaPrimitive.Scrollbar\r\n      data-slot=\"scroll-area-scrollbar\"\r\n      data-orientation={orientation}\r\n      orientation={orientation}\r\n      className={cn(\r\n        'flex touch-none p-px transition-colors select-none ' +\r\n          ' data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-horizontal:my-2 data-horizontal:ml-3' +\r\n          ' data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Thumb\r\n        data-slot=\"scroll-area-thumb\"\r\n        className=\"relative flex-1 rounded-full bg-border\"\r\n      />\r\n    </ScrollAreaPrimitive.Scrollbar>\r\n  );\r\n}\r\n\r\nexport { McScrollArea, McScrollBar };\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-slider.json b/packages/web/public/r/mc-slider.json
new file mode 100644
index 0000000..8114d66
--- /dev/null
+++ b/packages/web/public/r/mc-slider.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mc-slider",
+  "title": "MicroClub Slider",
+  "description": "A slider component for MicroClub UI",
+  "dependencies": ["@base-ui/react"],
+  "files": [
+    {
+      "path": "registry/ui/mc-slider.tsx",
+      "content": "import { Slider as SliderPrimitive } from '@base-ui/react/slider';\n\nimport { cn } from '@/lib/utils';\n\nfunction McSlider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = Array.isArray(value)\n    ? value\n    : Array.isArray(defaultValue)\n      ? defaultValue\n      : [min, max];\n\n  return (\n    <SliderPrimitive.Root\n      className={cn('data-horizontal:w-full data-vertical:h-full', className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"\n            relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl\n            transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 \n            focus-visible:outline-hidden active:ring-3 active:bg-primary disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { McSlider };\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}
diff --git a/packages/web/public/r/mc-sonner.json b/packages/web/public/r/mc-sonner.json
index 4218ea5..f5ee13d 100644
--- a/packages/web/public/r/mc-sonner.json
+++ b/packages/web/public/r/mc-sonner.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-sonner.tsx",
-      "content": "'use client';\n\nimport { Toaster as SonnerComponent, toast as rawToast } from 'sonner';\nimport { CheckCircle2, AlertCircle } from 'lucide-react';\n\ntype ToasterProps = React.ComponentProps<typeof SonnerComponent>;\n\nconst toastIcons = {\n  success: <CheckCircle2 className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\n  warning: <AlertCircle className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\n  error: <AlertCircle className=\"text-muted-foreground  shrink-0 h-3.5 w-3.5\" />,\n};\n\ninterface ToastOptions {\n  description?: string;\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n}\n\nconst mcToastCustom = (\n  message: string,\n  variant?: 'success' | 'warning' | 'error',\n  options?: ToastOptions\n) => {\n  const Icon = variant ? toastIcons[variant] : null;\n\n  return rawToast(\n    <div className=\"w-full h-full flex flex-col items-start justify-center gap-0.5\">\n      <div className=\"flex items-center gap-1.5 w-full max-w-66.5\">\n        {Icon}\n        <span className=\"text-sm font-medium tracking-normal leading-5 text-card-foreground\">\n          {message}\n        </span>\n      </div>\n\n      {options?.description && (\n        <p className=\"text-sm font-normal tracking-normal leading-5 text-muted-foreground max-w-66.5\">\n          {options.description}\n        </p>\n      )}\n    </div>,\n    {\n      action: options?.action,\n    }\n  );\n};\n\nexport const toast = Object.assign(\n  (message: string, options?: ToastOptions) => mcToastCustom(message, undefined, options),\n  {\n    success: (message: string, options?: ToastOptions) =>\n      mcToastCustom(message, 'success', options),\n    warning: (message: string, options?: ToastOptions) =>\n      mcToastCustom(message, 'warning', options),\n    error: (message: string, options?: ToastOptions) => mcToastCustom(message, 'error', options),\n  }\n);\n\nconst McSonner = ({ ...props }: ToasterProps) => {\n  return (\n    <SonnerComponent\n      className=\"\"\n      position=\"top-center\"\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast:\n            'w-97.5 min-h-18.5 bg-background flex items-center justify-between gap-1.5 p-4 border-[1px] rounded-lg shadow-xs border-border',\n          actionButton:\n            'flex items-center justify-center bg-primary text-background text-sm py-2 px-3.5 min-w-15.5 max-w-21.5 min-h-9 rounded-[8px] shadow-xs shrink-0 cursor-pointer',\n        },\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default McSonner;\n",
+      "content": "'use client';\r\n\r\nimport { Toaster as SonnerComponent, toast as rawToast } from 'sonner';\r\nimport { CheckCircle2, AlertCircle } from 'lucide-react';\r\n\r\ntype ToasterProps = React.ComponentProps<typeof SonnerComponent>;\r\n\r\nconst toastIcons = {\r\n  success: <CheckCircle2 className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\r\n  warning: <AlertCircle className=\"text-muted-foreground shrink-0 h-3.5 w-3.5\" />,\r\n  error: <AlertCircle className=\"text-muted-foreground  shrink-0 h-3.5 w-3.5\" />,\r\n};\r\n\r\ninterface ToastOptions {\r\n  description?: string;\r\n  action?: {\r\n    label: string;\r\n    onClick: () => void;\r\n  };\r\n}\r\n\r\nconst mcToastCustom = (\r\n  message: string,\r\n  variant?: 'success' | 'warning' | 'error',\r\n  options?: ToastOptions\r\n) => {\r\n  const Icon = variant ? toastIcons[variant] : null;\r\n\r\n  return rawToast(\r\n    <div className=\"w-full h-full flex flex-col items-start justify-center gap-0.5\">\r\n      <div className=\"flex items-center gap-1.5 w-full max-w-66.5\">\r\n        {Icon}\r\n        <span className=\"text-sm font-medium tracking-normal leading-5 text-card-foreground\">\r\n          {message}\r\n        </span>\r\n      </div>\r\n\r\n      {options?.description && (\r\n        <p className=\"text-sm font-normal tracking-normal leading-5 text-muted-foreground max-w-66.5\">\r\n          {options.description}\r\n        </p>\r\n      )}\r\n    </div>,\r\n    {\r\n      action: options?.action,\r\n    }\r\n  );\r\n};\r\n\r\nexport const toast = Object.assign(\r\n  (message: string, options?: ToastOptions) => mcToastCustom(message, undefined, options),\r\n  {\r\n    success: (message: string, options?: ToastOptions) =>\r\n      mcToastCustom(message, 'success', options),\r\n    warning: (message: string, options?: ToastOptions) =>\r\n      mcToastCustom(message, 'warning', options),\r\n    error: (message: string, options?: ToastOptions) => mcToastCustom(message, 'error', options),\r\n  }\r\n);\r\n\r\nconst McSonner = ({ ...props }: ToasterProps) => {\r\n  return (\r\n    <SonnerComponent\r\n      className=\"\"\r\n      position=\"top-center\"\r\n      toastOptions={{\r\n        unstyled: true,\r\n        classNames: {\r\n          toast:\r\n            'w-97.5 min-h-18.5 bg-background flex items-center justify-between gap-1.5 p-4 border-[1px] rounded-lg shadow-xs border-border',\r\n          actionButton:\r\n            'flex items-center justify-center bg-primary text-background text-sm py-2 px-3.5 min-w-15.5 max-w-21.5 min-h-9 rounded-[8px] shadow-xs shrink-0 cursor-pointer',\r\n        },\r\n      }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport default McSonner;\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/mc-tooltip.json b/packages/web/public/r/mc-tooltip.json
index 0edb969..0d0072c 100644
--- a/packages/web/public/r/mc-tooltip.json
+++ b/packages/web/public/r/mc-tooltip.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/ui/mc-tooltip.tsx",
-      "content": "'use client';\n\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\n\nfunction McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n}\n\nfunction McTooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction McTooltipContent({\n  className,\n  side = 'top',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 0,\n  children,\n  title,\n  desc,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    desc?: string;\n    ttitle?: string;\n  }) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className\n          )}\n          {...props}\n        >\n          <div className=\" flex flex-col gap-2 p-4 text-wrap\">\n            {title && <p className=\" text-foreground text-xs/semi-bold] text-wrap\">{title}</p>}\n            {desc && (\n              <p className=\"text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere\">\n                {desc}\n              </p>\n            )}\n          </div>\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-4  translate-y-[calc(-50%-2px)]   rounded-xs bg-card-background   data-[side=bottom]:top-0.5  data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=left]:top-1.5 data-[side=left]:-right-1.5 data-[side=left]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=right]:top-1/2 data-[side=right]:-left-[6.80px] data-[side=right]:-translate-y-1/2 data-[side=top]:rotate-180 data-[side=top]:-bottom-4\">\n            <svg width=\"21\" height=\"18\" viewBox=\"0 0 12 6\" className=\"  fill-background\">\n              <path d=\"M0 6L6 0L12 6H0Z\" />\n            </svg>\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { McTooltip, McTooltipTrigger, McTooltipContent, McTooltipProvider };\n",
+      "content": "'use client';\r\n\r\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\r\n\r\nimport { cn } from '@/lib/utils';\r\n\r\nfunction McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\r\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\r\n}\r\n\r\nfunction McTooltip({ ...props }: TooltipPrimitive.Root.Props) {\r\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\r\n}\r\n\r\nfunction McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\r\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\r\n}\r\n\r\nfunction McTooltipContent({\r\n  className,\r\n  side = 'top',\r\n  sideOffset = 4,\r\n  align = 'center',\r\n  alignOffset = 0,\r\n  children,\r\n  title,\r\n  desc,\r\n  ...props\r\n}: TooltipPrimitive.Popup.Props &\r\n  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\r\n    desc?: string;\r\n    ttitle?: string;\r\n  }) {\r\n  return (\r\n    <TooltipPrimitive.Portal>\r\n      <TooltipPrimitive.Positioner\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        side={side}\r\n        sideOffset={sideOffset}\r\n        className=\"isolate z-50\"\r\n      >\r\n        <TooltipPrimitive.Popup\r\n          data-slot=\"tooltip-content\"\r\n          className={cn(\r\n            'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          <div className=\" flex flex-col gap-2 p-4 text-wrap\">\r\n            {title && <p className=\" text-foreground text-xs/semi-bold] text-wrap\">{title}</p>}\r\n            {desc && (\r\n              <p className=\"text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere\">\r\n                {desc}\r\n              </p>\r\n            )}\r\n          </div>\r\n          {children}\r\n          <TooltipPrimitive.Arrow className=\"z-50 size-4  translate-y-[calc(-50%-2px)]   rounded-xs bg-card-background   data-[side=bottom]:top-0.5  data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=left]:top-1.5 data-[side=left]:-right-1.5 data-[side=left]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=right]:top-1/2 data-[side=right]:-left-[6.80px] data-[side=right]:-translate-y-1/2 data-[side=top]:rotate-180 data-[side=top]:-bottom-4\">\r\n            <svg width=\"21\" height=\"18\" viewBox=\"0 0 12 6\" className=\"  fill-background\">\r\n              <path d=\"M0 6L6 0L12 6H0Z\" />\r\n            </svg>\r\n          </TooltipPrimitive.Arrow>\r\n        </TooltipPrimitive.Popup>\r\n      </TooltipPrimitive.Positioner>\r\n    </TooltipPrimitive.Portal>\r\n  );\r\n}\r\n\r\nexport { McTooltip, McTooltipTrigger, McTooltipContent, McTooltipProvider };\r\n",
       "type": "registry:component"
     }
   ],
diff --git a/packages/web/public/r/registry.json b/packages/web/public/r/registry.json
index b3ef73f..28a6b6a 100644
--- a/packages/web/public/r/registry.json
+++ b/packages/web/public/r/registry.json
@@ -2544,6 +2544,19 @@
         }
       ],
       "type": "registry:component"
+    },
+    {
+      "name": "mc-slider",
+      "title": "MicroClub Slider",
+      "description": "A slider component for MicroClub UI",
+      "dependencies": ["@base-ui/react"],
+      "files": [
+        {
+          "path": "registry/ui/mc-slider.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "type": "registry:component"
     }
   ]
 }
diff --git a/packages/web/registry/examples/mc-slider-demo.tsx b/packages/web/registry/examples/mc-slider-demo.tsx
new file mode 100644
index 0000000..f7ec23f
--- /dev/null
+++ b/packages/web/registry/examples/mc-slider-demo.tsx
@@ -0,0 +1,5 @@
+import { McSlider } from '@/registry/ui/mc-slider';
+
+export default function SliderDemo() {
+  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;
+}
diff --git a/packages/web/registry/registry-examples.ts b/packages/web/registry/registry-examples.ts
index 8ce99c8..ccb99ad 100644
--- a/packages/web/registry/registry-examples.ts
+++ b/packages/web/registry/registry-examples.ts
@@ -393,4 +393,17 @@ export const examples: Registry['items'] = [
     ],
     registryDependencies: [`${REGISTRY_URL}/r/mc-hover-card.json`],
   },
+  {
+    name: 'mc-slider-demo',
+    type: 'registry:example',
+    title: 'MicroClub Slider Demo',
+    description: 'Demo for MicroClub Slider',
+    files: [
+      {
+        path: 'examples/mc-slider-demo.tsx',
+        type: 'registry:example',
+      },
+    ],
+    registryDependencies: [`${REGISTRY_URL}/r/mc-slider.json`],
+  },
 ];
diff --git a/packages/web/registry/registry-ui.ts b/packages/web/registry/registry-ui.ts
index 3675add..1c07ad0 100644
--- a/packages/web/registry/registry-ui.ts
+++ b/packages/web/registry/registry-ui.ts
@@ -391,4 +391,17 @@ export const ui: Registry['items'] = [
     ],
     dependencies: ['@base-ui/react'],
   },
+  {
+    name: 'mc-slider',
+    type: 'registry:component',
+    title: 'MicroClub Slider',
+    description: 'A slider component for MicroClub UI',
+    files: [
+      {
+        path: 'ui/mc-slider.tsx',
+        type: 'registry:component',
+      },
+    ],
+    dependencies: ['@base-ui/react'],
+  },
 ];
diff --git a/packages/web/registry/ui/mc-slider.tsx b/packages/web/registry/ui/mc-slider.tsx
new file mode 100644
index 0000000..30561ef
--- /dev/null
+++ b/packages/web/registry/ui/mc-slider.tsx
@@ -0,0 +1,55 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+
+import { cn } from '@/lib/utils';
+
+function McSlider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max];
+
+  return (
+    <SliderPrimitive.Root
+      className={cn('data-horizontal:w-full data-vertical:h-full', className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="
+            relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl
+            transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 
+            focus-visible:outline-hidden active:ring-3 active:bg-primary disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+export { McSlider };
diff --git a/packages/web/stories/McAccordion.stories.tsx b/packages/web/stories/McAccordion.stories.tsx
index 547e2d9..32da3ed 100644
--- a/packages/web/stories/McAccordion.stories.tsx
+++ b/packages/web/stories/McAccordion.stories.tsx
@@ -5,6 +5,8 @@ import {
   McAccordionItem,
   McAccordionTrigger,
 } from '@/registry/ui/mc-accordion';
+import { AccordionRoot } from '@base-ui/react';
+import { JSX } from 'react/jsx-runtime';
 
 const items = [
   {
@@ -46,7 +48,7 @@ export default meta;
 type Story = StoryObj<typeof McAccordion>;
 
 export const Playground: Story = {
-  render: (args) => (
+  render: (args: JSX.IntrinsicAttributes & AccordionRoot.Props<any>) => (
     <McAccordion {...args} className="max-w-lg">
       {items.map((item) => (
         <McAccordionItem key={item.value} value={item.value}>
@@ -66,7 +68,7 @@ export const AllCollapsed: Story = {
   args: {
     defaultValue: undefined,
   },
-  render: (args) => (
+  render: (args: JSX.IntrinsicAttributes & AccordionRoot.Props<any>) => (
     <McAccordion {...args} className="max-w-lg">
       {items.map((item) => (
         <McAccordionItem key={item.value} value={item.value}>
diff --git a/packages/web/stories/McSlider.stories.tsx b/packages/web/stories/McSlider.stories.tsx
new file mode 100644
index 0000000..86123b8
--- /dev/null
+++ b/packages/web/stories/McSlider.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import { McSlider } from '../registry/ui/mc-slider';
+
+const meta: Meta<typeof McSlider> = {
+  title: 'Components/McSlider',
+  component: McSlider,
+  argTypes: {
+    value: { control: 'object' },
+    defaultValue: { control: 'object' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof McSlider>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [25],
+    min: 0,
+    max: 100,
+  },
+};
+
+export const Range: Story = {
+  args: {
+    defaultValue: [25, 75],
+    min: 0,
+    max: 100,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: [50],
+    min: 0,
+    max: 100,
+    disabled: true,
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94b84c9..e544a65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,13 @@ settings:
 importers:
 
   .:
+    dependencies:
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
     devDependencies:
       eslint:
         specifier: ^9