drivn 1.14.1 → 1.16.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as n from'@clack/prompts';import u from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';import {z as z$1}from'zod';var j={next:"Next.js",react:"React"};function V(e){let r=join(e,"package.json");if(!existsSync(r))throw new Error("package.json not found");let t=JSON.parse(readFileSync(r,"utf-8")),a={...t.dependencies,...t.devDependencies},l="react";a.next&&(l="next");let d=existsSync(join(e,"src")),p=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:p}}var F="drivn.config.json";function U(e){let r=join(e,F);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function K(e,r){let t=join(e,F);writeFileSync(t,JSON.stringify(r,null,2));}function Ge(e){existsSync(e)||mkdirSync(e,{recursive:true});}function h(e,r){Ge(dirname(e)),writeFileSync(e,r);}function H(e){return readFileSync(e,"utf-8")}function x(e){return existsSync(e)}function E(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function w(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:`npm install ${t}`}function Y(e){return e==="pnpm"?"pnpm dlx":"npx"}var C=`@import "tailwindcss";
+import {Command}from'commander';import*as n from'@clack/prompts';import u from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';import {z as z$1}from'zod';var z={next:"Next.js",react:"React"};function V(e){let r=join(e,"package.json");if(!existsSync(r))throw new Error("package.json not found");let t=JSON.parse(readFileSync(r,"utf-8")),a={...t.dependencies,...t.devDependencies},l="react";a.next&&(l="next");let d=existsSync(join(e,"src")),p=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:p}}var F="drivn.config.json";function U(e){let r=join(e,F);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function K(e,r){let t=join(e,F);writeFileSync(t,JSON.stringify(r,null,2));}function Ue(e){existsSync(e)||mkdirSync(e,{recursive:true});}function h(e,r){Ue(dirname(e)),writeFileSync(e,r);}function B(e){return readFileSync(e,"utf-8")}function x(e){return existsSync(e)}function E(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function R(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:`npm install ${t}`}function Y(e){return e==="pnpm"?"pnpm dlx":"npx"}var C=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var Ye=`import { type ClassValue, clsx } from 'clsx'
+`;var Xe=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,We=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Xe(e){for(let r of We)if(x(join(e,r)))return r;return null}async function W(){let e=process.cwd();console.log(""),console.log(u.bgCyan(u.bold(u.black(" Drivn "))));let r;try{r=V(e),n.log.success(`Detected ${u.cyan(j[r.framework])}`);}catch{n.log.error("No package.json found. Run this command in a project directory."),n.outro("Setup cancelled"),process.exit(1);}if(x(join(e,"drivn.config.json"))){let s=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(s)||!s)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",a=r.srcDir?"src/utils":"utils",l=await n.group({components:()=>n.text({message:"Where should components be installed?",placeholder:t,defaultValue:t}),utils:()=>n.text({message:"Where should utilities be placed?",placeholder:a,defaultValue:a})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils}},p=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${p}`);x(f)||h(f,Ye);let g=Xe(e);if(g){let s=await n.confirm({message:`Found ${u.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(s)&&s&&(h(join(e,g),C),d.paths.globals=g,n.log.success(`Color tokens written to ${u.cyan(g)}`));}else {let s=r.srcDir?"src/styles/globals.css":"styles/globals.css",i=await n.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});n.isCancel(i)||(h(join(e,i),C),d.paths.globals=i,n.log.success(`Color tokens written to ${u.cyan(i)}`));}K(e,d);let N=E(e),m=Y(N),b=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(w(N,b),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${w(N,b)}`);}n.log.info(`Add components with: ${u.cyan(`${m} drivn add button`)}`),n.log.info(`Add dark/light theme: ${u.cyan(`${m} drivn add theme`)}`),n.outro("Drivn initialized");}var X=`'use client'
+`,qe=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Je(e){for(let r of qe)if(x(join(e,r)))return r;return null}async function W(){let e=process.cwd();console.log(""),console.log(u.bgCyan(u.bold(u.black(" Drivn "))));let r;try{r=V(e),n.log.success(`Detected ${u.cyan(z[r.framework])}`);}catch{n.log.error("No package.json found. Run this command in a project directory."),n.outro("Setup cancelled"),process.exit(1);}if(x(join(e,"drivn.config.json"))){let s=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(s)||!s)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",a=r.srcDir?"src/utils":"utils",l=await n.group({components:()=>n.text({message:"Where should components be installed?",placeholder:t,defaultValue:t}),utils:()=>n.text({message:"Where should utilities be placed?",placeholder:a,defaultValue:a})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils}},p=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${p}`);x(f)||h(f,Xe);let g=Je(e);if(g){let s=await n.confirm({message:`Found ${u.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(s)&&s&&(h(join(e,g),C),d.paths.globals=g,n.log.success(`Color tokens written to ${u.cyan(g)}`));}else {let s=r.srcDir?"src/styles/globals.css":"styles/globals.css",i=await n.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});n.isCancel(i)||(h(join(e,i),C),d.paths.globals=i,n.log.success(`Color tokens written to ${u.cyan(i)}`));}K(e,d);let N=E(e),m=Y(N),b=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(R(N,b),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${R(N,b)}`);}n.log.info(`Add components with: ${u.cyan(`${m} drivn add button`)}`),n.log.info(`Add dark/light theme: ${u.cyan(`${m} drivn add theme`)}`),n.outro("Drivn initialized");}var X=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -2432,6 +2432,257 @@ export const ContextMenu = Object.assign(ContextMenuRoot, {
 })
 `;var ue=`'use client'
 
