drivn 1.9.0 → 1.11.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as n from'@clack/prompts';import m from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';import {z as z$1}from'zod';var z={next:"Next.js",react:"React"};function $(e){let r=join(e,"package.json");if(!existsSync(r))throw new Error("package.json not found");let t=JSON.parse(readFileSync(r,"utf-8")),a={...t.dependencies,...t.devDependencies},l="react";a.next&&(l="next");let d=existsSync(join(e,"src")),p=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:p}}var G="drivn.config.json";function U(e){let r=join(e,G);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function K(e,r){let t=join(e,G);writeFileSync(t,JSON.stringify(r,null,2));}function Ae(e){existsSync(e)||mkdirSync(e,{recursive:true});}function b(e,r){Ae(dirname(e)),writeFileSync(e,r);}function H(e){return readFileSync(e,"utf-8")}function x(e){return existsSync(e)}function I(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function R(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:`npm install ${t}`}function W(e){return e==="pnpm"?"pnpm dlx":"npx"}var C=`@import "tailwindcss";
+import {Command}from'commander';import*as n from'@clack/prompts';import u from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';import {z as z$1}from'zod';var z={next:"Next.js",react:"React"};function V(e){let r=join(e,"package.json");if(!existsSync(r))throw new Error("package.json not found");let t=JSON.parse(readFileSync(r,"utf-8")),a={...t.dependencies,...t.devDependencies},l="react";a.next&&(l="next");let d=existsSync(join(e,"src")),p=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:p}}var F="drivn.config.json";function U(e){let r=join(e,F);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function K(e,r){let t=join(e,F);writeFileSync(t,JSON.stringify(r,null,2));}function Ve(e){existsSync(e)||mkdirSync(e,{recursive:true});}function b(e,r){Ve(dirname(e)),writeFileSync(e,r);}function H(e){return readFileSync(e,"utf-8")}function x(e){return existsSync(e)}function E(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function w(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:`npm install ${t}`}function W(e){return e==="pnpm"?"pnpm dlx":"npx"}var C=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var ze=`import { type ClassValue, clsx } from 'clsx'
+`;var Fe=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,$e=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ve(e){for(let r of $e)if(x(join(e,r)))return r;return null}async function Y(){let e=process.cwd();console.log(""),console.log(m.bgCyan(m.bold(m.black(" Drivn "))));let r;try{r=$(e),n.log.success(`Detected ${m.cyan(z[r.framework])}`);}catch{n.log.error("No package.json found. Run this command in a project directory."),n.outro("Setup cancelled"),process.exit(1);}if(x(join(e,"drivn.config.json"))){let s=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(s)||!s)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",a=r.srcDir?"src/utils":"utils",l=await n.group({components:()=>n.text({message:"Where should components be installed?",placeholder:t,defaultValue:t}),utils:()=>n.text({message:"Where should utilities be placed?",placeholder:a,defaultValue:a})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils},installed:[]},p=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${p}`);x(f)||b(f,ze);let g=Ve(e);if(g){let s=await n.confirm({message:`Found ${m.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(s)&&s&&(b(join(e,g),C),d.paths.globals=g,n.log.success(`Color tokens written to ${m.cyan(g)}`));}else {let s=r.srcDir?"src/styles/globals.css":"styles/globals.css",i=await n.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});n.isCancel(i)||(b(join(e,i),C),d.paths.globals=i,n.log.success(`Color tokens written to ${m.cyan(i)}`));}K(e,d);let N=I(e),u=W(N),h=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(R(N,h),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${R(N,h)}`);}n.log.info(`Add components with: ${m.cyan(`${u} drivn add button`)}`),n.log.info(`Add dark/light theme: ${m.cyan(`${u} drivn add theme`)}`),n.outro("Drivn initialized");}var q=`'use client'
+`,Ue=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ke(e){for(let r of Ue)if(x(join(e,r)))return r;return null}async function Y(){let e=process.cwd();console.log(""),console.log(u.bgCyan(u.bold(u.black(" Drivn "))));let r;try{r=V(e),n.log.success(`Detected ${u.cyan(z[r.framework])}`);}catch{n.log.error("No package.json found. Run this command in a project directory."),n.outro("Setup cancelled"),process.exit(1);}if(x(join(e,"drivn.config.json"))){let s=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(s)||!s)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",a=r.srcDir?"src/utils":"utils",l=await n.group({components:()=>n.text({message:"Where should components be installed?",placeholder:t,defaultValue:t}),utils:()=>n.text({message:"Where should utilities be placed?",placeholder:a,defaultValue:a})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils},installed:[]},p=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${p}`);x(f)||b(f,Fe);let g=Ke(e);if(g){let s=await n.confirm({message:`Found ${u.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(s)&&s&&(b(join(e,g),C),d.paths.globals=g,n.log.success(`Color tokens written to ${u.cyan(g)}`));}else {let s=r.srcDir?"src/styles/globals.css":"styles/globals.css",i=await n.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});n.isCancel(i)||(b(join(e,i),C),d.paths.globals=i,n.log.success(`Color tokens written to ${u.cyan(i)}`));}K(e,d);let N=E(e),m=W(N),h=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(w(N,h),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${w(N,h)}`);}n.log.info(`Add components with: ${u.cyan(`${m} drivn add button`)}`),n.log.info(`Add dark/light theme: ${u.cyan(`${m} drivn add theme`)}`),n.outro("Drivn initialized");}var X=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -161,7 +161,7 @@ export function ThemeProvider({
     </NextThemesProvider>
   )
 }
