drivn 1.0.1

package/dist/index.js

@@ -0,0 +1,1667 @@
+#!/usr/bin/env node
+import {Command}from'commander';import*as e from'@clack/prompts';import l from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var E={next:"Next.js",react:"React"};function A(t){let s=join(t,"package.json");if(!existsSync(s))throw new Error("package.json not found");let r=JSON.parse(readFileSync(s,"utf-8")),b={...r.dependencies,...r.devDependencies},d="react";b.next&&(d="next");let m=existsSync(join(t,"src")),f=existsSync(join(t,"tsconfig.json"));return {framework:d,srcDir:m,typescript:f}}var M="drivn.config.json";function V(t){let s=join(t,M);return existsSync(s)?JSON.parse(readFileSync(s,"utf-8")):null}function $(t,s){let r=join(t,M);writeFileSync(r,JSON.stringify(s,null,2));}function me(t){existsSync(t)||mkdirSync(t,{recursive:true});}function p(t,s){me(dirname(t)),writeFileSync(t,s);}function z(t){return readFileSync(t,"utf-8")}function v(t){return existsSync(t)}var R=`@import "tailwindcss";
+
+:root {
+  /* Surfaces */
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222 47% 11%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222 47% 11%);
+  --muted: hsl(212 30% 93.5%);
+  --muted-foreground: hsl(220 17% 17%);
+  --accent: hsl(210 40% 96%);
+  --accent-foreground: hsl(222 47% 11%);
+
+  /* Brand */
+  --primary: hsl(239 84% 67%);
+  --primary-light: hsl(239 84% 74%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(189 90% 36%);
+  --secondary-foreground: hsl(0 0% 100%);
+
+  /* Semantic */
+  --success: hsl(142 76% 36%);
+  --success-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 72% 51%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  /* Borders & Inputs */
+  --border: hsl(214 32% 91%);
+  --input: hsl(214 32% 91%);
+
+  /* Special Surfaces */
+  --overlay: hsl(0 0% 0% / 0.18);
+}
+
+@theme inline {
+  /* Surfaces */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  /* Brand */
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  /* Semantic */
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  /* Borders & Inputs */
+  --color-border: var(--border);
+  --color-input: var(--input);
+
+  /* Special Surfaces */
+  --color-overlay: var(--overlay);
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+`,O=`
+/* Drivn Dark/Light Theme */
+:root,
+[data-theme="dark"] {
+  /* Surfaces */
+  --background: hsl(240 6% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(240 5% 7%);
+  --card-foreground: hsl(0 0% 98%);
+  --muted: hsl(240 4% 16%);
+  --muted-foreground: hsl(220, 17%, 83%);
+  --accent: hsl(240 4% 10%);
+  --accent-foreground: hsl(0 0% 98%);
+
+  /* Brand */
+  --primary: hsl(239 84% 67%);
+  --primary-light: hsl(239 84% 74%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(189 94% 53%);
+  --secondary-foreground: hsl(0 0% 100%);
+
+  /* Semantic */
+  --success: hsl(142 71% 59%);
+  --success-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  /* Borders & Inputs */
+  --border: hsl(240 4% 16%);
+  --input: hsl(240 4% 16%);
+
+  /* Special Surfaces */
+  --overlay: hsl(0 0% 0% / 0.5);
+}
+
+[data-theme="light"] {
+  /* Surfaces */
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222 47% 11%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222 47% 11%);
+  --muted: hsl(212 30% 93.5%);
+  --muted-foreground: hsl(220 17% 17%);
+  --accent: hsl(210 40% 96%);
+  --accent-foreground: hsl(222 47% 11%);
+
+  /* Brand */
+  --primary: hsl(239 84% 67%);
+  --primary-light: hsl(239 84% 74%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(189 90% 36%);
+  --secondary-foreground: hsl(0 0% 100%);
+
+  /* Semantic */
+  --success: hsl(142 76% 36%);
+  --success-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 72% 51%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  /* Borders & Inputs */
+  --border: hsl(214 32% 91%);
+  --input: hsl(214 32% 91%);
+
+  /* Special Surfaces */
+  --overlay: hsl(0 0% 0% / 0.18);
+}
+`;var ge=`import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`,he=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function ve(t){for(let s of he)if(v(join(t,s)))return s;return null}async function H(){let t=process.cwd();console.log(""),console.log(l.bgCyan(l.bold(l.black(" Drivn "))));let s;try{s=A(t),e.log.success(`Detected ${l.cyan(E[s.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(v(join(t,"drivn.config.json"))){let a=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(a)||!a)&&(e.cancel("Setup cancelled"),process.exit(0));}let r=s.srcDir?"src/components/ui":"components/ui",b=s.srcDir?"src/utils":"utils",d=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:r,defaultValue:r}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:b,defaultValue:b})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),m={framework:s.framework,typescript:s.typescript,paths:{components:d.components,utils:d.utils},installed:[]},f=s.typescript?"ts":"js",g=join(t,d.utils,`cn.${f}`);v(g)||p(g,ge);let h=ve(t);if(h){let a=await e.confirm({message:`Found ${l.cyan(h)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(a)&&a&&(p(join(t,h),R),m.paths.globals=h,e.log.success(`Color tokens written to ${l.cyan(h)}`));}else {let a=s.srcDir?"src/styles/globals.css":"styles/globals.css",x=await e.text({message:"Where should the globals CSS file be created?",placeholder:a,defaultValue:a});e.isCancel(x)||(p(join(t,x),R),m.paths.globals=x,e.log.success(`Color tokens written to ${l.cyan(x)}`));}$(t,m);let y=e.spinner();y.start("Installing dependencies");try{execSync("npm install clsx tailwind-merge lucide-react",{cwd:t,stdio:"ignore"}),y.stop("Dependencies installed");}catch{y.stop("Failed to install dependencies"),e.log.warn("Run manually: npm install clsx tailwind-merge lucide-react");}e.log.info(`Add components with: ${l.cyan("npx drivn add button")}`),e.log.info(`Add dark/light theme: ${l.cyan("npx drivn add theme")}`),e.outro("Drivn initialized");}var F=`'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <NextThemesProvider
+      attribute="data-theme"
+      defaultTheme="dark"
+      disableTransitionOnChange={false}
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
+`;var _=`'use client'
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'w-full divide-y divide-border border-y border-border',
+  trigger: cn(
+    'flex items-center justify-between w-full py-4',
+    'text-sm font-medium text-foreground',
+    'hover:text-foreground/80 transition-colors cursor-pointer'
+  ),
+  icon: cn(
+    'w-4 h-4 text-muted-foreground',
+    'transition-transform duration-200'
+  ),
+  panel: 'grid transition-[grid-template-rows] duration-200',
+  content: 'overflow-hidden text-sm text-muted-foreground',
+}
+
+interface AccordionCtx {
+  openItem: string | null
+  toggle: (value: string) => void
+}
+
+const Ctx = React.createContext<AccordionCtx | null>(null)
+const ItemCtx = React.createContext<string | null>(null)
+
+function useAccordion() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Accordion compound used outside <Accordion>')
+  return ctx
+}
+
+function useItemValue() {
+  const value = React.useContext(ItemCtx)
+  if (!value) throw new Error(
+    'Accordion sub-component used outside <Accordion.Item>'
+  )
+  return value
+}
+
+function AccordionRoot({
+  children,
+  defaultValue,
+  className,
+}: {
+  children: React.ReactNode
+  defaultValue?: string
+  className?: string
+}) {
+  const [openItem, setOpenItem] = React.useState<string | null>(
+    defaultValue ?? null
+  )
+  const toggle = React.useCallback(
+    (value: string) =>
+      setOpenItem((prev) => (prev === value ? null : value)),
+    []
+  )
+
+  return (
+    <Ctx.Provider value={{ openItem, toggle }}>
+      <div className={cn(styles.base, className)}>
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Item({
+  value,
+  children,
+  className,
+}: {
+  value: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <ItemCtx.Provider value={value}>
+      <div className={className}>{children}</div>
+    </ItemCtx.Provider>
+  )
+}
+
+function Trigger({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { openItem, toggle } = useAccordion()
+  const value = useItemValue()
+  const isOpen = openItem === value
+  return (
+    <button
+      className={cn(styles.trigger, className)}
+      onClick={() => toggle(value)}
+    >
+      {children}
+      <ChevronDown className={cn(styles.icon, isOpen && 'rotate-180')} />
+    </button>
+  )
+}
+
+function Content({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { openItem } = useAccordion()
+  const value = useItemValue()
+  const isOpen = openItem === value
+  return (
+    <div
+      className={styles.panel}
+      style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
+    >
+      <div className={cn(styles.content, className)}>
+        <div className="pb-4">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item,
+  Trigger,
+  Content,
+})
+`;var U=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'flex gap-3 p-4 rounded-[10px] border text-sm',
+  variants: {
+    default: 'bg-accent/50 border-border text-foreground',
+    info: 'bg-primary/10 border-primary/20 text-primary-light',
+    success: 'bg-success/10 border-success/20 text-success',
+    destructive: 'bg-destructive/10 border-destructive/20 text-destructive',
+  },
+  title: 'font-semibold mb-1',
+  description: 'text-sm opacity-90',
+}
+
+type IconProp =
+  | React.ComponentType<{ className?: string }>
+  | React.ReactElement
+
+interface AlertProps {
+  variant?: keyof typeof styles.variants
+  icon?: IconProp
+  title?: string
+  className?: string
+  children: React.ReactNode
+}
+
+export function Alert({
+  variant = 'default',
+  icon: Icon,
+  title,
+  className,
+  children,
+}: AlertProps) {
+  return (
+    <div className={cn(styles.base, styles.variants[variant], className)}>
+      {Icon && (
+        <span className="flex-shrink-0 mt-0.5">
+          {React.isValidElement(Icon)
+            ? Icon
+            : <Icon />}
+        </span>
+      )}
+      <div>
+        {title && <p className={styles.title}>{title}</p>}
+        <div className={styles.description}>{children}</div>
+      </div>
+    </div>
+  )
+}
+`;var G=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'relative inline-flex items-center justify-center',
+    'rounded-full overflow-hidden',
+    'bg-gradient-to-br from-primary to-secondary'
+  ),
+  sizes: {
+    sm: 'w-8 h-8 text-xs',
+    md: 'w-10 h-10 text-sm',
+    lg: 'w-12 h-12 text-base',
+    xl: 'w-16 h-16 text-lg',
+  },
+}
+
+interface AvatarProps {
+  src?: string
+  alt?: string
+  fallback?: string
+  size?: keyof typeof styles.sizes
+  className?: string
+}
+
+export function Avatar({
+  src,
+  alt,
+  fallback,
+  size = 'md',
+  className,
+}: AvatarProps) {
+  return (
+    <div className={cn(styles.base, styles.sizes[size], className)}>
+      {src ? (
+        <img src={src} alt={alt} className="w-full h-full object-cover" />
+      ) : (
+        <span className="font-medium text-primary-foreground">
+          {fallback?.slice(0, 2).toUpperCase()}
+        </span>
+      )}
+    </div>
+  )
+}
+`;var W=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'inline-flex items-center gap-1.5 px-2.5 py-0.5',
+    'text-xs font-semibold rounded-full'
+  ),
+  variants: {
+    default: 'bg-primary/15 text-primary-light border border-primary/20',
+    secondary: 'bg-secondary/15 text-secondary border border-secondary/30',
+    success: 'bg-success/15 text-success border border-success/20',
+    outline: 'border border-border text-muted-foreground',
+    destructive: 'bg-destructive/15 text-destructive border border-destructive/20',
+  },
+}
+
+interface BadgeProps {
+  variant?: keyof typeof styles.variants
+  className?: string
+  children: React.ReactNode
+}
+
+export function Badge({ variant = 'default', className, children }: BadgeProps) {
+  return (
+    <span className={cn(styles.base, styles.variants[variant], className)}>
+      {children}
+    </span>
+  )
+}
+`;var K=`import * as React from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'inline-flex items-center justify-center',
+    'font-semibold transition-all duration-150',
+    'cursor-pointer disabled:opacity-50',
+    'disabled:pointer-events-none'
+  ),
+  sizes: {
+    sm: 'h-8 px-3 text-sm gap-1.5',
+    md: 'h-10 px-4 text-sm gap-2',
+    lg: 'h-12 px-6 text-base gap-2',
+  },
+  variants: {
+    default: 'bg-foreground text-background hover:scale-[1.02]',
+    secondary: cn(
+      'bg-card text-foreground border border-border',
+      'hover:bg-accent hover:border-border'
+    ),
+    outline: 'border border-border text-foreground hover:border-foreground/20',
+    destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+  },
+  rounded: {
+    md: 'rounded-md',
+    full: 'rounded-full',
+  },
+}
+
+type IconProp =
+  | React.ComponentType<{ className?: string }>
+  | React.ReactElement
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof styles.variants
+  size?: keyof typeof styles.sizes
+  rounded?: keyof typeof styles.rounded
+  loading?: boolean
+  leftIcon?: IconProp
+  rightIcon?: IconProp
+}
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({
+      className,
+      variant = 'default',
+      size = 'md',
+      rounded = 'full',
+      loading,
+      disabled,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      disabled={loading || disabled}
+      className={cn(
+        styles.base,
+        styles.sizes[size],
+        styles.variants[variant],
+        styles.rounded[rounded],
+        className
+      )}
+      {...props}
+    >
+      {loading && (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      )}
+      {!loading && LeftIcon && (
+        React.isValidElement(LeftIcon)
+          ? LeftIcon
+          : <LeftIcon />
+      )}
+      {children}
+      {!loading && RightIcon && (
+        React.isValidElement(RightIcon)
+          ? RightIcon
+          : <RightIcon />
+      )}
+    </button>
+  )
+)
+
+Button.displayName = 'Button'
+`;var X=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'bg-card border border-border rounded-[20px]',
+    'overflow-hidden transition-all duration-200'
+  ),
+  hover: 'hover:bg-accent hover:border-border hover:-translate-y-1',
+  preview: cn(
+    'h-[140px] flex items-center justify-center',
+    'border-b border-border p-6',
+    'bg-[radial-gradient(ellipse_at_50%_50%,hsl(239_84%_67%_/_0.08)_0%,transparent_70%)]'
+  ),
+  info: 'p-5 flex justify-between items-center',
+}
+
+function CardRoot({
+  hover = true,
+  className,
+  children,
+}: {
+  hover?: boolean
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div
+      className={cn(styles.base, hover && styles.hover, className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Preview({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className={cn(styles.preview, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Info({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className={cn(styles.info, className)}>
+      {children}
+    </div>
+  )
+}
+
+export const Card = Object.assign(CardRoot, {
+  Preview,
+  Info,
+})
+`;var J=`'use client'
+
+import * as React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'flex items-center gap-2 cursor-pointer',
+  box: cn(
+    'w-4 h-4 rounded-[4px] border border-border',
+    'transition-colors flex-shrink-0',
+    'flex items-center justify-center'
+  ),
+  checked: 'bg-primary border-primary',
+  label: 'text-sm text-foreground select-none',
+}
+
+interface CheckboxProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type'
+  > {
+  label?: string
+}
+
+export const Checkbox = React.forwardRef<
+  HTMLInputElement,
+  CheckboxProps
+>(({
+      className,
+      label,
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = React.useState(
+      defaultChecked ?? false
+    )
+    const isControlled = checked !== undefined
+    const isChecked = isControlled ? checked : internal
+
+    return (
+      <label
+        className={cn(
+          styles.base,
+          disabled && 'opacity-50 cursor-default',
+          className
+        )}
+      >
+        <input
+          ref={ref}
+          type="checkbox"
+          className="sr-only"
+          checked={isChecked}
+          disabled={disabled}
+          onChange={(e) => {
+            if (!isControlled)
+              setInternal(e.target.checked)
+            onChange?.(e)
+          }}
+          {...props}
+        />
+        <span
+          className={cn(
+            styles.box,
+            isChecked && styles.checked
+          )}
+        >
+          {isChecked && (
+            <Check className="w-2.5 h-2.5 text-primary-foreground" />
+          )}
+        </span>
+        {label && (
+          <span className={styles.label}>{label}</span>
+        )}
+      </label>
+    )
+  }
+)
+
+Checkbox.displayName = 'Checkbox'
+`;var q=`'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import { Button } from '@/components/ui/button'
+
+const styles = {
+  overlay: cn(
+    'fixed inset-0 z-[200] flex items-center justify-center',
+    'bg-overlay backdrop-blur-sm',
+    'transition-opacity duration-150 ease-out'
+  ),
+  content: cn(
+    'relative w-full max-w-md mx-4 p-6',
+    'bg-card border border-border rounded-[20px]',
+    'shadow-xl',
+    'transition-[scale] duration-150 ease-out'
+  ),
+  title: 'text-lg font-semibold text-foreground mb-4',
+  close: cn(
+    'absolute top-4 right-4 w-8 h-8',
+    'flex items-center justify-center rounded-full',
+    'text-muted-foreground hover:text-foreground',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+}
+
+interface DialogCtx {
+  open: boolean
+  setOpen: (v: boolean) => void
+}
+
+const Ctx = React.createContext<DialogCtx | null>(null)
+
+function useDialog() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Dialog compound used outside <Dialog>')
+  return ctx
+}
+
+function DialogRoot({
+  children,
+  open: controlled,
+  onOpenChange,
+}: {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(false)
+  const open = controlled ?? uncontrolled
+  const setOpen = React.useCallback(
+    (v: boolean) => {
+      onOpenChange?.(v)
+      if (controlled === undefined) setUncontrolled(v)
+    },
+    [controlled, onOpenChange]
+  )
+
+  return <Ctx.Provider value={{ open, setOpen }}>{children}</Ctx.Provider>
+}
+
+function Trigger({
+  children,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { setOpen } = useDialog()
+  return (
+    <Button
+      variant="outline"
+      rounded="md"
+      className={className}
+      onClick={() => setOpen(true)}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function Content({
+  children,
+  title,
+  className,
+}: {
+  children: React.ReactNode
+  title?: string
+  className?: string
+}) {
+  const { open, setOpen } = useDialog()
+
+  React.useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', onKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = ''
+    }
+  }, [open, setOpen])
+
+  return (
+    <div
+      className={cn(
+        styles.overlay,
+        open
+          ? 'opacity-100'
+          : 'opacity-0 pointer-events-none'
+      )}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) setOpen(false)
+      }}
+    >
+      <div
+        className={cn(
+          styles.content,
+          open ? 'scale-100' : 'scale-95',
+          className
+        )}
+      >
+        {title && <h2 className={styles.title}>{title}</h2>}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Close({ className }: { className?: string }) {
+  const { setOpen } = useDialog()
+  return (
+    <button
+      className={cn(styles.close, className)}
+      onClick={() => setOpen(false)}
+    >
+      <X className="w-3.5 h-3.5" />
+    </button>
+  )
+}
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger,
+  Content,
+  Close,
+})
+`;var Q=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+import { Button } from '@/components/ui/button'
+
+const styles = {
+  base: 'relative inline-flex',
+  content: cn(
+    'absolute top-full mt-1 min-w-[180px] z-50',
+    'bg-card border border-border rounded-[10px] p-1',
+    'shadow-lg',
+    'transition-[opacity,scale] duration-150 ease-out'
+  ),
+  item: cn(
+    'flex items-center gap-2 w-full px-3 py-2',
+    'text-sm text-foreground rounded-lg',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+  destructive: 'text-destructive hover:bg-destructive/10',
+  group: 'py-1',
+  label: cn(
+    'px-3 py-1.5 text-xs font-medium',
+    'text-muted-foreground'
+  ),
+  separator: 'my-1 h-px bg-border',
+  align: {
+    left: 'left-0',
+    right: 'right-0',
+  },
+}
+
+interface DropdownCtx {
+  open: boolean
+  setOpen: (v: boolean) => void
+  align: keyof typeof styles.align
+}
+
+const Ctx = React.createContext<DropdownCtx | null>(null)
+
+function useDropdown() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error(
+    'Dropdown compound used outside <Dropdown>'
+  )
+  return ctx
+}
+
+function DropdownRoot({
+  children,
+  align = 'left',
+  className,
+}: {
+  children: React.ReactNode
+  align?: keyof typeof styles.align
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  const close = React.useCallback(
+    () => setOpen(false),
+    []
+  )
+
+  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, align }}>
+      <div ref={ref} className={cn(styles.base, className)}>
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Trigger({
+  children,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, setOpen } = useDropdown()
+  return (
+    <Button
+      variant="outline"
+      rounded="md"
+      className={className}
+      onClick={() => setOpen(!open)}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function Content({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { open, align } = useDropdown()
+  return (
+    <div
+      className={cn(
+        styles.content,
+        styles.align[align],
+        open
+          ? 'opacity-100 scale-100'
+          : 'opacity-0 scale-95 pointer-events-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+type IconProp =
+  | React.ComponentType<{ className?: string }>
+  | React.ReactElement
+
+function Item({
+  children,
+  onClick,
+  icon: Icon,
+  destructive,
+  className,
+}: {
+  children: React.ReactNode
+  onClick?: () => void
+  icon?: IconProp
+  destructive?: boolean
+  className?: string
+}) {
+  const { setOpen } = useDropdown()
+  return (
+    <button
+      className={cn(
+        styles.item,
+        destructive && styles.destructive,
+        className
+      )}
+      onClick={() => {
+        onClick?.()
+        setOpen(false)
+      }}
+    >
+      {Icon && (
+        React.isValidElement(Icon)
+          ? Icon
+          : <Icon className="w-4 h-4" />
+      )}
+      {children}
+    </button>
+  )
+}
+
+function Group({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.group, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Label({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.label, className)}>
+      {children}
+    </div>
+  )
+}
+
+function DropdownSeparator({
+  className,
+}: {
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.separator, className)} />
+  )
+}
+
+export const Dropdown = Object.assign(DropdownRoot, {
+  Trigger,
+  Content,
+  Item,
+  Group,
+  Label,
+  Separator: DropdownSeparator,
+})
+`;var Y=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'w-full h-10 px-4 border border-input rounded-[10px]',
+    'text-foreground placeholder:text-muted-foreground text-sm',
+    'focus:outline-none transition-colors',
+    'disabled:opacity-50 disabled:cursor-default'
+  ),
+}
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => (
+    <input ref={ref} className={cn(styles.base, className)} {...props} />
+  )
+)
+
+Input.displayName = 'Input'
+`;var Z=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+import { Button } from '@/components/ui/button'
+
+const styles = {
+  base: 'relative inline-flex',
+  content: cn(
+    'absolute z-50 min-w-[200px] p-4',
+    'bg-card border border-border rounded-[12px]',
+    'shadow-lg',
+    'transition-[opacity,scale] duration-150 ease-out'
+  ),
+  positions: {
+    top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
+    bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
+    left: 'right-full mr-2 top-1/2 -translate-y-1/2',
+    right: 'left-full ml-2 top-1/2 -translate-y-1/2',
+  },
+}
+
+interface PopoverCtx {
+  open: boolean
+  setOpen: (v: boolean) => void
+  position: keyof typeof styles.positions
+}
+
+const Ctx = React.createContext<PopoverCtx | null>(null)
+
+function usePopover() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Popover compound used outside <Popover>')
+  return ctx
+}
+
+function PopoverRoot({
+  children,
+  position = 'bottom',
+  className,
+}: {
+  children: React.ReactNode
+  position?: keyof typeof styles.positions
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  const close = React.useCallback(() => setOpen(false), [])
+
+  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, position }}>
+      <div ref={ref} className={cn(styles.base, className)}>
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Trigger({
+  children,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, setOpen } = usePopover()
+  return (
+    <Button
+      variant="outline"
+      rounded="md"
+      className={className}
+      onClick={() => setOpen(!open)}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function Content({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { open, position } = usePopover()
+  return (
+    <div
+      className={cn(
+        styles.content,
+        styles.positions[position],
+        open
+          ? 'opacity-100 scale-100'
+          : 'opacity-0 scale-95 pointer-events-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Popover = Object.assign(PopoverRoot, {
+  Trigger,
+  Content,
+})
+`;var ee=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  track: 'w-full h-2 bg-accent rounded-full overflow-hidden',
+  bar: cn(
+    'h-full bg-primary rounded-full',
+    'transition-all duration-300 ease-out'
+  ),
+}
+
+interface ProgressProps {
+  value?: number
+  max?: number
+  className?: string
+}
+
+export function Progress({
+  value = 0,
+  max = 100,
+  className,
+}: ProgressProps) {
+  const pct = Math.min(100, Math.max(0, (value / max) * 100))
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className={cn(styles.track, className)}
+    >
+      <div
+        className={styles.bar}
+        style={{ width: \`\${pct}%\` }}
+      />
+    </div>
+  )
+}
+`;var te=`'use client'
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'relative',
+  trigger: cn(
+    'flex items-center justify-between w-full h-10 px-4',
+    'border border-input rounded-[10px] text-sm',
+    'focus:outline-none transition-colors',
+    'cursor-pointer'
+  ),
+  placeholder: 'text-muted-foreground',
+  chevron: cn(
+    'w-4 h-4 text-muted-foreground',
+    'transition-transform duration-200'
+  ),
+  menu: cn(
+    'absolute top-full left-0 right-0 mt-1 z-50',
+    'bg-card border border-border rounded-[10px] p-1',
+    'shadow-lg max-h-[200px] overflow-y-auto',
+    'transition-[opacity,scale] duration-150 ease-out'
+  ),
+  option: cn(
+    'flex items-center w-full px-3 py-2 text-sm rounded-lg',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+  selected: 'text-primary font-medium',
+}
+
+interface SelectCtx {
+  open: boolean
+  setOpen: (v: boolean) => void
+  value: string | undefined
+  onSelect: (v: string) => void
+}
+
+const Ctx = React.createContext<SelectCtx | null>(null)
+
+function useSelect() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Select compound used outside <Select>')
+  return ctx
+}
+
+function SelectRoot({
+  children,
+  value,
+  onChange,
+  className,
+}: {
+  children: React.ReactNode
+  value?: string
+  onChange?: (value: string) => void
+  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) => {
+      onChange?.(v)
+      close()
+    },
+    [onChange, close]
+  )
+
+  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, value, onSelect }}>
+      <div ref={ref} className={cn(styles.base, className)}>
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+function Trigger({
+  placeholder = 'Select...',
+  children,
+  className,
+}: {
+  placeholder?: string
+  children?: React.ReactNode
+  className?: string
+}) {
+  const { open, setOpen } = useSelect()
+  return (
+    <button
+      className={cn(styles.trigger, className)}
+      onClick={() => setOpen(!open)}
+    >
+      <span className={!children ? styles.placeholder : undefined}>
+        {children ?? placeholder}
+      </span>
+      <ChevronDown className={cn(styles.chevron, open && 'rotate-180')} />
+    </button>
+  )
+}
+
+function Menu({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { open } = useSelect()
+  return (
+    <div
+      className={cn(
+        styles.menu,
+        open
+          ? 'opacity-100 scale-100'
+          : 'opacity-0 scale-95 pointer-events-none',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Option({
+  value: optValue,
+  children,
+  className,
+}: {
+  value: string
+  children: React.ReactNode
+  className?: string
+}) {
+  const { value, onSelect } = useSelect()
+  return (
+    <button
+      className={cn(
+        styles.option,
+        optValue === value && styles.selected,
+        className
+      )}
+      onClick={() => onSelect(optValue)}
+    >
+      {children}
+    </button>
+  )
+}
+
+export const Select = Object.assign(SelectRoot, {
+  Trigger,
+  Menu,
+  Option,
+})
+`;var oe=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  horizontal: 'w-full h-px bg-border',
+  vertical: 'h-full w-px bg-border',
+}
+
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  className,
+}: SeparatorProps) {
+  return (
+    <div
+      role="separator"
+      className={cn(styles[orientation], className)}
+    />
+  )
+}
+`;var ne=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'relative w-12 h-[26px] rounded-full',
+    'transition-colors duration-200 overflow-hidden'
+  ),
+  thumb: cn(
+    'absolute left-0 top-[3px] w-5 h-5',
+    'bg-white rounded-full shadow-md',
+    'transition-transform duration-200'
+  ),
+}
+
+interface SwitchProps {
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  className?: string
+}
+
+export function Switch({
+  checked = false,
+  onChange,
+  className,
+}: SwitchProps) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange?.(!checked)}
+      className={cn(
+        styles.base,
+        checked ? 'bg-primary' : 'bg-border',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          styles.thumb,
+          checked
+            ? 'translate-x-[25px]'
+            : 'translate-x-[3px]'
+        )}
+      />
+    </button>
+  )
+}
+`;var se=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  list: 'flex w-fit bg-accent border border-border rounded-[10px] p-1',
+  tab: cn(
+    'px-4 py-2 text-sm font-medium rounded-lg',
+    'transition-colors cursor-pointer'
+  ),
+  active: 'bg-background text-foreground',
+  inactive: 'text-muted-foreground hover:text-foreground',
+}
+
+interface TabsCtx {
+  value: string
+  setValue: (v: string) => void
+}
+
+const Ctx = React.createContext<TabsCtx | null>(null)
+
+function useTabs() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Tabs compound used outside <Tabs>')
+  return ctx
+}
+
+function TabsRoot({
+  children,
+  defaultValue,
+  value: controlled,
+  onChange,
+  className,
+}: {
+  children: React.ReactNode
+  defaultValue?: string
+  value?: string
+  onChange?: (value: string) => void
+  className?: string
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(
+    defaultValue ?? ''
+  )
+  const value = controlled ?? uncontrolled
+  const setValue = React.useCallback(
+    (v: string) => {
+      onChange?.(v)
+      if (controlled === undefined) setUncontrolled(v)
+    },
+    [controlled, onChange]
+  )
+
+  return (
+    <Ctx.Provider value={{ value, setValue }}>
+      <div className={className}>{children}</div>
+    </Ctx.Provider>
+  )
+}
+
+function List({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.list, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Tab({
+  value: tabValue,
+  children,
+  className,
+}: {
+  value: string
+  children: React.ReactNode
+  className?: string
+}) {
+  const { value, setValue } = useTabs()
+  const isActive = value === tabValue
+  return (
+    <button
+      className={cn(
+        styles.tab,
+        isActive ? styles.active : styles.inactive,
+        className
+      )}
+      onClick={() => setValue(tabValue)}
+    >
+      {children}
+    </button>
+  )
+}
+
+function Panel({
+  value: panelValue,
+  children,
+  className,
+}: {
+  value: string
+  children: React.ReactNode
+  className?: string
+}) {
+  const { value } = useTabs()
+  if (value !== panelValue) return null
+  return <div className={className}>{children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List,
+  Tab,
+  Panel,
+})
+`;var re=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'w-full min-h-[80px] px-4 py-3',
+    'border border-input rounded-[10px]',
+    'text-foreground placeholder:text-muted-foreground text-sm',
+    'focus:outline-none transition-colors',
+    'resize-y disabled:opacity-50 disabled:cursor-default'
+  ),
+}
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaProps
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    className={cn(styles.base, className)}
+    {...props}
+  />
+))
+
+Textarea.displayName = 'Textarea'
+`;var ae=`'use client'
+
+import * as React from 'react'
+import { Toaster as Sonner, toast } from 'sonner'
+import {
+  CheckCircle2,
+  XCircle,
+  Info,
+  AlertTriangle,
+  Loader2,
+} from 'lucide-react'
+
+function Toaster() {
+  return (
+    <Sonner
+      icons={{
+        success: (
+          <CheckCircle2 className="w-4 h-4" />
+        ),
+        info: (
+          <Info className="w-4 h-4" />
+        ),
+        warning: (
+          <AlertTriangle className="w-4 h-4" />
+        ),
+        error: (
+          <XCircle className="w-4 h-4" />
+        ),
+        loading: (
+          <Loader2 className="w-4 h-4 animate-spin" />
+        ),
+      }}
+      style={{
+          '--normal-bg': 'var(--card)',
+          '--normal-text': 'var(--card-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': '12px',
+      }}
+    />
+  )
+}
+
+export { Toaster, toast }
+`;var ce=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'relative inline-flex group',
+  tip: cn(
+    'absolute z-50 px-2.5 py-1.5 text-xs font-medium',
+    'rounded-lg bg-foreground text-background',
+    'whitespace-nowrap pointer-events-none',
+    'opacity-0 group-hover:opacity-100 transition-opacity'
+  ),
+  positions: {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  },
+}
+
+interface TooltipProps {
+  content: string
+  position?: keyof typeof styles.positions
+  className?: string
+  children: React.ReactNode
+}
+
+export function Tooltip({
+  content,
+  position = 'top',
+  className,
+  children,
+}: TooltipProps) {
+  return (
+    <span className={cn(styles.base, className)}>
+      {children}
+      <span className={cn(styles.tip, styles.positions[position])}>
+        {content}
+      </span>
+    </span>
+  )
+}
+`;var C=[{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:[]}],k={accordion:_,alert:U,avatar:G,badge:W,button:K,card:X,checkbox:J,dialog:q,dropdown:Q,input:Y,popover:Z,progress:ee,select:te,separator:oe,switch:ne,tabs:se,textarea:re,theme:F,toast:ae,tooltip:ce};async function ie(t){let s=process.cwd();e.intro("drivn add");let r=V(s);if(r||(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:C.map(i=>({label:i.name,hint:i.description,value:i.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let b=t.filter(o=>!C.find(i=>i.name===o));b.length&&(e.log.error(`Unknown components: ${b.join(", ")}`),e.log.info("Available: "+C.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,g=new Set,h=o=>{if(f.has(o))return;let i=C.find(c=>c.name===o);i&&(i.dependencies.forEach(c=>h(c)),i.npmDependencies?.forEach(c=>g.add(c)),f.add(o));};m.forEach(h),d&&g.add("next-themes");let y=[...f].filter(o=>!m.includes(o));y.length&&e.log.info(`Required dependency: ${y.join(", ")}`);let a=r.typescript?"tsx":"jsx",x=join(s,r.paths.components);for(let o of f){let i=join(x,`${o}.${a}`);if(v(i)){let N=await e.confirm({message:`${o}.${a} exists. Overwrite?`,initialValue:false});if(e.isCancel(N)||!N){e.log.warn(`Skipped ${o}`);continue}}let c=k[o];c=c.replace(/@\/utils/g,`@/${r.paths.utils.replace(/^src\//,"")}`),p(i,c),e.log.success(`${o} \u2192 ${r.paths.components}/${o}.${a}`);}if(d){let o=join(x,`theme-provider.${a}`);if(v(o)){let c=await e.confirm({message:`theme-provider.${a} exists. Overwrite?`,initialValue:false});!e.isCancel(c)&&c?(p(o,k.theme),e.log.success(`theme-provider \u2192 ${r.paths.components}/theme-provider.${a}`)):e.log.warn("Skipped theme-provider");}else p(o,k.theme),e.log.success(`theme-provider \u2192 ${r.paths.components}/theme-provider.${a}`);if(r.paths.globals){let c=join(s,r.paths.globals);if(v(c)){let N=z(c);N.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(p(c,N+O),e.log.success(`Theme tokens appended to ${l.cyan(r.paths.globals)}`));}else e.log.warn(`Globals file not found at ${r.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let i=r.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(l.bold("Complete the setup:")),e.log.message(""),e.log.message(l.bold(`${l.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(l.cyan(`   import { ThemeProvider } from "${i}/theme-provider"`)),e.log.message(""),e.log.message(l.bold(`${l.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(l.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(l.bold(`${l.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(l.cyan("   <ThemeProvider>")),e.log.message(l.cyan("     {children}")),e.log.message(l.cyan("   </ThemeProvider>")),e.log.message("");}if(g.size){let o=e.spinner();o.start("Installing packages");try{execSync(`npm install ${[...g].join(" ")}`,{cwd:s,stdio:"ignore"}),o.stop("Packages installed");}catch{o.stop("Failed to install packages"),e.log.warn(`Run manually: npm install ${[...g].join(" ")}`);}}e.outro("Done.");}var le={version:"1.0.1"};var I=new Command;I.name("drivn").description("Drivn \u2014 Modern UI components").version(le.version);I.command("create").description("Initialize Drivn in your project").action(H);I.command("add [components...]").description("Add components to your project").action(ie);I.parse();