drivn 1.1.0 → 1.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as e from'@clack/prompts';import i from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var M={next:"Next.js",react:"React"};function B(t){let n=join(t,"package.json");if(!existsSync(n))throw new Error("package.json not found");let c=JSON.parse(readFileSync(n,"utf-8")),v={...c.dependencies,...c.devDependencies},d="react";v.next&&(d="next");let m=existsSync(join(t,"src")),f=existsSync(join(t,"tsconfig.json"));return {framework:d,srcDir:m,typescript:f}}var H="drivn.config.json";function V(t){let n=join(t,H);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function z(t,n){let c=join(t,H);writeFileSync(c,JSON.stringify(n,null,2));}function he(t){existsSync(t)||mkdirSync(t,{recursive:true});}function p(t,n){he(dirname(t)),writeFileSync(t,n);}function F(t){return readFileSync(t,"utf-8")}function h(t){return existsSync(t)}function k(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,n){let c=n.join(" ");return t==="pnpm"?`pnpm add ${c}`:`npm install ${c}`}function _(t){return t==="pnpm"?"pnpm dlx":"npx"}var T=`@import "tailwindcss";
+import {Command}from'commander';import*as e from'@clack/prompts';import i from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var A={next:"Next.js",react:"React"};function B(t){let n=join(t,"package.json");if(!existsSync(n))throw new Error("package.json not found");let a=JSON.parse(readFileSync(n,"utf-8")),v={...a.dependencies,...a.devDependencies},p="react";v.next&&(p="next");let g=existsSync(join(t,"src")),u=existsSync(join(t,"tsconfig.json"));return {framework:p,srcDir:g,typescript:u}}var $="drivn.config.json";function V(t){let n=join(t,$);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function _(t,n){let a=join(t,$);writeFileSync(a,JSON.stringify(n,null,2));}function Ne(t){existsSync(t)||mkdirSync(t,{recursive:true});}function d(t,n){Ne(dirname(t)),writeFileSync(t,n);}function O(t){return readFileSync(t,"utf-8")}function m(t){return existsSync(t)}function P(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,n){let a=n.join(" ");return t==="pnpm"?`pnpm add ${a}`:`npm install ${a}`}function F(t){return t==="pnpm"?"pnpm dlx":"npx"}var D=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -70,7 +70,7 @@ body {
   color: var(--color-foreground);
   font-family: system-ui, -apple-system, sans-serif;
 }
-`,L=`
+`,M=`
 /* Drivn Dark/Light Theme */
 :root,
 [data-theme="dark"] {
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var ye=`import { type ClassValue, clsx } from 'clsx'
+`;var ke=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,Ne=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function we(t){for(let n of Ne)if(h(join(t,n)))return n;return null}async function U(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let n;try{n=B(t),e.log.success(`Detected ${i.cyan(M[n.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(h(join(t,"drivn.config.json"))){let s=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(s)||!s)&&(e.cancel("Setup cancelled"),process.exit(0));}let c=n.srcDir?"src/components/ui":"components/ui",v=n.srcDir?"src/utils":"utils",d=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:c,defaultValue:c}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:v,defaultValue:v})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),m={framework:n.framework,typescript:n.typescript,paths:{components:d.components,utils:d.utils},installed:[]},f=n.typescript?"ts":"js",b=join(t,d.utils,`cn.${f}`);h(b)||p(b,ye);let g=we(t);if(g){let s=await e.confirm({message:`Found ${i.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(s)&&s&&(p(join(t,g),T),m.paths.globals=g,e.log.success(`Color tokens written to ${i.cyan(g)}`));}else {let s=n.srcDir?"src/styles/globals.css":"styles/globals.css",a=await e.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});e.isCancel(a)||(p(join(t,a),T),m.paths.globals=a,e.log.success(`Color tokens written to ${i.cyan(a)}`));}z(t,m);let x=k(t),l=_(x),N=["clsx","tailwind-merge","lucide-react"],o=e.spinner();o.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var G=`'use client'
+`,Pe=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function De(t){for(let n of Pe)if(m(join(t,n)))return n;return null}async function K(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let n;try{n=B(t),e.log.success(`Detected ${i.cyan(A[n.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(m(join(t,"drivn.config.json"))){let r=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(r)||!r)&&(e.cancel("Setup cancelled"),process.exit(0));}let a=n.srcDir?"src/components/ui":"components/ui",v=n.srcDir?"src/utils":"utils",p=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:a,defaultValue:a}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:v,defaultValue:v})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),g={framework:n.framework,typescript:n.typescript,paths:{components:p.components,utils:p.utils},installed:[]},u=n.typescript?"ts":"js",b=join(t,p.utils,`cn.${u}`);m(b)||d(b,ke);let h=De(t);if(h){let r=await e.confirm({message:`Found ${i.cyan(h)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(r)&&r&&(d(join(t,h),D),g.paths.globals=h,e.log.success(`Color tokens written to ${i.cyan(h)}`));}else {let r=n.srcDir?"src/styles/globals.css":"styles/globals.css",c=await e.text({message:"Where should the globals CSS file be created?",placeholder:r,defaultValue:r});e.isCancel(c)||(d(join(t,c),D),g.paths.globals=c,e.log.success(`Color tokens written to ${i.cyan(c)}`));}_(t,g);let x=P(t),l=F(x),N=["clsx","tailwind-merge","lucide-react"],o=e.spinner();o.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var Y=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -161,7 +161,7 @@ export function ThemeProvider({
     </NextThemesProvider>
   )
 }
-`;var W=`'use client'
+`;var U=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -289,9 +289,11 @@ function useCtx() {
 }
 
 export const Accordion = Object.assign(AccordionRoot, {
-  Item, Trigger, Content,
+  Item,
+  Trigger,
+  Content
 })
-`;var X=`import * as React from 'react'
+`;var G=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -339,7 +341,7 @@ export function Alert({
     </div>
   )
 }
-`;var q=`import * as React from 'react'
+`;var W=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -383,7 +385,7 @@ export function Avatar({
     </div>
   )
 }
-`;var J=`import * as React from 'react'
+`;var X=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -413,7 +415,7 @@ export function Badge({ variant = 'default', className, children }: BadgeProps)
     </span>
   )
 }
-`;var K=`import * as React from 'react'
+`;var q=`import * as React from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -493,7 +495,887 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 )
 
 Button.displayName = 'Button'
-`;var Q=`import * as React from 'react'
+`;var J=`'use client'
+
+import * as React from 'react'
+import {
+  DayPicker,
+  type DateRange,
+  type Locale,
+  type PropsBase,
+  type PropsSingle,
+  type PropsRange,
+} from 'react-day-picker'
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  root: 'p-3 bg-card border border-border rounded-[10px] text-sm',
+  classNames: {
+    months: 'relative flex gap-4',
+    month: 'flex flex-col gap-4',
+    month_caption: 'flex items-center justify-center h-7',
+    caption_label: 'text-sm font-medium text-foreground',
+    nav: 'absolute inset-x-0 top-0 flex items-center justify-between h-7',
+    button_previous: cn(
+      'inline-flex items-center justify-center',
+      'w-7 h-7 rounded-md text-muted-foreground',
+      'hover:text-foreground hover:bg-accent',
+      'transition-colors cursor-pointer'
+    ),
+    button_next: cn(
+      'inline-flex items-center justify-center',
+      'w-7 h-7 rounded-md text-muted-foreground',
+      'hover:text-foreground hover:bg-accent',
+      'transition-colors cursor-pointer'
+    ),
+    month_grid: 'border-collapse border-spacing-0',
+    weekdays: '',
+    weekday: cn(
+      'w-8 pb-2 text-[0.8rem] font-medium',
+      'text-muted-foreground text-center'
+    ),
+    week: '',
+    day: 'p-0 text-center',
+    day_button: cn(
+      'inline-flex items-center justify-center',
+      'w-8 h-8 rounded-md text-sm cursor-pointer',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus-visible:outline-none'
+    ),
+    today: 'font-semibold text-primary',
+    selected: cn(
+      '[&>button]:bg-primary',
+      '[&>button]:text-primary-foreground',
+      '[&>button]:hover:bg-primary',
+      '[&>button]:hover:text-primary-foreground'
+    ),
+    outside: 'text-muted-foreground/40',
+    disabled: 'text-muted-foreground/30 cursor-not-allowed',
+    range_middle: cn(
+      'bg-accent text-accent-foreground',
+      'hover:bg-accent hover:text-accent-foreground',
+      'rounded-none [&>button]:rounded-none'
+    ),
+    chevron: 'w-4 h-4',
+    dropdown: cn(
+      'appearance-none bg-transparent text-sm',
+      'font-medium text-foreground cursor-pointer',
+      'border-none outline-none'
+    ),
+    week_number: cn(
+      'w-8 text-[0.75rem]',
+      'text-muted-foreground/50 text-center font-normal'
+    ),
+    hidden: 'invisible',
+  },
+  dropdownOverrides: {
+    dropdowns: 'flex items-center gap-2 justify-center',
+    dropdown_root: 'relative inline-flex items-center',
+    dropdown: 'absolute inset-0 opacity-0 cursor-pointer w-full z-10',
+    caption_label: cn(
+      'inline-flex items-center text-sm',
+      'font-medium text-foreground',
+      'pointer-events-none whitespace-nowrap'
+    ),
+    chevron: 'w-3 h-3 ml-0.5 text-muted-foreground',
+  },
+  rangeActive: {
+    range_start: cn(
+      'bg-primary text-primary-foreground',
+      'rounded-l-md [&>button]:rounded-r-none'
+    ),
+    range_end: cn(
+      'bg-primary text-primary-foreground',
+      'rounded-r-md [&>button]:rounded-l-none'
+    ),
+  },
+}
+
+const variantConfig = {
+  default: {},
+  weekNumbers: { showWeekNumber: true },
+  dropdown: { captionLayout: 'dropdown' as const },
+}
+
+export type CalendarVariant = keyof typeof variantConfig
+
+type CalendarProps = Omit<PropsBase, 'mode'> & Omit<PropsSingle, 'mode'> & { variant?: CalendarVariant; fromYear?: number; toYear?: number }
+
+type RangeProps = Omit<PropsBase, 'mode'> & Omit<PropsRange, 'mode'>
+
+function Chevron(props: { orientation?: 'left' | 'right' | 'up' | 'down'; size?: number; disabled?: boolean; className?: string }) {
+  const icons = { left: ChevronLeft, right: ChevronRight, down: ChevronDown, up: ChevronRight }
+  const Icon = icons[props.orientation ?? 'right']
+  return <Icon className={props.className} />
+}
+
+const currentYear = new Date().getFullYear()
+
+function CalendarRoot({
+  variant = 'default',
+  fromYear = currentYear - 20,
+  toYear = currentYear + 20,
+  className,
+  classNames: userClassNames,
+  ...props
+}: CalendarProps) {
+  const dropdownRange = variant === 'dropdown' ? {
+    startMonth: new Date(fromYear, 0),
+    endMonth: new Date(toYear, 11),
+  } : {}
+
+  return (
+    <DayPicker
+      mode="single"
+      {...variantConfig[variant]}
+      {...dropdownRange}
+      classNames={{
+        ...styles.classNames,
+        ...(variant === 'dropdown' && styles.dropdownOverrides),
+        ...userClassNames,
+      }}
+      components={{ Chevron }}
+      className={cn(styles.root, className)}
+      {...props}
+    />
+  )
+}
+
+function Range({
+  className,
+  classNames: userClassNames,
+  selected,
+  ...props
+}: RangeProps) {
+  const hasRange = selected?.from && selected?.to && selected.from.getTime() !== selected.to.getTime()
+
+  return (
+    <DayPicker
+      mode="range"
+      selected={selected}
+      classNames={{
+        ...styles.classNames,
+        ...(hasRange && styles.rangeActive),
+        ...userClassNames,
+      }}
+      components={{ Chevron }}
+      className={cn(styles.root, className)}
+      {...props}
+    />
+  )
+}
+
+export { type DateRange, type Locale }
+
+export const Calendar = Object.assign(CalendarRoot, {
+  Range
+})
+`;var Q=`'use client'
+
+import * as React from 'react'
+import { CalendarDays } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import {
+  Calendar,
+  type CalendarVariant,
+  type DateRange,
+  type Locale,
+} from '@/components/ui/calendar'
+
+const styles = {
+  base: 'relative',
+  trigger: cn(
+    'flex items-center gap-2 w-full h-10 px-3',
+    'border border-input rounded-[10px] text-sm',
+    'text-foreground transition-colors cursor-pointer',
+    'focus:outline-none',
+    'disabled:opacity-50 disabled:cursor-default'
+  ),
+  placeholder: 'text-muted-foreground',
+  icon: 'w-4 h-4 text-muted-foreground shrink-0',
+  text: 'flex-1 truncate text-left',
+  content: cn(
+    'absolute top-full left-0 mt-1 z-50',
+    'transition-[opacity,scale] duration-150 ease-out'
+  ),
+}
+
+type FormatDateFn = (date: Date) => string
+
+interface DatePickerBaseProps {
+  placeholder?: string
+  formatDate?: FormatDateFn
+  disabled?: boolean
+  locale?: Partial<Locale>
+  defaultMonth?: Date
+  className?: string
+}
+
+interface DatePickerProps extends DatePickerBaseProps {
+  selected?: Date
+  onSelect?: (date: Date | undefined) => void
+  variant?: CalendarVariant
+  fromYear?: number
+  toYear?: number
+}
+
+interface DatePickerRangeProps extends DatePickerBaseProps {
+  selected?: DateRange
+  onSelect?: (range: DateRange | undefined) => void
+}
+
+function formatRangeLabel(
+  range: DateRange,
+  fmt: FormatDateFn
+): string {
+  if (!range.from) return ''
+  if (!range.to) return fmt(range.from)
+  return \\\`\\\${fmt(range.from)} \u2013 \\\${fmt(range.to)}\\\`
+}
+
+function DatePickerRoot({
+  selected,
+  onSelect,
+  placeholder = 'Pick a date',
+  formatDate,
+  disabled = false,
+  locale,
+  variant = 'default',
+  fromYear,
+  toYear,
+  defaultMonth,
+  className,
+}: DatePickerProps) {
+  const fmt = formatDate ?? ((d: Date) =>
+    d.toLocaleDateString(locale?.code ?? 'en-US', { month: 'short', day: 'numeric', year: 'numeric' }))
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const onMouseDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  const handleSelect = React.useCallback(
+    (date: Date | undefined) => {
+      onSelect?.(date)
+      setOpen(false)
+    },
+    [onSelect]
+  )
+
+  return (
+    <div ref={ref} className={cn(styles.base, className)}>
+      <button
+        type="button"
+        className={styles.trigger}
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <CalendarDays className={styles.icon} />
+        <span className={cn(styles.text, !selected && styles.placeholder)}>
+          {selected ? fmt(selected) : placeholder}
+        </span>
+      </button>
+      <div className={cn(styles.content, open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none')}>
+        <Calendar
+          variant={variant}
+          locale={locale}
+          selected={selected}
+          onSelect={handleSelect}
+          defaultMonth={defaultMonth ?? selected}
+          {...(fromYear !== undefined && { fromYear })}
+          {...(toYear !== undefined && { toYear })}
+        />
+      </div>
+    </div>
+  )
+}
+
+function Range({
+  selected,
+  onSelect,
+  placeholder = 'Pick a date range',
+  formatDate,
+  disabled = false,
+  locale,
+  defaultMonth,
+  className,
+}: DatePickerRangeProps) {
+  const fmt = formatDate ?? ((d: Date) =>
+    d.toLocaleDateString(locale?.code ?? 'en-US', { month: 'short', day: 'numeric', year: 'numeric' }))
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const onMouseDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  const handleSelect = React.useCallback(
+    (range: DateRange | undefined) => {
+      onSelect?.(range)
+      const complete = range?.from && range?.to
+        && range.from.getTime() !== range.to.getTime()
+      if (complete) setOpen(false)
+    },
+    [onSelect]
+  )
+
+  const label = selected
+    ? formatRangeLabel(selected, fmt)
+    : undefined
+
+  return (
+    <div ref={ref} className={cn(styles.base, className)}>
+      <button
+        type="button"
+        className={styles.trigger}
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <CalendarDays className={styles.icon} />
+        <span className={cn(styles.text, !label && styles.placeholder)}>
+          {label ?? placeholder}
+        </span>
+      </button>
+      <div className={cn(styles.content, open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none')}>
+        <Calendar.Range
+          locale={locale}
+          selected={selected}
+          onSelect={handleSelect}
+          defaultMonth={defaultMonth ?? selected?.from}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { type DateRange, type Locale }
+
+export const DatePicker = Object.assign(DatePickerRoot, {
+  Range,
+})
+`;var Z=`'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import { Dialog } from '@/components/ui/dialog'
+
+const styles = {
+  root: cn(
+    'flex flex-col overflow-hidden',
+    'bg-card border border-border rounded-[10px]'
+  ),
+  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',
+      'disabled:cursor-not-allowed disabled:opacity-50'
+    ),
+  },
+  list: cn(
+    'h-[300px] overflow-y-auto overflow-x-hidden p-1',
+    '[&_[cmdk-list-sizer]]:space-y-1'
+  ),
+  empty: cn(
+    'py-6 text-center text-sm',
+    'text-muted-foreground'
+  ),
+  loading: cn(
+    'py-6 text-center text-sm',
+    'text-muted-foreground'
+  ),
+  group: cn(
+    'overflow-hidden',
+    '[&_[cmdk-group-heading]]:px-2',
+    '[&_[cmdk-group-heading]]:py-1.5',
+    '[&_[cmdk-group-heading]]:text-xs',
+    '[&_[cmdk-group-heading]]:font-medium',
+    '[&_[cmdk-group-heading]]:text-muted-foreground'
+  ),
+  item: cn(
+    'relative flex items-center gap-2 px-2 py-1.5',
+    'text-sm rounded-lg cursor-default select-none',
+    'data-[selected=true]:bg-accent',
+    'data-[selected=true]:text-accent-foreground',
+    'data-[disabled=true]:pointer-events-none',
+    'data-[disabled=true]:opacity-50'
+  ),
+  separator: '-mx-1 h-px bg-border',
+  shortcut: cn(
+    'ml-auto text-xs tracking-widest',
+    'text-muted-foreground'
+  ),
+}
+
+function CommandRoot({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(styles.root, className)}
+      {...props}
+    />
+  )
+}
+
+function Input({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div className={styles.input.wrapper}>
+      <Search className={styles.input.icon} />
+      <CommandPrimitive.Input
+        className={cn(styles.input.field, className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function List({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn(styles.list, className)}
+      {...props}
+    />
+  )
+}
+
+function Empty({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      className={cn(styles.empty, className)}
+      {...props}
+    >
+      {children ?? 'No results found.'}
+    </CommandPrimitive.Empty>
+  )
+}
+
+function Group({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(styles.group, className)}
+      {...props}
+    />
+  )
+}
+
+function Item({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(styles.item, className)}
+      {...props}
+    />
+  )
+}
+
+function Separator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={cn(styles.separator, className)}
+      {...props}
+    />
+  )
+}
+
+function Loading({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Loading>) {
+  return (
+    <CommandPrimitive.Loading
+      className={cn(styles.loading, className)}
+      {...props}
+    />
+  )
+}
+
+function Shortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <kbd
+      className={cn(styles.shortcut, className)}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  open,
+  onOpenChange,
+  label,
+  className,
+  children,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  label?: string
+  className?: string
+  children: React.ReactNode
+}) {
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        onOpenChange(!open)
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open, onOpenChange])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content
+        className={cn(
+          'p-0 max-w-lg rounded-[10px]',
+          className
+        )}
+      >
+        <CommandPrimitive
+          label={label}
+          className="flex flex-col overflow-hidden"
+        >
+          {children}
+        </CommandPrimitive>
+      </Dialog.Content>
+    </Dialog>
+  )
+}
+
+export const Command = Object.assign(CommandRoot, {
+  Input,
+  List,
+  Empty,
+  Group,
+  Item,
+  Separator,
+  Loading,
+  Shortcut,
+  Dialog: CommandDialog,
+})
+`;var ee=`'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type CarouselOptions = Parameters<typeof useEmblaCarousel>[0]
+type CarouselPlugins = Parameters<typeof useEmblaCarousel>[1]
+
+const styles = {
+  root: 'relative focus-visible:outline-none',
+  content: {
+    viewport: 'overflow-hidden',
+    container: 'flex',
+    horizontal: '-ml-4',
+    vertical: '-mt-4 flex-col h-full',
+  },
+  item: {
+    base: 'min-w-0 shrink-0 grow-0 basis-full',
+    horizontal: 'pl-4',
+    vertical: 'pt-4',
+  },
+  arrow: cn(
+    'absolute top-1/2 -translate-y-1/2',
+    'w-8 px-0 bg-card/80 backdrop-blur-sm'
+  ),
+  dots: {
+    wrapper: 'flex justify-center gap-1.5 mt-3',
+    dot: cn(
+      'w-2 h-2 rounded-full transition-colors',
+      'bg-border cursor-pointer'
+    ),
+    active: 'bg-foreground',
+  },
+}
+
+interface CarouselCtx {
+  emblaRef: UseEmblaCarouselType[0]
+  api: CarouselApi
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  selectedIndex: number
+  scrollSnaps: number[]
+  orientation: 'horizontal' | 'vertical'
+}
+
+interface CarouselRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugins
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+function CarouselRoot({
+  opts,
+  plugins,
+  orientation = 'horizontal',
+  setApi,
+  className,
+  children,
+  ...props
+}: CarouselRootProps) {
+  const [emblaRef, api] = useEmblaCarousel({ ...opts, axis: orientation === 'vertical' ? 'y' : 'x' }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])
+
+  const onSelect = React.useCallback((emblaApi: NonNullable<CarouselApi>) => {
+    setCanScrollPrev(emblaApi.canScrollPrev())
+    setCanScrollNext(emblaApi.canScrollNext())
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [])
+
+  React.useEffect(() => {
+    if (!api) return
+    setScrollSnaps(api.scrollSnapList())
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+    return () => {
+      api.off('reInit', onSelect)
+      api.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  React.useEffect(() => {
+    if (setApi && api) setApi(api)
+  }, [api, setApi])
+
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    if (!api) return
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      api.scrollPrev()
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      api.scrollNext()
+    }
+  }, [api])
+
+  return (
+    <Ctx.Provider
+      value={{
+        emblaRef,
+        api,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps,
+        orientation,
+      }}
+    >
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        className={cn(styles.root, className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Content({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  const { emblaRef, orientation } = useCarousel()
+  return (
+    <div className={cn(styles.content.viewport, className)} ref={emblaRef}>
+      <div className={cn(styles.content.container, orientation === 'vertical' ? styles.content.vertical : styles.content.horizontal)}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Item({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  const { orientation } = useCarousel()
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      className={cn(styles.item.base, orientation === 'vertical' ? styles.item.vertical : styles.item.horizontal, className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Previous({
+  className,
+  variant = 'secondary',
+  size = 'sm',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { api, canScrollPrev } = useCarousel()
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      aria-label="Previous slide"
+      className={cn(styles.arrow, '-left-12', className)}
+      disabled={!canScrollPrev}
+      onClick={() => api?.scrollPrev()}
+      {...props}
+    >
+      <ChevronLeft className="w-4 h-4" />
+    </Button>
+  )
+}
+
+function Next({
+  className,
+  variant = 'secondary',
+  size = 'sm',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { api, canScrollNext } = useCarousel()
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      aria-label="Next slide"
+      className={cn(styles.arrow, '-right-12', className)}
+      disabled={!canScrollNext}
+      onClick={() => api?.scrollNext()}
+      {...props}
+    >
+      <ChevronRight className="w-4 h-4" />
+    </Button>
+  )
+}
+
+function Dots({
+  className,
+}: {
+  className?: string
+}) {
+  const { api, scrollSnaps, selectedIndex } = useCarousel()
+  return (
+    <div className={cn(styles.dots.wrapper, className)}>
+      {scrollSnaps.map((_, i) => (
+        <button
+          key={i}
+          type="button"
+          aria-label={\`Go to slide \${i + 1}\`}
+          className={cn(styles.dots.dot, i === selectedIndex && styles.dots.active)}
+          onClick={() => api?.scrollTo(i)}
+        />
+      ))}
+    </div>
+  )
+}
+
+const Ctx = React.createContext<CarouselCtx | null>(null)
+
+function useCarousel() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Carousel.* used outside <Carousel>')
+  return ctx
+}
+
+export type { CarouselApi }
+
+export const Carousel = Object.assign(CarouselRoot, {
+  Content,
+  Item,
+  Previous,
+  Next,
+  Dots
+})
+`;var te=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -558,9 +1440,9 @@ function Info({
 
 export const Card = Object.assign(CardRoot, {
   Preview,
-  Info,
+  Info
 })
-`;var Y=`'use client'
+`;var oe=`'use client'
 
 import * as React from 'react'
 import { Check } from 'lucide-react'
@@ -623,7 +1505,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
 )
 
 Checkbox.displayName = 'Checkbox'
-`;var Z=`'use client'
+`;var ne=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -780,9 +1662,9 @@ function useDialog() {
 export const Dialog = Object.assign(DialogRoot, {
   Trigger,
   Content,
-  Close,
+  Close
 })
-`;var ee=`'use client'
+`;var re=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -978,9 +1860,9 @@ export const Dropdown = Object.assign(DropdownRoot, {
   Item,
   Group,
   Label,
-  Separator: DropdownSeparator,
+  Separator: DropdownSeparator
 })
-`;var te=`import * as React from 'react'
+`;var se=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1003,7 +1885,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 )
 
 Input.displayName = 'Input'
-`;var oe=`'use client'
+`;var ae=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -1106,9 +1988,9 @@ function usePopover() {
 
 export const Popover = Object.assign(PopoverRoot, {
   Trigger,
-  Content,
+  Content
 })
-`;var ne=`import * as React from 'react'
+`;var ce=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1146,7 +2028,7 @@ export function Progress({
     </div>
   )
 }
-`;var re=`'use client'
+`;var ie=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -1298,9 +2180,9 @@ function useSelect() {
 export const Select = Object.assign(SelectRoot, {
   Trigger,
   Menu,
-  Option,
+  Option
 })
-`;var se=`import * as React from 'react'
+`;var le=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1324,7 +2206,7 @@ export function Separator({
     />
   )
 }
-`;var ae=`'use client'
+`;var de=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -1365,7 +2247,7 @@ export function Switch({
     </button>
   )
 }
-`;var ce=`'use client'
+`;var pe=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -1477,9 +2359,9 @@ function useTabs() {
 export const Tabs = Object.assign(TabsRoot, {
   List,
   Tab,
-  Panel,
+  Panel
 })
-`;var ie=`import * as React from 'react'
+`;var ue=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1506,7 +2388,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var le=`'use client'
+`;var me=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -1549,7 +2431,7 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var de=`import * as React from 'react'
+`;var fe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1594,4 +2476,15 @@ export function Tooltip({
     </span>
   )
 }
-`;var R=[{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:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{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:"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:"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:"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:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",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:[]}],P={accordion:W,alert:X,avatar:q,badge:J,button:K,card:Q,checkbox:Y,dialog:Z,dropdown:ee,input:te,popover:oe,progress:ne,select:re,separator:se,switch:ae,tabs:ce,textarea:ie,theme:G,toast:le,tooltip:de};async function pe(t){let n=process.cwd();e.intro("drivn add");let c=V(n);if(c||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let o=await e.multiselect({message:"Select components to add",options:R.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let v=t.filter(o=>!R.find(s=>s.name===o));v.length&&(e.log.error(`Unknown components: ${v.join(", ")}`),e.log.info("Available: "+R.map(o=>o.name).join(", ")),e.outro("Cancelled"),process.exit(1));let d=t.includes("theme"),m=t.filter(o=>o!=="theme"),f=new Set,b=new Set,g=o=>{if(f.has(o))return;let s=R.find(a=>a.name===o);s&&(s.dependencies.forEach(a=>g(a)),s.npmDependencies?.forEach(a=>b.add(a)),f.add(o));};m.forEach(g),d&&b.add("next-themes");let x=[...f].filter(o=>!m.includes(o));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=c.typescript?"tsx":"jsx",N=join(n,c.paths.components);for(let o of f){let s=join(N,`${o}.${l}`);if(h(s)){let w=await e.confirm({message:`${o}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(w)||!w){e.log.warn(`Skipped ${o}`);continue}}let a=P[o];a=a.replace(/@\/utils/g,`@/${c.paths.utils.replace(/^src\//,"")}`),p(s,a),e.log.success(`${o} \u2192 ${c.paths.components}/${o}.${l}`);}if(d){let o=join(N,`theme-provider.${l}`);if(h(o)){let a=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(a)&&a?(p(o,P.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else p(o,P.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`);if(c.paths.globals){let a=join(n,c.paths.globals);if(h(a)){let w=F(a);w.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(p(a,w+L),e.log.success(`Theme tokens appended to ${i.cyan(c.paths.globals)}`));}else e.log.warn(`Globals file not found at ${c.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=c.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(b.size){let o=k(n),s=[...b],a=e.spinner();a.start("Installing packages");try{execSync(y(o,s),{cwd:n,stdio:"ignore"}),a.stop("Packages installed");}catch{a.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(o,s)}`);}}e.outro("Done.");}var ue={version:"1.1.0"};var D=new Command;D.name("drivn").description("Drivn \u2014 Modern UI components").version(ue.version);D.command("create").description("Initialize Drivn in your project").action(U);D.command("add [components...]").description("Add components to your project").action(pe);D.parse();
+`;var ge=`
+/* react-day-picker theme integration */
+.rdp-root {
+  --rdp-accent-color: var(--primary);
+  --rdp-accent-background-color: var(--accent);
+  --rdp-day-height: 36px;
+  --rdp-day-width: 36px;
+  --rdp-selected-font: inherit;
+  --rdp-selected-border: none;
+  --rdp-day_button-border: none;
+}
+`,R=[{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:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",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:"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:"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:"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:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",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:[]}],S={accordion:U,alert:G,avatar:W,badge:X,button:q,calendar:J,"date-picker":Q,command:Z,carousel:ee,card:te,checkbox:oe,dialog:ne,dropdown:re,input:se,popover:ae,progress:ce,select:ie,separator:le,switch:de,tabs:pe,textarea:ue,theme:Y,toast:me,tooltip:fe};async function he(t){let n=process.cwd();e.intro("drivn add");let a=V(n);if(a||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let o=await e.multiselect({message:"Select components to add",options:R.map(r=>({label:r.name,hint:r.description,value:r.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let v=t.filter(o=>!R.find(r=>r.name===o));v.length&&(e.log.error(`Unknown components: ${v.join(", ")}`),e.log.info("Available: "+R.map(o=>o.name).join(", ")),e.outro("Cancelled"),process.exit(1));let p=t.includes("theme"),g=t.filter(o=>o!=="theme"),u=new Set,b=new Set,h=o=>{if(u.has(o))return;let r=R.find(c=>c.name===o);r&&(r.dependencies.forEach(c=>h(c)),r.npmDependencies?.forEach(c=>b.add(c)),u.add(o));};g.forEach(h),p&&b.add("next-themes");let x=[...u].filter(o=>!g.includes(o));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=a.typescript?"tsx":"jsx",N=join(n,a.paths.components);for(let o of u){let r=join(N,`${o}.${l}`);if(m(r)){let C=await e.confirm({message:`${o}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(C)||!C){e.log.warn(`Skipped ${o}`);continue}}let c=S[o];c=c.replace(/@\/utils/g,`@/${a.paths.utils.replace(/^src\//,"")}`),d(r,c),e.log.success(`${o} \u2192 ${a.paths.components}/${o}.${l}`);}if(p){let o=join(N,`theme-provider.${l}`);if(m(o)){let c=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(c)&&c?(d(o,S.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else d(o,S.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`);if(a.paths.globals){let c=join(n,a.paths.globals);if(m(c)){let C=O(c);C.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(d(c,C+M),e.log.success(`Theme tokens appended to ${i.cyan(a.paths.globals)}`));}else e.log.warn(`Globals file not found at ${a.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let r=a.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${r}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(u.has("calendar")&&a.paths.globals){let o=join(n,a.paths.globals);if(m(o)){let r=O(o);r.includes(".rdp-root")?e.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(d(o,r+ge),e.log.success(`Calendar tokens appended to ${i.cyan(a.paths.globals)}`));}}if(b.size){let o=P(n),r=[...b],c=e.spinner();c.start("Installing packages");try{execSync(y(o,r),{cwd:n,stdio:"ignore"}),c.stop("Packages installed");}catch{c.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(o,r)}`);}}e.outro("Done.");}var ve={version:"1.2.0"};var T=new Command;T.name("drivn").description("Drivn \u2014 Modern UI components").version(ve.version);T.command("create").description("Initialize Drivn in your project").action(K);T.command("add [components...]").description("Add components to your project").action(he);T.parse();

package/package.json

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