-`;var J=`'use client'
+`;var q=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -293,7 +293,7 @@ export const Accordion = Object.assign(AccordionRoot, {
   Trigger,
   Content
 })
-`;var X=`import * as React from 'react'
+`;var J=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1646,6 +1646,515 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
 Checkbox.displayName = 'Checkbox'
 `;var le=`'use client'
 
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { ChevronDown, X, Check, Search } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'relative',
+  trigger: {
+    base: cn(
+      'flex items-center justify-between w-full min-h-10',
+      'px-3 gap-2',
+      'border border-input rounded-[10px] text-sm',
+      'focus:outline-none transition-colors',
+      'cursor-pointer'
+    ),
+    singleText: 'flex-1 truncate text-left',
+    multiText: cn(
+      'flex flex-1 flex-wrap items-center gap-1',
+      'min-h-[36px] py-1'
+    ),
+    placeholder: 'text-muted-foreground',
+    chevron: cn(
+      'w-4 h-4 shrink-0 text-muted-foreground',
+      'transition-transform duration-200'
+    ),
+    clear: cn(
+      'w-4 h-4 shrink-0 text-muted-foreground',
+      'hover:text-foreground transition-colors'
+    ),
+  },
+  tag: {
+    base: cn(
+      'inline-flex items-center gap-1 px-2 py-0.5',
+      'text-xs rounded-md bg-muted text-foreground'
+    ),
+    remove: cn(
+      'w-3 h-3 text-muted-foreground',
+      'hover:text-foreground cursor-pointer'
+    ),
+  },
+  content: cn(
+    'absolute top-full left-0 right-0 mt-1 z-50',
+    'bg-card border border-border rounded-[10px]',
+    'shadow-lg overflow-hidden',
+    'transition-[opacity,scale] duration-150 ease-out'
+  ),
+  input: {
+    wrapper: cn(
+      'flex items-center gap-2 px-3',
+      'border-b border-border'
+    ),
+    icon: 'w-4 h-4 shrink-0 text-muted-foreground',
+    field: cn(
+      'flex h-10 w-full bg-transparent py-2',
+      'text-sm text-foreground outline-none',
+      'placeholder:text-muted-foreground'
+    ),
+  },
+  list: cn(
+    'max-h-[200px] overflow-y-auto p-1',
+    '[&_[cmdk-list-sizer]]:space-y-0.5'
+  ),
+  empty: cn(
+    'py-6 text-center text-sm',
+    'text-muted-foreground'
+  ),
+  group: cn(
+    'overflow-hidden',
+    '[&_[cmdk-group-heading]]:px-1.5',
+    '[&_[cmdk-group-heading]]:py-1.5',
+    '[&_[cmdk-group-heading]]:text-xs',
+    '[&_[cmdk-group-heading]]:font-medium',
+    '[&_[cmdk-group-heading]]:text-muted-foreground'
+  ),
+  label: cn(
+    'px-1.5 py-1.5 text-xs font-medium',
+    'text-muted-foreground'
+  ),
+  item: cn(
+    'relative flex items-center gap-2 px-2.5 py-1.5',
+    'text-sm rounded-lg cursor-default select-none',
+    'data-[selected=true]:bg-accent',
+    'data-[disabled=true]:pointer-events-none',
+    'data-[disabled=true]:opacity-50'
+  ),
+  icon: 'w-4 h-4 shrink-0 text-primary ml-auto',
+  separator: 'w-full h-px bg-border',
+}
+
+type IconProp = React.ComponentType<{ className?: string }> | React.ReactElement
+
+interface ComboboxCtx {
+  open: boolean
+  setOpen: (v: boolean) => void
+  multiple: boolean
+  value: string | string[]
+  onSelect: (v: string) => void
+  onClear: () => void
+}
+
+function ComboboxRoot({
+  children,
+  value,
+  onChange,
+  multiple = false,
+  className,
+}: {
+  children: React.ReactNode
+  value?: string | string[]
+  onChange?: (value: string | string[]) => void
+  multiple?: boolean
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+  const close = React.useCallback(() => setOpen(false), [])
+
+  const onSelect = React.useCallback(
+    (v: string) => {
+      if (multiple) {
+        const arr = (value as string[]) ?? []
+        const next = arr.includes(v)
+          ? arr.filter((i) => i !== v)
+          : [...arr, v]
+        onChange?.(next)
+      } else {
+        onChange?.(v)
+        close()
+      }
+    },
+    [multiple, value, onChange, close]
+  )
+
+  const onClear = React.useCallback(() => {
+    onChange?.(multiple ? [] : '')
+  }, [multiple, onChange])
+
+  React.useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node))
+        close()
+    }
+    document.addEventListener('mousedown', onClick)
+    return () =>
+      document.removeEventListener('mousedown', onClick)
+  }, [close])
+
+  return (
+    <Ctx.Provider
+      value={{
+        open,
+        setOpen,
+        multiple,
+        value: value ?? (multiple ? [] : ''),
+        onSelect,
+        onClear,
+      }}
+    >
+      <div ref={ref} className={cn(styles.base, className)}>
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Trigger({
+  placeholder = 'Select...',
+  clearable = false,
+  children,
+  className,
+  ...props
+}: {
+  placeholder?: string
+  clearable?: boolean
+  children?: React.ReactNode
+  className?: string
+} & Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onClick'
+>) {
+  const { open, setOpen, multiple, value, onSelect, onClear } = useCombobox()
+
+  const values = Array.isArray(value) ? value : []
+
+  const hasValue = multiple
+    ? values.length > 0
+    : (value as string) !== ''
+
+  return (
+    <button
+      className={cn(styles.trigger.base, className)}
+      onClick={() => setOpen(!open)}
+      {...props}
+    >
+      {multiple ? (
+        <span className={styles.trigger.multiText}>
+          {values.length === 0 ? (
+            <span className={styles.trigger.placeholder}>
+              {placeholder}
+            </span>
+          ) : (
+            <>
+              {values.map((v) => (
+                <span key={v} className={styles.tag.base}>
+                  {v}
+                  <X
+                    className={styles.tag.remove}
+                    onMouseDown={(e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                      onSelect(v)
+                    }}
+                  />
+                </span>
+              ))}
+            </>
+          )}
+        </span>
+      ) : (
+        <span
+          className={cn(
+            styles.trigger.singleText,
+            !hasValue && styles.trigger.placeholder
+          )}
+        >
+          {hasValue ? (children ?? value) : placeholder}
+        </span>
+      )}
+      {clearable && hasValue ? (
+        <X
+          className={styles.trigger.clear}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            onClear()
+          }}
+        />
+      ) : (
+        <ChevronDown className={cn(styles.trigger.chevron, open && 'rotate-180')} />
+      )}
+    </button>
+  )
+}
+
+function Content({
+  placeholder = 'Search...',
+  children,
+  className,
+}: {
+  placeholder?: string
+  children: React.ReactNode
+  className?: string
+}) {
+  const { open } = useCombobox()
+
+  return (
+    <div
+      className={cn(
+        styles.content,
+        open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none',
+        className
+      )}
+    >
+      <CommandPrimitive key={open ? 'open' : 'closed'} shouldFilter>
+        <div className={styles.input.wrapper}>
+          <Search className={styles.input.icon} />
+          <CommandPrimitive.Input
+            autoFocus
+            className={styles.input.field}
+            placeholder={placeholder}
+          />
+        </div>
+        <CommandPrimitive.List className={styles.list}>
+          {children}
+        </CommandPrimitive.List>
+      </CommandPrimitive>
+    </div>
+  )
+}
+
+function Empty({
+  children,
+  className,
+}: {
+  children?: React.ReactNode
+  className?: string
+}) {
+  return (
+    <CommandPrimitive.Empty className={cn(styles.empty, className)}>
+      {children ?? 'No results found.'}
+    </CommandPrimitive.Empty>
+  )
+}
+
+function Group({
+  heading,
+  children,
+  className,
+}: {
+  heading?: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <CommandPrimitive.Group
+      heading={heading}
+      className={cn(styles.group, className)}
+    >
+      {children}
+    </CommandPrimitive.Group>
+  )
+}
+
+function ComboboxLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.label, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Item({
+  value: itemValue,
+  icon: Icon,
+  disabled,
+  children,
+  className,
+  ...props
+}: {
+  value: string
+  icon?: IconProp
+  disabled?: boolean
+  children: React.ReactNode
+  className?: string
+} & Omit<
+  React.ComponentProps<typeof CommandPrimitive.Item>,
+  'onSelect' | 'value'
+>) {
+  const { value, onSelect, multiple } = useCombobox()
+  const isSelected = multiple
+    ? (value as string[]).includes(itemValue)
+    : value === itemValue
+
+  return (
+    <CommandPrimitive.Item
+      value={itemValue}
+      disabled={disabled}
+      onSelect={() => onSelect(itemValue)}
+      className={cn(styles.item, className)}
+      {...props}
+    >
+      {Icon && (React.isValidElement(Icon) ? Icon : <Icon className="w-4 h-4" />)}
+      {children}
+      {isSelected && (
+        <Check className={styles.icon} />
+      )}
+    </CommandPrimitive.Item>
+  )
+}
+
+function ComboboxSeparator({
+  className,
+}: {
+  className?: string
+}) {
+  return (
+    <CommandPrimitive.Separator className={cn(styles.separator, className)} />
+  )
+}
+
+const Ctx = React.createContext<ComboboxCtx | null>(null)
+
+function useCombobox() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Combobox compound used outside <Combobox>')
+  return ctx
+}
+
+export const Combobox = Object.assign(ComboboxRoot, {
+  Trigger,
+  Content,
+  Empty,
+  Group,
+  Label: ComboboxLabel,
+  Item,
+  Separator: ComboboxSeparator,
+})
+`;var de=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  panel: 'grid transition-[grid-template-rows] duration-200',
+  content: 'overflow-hidden',
+}
+
+interface CollapsibleCtx {
+  open: boolean
+  toggle: () => void
+  triggerId: string
+  contentId: string
+}
+
+function CollapsibleRoot({
+  children,
+  className,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: {
+  children: React.ReactNode
+  className?: string
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const open = controlledOpen ?? internalOpen
+  const id = React.useId()
+  const triggerId = \`\${id}trigger\`
+  const contentId = \`\${id}content\`
+
+  const toggle = () => {
+    const next = !open
+    if (controlledOpen === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  return (
+    <Ctx.Provider value={{ open, toggle, triggerId, contentId }}>
+      <div
+        className={className}
+        data-state={open ? 'open' : 'closed'}
+      >
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Trigger({
+  children,
+  className,
+  ...props
+}: {
+  children: React.ReactNode
+  className?: string
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, toggle, triggerId, contentId } = useCtx()
+  return (
+    <button
+      id={triggerId}
+      aria-expanded={open}
+      aria-controls={contentId}
+      data-state={open ? 'open' : 'closed'}
+      className={className}
+      onClick={toggle}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+function Content({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { open, triggerId, contentId } = useCtx()
+  return (
+    <div
+      id={contentId}
+      role="region"
+      aria-labelledby={triggerId}
+      data-state={open ? 'open' : 'closed'}
+      className={styles.panel}
+      style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+    >
+      <div className={cn(styles.content, className)}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const Ctx = React.createContext<CollapsibleCtx | null>(null)
+
+function useCtx() {
+  const c = React.useContext(Ctx)
+  if (!c) throw new Error('Collapsible compound used outside <Collapsible>')
+  return c
+}
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger,
+  Content,
+})
+`;var pe=`'use client'
+
 import * as React from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/utils/cn'
@@ -1800,7 +2309,7 @@ export const Dialog = Object.assign(DialogRoot, {
   Trigger,
   Content,
 })
-`;var de=`'use client'
+`;var ue=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -2019,7 +2528,7 @@ export const Drawer = Object.assign(DrawerRoot, {
   Header,
   Footer,
 })