+import * as React from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import { Table } from '@/components/ui/table'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Pagination } from '@/components/ui/pagination'
+
+const styles = {
+  root: 'space-y-4',
+  sortButton: 'inline-flex items-center gap-1 cursor-pointer select-none',
+  sortIcon: 'w-3.5 h-3.5 text-muted-foreground',
+  sortIconActive: 'text-foreground',
+  selectCell: 'w-10',
+  rowSelected: 'bg-primary/5',
+  empty: 'py-12 text-center text-sm text-muted-foreground',
+  skeleton: 'h-4 rounded',
+  pagination: 'flex items-center justify-between',
+}
+
+type Row = Record<string, unknown>
+
+interface Sort {
+  id: string
+  direction: 'asc' | 'desc'
+}
+
+interface ColumnDef<T> {
+  id: string
+  header: string
+  cell?: (value: unknown, row: T) => React.ReactNode
+  align?: 'left' | 'center' | 'right'
+  width?: string
+  sortable?: boolean
+}
+
+interface DataTableProps<T> {
+  data: T[]
+  columns: ColumnDef<T>[]
+  rowKey: string
+  variant?: 'default' | 'striped' | 'bordered'
+  sortable?: boolean
+  onSortChange?: (sort: Sort) => void
+  selectable?: boolean
+  onSelectionChange?: (keys: Set<string>) => void
+  loading?: boolean
+  toolbar?: React.ReactNode
+  footer?: React.ReactNode
+  className?: string
+}
+
+interface DataTablePaginationProps {
+  page: number
+  pageCount: number
+  onPageChange: (page: number) => void
+  className?: string
+}
+
+function DataTableRoot<T>({
+  data,
+  columns,
+  rowKey,
+  variant = 'default',
+  sortable = false,
+  onSortChange,
+  selectable = false,
+  onSelectionChange,
+  loading = false,
+  toolbar,
+  footer,
+  className,
+}: DataTableProps<T>) {
+  const [sort, setSort] = React.useState<Sort | null>(null)
+  const [selected, setSelected] = React.useState<Set<string>>(new Set())
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  const sorted = React.useMemo(() => {
+    if (!sort) return data
+    const col = columns.find(c => c.id === sort.id)
+    if (!col) return data
+    const m = sort.direction === 'asc' ? 1 : -1
+    return [...data].sort((a, b) => {
+      const x = (a as Row)[col.id], y = (b as Row)[col.id]
+      if (x == null) return 1
+      if (y == null) return -1
+      return (typeof x === 'number' && typeof y === 'number'
+        ? x - y : String(x).localeCompare(String(y))) * m
+    })
+  }, [data, sort, columns])
+
+  const keys = React.useMemo(() => sorted.map(r => \`\${(r as Row)[rowKey]}\`), [sorted, rowKey])
+  const allSelected = keys.length > 0 && keys.every(k => selected.has(k))
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = keys.some(k => selected.has(k)) && !allSelected
+    }
+  }, [selected, keys, allSelected])
+
+  function onSort(id: string) {
+    const next: Sort | null = sort?.id !== id
+      ? { id, direction: 'asc' }
+      : sort.direction === 'asc'
+        ? { id, direction: 'desc' }
+        : null
+    setSort(next)
+    if (next) onSortChange?.(next)
+  }
+
+  function setSelection(next: Set<string>) {
+    setSelected(next)
+    onSelectionChange?.(next)
+  }
+
+  function toggle(k: string) {
+    const next = new Set(selected)
+    if (next.has(k)) next.delete(k)
+    else next.add(k)
+    setSelection(next)
+  }
+
+  return (
+    <div className={cn(styles.root, className)}>
+      {toolbar}
+      <Table variant={variant}>
+        <Table.Header>
+          <Table.Row>
+            {selectable && (
+              <Table.Head className={styles.selectCell}>
+                <Checkbox
+                  ref={ref}
+                  checked={allSelected}
+                  onChange={() => setSelection(allSelected ? new Set() : new Set(keys))}
+                />
+              </Table.Head>
+            )}
+            {columns.map(col => {
+              const active = sort?.id === col.id
+              const Icon = active
+                ? sort.direction === 'asc' ? ArrowUp : ArrowDown
+                : ArrowUpDown
+              return (
+                <Table.Head
+                  key={col.id}
+                  align={col.align}
+                  style={col.width ? { width: col.width } : undefined}
+                >
+                  {(col.sortable ?? sortable) ? (
+                    <button className={styles.sortButton} onClick={() => onSort(col.id)}>
+                      {col.header}
+                      <Icon className={cn(styles.sortIcon, active && styles.sortIconActive)} />
+                    </button>
+                  ) : (
+                    col.header
+                  )}
+                </Table.Head>
+              )
+            })}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {loading ? (
+            Array.from({ length: 5 }, (_, i) => (
+              <Table.Row key={i}>
+                {columns.map(col => (
+                  <Table.Cell key={col.id}>
+                    <Skeleton className={styles.skeleton} style={{ width: col.width ?? '60%' }} />
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))
+          ) : sorted.length === 0 ? (
+            <Table.Row>
+              <Table.Cell colSpan={columns.length + (selectable ? 1 : 0)}>
+                <div className={styles.empty}>No results.</div>
+              </Table.Cell>
+            </Table.Row>
+          ) : (
+            sorted.map(r => {
+              const k = \`\${(r as Row)[rowKey]}\`
+              return (
+                <Table.Row
+                  key={k}
+                  className={selected.has(k) ? styles.rowSelected : undefined}
+                >
+                  {selectable && (
+                    <Table.Cell className={styles.selectCell}>
+                      <Checkbox checked={selected.has(k)} onChange={() => toggle(k)} />
+                    </Table.Cell>
+                  )}
+                  {columns.map(col => {
+                    const v = (r as Row)[col.id]
+                    return (
+                      <Table.Cell key={col.id} align={col.align}>
+                        {col.cell ? col.cell(v, r) : String(v ?? '')}
+                      </Table.Cell>
+                    )
+                  })}
+                </Table.Row>
+              )
+            })
+          )}
+        </Table.Body>
+      </Table>
+      {footer}
+    </div>
+  )
+}
+
+function DataTablePagination({
+  page,
+  pageCount,
+  onPageChange,
+  className,
+}: DataTablePaginationProps) {
+  return (
+    <div className={cn(styles.pagination, className)}>
+      <span className="text-sm text-muted-foreground">
+        Page {page} of {pageCount}
+      </span>
+      <Pagination className="mx-0 w-auto justify-end">
+        <Pagination.Content>
+          <Pagination.Item>
+            <Pagination.Previous
+              onClick={(e) => {
+                e.preventDefault()
+                if (page > 1) onPageChange(page - 1)
+              }}
+              aria-disabled={page <= 1}
+            />
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Next
+              onClick={(e) => {
+                e.preventDefault()
+                if (page < pageCount) onPageChange(page + 1)
+              }}
+              aria-disabled={page >= pageCount}
+            />
+          </Pagination.Item>
+        </Pagination.Content>
+      </Pagination>
+    </div>
+  )
+}
+
+export const DataTable = Object.assign(DataTableRoot, {
+  Pagination: DataTablePagination
+})
+`;var me=`'use client'
+
 import * as React from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/utils/cn'
@@ -2586,7 +2837,7 @@ export const Dialog = Object.assign(DialogRoot, {
   Trigger,
   Content,
 })
-`;var me=`'use client'
+`;var fe=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -2805,7 +3056,7 @@ export const Drawer = Object.assign(DrawerRoot, {
   Header,
   Footer,
 })
-`;var fe=`'use client'
+`;var ge=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3003,7 +3254,7 @@ export const Dropdown = Object.assign(DropdownRoot, {
   Label,
   Separator: DropdownSeparator
 })
-`;var ge=`import * as React from 'react'
+`;var be=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3026,7 +3277,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 )
 
 Input.displayName = 'Input'
-`;var be=`import * as React from 'react'
+`;var he=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3083,7 +3334,7 @@ function Group({
 }
 
 export const Kbd = Object.assign(KbdRoot, { Group })
-`;var he=`import * as React from 'react'
+`;var ve=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 export function Label({
@@ -3100,7 +3351,7 @@ export function Label({
     />
   )
 }
-`;var ve=`'use client'
+`;var xe=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -3251,7 +3502,7 @@ export const NavigationMenu = Object.assign(NavigationMenuRoot, {
   Content,
   Link
 })
-`;var xe=`import * as React from 'react'
+`;var ye=`import * as React from 'react'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -3384,7 +3635,7 @@ export const Pagination = Object.assign(PaginationRoot, {
   Next,
   Ellipsis: PaginationEllipsis,
 })
-`;var ye=`'use client'
+`;var Ne=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3451,6 +3702,7 @@ function Trigger({
   const { open, setOpen } = usePopover()
   return (
     <Button
+      type="button"
       variant="outline"
       rounded="md"
       className={className}
@@ -3489,7 +3741,7 @@ export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content
 })
-`;var Ne=`import * as React from 'react'
+`;var Ce=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3527,7 +3779,7 @@ export function Progress({
     </div>
   )
 }
-`;var Ce=`'use client'
+`;var we=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3832,7 +4084,7 @@ export const Select = Object.assign(SelectRoot, {
   Menu,
   Option
 })
-`;var we=`import * as React from 'react'
+`;var ke=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3878,7 +4130,7 @@ export function ScrollArea({
     </div>
   )
 }
-`;var ke=`import * as React from 'react'
+`;var Se=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3919,7 +4171,7 @@ export function Skeleton({
     />
   )
 }
-`;var Se=`'use client'
+`;var Te=`'use client'
 
 import * as React from 'react'
 import { ChevronDown, PanelLeft } from 'lucide-react'
@@ -4350,7 +4602,7 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(({
 )
 
 Slider.displayName = 'Slider'
-`;var Te=`'use client'
+`;var Ie=`'use client'
 
 import * as React from 'react'
 import { Check } from 'lucide-react'
@@ -4499,7 +4751,7 @@ function useStepper() {
 export const Stepper = Object.assign(StepperRoot, {
   Item
 })
-`;var Ie=`'use client'
+`;var Ee=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -4541,7 +4793,7 @@ export function Switch({
     </button>
   )
 }
-`;var Ee=`'use client'
+`;var Le=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -4655,7 +4907,7 @@ export const Tabs = Object.assign(TabsRoot, {
   Tab,
   Panel
 })
-`;var Le=`import * as React from 'react'
+`;var Me=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -4682,7 +4934,229 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var Me=`'use client'
+`;var Oe=`'use client'
+
+import * as React from 'react'
+import { Clock } from 'lucide-react'
+import { cn } from '@/utils/cn'
+import { Popover } from '@/components/ui/popover'
+import { Input } from '@/components/ui/input'
+
+const styles = {
+  base: 'relative block max-w-xs',
+  trigger: cn(
+    'flex items-center gap-2 w-full h-10 px-3',
+    'border border-input rounded-[10px] text-sm',
+    'text-foreground transition-colors',
+    'font-normal hover:scale-100',
+    '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: 'p-2',
+  columns: 'flex gap-1',
+  column: cn(
+    'flex flex-col items-center',
+    'h-[220px] overflow-y-auto px-1',
+    '[&::-webkit-scrollbar]:w-1',
+    '[&::-webkit-scrollbar-thumb]:rounded-full',
+    '[&::-webkit-scrollbar-thumb]:bg-border',
+    '[&::-webkit-scrollbar-track]:bg-transparent'
+  ),
+  columnLabel: cn(
+    'text-xs font-medium text-muted-foreground',
+    'pb-1'
+  ),
+  cell: cn(
+    'flex items-center justify-center w-14 h-12',
+    'text-base rounded-lg hover:bg-accent',
+    'transition-colors cursor-pointer'
+  ),
+  cellActive: cn(
+    'bg-foreground text-background font-medium',
+    'hover:bg-foreground hover:text-background'
+  ),
+  period: 'flex flex-col gap-0.5 pt-5 pl-1',
+  periodBtn: cn(
+    'flex items-center justify-center w-14 h-12',
+    'text-xs font-medium rounded-lg',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+}
+
+interface TimePickerProps {
+  selected?: Date
+  onSelect?: (date: Date | undefined) => void
+  format?: '12h' | '24h'
+  showSeconds?: boolean
+  placeholder?: string
+  formatTime?: (date: Date) => string
+  disabled?: boolean
+  className?: string
+}
+
+function to24(v: number, period: 'AM' | 'PM' | undefined) {
+  if (!period) return v
+  if (period === 'AM') return v === 12 ? 0 : v
+  return v === 12 ? 12 : v + 12
+}
+
+function Column({
+  items,
+  selected,
+  onSelect,
+  label,
+}: {
+  items: number[]
+  selected: number | undefined
+  onSelect: (v: number) => void
+  label: string
+}) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  React.useEffect(() => {
+    const col = ref.current
+    const el = col?.querySelector('[data-selected]') as HTMLElement | null
+    if (!col || !el) return
+    col.scrollTop = el.offsetTop - col.offsetTop - col.clientHeight / 2 + el.clientHeight / 2
+  }, [selected])
+
+  return (
+    <div className="flex flex-col items-center">
+      <span className={styles.columnLabel}>{label}</span>
+      <div ref={ref} className={styles.column}>
+        {items.map((v) => (
+          <button
+            key={v}
+            type="button"
+            data-selected={v === selected || undefined}
+            className={cn(
+              styles.cell,
+              v === selected && styles.cellActive
+            )}
+            onClick={() => onSelect(v)}
+          >
+            {String(v).padStart(2, '0')}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function TimePickerRoot({
+  selected,
+  onSelect,
+  format = '24h',
+  showSeconds = false,
+  placeholder = 'Pick a time',
+  formatTime,
+  disabled = false,
+  className,
+}: TimePickerProps) {
+  const is12 = format === '12h'
+  const h = selected?.getHours()
+  const m = selected?.getMinutes()
+  const s = selected?.getSeconds()
+  const period = h !== undefined ? (h >= 12 ? 'PM' : 'AM') : undefined
+  const h12 = h !== undefined ? (h % 12 || 12) : undefined
+  const hours = is12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i)
+  const values = Array.from({ length: 60 }, (_, i) => i)
+
+  return (
+    <Popover className={cn(styles.base, className)}>
+      <Popover.Trigger disabled={disabled} className={styles.trigger}>
+        <Clock className={styles.icon} />
+        <span className={cn(styles.text, !selected && styles.placeholder)}>
+          {selected ? (formatTime?.(selected) ?? selected.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', ...(showSeconds && { second: '2-digit' }), hour12: is12 })) : placeholder}
+        </span>
+      </Popover.Trigger>
+      <Popover.Content className={styles.content}>
+        <div className={styles.columns}>
+          <Column
+            label="Hr"
+            items={hours}
+            selected={is12 ? h12 : h}
+            onSelect={(v) =>
+              onSelect?.(new Date(0, 0, 0, is12 ? to24(v, period) : v, m ?? 0, s ?? 0))
+            }
+          />
+          <Column
+            label="Min"
+            items={values}
+            selected={m}
+            onSelect={(v) =>
+              onSelect?.(new Date(0, 0, 0, h ?? 0, v, s ?? 0))
+            }
+          />
+          {showSeconds && (
+            <Column
+              label="Sec"
+              items={values}
+              selected={s}
+              onSelect={(v) =>
+                onSelect?.(new Date(0, 0, 0, h ?? 0, m ?? 0, v))
+              }
+            />
+          )}
+          {is12 && (
+            <div className={styles.period}>
+              {(['AM', 'PM'] as const).map((p) => (
+                <button
+                  key={p}
+                  type="button"
+                  className={cn(
+                    styles.periodBtn,
+                    period === p && styles.cellActive
+                  )}
+                  onClick={() => onSelect?.(new Date(0, 0, 0, to24(h12 ?? 12, p), m ?? 0, s ?? 0))}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+function TimePickerInput({
+  selected,
+  onSelect,
+  className,
+  ...props
+}: Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'onChange' | 'value' | 'onSelect'
+> & {
+  selected?: Date
+  onSelect?: (date: Date | undefined) => void
+}) {
+  const value = selected ? String(selected.getHours()).padStart(2, '0') + ':' + String(selected.getMinutes()).padStart(2, '0') : ''
+
+  return (
+    <Input
+      type="time"
+      value={value}
+      onChange={(e) => {
+        const v = (e.target as HTMLInputElement).value
+        if (!v) return onSelect?.(undefined)
+        const [h, m] = v.split(':').map(Number)
+        onSelect?.(new Date(0, 0, 0, h, m))
+      }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
+export const TimePicker = Object.assign(TimePickerRoot, {
+  Input: TimePickerInput
+})
+`;var Ae=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -4725,7 +5199,7 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var Oe=`'use client'
+`;var He=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -4887,7 +5361,7 @@ const Ctx = React.createContext<ToggleGroupCtx | null>(null)
 export const Toggle = Object.assign(ToggleButton, {
   Group: ToggleGroupRoot,
 })
-`;var Ae=`import * as React from 'react'
+`;var Be=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -4896,7 +5370,11 @@ const styles = {
   variants: {
     default: '',
     striped: '[&_tbody_tr:nth-child(even)]:bg-muted/30',
-    bordered: '[&_th]:border [&_td]:border',
+    bordered: cn(
+      '[&_th]:border [&_td]:border',
+      '[&_th]:border-border [&_td]:border-border',
+      '[&_tbody_tr:nth-child(even)]:bg-muted/30'
+    ),
   },
   caption: 'mt-3 text-sm text-muted-foreground',
   header: '[&_tr]:border-b [&_tr]:border-border',
@@ -5061,7 +5539,7 @@ export const Table = Object.assign(TableRoot, {
   Head,
   Cell,
 })
-`;var Be=`import * as React from 'react'
+`;var je=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -5106,7 +5584,7 @@ export function Tooltip({
     </span>
   )
 }
-`;var He=`
+`;var ze=`
 /* react-day-picker theme integration */
 .rdp-root {
   --rdp-accent-color: var(--primary);
@@ -5117,7 +5595,7 @@ export function Tooltip({
   --rdp-selected-border: none;
   --rdp-day_button-border: none;
 }
-`,v=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"combobox",description:"Searchable select with filtering, single/multi selection, and keyboard navigation",dependencies:[],npmDependencies:["cmdk"]},{name:"collapsible",description:"Toggle content visibility with smooth animation and accessible controls",dependencies:[],npmDependencies:[]},{name:"context-menu",description:"Right-click context menu with submenus, keyboard shortcuts, icons, and dot notation",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"navigation-menu",description:"Horizontal navigation menu with dropdown content panels and dot notation",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"scroll-area",description:"Themed scrollable container with custom scrollbar styling and orientation control",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"skeleton",description:"Loading placeholder with pulse animation, sized and shaped via className",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"stepper",description:"Multi-step progress indicator with horizontal/vertical orientation, connecting lines, and dot notation",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"toggle",description:"Toggle button with pressed state, single and multiple selection groups",dependencies:[],npmDependencies:[]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],R={accordion:q,alert:J,"aspect-ratio":Z,avatar:Q,badge:ee,breadcrumb:te,button:ne,calendar:oe,"date-picker":re,command:se,carousel:ae,card:ie,checkbox:ce,combobox:le,collapsible:de,"context-menu":pe,dialog:ue,drawer:me,dropdown:fe,input:ge,kbd:be,label:he,"navigation-menu":ve,pagination:xe,popover:ye,progress:Ne,"radio-group":Ce,select:Re,"scroll-area":we,separator:ke,skeleton:Pe,sidebar:Se,slider:De,stepper:Te,switch:Ie,table:Ae,tabs:Ee,textarea:Le,theme:X,toast:Me,toggle:Oe,tooltip:Be};async function ze(e){let r=process.cwd();n.intro("drivn add");let t=U(r);if(t||(n.log.error("Drivn is not initialized. Run npx drivn@latest create"),n.outro("Cancelled"),process.exit(1)),!e||!e.length){let o=await n.multiselect({message:"Select components to add",options:v.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let a=e.filter(o=>!v.find(s=>s.name===o));a.length&&(n.log.error(`Unknown components: ${a.join(", ")}`),n.log.info("Available: "+v.map(o=>o.name).join(", ")),n.outro("Cancelled"),process.exit(1));let l=e.includes("theme"),d=e.filter(o=>o!=="theme"),p=new Set,f=new Set,g=o=>{if(p.has(o))return;let s=v.find(i=>i.name===o);s&&(s.dependencies.forEach(i=>g(i)),s.npmDependencies?.forEach(i=>f.add(i)),p.add(o));};d.forEach(g),l&&f.add("next-themes");let N=[...p].filter(o=>!d.includes(o));N.length&&n.log.info(`Required dependency: ${N.join(", ")}`);let m=t.typescript?"tsx":"jsx",b=join(r,t.paths.components);for(let o of p){let s=join(b,`${o}.${m}`);if(x(s)){let S=await n.confirm({message:`${o}.${m} exists. Overwrite?`,initialValue:false});if(n.isCancel(S)||!S){n.log.warn(`Skipped ${o}`);continue}}let i=R[o];i=i.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),h(s,i),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${m}`);}if(l){let o=join(b,`theme-provider.${m}`);if(x(o)){let i=await n.confirm({message:`theme-provider.${m} exists. Overwrite?`,initialValue:false});!n.isCancel(i)&&i?(h(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`)):n.log.warn("Skipped theme-provider");}else h(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`);if(t.paths.globals){let i=join(r,t.paths.globals);if(x(i)){let S=H(i);S.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(h(i,S+k),n.log.success(`Theme tokens appended to ${u.cyan(t.paths.globals)}`));}else n.log.warn(`Globals file not found at ${t.paths.globals}`);}else n.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(u.bold("Complete the setup:")),n.log.message(""),n.log.message(u.bold(`${u.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(u.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),n.log.message(""),n.log.message(u.bold(`${u.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(u.cyan("   <html suppressHydrationWarning>")),n.log.message(""),n.log.message(u.bold(`${u.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(u.cyan("   <ThemeProvider>")),n.log.message(u.cyan("     {children}")),n.log.message(u.cyan("   </ThemeProvider>")),n.log.message("");}if(p.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(x(o)){let s=H(o);s.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(h(o,s+He),n.log.success(`Calendar tokens appended to ${u.cyan(t.paths.globals)}`));}}if(f.size){let o=E(r),s=[...f],i=n.spinner();i.start("Installing packages");try{execSync(w(o,s),{cwd:r,stdio:"ignore"}),i.stop("Packages installed");}catch{i.stop("Failed to install packages"),n.log.warn(`Run manually: ${w(o,s)}`);}}n.outro("Done.");}var z=`# Drivn Component Conventions
+`,v=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"combobox",description:"Searchable select with filtering, single/multi selection, and keyboard navigation",dependencies:[],npmDependencies:["cmdk"]},{name:"collapsible",description:"Toggle content visibility with smooth animation and accessible controls",dependencies:[],npmDependencies:[]},{name:"context-menu",description:"Right-click context menu with submenus, keyboard shortcuts, icons, and dot notation",dependencies:[],npmDependencies:[]},{name:"data-table",description:"Data-driven table with sorting, selection, loading, and empty states",dependencies:["table","checkbox","skeleton","pagination"],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"navigation-menu",description:"Horizontal navigation menu with dropdown content panels and dot notation",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"scroll-area",description:"Themed scrollable container with custom scrollbar styling and orientation control",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"skeleton",description:"Loading placeholder with pulse animation, sized and shaped via className",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"stepper",description:"Multi-step progress indicator with horizontal/vertical orientation, connecting lines, and dot notation",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:"time-picker",description:"Time picker with scrollable dropdown columns and native input mode",dependencies:["popover","input"],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"toggle",description:"Toggle button with pressed state, single and multiple selection groups",dependencies:[],npmDependencies:[]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],w={accordion:q,alert:J,"aspect-ratio":Z,avatar:Q,badge:ee,breadcrumb:te,button:ne,calendar:oe,"date-picker":re,command:se,carousel:ae,card:ie,checkbox:ce,combobox:le,collapsible:de,"context-menu":pe,"data-table":ue,dialog:me,drawer:fe,dropdown:ge,input:be,kbd:he,label:ve,"navigation-menu":xe,pagination:ye,popover:Ne,progress:Ce,"radio-group":we,select:Re,"scroll-area":ke,separator:Se,skeleton:Pe,sidebar:Te,slider:De,stepper:Ie,switch:Ee,table:Be,tabs:Le,textarea:Me,"time-picker":Oe,theme:X,toast:Ae,toggle:He,tooltip:je};async function Ve(e){let r=process.cwd();n.intro("drivn add");let t=U(r);if(t||(n.log.error("Drivn is not initialized. Run npx drivn@latest create"),n.outro("Cancelled"),process.exit(1)),!e||!e.length){let o=await n.multiselect({message:"Select components to add",options:v.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let a=e.filter(o=>!v.find(s=>s.name===o));a.length&&(n.log.error(`Unknown components: ${a.join(", ")}`),n.log.info("Available: "+v.map(o=>o.name).join(", ")),n.outro("Cancelled"),process.exit(1));let l=e.includes("theme"),d=e.filter(o=>o!=="theme"),p=new Set,f=new Set,g=o=>{if(p.has(o))return;let s=v.find(i=>i.name===o);s&&(s.dependencies.forEach(i=>g(i)),s.npmDependencies?.forEach(i=>f.add(i)),p.add(o));};d.forEach(g),l&&f.add("next-themes");let N=[...p].filter(o=>!d.includes(o));N.length&&n.log.info(`Required dependency: ${N.join(", ")}`);let m=t.typescript?"tsx":"jsx",b=join(r,t.paths.components);for(let o of p){let s=join(b,`${o}.${m}`);if(x(s)){let P=await n.confirm({message:`${o}.${m} exists. Overwrite?`,initialValue:false});if(n.isCancel(P)||!P){n.log.warn(`Skipped ${o}`);continue}}let i=w[o];i=i.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),h(s,i),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${m}`);}if(l){let o=join(b,`theme-provider.${m}`);if(x(o)){let i=await n.confirm({message:`theme-provider.${m} exists. Overwrite?`,initialValue:false});!n.isCancel(i)&&i?(h(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`)):n.log.warn("Skipped theme-provider");}else h(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${m}`);if(t.paths.globals){let i=join(r,t.paths.globals);if(x(i)){let P=B(i);P.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(h(i,P+k),n.log.success(`Theme tokens appended to ${u.cyan(t.paths.globals)}`));}else n.log.warn(`Globals file not found at ${t.paths.globals}`);}else n.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(u.bold("Complete the setup:")),n.log.message(""),n.log.message(u.bold(`${u.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(u.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),n.log.message(""),n.log.message(u.bold(`${u.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(u.cyan("   <html suppressHydrationWarning>")),n.log.message(""),n.log.message(u.bold(`${u.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(u.cyan("   <ThemeProvider>")),n.log.message(u.cyan("     {children}")),n.log.message(u.cyan("   </ThemeProvider>")),n.log.message("");}if(p.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(x(o)){let s=B(o);s.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(h(o,s+ze),n.log.success(`Calendar tokens appended to ${u.cyan(t.paths.globals)}`));}}if(f.size){let o=E(r),s=[...f],i=n.spinner();i.start("Installing packages");try{execSync(R(o,s),{cwd:r,stdio:"ignore"}),i.stop("Packages installed");}catch{i.stop("Failed to install packages"),n.log.warn(`Run manually: ${R(o,s)}`);}}n.outro("Done.");}var j=`# Drivn Component Conventions
 
 ## Core Philosophy
 - **Zero runtime UI deps** \u2014 No Radix, no cva, no external UI primitives. Pure React + Tailwind.
@@ -5230,13 +5708,13 @@ import { cn } from '@/utils/cn'
 - Components declare internal deps (other Drivn components)
 - Some components need npm packages (react-day-picker, cmdk, embla-carousel-react, sonner)
 - The CLI resolves and installs all dependencies automatically
-`;var L={version:"1.14.1"};function M(e){return v.find(r=>r.name===e)}function et(e){let r=new Set,t=a=>{if(r.has(a))return;let l=M(a);l&&(l.dependencies.forEach(d=>t(d)),r.add(a));};return t(e),r.delete(e),[...r]}async function je(){let e=new McpServer({name:"drivn",version:L.version});e.tool("list_components","List all available Drivn UI components with descriptions",{},async()=>({content:[{type:"text",text:JSON.stringify(v.map(t=>({name:t.name,description:t.description})),null,2)}]})),e.tool("get_component","Get the full source code and metadata for a Drivn component",{name:z$1.string().describe('Component name (e.g. "button", "dialog")')},async({name:t})=>{let a=M(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=R[t];return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,source:l},null,2)}]}}),e.tool("get_component_metadata","Get metadata only (no source code) for a Drivn component \u2014 useful for planning",{name:z$1.string().describe("Component name")},async({name:t})=>{let a=M(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=et(t);return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,allResolvedDependencies:l},null,2)}]}}),e.tool("search_components","Search Drivn components by name or description",{query:z$1.string().describe("Search query")},async({query:t})=>{let a=t.toLowerCase(),l=v.filter(d=>d.name.includes(a)||d.description.toLowerCase().includes(a));return {content:[{type:"text",text:l.length?JSON.stringify(l.map(d=>({name:d.name,description:d.description})),null,2):`No components matching "${t}".`}]}}),e.tool("get_installation_instructions","Get step-by-step installation instructions for one or more components",{components:z$1.array(z$1.string()).describe("Component names to install"),packageManager:z$1.enum(["npm","pnpm"]).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:a})=>{let l=a??"npm",d=new Set,p=new Set,f=[],g=o=>{if(d.has(o))return;let s=M(o);if(!s){f.push(o);return}s.dependencies.forEach(i=>g(i)),s.npmDependencies.forEach(i=>p.add(i)),d.add(o);};if(t.forEach(g),f.length)return {content:[{type:"text",text:`Unknown components: ${f.join(", ")}. Use list_components to see available components.`}],isError:true};let N=l==="pnpm"?"pnpm dlx":"npx",m=l==="pnpm"?"pnpm add":"npm install",b=[];return b.push(`# Install components via CLI
+`;var L={version:"1.16.0"};function M(e){return v.find(r=>r.name===e)}function nt(e){let r=new Set,t=a=>{if(r.has(a))return;let l=M(a);l&&(l.dependencies.forEach(d=>t(d)),r.add(a));};return t(e),r.delete(e),[...r]}async function _e(){let e=new McpServer({name:"drivn",version:L.version});e.tool("list_components","List all available Drivn UI components with descriptions",{},async()=>({content:[{type:"text",text:JSON.stringify(v.map(t=>({name:t.name,description:t.description})),null,2)}]})),e.tool("get_component","Get the full source code and metadata for a Drivn component",{name:z$1.string().describe('Component name (e.g. "button", "dialog")')},async({name:t})=>{let a=M(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=w[t];return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,source:l},null,2)}]}}),e.tool("get_component_metadata","Get metadata only (no source code) for a Drivn component \u2014 useful for planning",{name:z$1.string().describe("Component name")},async({name:t})=>{let a=M(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=nt(t);return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,allResolvedDependencies:l},null,2)}]}}),e.tool("search_components","Search Drivn components by name or description",{query:z$1.string().describe("Search query")},async({query:t})=>{let a=t.toLowerCase(),l=v.filter(d=>d.name.includes(a)||d.description.toLowerCase().includes(a));return {content:[{type:"text",text:l.length?JSON.stringify(l.map(d=>({name:d.name,description:d.description})),null,2):`No components matching "${t}".`}]}}),e.tool("get_installation_instructions","Get step-by-step installation instructions for one or more components",{components:z$1.array(z$1.string()).describe("Component names to install"),packageManager:z$1.enum(["npm","pnpm"]).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:a})=>{let l=a??"npm",d=new Set,p=new Set,f=[],g=o=>{if(d.has(o))return;let s=M(o);if(!s){f.push(o);return}s.dependencies.forEach(i=>g(i)),s.npmDependencies.forEach(i=>p.add(i)),d.add(o);};if(t.forEach(g),f.length)return {content:[{type:"text",text:`Unknown components: ${f.join(", ")}. Use list_components to see available components.`}],isError:true};let N=l==="pnpm"?"pnpm dlx":"npx",m=l==="pnpm"?"pnpm add":"npm install",b=[];return b.push(`# Install components via CLI
 ${N} drivn@latest add ${[...d].join(" ")}`),p.size&&b.push(`# Install required npm dependencies
 ${m} ${[...p].join(" ")}`),b.push(`# Components will be installed to your configured components directory
 # (default: src/components/ui/)`),{content:[{type:"text",text:JSON.stringify({componentsToInstall:[...d],npmDependencies:[...p],steps:b},null,2)}]}}),e.tool("get_design_tokens","Get the Drivn CSS design tokens (base globals and theme tokens)",{},async()=>({content:[{type:"text",text:`/* === Base Globals === */
 ${C}
 
 /* === Theme Tokens === */
-${k}`}]})),e.tool("get_drivn_rules","Get Drivn coding conventions and component patterns",{},async()=>({content:[{type:"text",text:z}]})),e.resource("drivn-rules","drivn://rules",{description:"Drivn coding conventions and component patterns"},async()=>({contents:[{uri:"drivn://rules",mimeType:"text/markdown",text:z}]})),e.resource("drivn-design-tokens","drivn://design-tokens",{description:"Drivn CSS globals and theme tokens"},async()=>({contents:[{uri:"drivn://design-tokens",mimeType:"text/css",text:`${C}
+${k}`}]})),e.tool("get_drivn_rules","Get Drivn coding conventions and component patterns",{},async()=>({content:[{type:"text",text:j}]})),e.resource("drivn-rules","drivn://rules",{description:"Drivn coding conventions and component patterns"},async()=>({contents:[{uri:"drivn://rules",mimeType:"text/markdown",text:j}]})),e.resource("drivn-design-tokens","drivn://design-tokens",{description:"Drivn CSS globals and theme tokens"},async()=>({contents:[{uri:"drivn://design-tokens",mimeType:"text/css",text:`${C}
 
-${k}`}]}));for(let t of v){let a=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,a,{description:t.description},async()=>({contents:[{uri:a,mimeType:"text/plain",text:R[t.name]}]}));}let r=new StdioServerTransport;await e.connect(r);}var I=new Command;I.name("drivn").description("Drivn \u2014 Modern UI components").version(L.version);I.command("create").description("Initialize Drivn in your project").action(W);I.command("add [components...]").description("Add components to your project").action(ze);I.command("mcp").description("Start the Drivn MCP server").action(je);I.parse();
+${k}`}]}));for(let t of v){let a=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,a,{description:t.description},async()=>({contents:[{uri:a,mimeType:"text/plain",text:w[t.name]}]}));}let r=new StdioServerTransport;await e.connect(r);}var I=new Command;I.name("drivn").description("Drivn \u2014 Modern UI components").version(L.version);I.command("create").description("Initialize Drivn in your project").action(W);I.command("add [components...]").description("Add components to your project").action(Ve);I.command("mcp").description("Start the Drivn MCP server").action(_e);I.parse();

package/package.json

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