drivn 1.2.0 → 1.3.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 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";
+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")),b={...a.dependencies,...a.devDependencies},p="react";b.next&&(p="next");let g=existsSync(join(t,"src")),u=existsSync(join(t,"tsconfig.json"));return {framework:p,srcDir:g,typescript:u}}var V="drivn.config.json";function _(t){let n=join(t,V);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function $(t,n){let a=join(t,V);writeFileSync(a,JSON.stringify(n,null,2));}function Pe(t){existsSync(t)||mkdirSync(t,{recursive:true});}function d(t,n){Pe(dirname(t)),writeFileSync(t,n);}function M(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;
 }
-`,M=`
+`,O=`
 /* Drivn Dark/Light Theme */
 :root,
 [data-theme="dark"] {
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var ke=`import { type ClassValue, clsx } from 'clsx'
+`;var Ee=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,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'
+`,Le=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ie(t){for(let n of Le)if(m(join(t,n)))return n;return null}async function G(){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",b=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:b,defaultValue:b})},{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",v=join(t,p.utils,`cn.${u}`);m(v)||d(v,Ee);let h=Ie(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 K=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -161,7 +161,7 @@ export function ThemeProvider({
     </NextThemesProvider>
   )
 }
-`;var U=`'use client'
+`;var Y=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -293,7 +293,7 @@ export const Accordion = Object.assign(AccordionRoot, {
   Trigger,
   Content
 })
-`;var G=`import * as React from 'react'
+`;var W=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -341,7 +341,7 @@ export function Alert({
     </div>
   )
 }
-`;var W=`import * as React from 'react'
+`;var U=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -385,7 +385,7 @@ export function Avatar({
     </div>
   )
 }
-`;var X=`import * as React from 'react'
+`;var q=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -415,7 +415,123 @@ export function Badge({ variant = 'default', className, children }: BadgeProps)
     </span>
   )
 }
-`;var q=`import * as React from 'react'
+`;var X=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+const styles = {
+  list: cn(
+    'flex items-center gap-1.5',
+    'flex-wrap text-sm text-muted-foreground'
+  ),
+  link: cn(
+    'transition-colors hover:text-foreground',
+    'inline-flex items-center gap-1'
+  ),
+  page: 'font-medium text-foreground',
+  separator: 'text-muted-foreground/60 [&>svg]:size-3.5',
+  ellipsis: cn(
+    'flex size-9 items-center justify-center',
+    'text-muted-foreground'
+  ),
+}
+
+function BreadcrumbRoot({
+  separator,
+  className,
+  children,
+}: {
+  separator?: React.ReactNode
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <nav aria-label="Breadcrumb">
+      <ol className={cn(styles.list, className)}>
+        {React.Children.toArray(children).flatMap((child, i) => {
+          return !(React.isValidElement(child) &&
+            child.type === BreadcrumbSeparator) && i > 0 ? [
+              <BreadcrumbSeparator key={\`sep-\${i}\`}>
+                {separator}
+              </BreadcrumbSeparator>,
+              child,
+            ] : [child]
+        })}
+      </ol>
+    </nav>
+  )
+}
+
+function Item({
+  href,
+  className,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <li>
+      <a
+        href={href}
+        className={cn(styles.link, className)}
+        {...props}
+      >
+        {children}
+      </a>
+    </li>
+  )
+}
+
+function Page({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <li aria-current="page">
+      <span className={cn(styles.page, className)}>
+        {children}
+      </span>
+    </li>
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  return (
+    <li role="presentation" aria-hidden="true">
+      <span className={styles.separator}>
+        {children ?? <ChevronRight />}
+      </span>
+    </li>
+  )
+}
+
+function Ellipsis() {
+  return (
+    <li>
+      <span className={styles.ellipsis}>
+        <MoreHorizontal className="size-4" />
+        <span className="sr-only">More pages</span>
+      </span>
+    </li>
+  )
+}
+
+export const Breadcrumb = Object.assign(BreadcrumbRoot, {
+  Item,
+  Page,
+  Separator: BreadcrumbSeparator,
+  Ellipsis,
+})
+`;var J=`import * as React from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -495,7 +611,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 )
 
 Button.displayName = 'Button'
-`;var J=`'use client'
+`;var Q=`'use client'
 
 import * as React from 'react'
 import {
@@ -671,7 +787,7 @@ export { type DateRange, type Locale }
 export const Calendar = Object.assign(CalendarRoot, {
   Range
 })
-`;var Q=`'use client'
+`;var Z=`'use client'
 
 import * as React from 'react'
 import { CalendarDays } from 'lucide-react'
@@ -895,7 +1011,7 @@ export { type DateRange, type Locale }
 export const DatePicker = Object.assign(DatePickerRoot, {
   Range,
 })
-`;var Z=`'use client'
+`;var ee=`'use client'
 
 import * as React from 'react'
 import { Command as CommandPrimitive } from 'cmdk'
@@ -1126,7 +1242,7 @@ export const Command = Object.assign(CommandRoot, {
   Shortcut,
   Dialog: CommandDialog,
 })
-`;var ee=`'use client'
+`;var te=`'use client'
 
 import * as React from 'react'
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
@@ -1375,7 +1491,7 @@ export const Carousel = Object.assign(CarouselRoot, {
   Next,
   Dots
 })
-`;var te=`import * as React from 'react'
+`;var oe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1442,7 +1558,7 @@ export const Card = Object.assign(CardRoot, {
   Preview,
   Info
 })
-`;var oe=`'use client'
+`;var ne=`'use client'
 
 import * as React from 'react'
 import { Check } from 'lucide-react'
@@ -1505,7 +1621,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
 )
 
 Checkbox.displayName = 'Checkbox'
-`;var ne=`'use client'
+`;var re=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -1664,7 +1780,7 @@ export const Dialog = Object.assign(DialogRoot, {
   Content,
   Close
 })
-`;var re=`'use client'
+`;var se=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -1862,7 +1978,7 @@ export const Dropdown = Object.assign(DropdownRoot, {
   Label,
   Separator: DropdownSeparator
 })
-`;var se=`import * as React from 'react'
+`;var ae=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1885,7 +2001,157 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 )
 
 Input.displayName = 'Input'
-`;var ae=`'use client'
+`;var ce=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+export function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn(
+        'text-sm font-medium text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+`;var ie=`import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  nav: 'mx-auto flex w-full justify-center',
+  content: 'flex flex-row items-center gap-1',
+  link: cn(
+    'inline-flex items-center justify-center',
+    'h-9 min-w-9 px-3 rounded-[10px] text-sm',
+    'text-muted-foreground hover:text-foreground',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+  active: cn(
+    'bg-foreground text-background',
+    'hover:bg-foreground hover:text-background'
+  ),
+  nav_link: cn(
+    'inline-flex items-center justify-center',
+    'h-9 px-3 gap-1 rounded-[10px] text-sm',
+    'text-muted-foreground hover:text-foreground',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+  ellipsis: cn(
+    'flex h-9 w-9 items-center justify-center',
+    'text-muted-foreground'
+  ),
+}
+
+function PaginationRoot({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn(styles.nav, className)}
+      {...props}
+    />
+  )
+}
+
+function Content({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      className={cn(styles.content, className)}
+      {...props}
+    />
+  )
+}
+
+function Item({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return <li className={className} {...props} />
+}
+
+function Link({
+  isActive,
+  className,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  isActive?: boolean
+}) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(styles.link, isActive && styles.active, className)}
+      {...props}
+    />
+  )
+}
+
+function Previous({
+  className,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      aria-label="Go to previous page"
+      className={cn(styles.nav_link, className)}
+      {...props}
+    >
+      <ChevronLeft className="h-4 w-4" />
+      {children ?? <span>Previous</span>}
+    </a>
+  )
+}
+
+function Next({
+  className,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      aria-label="Go to next page"
+      className={cn(styles.nav_link, className)}
+      {...props}
+    >
+      {children ?? <span>Next</span>}
+      <ChevronRight className="h-4 w-4" />
+    </a>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+}: {
+  className?: string
+}) {
+  return (
+    <span className={cn(styles.ellipsis, className)}>
+      <MoreHorizontal className="h-4 w-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export const Pagination = Object.assign(PaginationRoot, {
+  Content,
+  Item,
+  Link,
+  Previous,
+  Next,
+  Ellipsis: PaginationEllipsis,
+})
+`;var le=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -1990,7 +2256,7 @@ export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content
 })
-`;var ce=`import * as React from 'react'
+`;var de=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2028,7 +2294,156 @@ export function Progress({
     </div>
   )
 }
-`;var ie=`'use client'
+`;var pe=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  group: 'flex flex-col gap-3',
+  horizontal: 'flex-row gap-4',
+  item: 'flex items-start gap-2 cursor-pointer',
+  radio: cn(
+    'aspect-square w-4 mt-[3px] border border-input shadow-xs',
+    'transition-[color,box-shadow] flex-shrink-0',
+    'flex items-center justify-center',
+    'peer-focus-visible:ring-[3px]',
+    'peer-focus-visible:ring-ring/50',
+    'peer-focus-visible:border-ring'
+  ),
+  checked: 'bg-foreground border-foreground',
+  indicator: 'w-2 h-2 bg-background',
+  label: 'text-sm font-medium text-foreground select-none',
+  description: 'text-sm text-muted-foreground select-none',
+  variants: {
+    circle: 'rounded-full',
+    square: 'rounded-[4px]',
+  },
+  indicators: {
+    circle: 'rounded-full',
+    square: 'rounded-[2px]',
+  },
+}
+
+interface RadioGroupCtx {
+  value: string
+  onSelect: (v: string) => void
+  disabled?: boolean
+  variant: 'circle' | 'square'
+}
+
+function RadioGroupRoot({
+  children,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  orientation = 'vertical',
+  variant = 'circle',
+  disabled,
+  className,
+}: {
+  children: React.ReactNode
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'vertical' | 'horizontal'
+  variant?: 'circle' | 'square'
+  disabled?: boolean
+  className?: string
+}) {
+  const [internal, setInternal] = React.useState(
+    defaultValue ?? ''
+  )
+  const isControlled = controlledValue !== undefined
+  const current = isControlled ? controlledValue : internal
+
+  const onSelect = (v: string) => {
+    if (!isControlled) setInternal(v)
+    onValueChange?.(v)
+  }
+
+  return (
+    <Ctx.Provider value={{ value: current, onSelect, disabled, variant }}>
+      <div
+        role="radiogroup"
+        className={cn(
+          styles.group,
+          orientation === 'horizontal' && styles.horizontal,
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Ctx.Provider>
+  )
+}
+
+const Item = React.forwardRef<
+  HTMLInputElement,
+  {
+    value: string
+    label?: string
+    description?: string
+    children?: React.ReactNode
+    disabled?: boolean
+    className?: string
+  } & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'value'
+  >
+>(({ value, label, description, children, disabled, className, ...props }, ref) => {
+  const ctx = useRadioGroup()
+  const isDisabled = disabled ?? ctx.disabled
+  const isChecked = ctx.value === value
+
+  return (
+    <label
+      className={cn(
+        styles.item,
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+    >
+      <input
+        ref={ref}
+        type="radio"
+        className="peer sr-only"
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={() => {
+          if (!isDisabled) ctx.onSelect(value)
+        }}
+        {...props}
+      />
+      <span className={cn(styles.radio, styles.variants[ctx.variant], isChecked && styles.checked)}>
+        {isChecked && <span className={cn(styles.indicator, styles.indicators[ctx.variant])} />}
+      </span>
+      {children ?? (label && (
+        <div className="flex flex-col gap-0.5">
+          <span className={styles.label}>{label}</span>
+          {description && (
+            <span className={styles.description}>
+              {description}
+            </span>
+          )}
+        </div>
+      ))}
+    </label>
+  )
+})
+
+Item.displayName = 'RadioGroup.Item'
+
+const Ctx = React.createContext<RadioGroupCtx | null>(null)
+
+function useRadioGroup() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('RadioGroup compound used outside <RadioGroup>')
+  return ctx
+}
+
+export const RadioGroup = Object.assign(RadioGroupRoot, { Item })
+`;var ue=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -2182,7 +2597,7 @@ export const Select = Object.assign(SelectRoot, {
   Menu,
   Option
 })
-`;var le=`import * as React from 'react'
+`;var me=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2206,7 +2621,7 @@ export function Separator({
     />
   )
 }
-`;var de=`'use client'
+`;var fe=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2247,7 +2662,7 @@ export function Switch({
     </button>
   )
 }
-`;var pe=`'use client'
+`;var ge=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2361,7 +2776,7 @@ export const Tabs = Object.assign(TabsRoot, {
   Tab,
   Panel
 })
-`;var ue=`import * as React from 'react'
+`;var he=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2388,7 +2803,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var me=`'use client'
+`;var be=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -2431,7 +2846,181 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var fe=`import * as React from 'react'
+`;var ve=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  wrapper: 'w-full overflow-x-auto',
+  base: 'w-full caption-bottom text-sm border-collapse',
+  variants: {
+    default: '',
+    striped: '[&_tbody_tr:nth-child(even)]:bg-muted/30',
+    bordered: '[&_th]:border [&_td]:border',
+  },
+  caption: 'mt-3 text-sm text-muted-foreground',
+  header: '[&_tr]:border-b [&_tr]:border-border',
+  body: '[&_tr:last-child]:border-0',
+  footer: 'border-t border-border bg-muted/30 font-medium',
+  row: 'border-b border-border transition-colors hover:bg-muted/40',
+  head: cn(
+    'px-4 py-2.5 text-left font-semibold',
+    'text-muted-foreground',
+    '[&[align=center]]:text-center',
+    '[&[align=right]]:text-right'
+  ),
+  cell: cn(
+    'px-4 py-2.5 text-foreground',
+    '[&[align=center]]:text-center',
+    '[&[align=right]]:text-right'
+  ),
+}
+
+function TableRoot({
+  variant = 'default',
+  className,
+  children,
+  ...props
+}: {
+  variant?: keyof typeof styles.variants
+  className?: string
+  children: React.ReactNode
+} & Omit<
+  React.ComponentPropsWithoutRef<'table'>,
+  'className' | 'children'
+>) {
+  return (
+    <div className={styles.wrapper}>
+      <table
+        className={cn(
+          styles.base,
+          styles.variants[variant],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  )
+}
+
+function Caption({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'caption'>) {
+  return (
+    <caption
+      className={cn(styles.caption, className)}
+      {...props}
+    >
+      {children}
+    </caption>
+  )
+}
+
+function Header({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'thead'>) {
+  return (
+    <thead
+      className={cn(styles.header, className)}
+      {...props}
+    >
+      {children}
+    </thead>
+  )
+}
+
+function Body({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'tbody'>) {
+  return (
+    <tbody
+      className={cn(styles.body, className)}
+      {...props}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+function Footer({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'tfoot'>) {
+  return (
+    <tfoot
+      className={cn(styles.footer, className)}
+      {...props}
+    >
+      {children}
+    </tfoot>
+  )
+}
+
+function Row({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'tr'>) {
+  return (
+    <tr
+      className={cn(styles.row, className)}
+      {...props}
+    >
+      {children}
+    </tr>
+  )
+}
+
+function Head({
+  scope = 'col',
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'th'>) {
+  return (
+    <th
+      scope={scope}
+      className={cn(styles.head, className)}
+      {...props}
+    >
+      {children}
+    </th>
+  )
+}
+
+function Cell({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'td'>) {
+  return (
+    <td
+      className={cn(styles.cell, className)}
+      {...props}
+    >
+      {children}
+    </td>
+  )
+}
+
+export const Table = Object.assign(TableRoot, {
+  Caption,
+  Header,
+  Body,
+  Footer,
+  Row,
+  Head,
+  Cell,
+})
+`;var xe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2476,7 +3065,7 @@ export function Tooltip({
     </span>
   )
 }
-`;var ge=`
+`;var ye=`
 /* react-day-picker theme integration */
 .rdp-root {
   --rdp-accent-color: var(--primary);
@@ -2487,4 +3076,4 @@ export function Tooltip({
   --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();
+`,w=[{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:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"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:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],S={accordion:Y,alert:W,avatar:U,badge:q,breadcrumb:X,button:J,calendar:Q,"date-picker":Z,command:ee,carousel:te,card:oe,checkbox:ne,dialog:re,dropdown:se,input:ae,label:ce,pagination:ie,popover:le,progress:de,"radio-group":pe,select:ue,separator:me,switch:fe,table:ve,tabs:ge,textarea:he,theme:K,toast:be,tooltip:xe};async function Ne(t){let n=process.cwd();e.intro("drivn add");let a=_(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:w.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 b=t.filter(o=>!w.find(r=>r.name===o));b.length&&(e.log.error(`Unknown components: ${b.join(", ")}`),e.log.info("Available: "+w.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,v=new Set,h=o=>{if(u.has(o))return;let r=w.find(c=>c.name===o);r&&(r.dependencies.forEach(c=>h(c)),r.npmDependencies?.forEach(c=>v.add(c)),u.add(o));};g.forEach(h),p&&v.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=M(c);C.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(d(c,C+O),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=M(o);r.includes(".rdp-root")?e.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(d(o,r+ye),e.log.success(`Calendar tokens appended to ${i.cyan(a.paths.globals)}`));}}if(v.size){let o=P(n),r=[...v],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 Ce={version:"1.3.0"};var T=new Command;T.name("drivn").description("Drivn \u2014 Modern UI components").version(Ce.version);T.command("create").description("Initialize Drivn in your project").action(G);T.command("add [components...]").description("Add components to your project").action(Ne);T.parse();

package/package.json

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