-`;var pe=`'use client'
+`;var me=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2217,7 +2726,7 @@ export const Dropdown = Object.assign(DropdownRoot, {
   Label,
   Separator: DropdownSeparator
 })
-`;var me=`import * as React from 'react'
+`;var fe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2240,7 +2749,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 )
 
 Input.displayName = 'Input'
-`;var ue=`import * as React from 'react'
+`;var ge=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2297,7 +2806,7 @@ function Group({
 }
 
 export const Kbd = Object.assign(KbdRoot, { Group })
-`;var fe=`import * as React from 'react'
+`;var he=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 export function Label({
@@ -2314,7 +2823,7 @@ export function Label({
     />
   )
 }
-`;var ge=`import * as React from 'react'
+`;var be=`import * as React from 'react'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -2447,7 +2956,7 @@ export const Pagination = Object.assign(PaginationRoot, {
   Next,
   Ellipsis: PaginationEllipsis,
 })
-`;var he=`'use client'
+`;var ve=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2552,7 +3061,7 @@ export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content
 })
-`;var be=`import * as React from 'react'
+`;var xe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2590,7 +3099,7 @@ export function Progress({
     </div>
   )
 }
-`;var ve=`'use client'
+`;var ye=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2739,7 +3248,7 @@ function useRadioGroup() {
 }
 
 export const RadioGroup = Object.assign(RadioGroupRoot, { Item })
-`;var xe=`'use client'
+`;var Ne=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -2893,7 +3402,53 @@ export const Select = Object.assign(SelectRoot, {
   Menu,
   Option
 })
-`;var ye=`import * as React from 'react'
+`;var Ce=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'relative [scrollbar-width:thin]',
+    '[scrollbar-color:var(--border)_transparent]',
+    '[&::-webkit-scrollbar]:w-1.5',
+    '[&::-webkit-scrollbar]:h-1.5',
+    '[&::-webkit-scrollbar-track]:bg-transparent',
+    '[&::-webkit-scrollbar-track]:rounded-full',
+    '[&::-webkit-scrollbar-thumb]:rounded-full',
+    '[&::-webkit-scrollbar-thumb]:bg-border',
+    '[&:hover::-webkit-scrollbar-thumb]:bg-muted-foreground/30',
+    '[&::-webkit-scrollbar-corner]:bg-transparent'
+  ),
+  orientations: {
+    vertical: 'overflow-y-auto overflow-x-hidden',
+    horizontal: 'overflow-x-auto overflow-y-hidden',
+  },
+}
+
+interface ScrollAreaProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'vertical' | 'horizontal'
+}
+
+export function ScrollArea({
+  orientation = 'vertical',
+  className,
+  children,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <div
+      className={cn(
+        styles.base,
+        styles.orientations[orientation],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+`;var Re=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2917,7 +3472,24 @@ export function Separator({
     />
   )
 }
-`;var Ne=`'use client'
+`;var we=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+export function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'bg-muted/80 rounded-md animate-skeleton',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+`;var ke=`'use client'
 
 import * as React from 'react'
 import { ChevronDown, PanelLeft } from 'lucide-react'
@@ -3203,7 +3775,7 @@ export const Sidebar = Object.assign(SidebarRoot, {
   Separator: SidebarSeparator,
   CollapseButton,
 })
-`;var Ce=`'use client'
+`;var Pe=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3348,7 +3920,7 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(({
 )
 
 Slider.displayName = 'Slider'
-`;var we=`'use client'
+`;var Se=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3389,7 +3961,7 @@ export function Switch({
     </button>
   )
 }
-`;var Re=`'use client'
+`;var De=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3503,7 +4075,7 @@ export const Tabs = Object.assign(TabsRoot, {
   Tab,
   Panel
 })
-`;var ke=`import * as React from 'react'
+`;var Te=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3530,7 +4102,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var Pe=`'use client'
+`;var Ie=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -3573,7 +4145,169 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var De=`import * as React from 'react'
+`;var Ee=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'inline-flex items-center justify-center gap-2',
+    'rounded-md text-sm font-medium',
+    'transition-colors cursor-pointer',
+    'focus:outline-none',
+    'disabled:opacity-50 disabled:cursor-default'
+  ),
+  variants: {
+    default: cn(
+      'bg-transparent text-muted-foreground',
+      'hover:bg-muted hover:text-foreground',
+      'data-[state=on]:bg-muted',
+      'data-[state=on]:text-foreground'
+    ),
+    outline: cn(
+      'border border-border bg-transparent',
+      'text-muted-foreground',
+      'hover:border-foreground/20',
+      'data-[state=on]:bg-muted',
+      'data-[state=on]:text-foreground',
+      'data-[state=on]:border-muted'
+    ),
+  },
+  sizes: {
+    sm: 'h-8 px-2.5 text-xs',
+    md: 'h-9 px-3 text-sm',
+    lg: 'h-10 px-4 text-sm',
+  },
+  group: 'inline-flex items-center gap-1',
+  vertical: 'flex-col',
+}
+
+interface ToggleGroupCtx {
+  type: 'single' | 'multiple'
+  value: string | string[]
+  onToggle: (v: string) => void
+  disabled?: boolean
+}
+
+interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+  pressed?: boolean
+  defaultPressed?: boolean
+  onChange?: (pressed: boolean) => void
+  value?: string
+  variant?: keyof typeof styles.variants
+  size?: keyof typeof styles.sizes
+}
+
+const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleProps>(({
+  pressed,
+  defaultPressed,
+  onChange,
+  value,
+  variant = 'default',
+  size = 'md',
+  disabled,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const ctx = React.useContext(Ctx)
+  const [internal, setInternal] = React.useState(defaultPressed ?? false)
+  const inGroup = ctx !== null && value !== undefined
+
+  const isPressed = inGroup
+    ? ctx.type === 'multiple'
+      ? (ctx.value as string[]).includes(value)
+      : ctx.value === value
+    : pressed ?? internal
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={isPressed}
+      data-state={isPressed ? 'on' : 'off'}
+      disabled={disabled ?? (inGroup ? ctx.disabled : false)}
+      className={cn(styles.base, styles.variants[variant], styles.sizes[size], className)}
+      onClick={() => {
+        if (inGroup) {
+          ctx.onToggle(value)
+        } else {
+          const next = !isPressed
+          if (pressed === undefined) setInternal(next)
+          onChange?.(next)
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+})
+
+ToggleButton.displayName = 'Toggle'
+
+function ToggleGroupRoot({
+  children,
+  type,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  orientation = 'horizontal',
+  disabled,
+  className,
+}: {
+  children: React.ReactNode
+  type: 'single' | 'multiple'
+  defaultValue?: string | string[]
+  value?: string | string[]
+  onValueChange?: (value: string | string[]) => void
+  orientation?: 'vertical' | 'horizontal'
+  disabled?: boolean
+  className?: string
+}) {
+  const [internal, setInternal] = React.useState<string | string[]>(defaultValue ?? (type === 'multiple' ? [] : ''))
+  const isControlled = controlledValue !== undefined
+  const current = isControlled ? controlledValue : internal
+
+  const onToggle = (itemValue: string) => {
+    let next: string | string[]
+    if (type === 'single') {
+      next = current === itemValue ? '' : itemValue
+    } else {
+      const arr = current as string[]
+      next = arr.includes(itemValue)
+        ? arr.filter((v) => v !== itemValue)
+        : [...arr, itemValue]
+    }
+    if (!isControlled) setInternal(next)
+    onValueChange?.(next)
+  }
+
+  return (
+    <Ctx.Provider
+      value={{ type, value: current, onToggle, disabled }}
+    >
+      <div
+        role="group"
+        className={cn(
+          styles.group,
+          orientation === 'vertical' && styles.vertical,
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+const Ctx = React.createContext<ToggleGroupCtx | null>(null)
+
+export const Toggle = Object.assign(ToggleButton, {
+  Group: ToggleGroupRoot,
+})
+`;var Le=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3747,7 +4481,7 @@ export const Table = Object.assign(TableRoot, {
   Head,
   Cell,
 })
-`;var Se=`import * as React from 'react'
+`;var Oe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3792,7 +4526,7 @@ export function Tooltip({
     </span>
   )
 }
-`;var Te=`
+`;var Me=`
 /* react-day-picker theme integration */
 .rdp-root {
   --rdp-accent-color: var(--primary);
@@ -3803,7 +4537,7 @@ export function Tooltip({
   --rdp-selected-border: none;
   --rdp-day_button-border: none;
 }
-`,v=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],w={accordion:J,alert:X,"aspect-ratio":Z,avatar:Q,badge:ee,breadcrumb:te,button:ne,calendar:oe,"date-picker":re,command:se,carousel:ae,card:ie,checkbox:ce,dialog:le,drawer:de,dropdown:pe,input:me,kbd:ue,label:fe,pagination:ge,popover:he,progress:be,"radio-group":ve,select:xe,separator:ye,sidebar:Ne,slider:Ce,switch:we,table:De,tabs:Re,textarea:ke,theme:q,toast:Pe,tooltip:Se};async function Ee(e){let r=process.cwd();n.intro("drivn add");let t=U(r);if(t||(n.log.error("Drivn is not initialized. Run npx drivn@latest create"),n.outro("Cancelled"),process.exit(1)),!e||!e.length){let o=await n.multiselect({message:"Select components to add",options:v.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let a=e.filter(o=>!v.find(s=>s.name===o));a.length&&(n.log.error(`Unknown components: ${a.join(", ")}`),n.log.info("Available: "+v.map(o=>o.name).join(", ")),n.outro("Cancelled"),process.exit(1));let l=e.includes("theme"),d=e.filter(o=>o!=="theme"),p=new Set,f=new Set,g=o=>{if(p.has(o))return;let s=v.find(i=>i.name===o);s&&(s.dependencies.forEach(i=>g(i)),s.npmDependencies?.forEach(i=>f.add(i)),p.add(o));};d.forEach(g),l&&f.add("next-themes");let N=[...p].filter(o=>!d.includes(o));N.length&&n.log.info(`Required dependency: ${N.join(", ")}`);let u=t.typescript?"tsx":"jsx",h=join(r,t.paths.components);for(let o of p){let s=join(h,`${o}.${u}`);if(x(s)){let D=await n.confirm({message:`${o}.${u} exists. Overwrite?`,initialValue:false});if(n.isCancel(D)||!D){n.log.warn(`Skipped ${o}`);continue}}let i=w[o];i=i.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),b(s,i),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${u}`);}if(l){let o=join(h,`theme-provider.${u}`);if(x(o)){let i=await n.confirm({message:`theme-provider.${u} exists. Overwrite?`,initialValue:false});!n.isCancel(i)&&i?(b(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${u}`)):n.log.warn("Skipped theme-provider");}else b(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${u}`);if(t.paths.globals){let i=join(r,t.paths.globals);if(x(i)){let D=H(i);D.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(b(i,D+k),n.log.success(`Theme tokens appended to ${m.cyan(t.paths.globals)}`));}else n.log.warn(`Globals file not found at ${t.paths.globals}`);}else n.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(m.bold("Complete the setup:")),n.log.message(""),n.log.message(m.bold(`${m.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(m.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),n.log.message(""),n.log.message(m.bold(`${m.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(m.cyan("   <html suppressHydrationWarning>")),n.log.message(""),n.log.message(m.bold(`${m.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(m.cyan("   <ThemeProvider>")),n.log.message(m.cyan("     {children}")),n.log.message(m.cyan("   </ThemeProvider>")),n.log.message("");}if(p.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(x(o)){let s=H(o);s.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(b(o,s+Te),n.log.success(`Calendar tokens appended to ${m.cyan(t.paths.globals)}`));}}if(f.size){let o=I(r),s=[...f],i=n.spinner();i.start("Installing packages");try{execSync(R(o,s),{cwd:r,stdio:"ignore"}),i.stop("Packages installed");}catch{i.stop("Failed to install packages"),n.log.warn(`Run manually: ${R(o,s)}`);}}n.outro("Done.");}var j=`# Drivn Component Conventions
+`,v=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"combobox",description:"Searchable select with filtering, single/multi selection, and keyboard navigation",dependencies:[],npmDependencies:["cmdk"]},{name:"collapsible",description:"Toggle content visibility with smooth animation and accessible controls",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"scroll-area",description:"Themed scrollable container with custom scrollbar styling and orientation control",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"skeleton",description:"Loading placeholder with pulse animation, sized and shaped via className",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"toggle",description:"Toggle button with pressed state, single and multiple selection groups",dependencies:[],npmDependencies:[]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],R={accordion:q,alert:J,"aspect-ratio":Z,avatar:Q,badge:ee,breadcrumb:te,button:ne,calendar:oe,"date-picker":re,command:se,carousel:ae,card:ie,checkbox:ce,combobox:le,collapsible:de,dialog:pe,drawer:ue,dropdown:me,input:fe,kbd:ge,label:he,pagination:be,popover:ve,progress:xe,"radio-group":ye,select:Ne,"scroll-area":Ce,separator:Re,skeleton:we,sidebar:ke,slider:Pe,switch:Se,table:Le,tabs:De,textarea:Te,theme:X,toast:Ie,toggle:Ee,tooltip:Oe};async function Ae(e){let r=process.cwd();n.intro("drivn add");let t=U(r);if(t||(n.log.error("Drivn is not initialized. Run npx drivn@latest create"),n.outro("Cancelled"),process.exit(1)),!e||!e.length){let o=await n.multiselect({message:"Select components to add",options:v.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let a=e.filter(o=>!v.find(s=>s.name===o));a.length&&(n.log.error(`Unknown components: ${a.join(", ")}`),n.log.info("Available: "+v.map(o=>o.name).join(", ")),n.outro("Cancelled"),process.exit(1));let l=e.includes("theme"),d=e.filter(o=>o!=="theme"),p=new Set,f=new Set,g=o=>{if(p.has(o))return;let s=v.find(i=>i.name===o);s&&(s.dependencies.forEach(i=>g(i)),s.npmDependencies?.forEach(i=>f.add(i)),p.add(o));};d.forEach(g),l&&f.add("next-themes");let N=[...p].filter(o=>!d.includes(o));N.length&&n.log.info(`Required dependency: ${N.join(", ")}`);let m=t.typescript?"tsx":"jsx",h=join(r,t.paths.components);for(let o of p){let s=join(h,`${o}.${m}`);if(x(s)){let S=await n.confirm({message:`${o}.${m} exists. Overwrite?`,initialValue:false});if(n.isCancel(S)||!S){n.log.warn(`Skipped ${o}`);continue}}let i=R[o];i=i.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),b(s,i),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${m}`);}if(l){let o=join(h,`theme-provider.${m}`);if(x(o)){let i=await n.confirm({message:`theme-provider.${m} exists. Overwrite?`,initialValue:false});!n.isCancel(i)&&i?(b(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`)):n.log.warn("Skipped theme-provider");}else b(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`);if(t.paths.globals){let i=join(r,t.paths.globals);if(x(i)){let S=H(i);S.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(b(i,S+k),n.log.success(`Theme tokens appended to ${u.cyan(t.paths.globals)}`));}else n.log.warn(`Globals file not found at ${t.paths.globals}`);}else n.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(u.bold("Complete the setup:")),n.log.message(""),n.log.message(u.bold(`${u.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(u.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),n.log.message(""),n.log.message(u.bold(`${u.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(u.cyan("   <html suppressHydrationWarning>")),n.log.message(""),n.log.message(u.bold(`${u.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(u.cyan("   <ThemeProvider>")),n.log.message(u.cyan("     {children}")),n.log.message(u.cyan("   </ThemeProvider>")),n.log.message("");}if(p.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(x(o)){let s=H(o);s.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(b(o,s+Me),n.log.success(`Calendar tokens appended to ${u.cyan(t.paths.globals)}`));}}if(f.size){let o=E(r),s=[...f],i=n.spinner();i.start("Installing packages");try{execSync(w(o,s),{cwd:r,stdio:"ignore"}),i.stop("Packages installed");}catch{i.stop("Failed to install packages"),n.log.warn(`Run manually: ${w(o,s)}`);}}n.outro("Done.");}var j=`# Drivn Component Conventions
 
 ## Core Philosophy
 - **Zero runtime UI deps** \u2014 No Radix, no cva, no external UI primitives. Pure React + Tailwind.
@@ -3916,13 +4650,13 @@ import { cn } from '@/utils/cn'
 - Components declare internal deps (other Drivn components)
 - Some components need npm packages (react-day-picker, cmdk, embla-carousel-react, sonner)
 - The CLI resolves and installs all dependencies automatically
-`;var L={version:"1.9.0"};function O(e){return v.find(r=>r.name===e)}function Ke(e){let r=new Set,t=a=>{if(r.has(a))return;let l=O(a);l&&(l.dependencies.forEach(d=>t(d)),r.add(a));};return t(e),r.delete(e),[...r]}async function Ie(){let e=new McpServer({name:"drivn",version:L.version});e.tool("list_components","List all available Drivn UI components with descriptions",{},async()=>({content:[{type:"text",text:JSON.stringify(v.map(t=>({name:t.name,description:t.description})),null,2)}]})),e.tool("get_component","Get the full source code and metadata for a Drivn component",{name:z$1.string().describe('Component name (e.g. "button", "dialog")')},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=w[t];return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,source:l},null,2)}]}}),e.tool("get_component_metadata","Get metadata only (no source code) for a Drivn component \u2014 useful for planning",{name:z$1.string().describe("Component name")},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=Ke(t);return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,allResolvedDependencies:l},null,2)}]}}),e.tool("search_components","Search Drivn components by name or description",{query:z$1.string().describe("Search query")},async({query:t})=>{let a=t.toLowerCase(),l=v.filter(d=>d.name.includes(a)||d.description.toLowerCase().includes(a));return {content:[{type:"text",text:l.length?JSON.stringify(l.map(d=>({name:d.name,description:d.description})),null,2):`No components matching "${t}".`}]}}),e.tool("get_installation_instructions","Get step-by-step installation instructions for one or more components",{components:z$1.array(z$1.string()).describe("Component names to install"),packageManager:z$1.enum(["npm","pnpm"]).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:a})=>{let l=a??"npm",d=new Set,p=new Set,f=[],g=o=>{if(d.has(o))return;let s=O(o);if(!s){f.push(o);return}s.dependencies.forEach(i=>g(i)),s.npmDependencies.forEach(i=>p.add(i)),d.add(o);};if(t.forEach(g),f.length)return {content:[{type:"text",text:`Unknown components: ${f.join(", ")}. Use list_components to see available components.`}],isError:true};let N=l==="pnpm"?"pnpm dlx":"npx",u=l==="pnpm"?"pnpm add":"npm install",h=[];return h.push(`# Install components via CLI
+`;var L={version:"1.11.0"};function O(e){return v.find(r=>r.name===e)}function Je(e){let r=new Set,t=a=>{if(r.has(a))return;let l=O(a);l&&(l.dependencies.forEach(d=>t(d)),r.add(a));};return t(e),r.delete(e),[...r]}async function Be(){let e=new McpServer({name:"drivn",version:L.version});e.tool("list_components","List all available Drivn UI components with descriptions",{},async()=>({content:[{type:"text",text:JSON.stringify(v.map(t=>({name:t.name,description:t.description})),null,2)}]})),e.tool("get_component","Get the full source code and metadata for a Drivn component",{name:z$1.string().describe('Component name (e.g. "button", "dialog")')},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=R[t];return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,source:l},null,2)}]}}),e.tool("get_component_metadata","Get metadata only (no source code) for a Drivn component \u2014 useful for planning",{name:z$1.string().describe("Component name")},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=Je(t);return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,allResolvedDependencies:l},null,2)}]}}),e.tool("search_components","Search Drivn components by name or description",{query:z$1.string().describe("Search query")},async({query:t})=>{let a=t.toLowerCase(),l=v.filter(d=>d.name.includes(a)||d.description.toLowerCase().includes(a));return {content:[{type:"text",text:l.length?JSON.stringify(l.map(d=>({name:d.name,description:d.description})),null,2):`No components matching "${t}".`}]}}),e.tool("get_installation_instructions","Get step-by-step installation instructions for one or more components",{components:z$1.array(z$1.string()).describe("Component names to install"),packageManager:z$1.enum(["npm","pnpm"]).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:a})=>{let l=a??"npm",d=new Set,p=new Set,f=[],g=o=>{if(d.has(o))return;let s=O(o);if(!s){f.push(o);return}s.dependencies.forEach(i=>g(i)),s.npmDependencies.forEach(i=>p.add(i)),d.add(o);};if(t.forEach(g),f.length)return {content:[{type:"text",text:`Unknown components: ${f.join(", ")}. Use list_components to see available components.`}],isError:true};let N=l==="pnpm"?"pnpm dlx":"npx",m=l==="pnpm"?"pnpm add":"npm install",h=[];return h.push(`# Install components via CLI
 ${N} drivn@latest add ${[...d].join(" ")}`),p.size&&h.push(`# Install required npm dependencies
-${u} ${[...p].join(" ")}`),h.push(`# Components will be installed to your configured components directory
+${m} ${[...p].join(" ")}`),h.push(`# Components will be installed to your configured components directory
 # (default: src/components/ui/)`),{content:[{type:"text",text:JSON.stringify({componentsToInstall:[...d],npmDependencies:[...p],steps:h},null,2)}]}}),e.tool("get_design_tokens","Get the Drivn CSS design tokens (base globals and theme tokens)",{},async()=>({content:[{type:"text",text:`/* === Base Globals === */
 ${C}
 
 /* === Theme Tokens === */
 ${k}`}]})),e.tool("get_drivn_rules","Get Drivn coding conventions and component patterns",{},async()=>({content:[{type:"text",text:j}]})),e.resource("drivn-rules","drivn://rules",{description:"Drivn coding conventions and component patterns"},async()=>({contents:[{uri:"drivn://rules",mimeType:"text/markdown",text:j}]})),e.resource("drivn-design-tokens","drivn://design-tokens",{description:"Drivn CSS globals and theme tokens"},async()=>({contents:[{uri:"drivn://design-tokens",mimeType:"text/css",text:`${C}
 
-${k}`}]}));for(let t of v){let a=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,a,{description:t.description},async()=>({contents:[{uri:a,mimeType:"text/plain",text:w[t.name]}]}));}let r=new StdioServerTransport;await e.connect(r);}var E=new Command;E.name("drivn").description("Drivn \u2014 Modern UI components").version(L.version);E.command("create").description("Initialize Drivn in your project").action(Y);E.command("add [components...]").description("Add components to your project").action(Ee);E.command("mcp").description("Start the Drivn MCP server").action(Ie);E.parse();
+${k}`}]}));for(let t of v){let a=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,a,{description:t.description},async()=>({contents:[{uri:a,mimeType:"text/plain",text:R[t.name]}]}));}let r=new StdioServerTransport;await e.connect(r);}var I=new Command;I.name("drivn").description("Drivn \u2014 Modern UI components").version(L.version);I.command("create").description("Initialize Drivn in your project").action(Y);I.command("add [components...]").description("Add components to your project").action(Ae);I.command("mcp").description("Start the Drivn MCP server").action(Be);I.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drivn",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Modern UI components for React — add beautiful, accessible components to your project",
   "license": "MIT",
   "type": "module",