drivn 1.0.2 → 1.1.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 L={next:"Next.js",react:"React"};function M(t){let n=join(t,"package.json");if(!existsSync(n))throw new Error("package.json not found");let c=JSON.parse(readFileSync(n,"utf-8")),v={...c.dependencies,...c.devDependencies},d="react";v.next&&(d="next");let m=existsSync(join(t,"src")),f=existsSync(join(t,"tsconfig.json"));return {framework:d,srcDir:m,typescript:f}}var V="drivn.config.json";function z(t){let n=join(t,V);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function H(t,n){let c=join(t,V);writeFileSync(c,JSON.stringify(n,null,2));}function he(t){existsSync(t)||mkdirSync(t,{recursive:true});}function p(t,n){he(dirname(t)),writeFileSync(t,n);}function F(t){return readFileSync(t,"utf-8")}function h(t){return existsSync(t)}function k(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,n){let c=n.join(" ");return t==="pnpm"?`pnpm add ${c}`:`npm install ${c}`}function _(t){return t==="pnpm"?"pnpm dlx":"npx"}var P=`@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 M={next:"Next.js",react:"React"};function B(t){let n=join(t,"package.json");if(!existsSync(n))throw new Error("package.json not found");let c=JSON.parse(readFileSync(n,"utf-8")),v={...c.dependencies,...c.devDependencies},d="react";v.next&&(d="next");let m=existsSync(join(t,"src")),f=existsSync(join(t,"tsconfig.json"));return {framework:d,srcDir:m,typescript:f}}var H="drivn.config.json";function V(t){let n=join(t,H);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function z(t,n){let c=join(t,H);writeFileSync(c,JSON.stringify(n,null,2));}function he(t){existsSync(t)||mkdirSync(t,{recursive:true});}function p(t,n){he(dirname(t)),writeFileSync(t,n);}function F(t){return readFileSync(t,"utf-8")}function h(t){return existsSync(t)}function k(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,n){let c=n.join(" ");return t==="pnpm"?`pnpm add ${c}`:`npm install ${c}`}function _(t){return t==="pnpm"?"pnpm dlx":"npx"}var T=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -70,7 +70,7 @@ body {
   color: var(--color-foreground);
   font-family: system-ui, -apple-system, sans-serif;
 }
-`,A=`
+`,L=`
 /* Drivn Dark/Light Theme */
 :root,
 [data-theme="dark"] {
@@ -142,7 +142,7 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,Ne=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function we(t){for(let n of Ne)if(h(join(t,n)))return n;return null}async function U(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let n;try{n=M(t),e.log.success(`Detected ${i.cyan(L[n.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(h(join(t,"drivn.config.json"))){let s=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(s)||!s)&&(e.cancel("Setup cancelled"),process.exit(0));}let c=n.srcDir?"src/components/ui":"components/ui",v=n.srcDir?"src/utils":"utils",d=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:c,defaultValue:c}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:v,defaultValue:v})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),m={framework:n.framework,typescript:n.typescript,paths:{components:d.components,utils:d.utils},installed:[]},f=n.typescript?"ts":"js",b=join(t,d.utils,`cn.${f}`);h(b)||p(b,ye);let g=we(t);if(g){let s=await e.confirm({message:`Found ${i.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(s)&&s&&(p(join(t,g),P),m.paths.globals=g,e.log.success(`Color tokens written to ${i.cyan(g)}`));}else {let s=n.srcDir?"src/styles/globals.css":"styles/globals.css",a=await e.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});e.isCancel(a)||(p(join(t,a),P),m.paths.globals=a,e.log.success(`Color tokens written to ${i.cyan(a)}`));}H(t,m);let x=k(t),l=_(x),N=["clsx","tailwind-merge","lucide-react"],o=e.spinner();o.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var G=`'use client'
+`,Ne=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function we(t){for(let n of Ne)if(h(join(t,n)))return n;return null}async function U(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let n;try{n=B(t),e.log.success(`Detected ${i.cyan(M[n.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(h(join(t,"drivn.config.json"))){let s=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(s)||!s)&&(e.cancel("Setup cancelled"),process.exit(0));}let c=n.srcDir?"src/components/ui":"components/ui",v=n.srcDir?"src/utils":"utils",d=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:c,defaultValue:c}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:v,defaultValue:v})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),m={framework:n.framework,typescript:n.typescript,paths:{components:d.components,utils:d.utils},installed:[]},f=n.typescript?"ts":"js",b=join(t,d.utils,`cn.${f}`);h(b)||p(b,ye);let g=we(t);if(g){let s=await e.confirm({message:`Found ${i.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(s)&&s&&(p(join(t,g),T),m.paths.globals=g,e.log.success(`Color tokens written to ${i.cyan(g)}`));}else {let s=n.srcDir?"src/styles/globals.css":"styles/globals.css",a=await e.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});e.isCancel(a)||(p(join(t,a),T),m.paths.globals=a,e.log.success(`Color tokens written to ${i.cyan(a)}`));}z(t,m);let x=k(t),l=_(x),N=["clsx","tailwind-merge","lucide-react"],o=e.spinner();o.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var G=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -183,47 +183,32 @@ const styles = {
 }
 
 interface AccordionCtx {
-  openItem: string | null
-  toggle: (value: string) => void
-}
-
-const Ctx = React.createContext<AccordionCtx | null>(null)
-const ItemCtx = React.createContext<string | null>(null)
-
-function useAccordion() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error('Accordion compound used outside <Accordion>')
-  return ctx
-}
-
-function useItemValue() {
-  const value = React.useContext(ItemCtx)
-  if (!value) throw new Error(
-    'Accordion sub-component used outside <Accordion.Item>'
-  )
-  return value
+  open: Set<string>
+  toggle: (v: string) => void
 }
 
 function AccordionRoot({
   children,
   defaultValue,
+  multiple,
   className,
 }: {
   children: React.ReactNode
-  defaultValue?: string
+  defaultValue?: string | string[]
+  multiple?: boolean
   className?: string
 }) {
-  const [openItem, setOpenItem] = React.useState<string | null>(
-    defaultValue ?? null
-  )
-  const toggle = React.useCallback(
-    (value: string) =>
-      setOpenItem((prev) => (prev === value ? null : value)),
-    []
-  )
+  const [open, setOpen] = React.useState(() => new Set([defaultValue ?? []].flat()))
+
+  const toggle = (v: string) =>
+    setOpen((prev) => {
+      const next = new Set(multiple ? prev : [])
+      prev.has(v) ? next.delete(v) : next.add(v)
+      return next
+    })
 
   return (
-    <Ctx.Provider value={{ openItem, toggle }}>
+    <Ctx.Provider value={{ open, toggle }}>
       <div className={cn(styles.base, className)}>
         {children}
       </div>
@@ -250,17 +235,20 @@ function Item({
 function Trigger({
   children,
   className,
+  ...props
 }: {
   children: React.ReactNode
   className?: string
-}) {
-  const { openItem, toggle } = useAccordion()
-  const value = useItemValue()
-  const isOpen = openItem === value
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, toggle } = useCtx()
+  const value = React.useContext(ItemCtx)
+  const isOpen = open.has(value)
   return (
     <button
+      aria-expanded={isOpen}
       className={cn(styles.trigger, className)}
       onClick={() => toggle(value)}
+      {...props}
     >
       {children}
       <ChevronDown className={cn(styles.icon, isOpen && 'rotate-180')} />
@@ -275,11 +263,12 @@ function Content({
   children: React.ReactNode
   className?: string
 }) {
-  const { openItem } = useAccordion()
-  const value = useItemValue()
-  const isOpen = openItem === value
+  const { open } = useCtx()
+  const value = React.useContext(ItemCtx)
+  const isOpen = open.has(value)
   return (
     <div
+      role="region"
       className={styles.panel}
       style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
     >
@@ -290,12 +279,19 @@ function Content({
   )
 }
 
+const Ctx = React.createContext<AccordionCtx | null>(null)
+const ItemCtx = React.createContext('')
+
+function useCtx() {
+  const c = React.useContext(Ctx)
+  if (!c) throw new Error('Accordion compound used outside <Accordion>')
+  return c
+}
+
 export const Accordion = Object.assign(AccordionRoot, {
-  Item,
-  Trigger,
-  Content,
+  Item, Trigger, Content,
 })
-`;var K=`import * as React from 'react'
+`;var X=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -310,9 +306,7 @@ const styles = {
   description: 'text-sm opacity-90',
 }
 
-type IconProp =
-  | React.ComponentType<{ className?: string }>
-  | React.ReactElement
+type IconProp = React.ComponentType<{ className?: string }> | React.ReactElement
 
 interface AlertProps {
   variant?: keyof typeof styles.variants
@@ -345,7 +339,7 @@ export function Alert({
     </div>
   )
 }
-`;var X=`import * as React from 'react'
+`;var q=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -419,7 +413,7 @@ export function Badge({ variant = 'default', className, children }: BadgeProps)
     </span>
   )
 }
-`;var q=`import * as React from 'react'
+`;var K=`import * as React from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -450,9 +444,7 @@ const styles = {
   },
 }
 
-type IconProp =
-  | React.ComponentType<{ className?: string }>
-  | React.ReactElement
+type IconProp = React.ComponentType<{ className?: string }> | React.ReactElement
 
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -464,33 +456,22 @@ interface ButtonProps
   rightIcon?: IconProp
 }
 
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps
->(({
-      className,
-      variant = 'default',
-      size = 'md',
-      rounded = 'full',
-      loading,
-      disabled,
-      leftIcon: LeftIcon,
-      rightIcon: RightIcon,
-      children,
-      ...props
-    },
-    ref
-  ) => (
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
+  className,
+  variant = 'default',
+  size = 'md',
+  rounded = 'full',
+  loading,
+  disabled,
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  children,
+  ...props
+}, ref) => (
     <button
       ref={ref}
       disabled={loading || disabled}
-      className={cn(
-        styles.base,
-        styles.sizes[size],
-        styles.variants[variant],
-        styles.rounded[rounded],
-        className
-      )}
+      className={cn(styles.base, styles.sizes[size], styles.variants[variant], styles.rounded[rounded], className)}
       {...props}
     >
       {loading && (
@@ -596,42 +577,25 @@ const styles = {
   label: 'text-sm text-foreground select-none',
 }
 
-interface CheckboxProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    'type'
-  > {
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label?: string
 }
 
-export const Checkbox = React.forwardRef<
-  HTMLInputElement,
-  CheckboxProps
->(({
-      className,
-      label,
-      checked,
-      defaultChecked,
-      onChange,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const [internal, setInternal] = React.useState(
-      defaultChecked ?? false
-    )
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
+  className,
+  label,
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  ...props
+}, ref) => {
+    const [internal, setInternal] = React.useState(defaultChecked ?? false)
     const isControlled = checked !== undefined
     const isChecked = isControlled ? checked : internal
 
     return (
-      <label
-        className={cn(
-          styles.base,
-          disabled && 'opacity-50 cursor-default',
-          className
-        )}
-      >
+      <label className={cn(styles.base, disabled && 'opacity-50 cursor-default', className)}>
         <input
           ref={ref}
           type="checkbox"
@@ -645,12 +609,7 @@ export const Checkbox = React.forwardRef<
           }}
           {...props}
         />
-        <span
-          className={cn(
-            styles.box,
-            isChecked && styles.checked
-          )}
-        >
+        <span className={cn(styles.box, isChecked && styles.checked)}>
           {isChecked && (
             <Check className="w-2.5 h-2.5 text-primary-foreground" />
           )}
@@ -672,23 +631,24 @@ import { cn } from '@/utils/cn'
 import { Button } from '@/components/ui/button'
 
 const styles = {
-  overlay: cn(
-    'fixed inset-0 z-[200] flex items-center justify-center',
-    'bg-overlay backdrop-blur-sm',
-    'transition-opacity duration-150 ease-out'
+  base: cn(
+    'fixed inset-0 m-0 p-0 border-none',
+    'max-w-none max-h-none w-screen h-dvh',
+    'flex items-center justify-center bg-overlay',
+    'backdrop-blur-sm transition-opacity duration-150',
+    'ease-out'
   ),
   content: cn(
-    'relative w-full max-w-md mx-4 p-6',
+    'relative w-full max-w-md mx-4 p-6 shadow-xl',
     'bg-card border border-border rounded-[20px]',
-    'shadow-xl',
     'transition-[scale] duration-150 ease-out'
   ),
   title: 'text-lg font-semibold text-foreground mb-4',
   close: cn(
-    'absolute top-4 right-4 w-8 h-8',
+    'absolute top-4 right-4 w-8 h-8 cursor-pointer',
     'flex items-center justify-center rounded-full',
     'text-muted-foreground hover:text-foreground',
-    'hover:bg-accent transition-colors cursor-pointer'
+    'hover:bg-accent transition-colors'
   ),
 }
 
@@ -697,14 +657,6 @@ interface DialogCtx {
   setOpen: (v: boolean) => void
 }
 
-const Ctx = React.createContext<DialogCtx | null>(null)
-
-function useDialog() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error('Dialog compound used outside <Dialog>')
-  return ctx
-}
-
 function DialogRoot({
   children,
   open: controlled,
@@ -716,15 +668,16 @@ function DialogRoot({
 }) {
   const [uncontrolled, setUncontrolled] = React.useState(false)
   const open = controlled ?? uncontrolled
-  const setOpen = React.useCallback(
-    (v: boolean) => {
-      onOpenChange?.(v)
-      if (controlled === undefined) setUncontrolled(v)
-    },
-    [controlled, onOpenChange]
-  )
+  const setOpen = (v: boolean) => {
+    onOpenChange?.(v)
+    if (controlled === undefined) setUncontrolled(v)
+  }
 
-  return <Ctx.Provider value={{ open, setOpen }}>{children}</Ctx.Provider>
+  return (
+    <Ctx.Provider value={{ open, setOpen }}>
+      {children}
+    </Ctx.Provider>
+  )
 }
 
 function Trigger({
@@ -756,43 +709,51 @@ function Content({
   className?: string
 }) {
   const { open, setOpen } = useDialog()
+  const ref = React.useRef<HTMLDialogElement>(null)
+  const [visible, setVisible] = React.useState(false)
 
   React.useEffect(() => {
-    if (!open) return
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false)
+    const el = ref.current
+    if (!el) return
+    const onCancel = (e: Event) => {
+      e.preventDefault()
+      setOpen(false)
     }
-    document.addEventListener('keydown', onKey)
-    document.body.style.overflow = 'hidden'
+    el.addEventListener('cancel', onCancel)
+    if (open) {
+      if (!el.open) el.showModal()
+      document.body.style.overflow = 'hidden'
+      requestAnimationFrame(() => setVisible(true))
+      return () => {
+        el.removeEventListener('cancel', onCancel)
+        document.body.style.overflow = ''
+      }
+    }
+    setVisible(false)
+    const id = setTimeout(() => {
+      if (el.open) el.close()
+    }, 150)
     return () => {
-      document.removeEventListener('keydown', onKey)
-      document.body.style.overflow = ''
+      el.removeEventListener('cancel', onCancel)
+      clearTimeout(id)
     }
   }, [open, setOpen])
 
   return (
-    <div
-      className={cn(
-        styles.overlay,
-        open
-          ? 'opacity-100'
-          : 'opacity-0 pointer-events-none'
-      )}
+    <dialog
+      ref={ref}
+      className={cn(styles.base, visible ? 'opacity-100' : 'opacity-0 pointer-events-none')}
       onClick={(e) => {
         if (e.target === e.currentTarget) setOpen(false)
       }}
     >
-      <div
-        className={cn(
-          styles.content,
-          open ? 'scale-100' : 'scale-95',
-          className
+      <div className={cn(styles.content, visible ? 'scale-100' : 'scale-95', className)}>
+        {title && (
+          <h2 className={styles.title}>{title}</h2>
         )}
-      >
-        {title && <h2 className={styles.title}>{title}</h2>}
         {children}
       </div>
-    </div>
+    </dialog>
   )
 }
 
@@ -808,6 +769,14 @@ function Close({ className }: { className?: string }) {
   )
 }
 
+const Ctx = React.createContext<DialogCtx | null>(null)
+
+function useDialog() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Dialog compound used outside <Dialog>')
+  return ctx
+}
+
 export const Dialog = Object.assign(DialogRoot, {
   Trigger,
   Content,
@@ -851,15 +820,7 @@ interface DropdownCtx {
   align: keyof typeof styles.align
 }
 
-const Ctx = React.createContext<DropdownCtx | null>(null)
-
-function useDropdown() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error(
-    'Dropdown compound used outside <Dropdown>'
-  )
-  return ctx
-}
+type IconProp = React.ComponentType<{ className?: string }> | React.ReactElement
 
 function DropdownRoot({
   children,
@@ -925,50 +886,35 @@ function Content({
 }) {
   const { open, align } = useDropdown()
   return (
-    <div
-      className={cn(
-        styles.content,
-        styles.align[align],
-        open
-          ? 'opacity-100 scale-100'
-          : 'opacity-0 scale-95 pointer-events-none',
-        className
-      )}
-    >
+    <div className={cn(styles.content, styles.align[align], open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none', className)}>
       {children}
     </div>
   )
 }
 
-type IconProp =
-  | React.ComponentType<{ className?: string }>
-  | React.ReactElement
-
 function Item({
   children,
   onClick,
   icon: Icon,
   destructive,
   className,
+  ...props
 }: {
   children: React.ReactNode
   onClick?: () => void
   icon?: IconProp
   destructive?: boolean
   className?: string
-}) {
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) {
   const { setOpen } = useDropdown()
   return (
     <button
-      className={cn(
-        styles.item,
-        destructive && styles.destructive,
-        className
-      )}
+      className={cn(styles.item, destructive && styles.destructive, className)}
       onClick={() => {
         onClick?.()
         setOpen(false)
       }}
+      {...props}
     >
       {Icon && (
         React.isValidElement(Icon)
@@ -1018,6 +964,14 @@ function DropdownSeparator({
   )
 }
 
+const Ctx = React.createContext<DropdownCtx | null>(null)
+
+function useDropdown() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Dropdown compound used outside <Dropdown>')
+  return ctx
+}
+
 export const Dropdown = Object.assign(DropdownRoot, {
   Trigger,
   Content,
@@ -1040,8 +994,10 @@ const styles = {
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => (
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
+  className,
+  ...props
+}, ref) => (
     <input ref={ref} className={cn(styles.base, className)} {...props} />
   )
 )
@@ -1075,14 +1031,6 @@ interface PopoverCtx {
   position: keyof typeof styles.positions
 }
 
-const Ctx = React.createContext<PopoverCtx | null>(null)
-
-function usePopover() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error('Popover compound used outside <Popover>')
-  return ctx
-}
-
 function PopoverRoot({
   children,
   position = 'bottom',
@@ -1142,21 +1090,20 @@ function Content({
 }) {
   const { open, position } = usePopover()
   return (
-    <div
-      className={cn(
-        styles.content,
-        styles.positions[position],
-        open
-          ? 'opacity-100 scale-100'
-          : 'opacity-0 scale-95 pointer-events-none',
-        className
-      )}
-    >
+    <div className={cn(styles.content, styles.positions[position], open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none', className)}>
       {children}
     </div>
   )
 }
 
+const Ctx = React.createContext<PopoverCtx | null>(null)
+
+function usePopover() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Popover compound used outside <Popover>')
+  return ctx
+}
+
 export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content,
@@ -1238,14 +1185,6 @@ interface SelectCtx {
   onSelect: (v: string) => void
 }
 
-const Ctx = React.createContext<SelectCtx | null>(null)
-
-function useSelect() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error('Select compound used outside <Select>')
-  return ctx
-}
-
 function SelectRoot({
   children,
   value,
@@ -1290,16 +1229,18 @@ function Trigger({
   placeholder = 'Select...',
   children,
   className,
+  ...props
 }: {
   placeholder?: string
   children?: React.ReactNode
   className?: string
-}) {
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) {
   const { open, setOpen } = useSelect()
   return (
     <button
       className={cn(styles.trigger, className)}
       onClick={() => setOpen(!open)}
+      {...props}
     >
       <span className={!children ? styles.placeholder : undefined}>
         {children ?? placeholder}
@@ -1318,15 +1259,7 @@ function Menu({
 }) {
   const { open } = useSelect()
   return (
-    <div
-      className={cn(
-        styles.menu,
-        open
-          ? 'opacity-100 scale-100'
-          : 'opacity-0 scale-95 pointer-events-none',
-        className
-      )}
-    >
+    <div className={cn(styles.menu, open ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none', className)}>
       {children}
     </div>
   )
@@ -1336,26 +1269,32 @@ function Option({
   value: optValue,
   children,
   className,
+  ...props
 }: {
   value: string
   children: React.ReactNode
   className?: string
-}) {
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) {
   const { value, onSelect } = useSelect()
   return (
     <button
-      className={cn(
-        styles.option,
-        optValue === value && styles.selected,
-        className
-      )}
+      className={cn(styles.option, optValue === value && styles.selected, className)}
       onClick={() => onSelect(optValue)}
+      {...props}
     >
       {children}
     </button>
   )
 }
 
+const Ctx = React.createContext<SelectCtx | null>(null)
+
+function useSelect() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Select compound used outside <Select>')
+  return ctx
+}
+
 export const Select = Object.assign(SelectRoot, {
   Trigger,
   Menu,
@@ -1402,36 +1341,27 @@ const styles = {
   ),
 }
 
-interface SwitchProps {
+interface SwitchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
   checked?: boolean
   onChange?: (checked: boolean) => void
-  className?: string
 }
 
 export function Switch({
   checked = false,
   onChange,
   className,
+  ...props
 }: SwitchProps) {
   return (
     <button
       role="switch"
       aria-checked={checked}
       onClick={() => onChange?.(!checked)}
-      className={cn(
-        styles.base,
-        checked ? 'bg-primary' : 'bg-border',
-        className
-      )}
+      className={cn(styles.base, checked ? 'bg-primary' : 'bg-border', className)}
+      {...props}
     >
-      <span
-        className={cn(
-          styles.thumb,
-          checked
-            ? 'translate-x-[25px]'
-            : 'translate-x-[3px]'
-        )}
-      />
+      <span className={cn(styles.thumb, checked ? 'translate-x-[25px]' : 'translate-x-[3px]')} />
     </button>
   )
 }
@@ -1455,14 +1385,6 @@ interface TabsCtx {
   setValue: (v: string) => void
 }
 
-const Ctx = React.createContext<TabsCtx | null>(null)
-
-function useTabs() {
-  const ctx = React.useContext(Ctx)
-  if (!ctx) throw new Error('Tabs compound used outside <Tabs>')
-  return ctx
-}
-
 function TabsRoot({
   children,
   defaultValue,
@@ -1476,9 +1398,7 @@ function TabsRoot({
   onChange?: (value: string) => void
   className?: string
 }) {
-  const [uncontrolled, setUncontrolled] = React.useState(
-    defaultValue ?? ''
-  )
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? '')
   const value = controlled ?? uncontrolled
   const setValue = React.useCallback(
     (v: string) => {
@@ -1513,21 +1433,19 @@ function Tab({
   value: tabValue,
   children,
   className,
+  ...props
 }: {
   value: string
   children: React.ReactNode
   className?: string
-}) {
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) {
   const { value, setValue } = useTabs()
   const isActive = value === tabValue
   return (
     <button
-      className={cn(
-        styles.tab,
-        isActive ? styles.active : styles.inactive,
-        className
-      )}
+      className={cn(styles.tab, isActive ? styles.active : styles.inactive, className)}
       onClick={() => setValue(tabValue)}
+      {...props}
     >
       {children}
     </button>
@@ -1548,6 +1466,14 @@ function Panel({
   return <div className={className}>{children}</div>
 }
 
+const Ctx = React.createContext<TabsCtx | null>(null)
+
+function useTabs() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Tabs compound used outside <Tabs>')
+  return ctx
+}
+
 export const Tabs = Object.assign(TabsRoot, {
   List,
   Tab,
@@ -1568,10 +1494,10 @@ const styles = {
 
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
-export const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaProps
->(({ className, ...props }, ref) => (
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
+  className,
+  ...props
+}, ref) => (
   <textarea
     ref={ref}
     className={cn(styles.base, className)}
@@ -1668,4 +1594,4 @@ export function Tooltip({
     </span>
   )
 }
-`;var R=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],I={accordion:W,alert:K,avatar:X,badge:J,button:q,card:Q,checkbox:Y,dialog:Z,dropdown:ee,input:te,popover:oe,progress:ne,select:re,separator:se,switch:ae,tabs:ce,textarea:ie,theme:G,toast:le,tooltip:de};async function pe(t){let n=process.cwd();e.intro("drivn add");let c=z(n);if(c||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let o=await e.multiselect({message:"Select components to add",options:R.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let v=t.filter(o=>!R.find(s=>s.name===o));v.length&&(e.log.error(`Unknown components: ${v.join(", ")}`),e.log.info("Available: "+R.map(o=>o.name).join(", ")),e.outro("Cancelled"),process.exit(1));let d=t.includes("theme"),m=t.filter(o=>o!=="theme"),f=new Set,b=new Set,g=o=>{if(f.has(o))return;let s=R.find(a=>a.name===o);s&&(s.dependencies.forEach(a=>g(a)),s.npmDependencies?.forEach(a=>b.add(a)),f.add(o));};m.forEach(g),d&&b.add("next-themes");let x=[...f].filter(o=>!m.includes(o));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=c.typescript?"tsx":"jsx",N=join(n,c.paths.components);for(let o of f){let s=join(N,`${o}.${l}`);if(h(s)){let w=await e.confirm({message:`${o}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(w)||!w){e.log.warn(`Skipped ${o}`);continue}}let a=I[o];a=a.replace(/@\/utils/g,`@/${c.paths.utils.replace(/^src\//,"")}`),p(s,a),e.log.success(`${o} \u2192 ${c.paths.components}/${o}.${l}`);}if(d){let o=join(N,`theme-provider.${l}`);if(h(o)){let a=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(a)&&a?(p(o,I.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else p(o,I.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`);if(c.paths.globals){let a=join(n,c.paths.globals);if(h(a)){let w=F(a);w.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(p(a,w+A),e.log.success(`Theme tokens appended to ${i.cyan(c.paths.globals)}`));}else e.log.warn(`Globals file not found at ${c.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=c.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(b.size){let o=k(n),s=[...b],a=e.spinner();a.start("Installing packages");try{execSync(y(o,s),{cwd:n,stdio:"ignore"}),a.stop("Packages installed");}catch{a.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(o,s)}`);}}e.outro("Done.");}var ue={version:"1.0.2"};var S=new Command;S.name("drivn").description("Drivn \u2014 Modern UI components").version(ue.version);S.command("create").description("Initialize Drivn in your project").action(U);S.command("add [components...]").description("Add components to your project").action(pe);S.parse();
+`;var R=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],P={accordion:W,alert:X,avatar:q,badge:J,button:K,card:Q,checkbox:Y,dialog:Z,dropdown:ee,input:te,popover:oe,progress:ne,select:re,separator:se,switch:ae,tabs:ce,textarea:ie,theme:G,toast:le,tooltip:de};async function pe(t){let n=process.cwd();e.intro("drivn add");let c=V(n);if(c||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let o=await e.multiselect({message:"Select components to add",options:R.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let v=t.filter(o=>!R.find(s=>s.name===o));v.length&&(e.log.error(`Unknown components: ${v.join(", ")}`),e.log.info("Available: "+R.map(o=>o.name).join(", ")),e.outro("Cancelled"),process.exit(1));let d=t.includes("theme"),m=t.filter(o=>o!=="theme"),f=new Set,b=new Set,g=o=>{if(f.has(o))return;let s=R.find(a=>a.name===o);s&&(s.dependencies.forEach(a=>g(a)),s.npmDependencies?.forEach(a=>b.add(a)),f.add(o));};m.forEach(g),d&&b.add("next-themes");let x=[...f].filter(o=>!m.includes(o));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=c.typescript?"tsx":"jsx",N=join(n,c.paths.components);for(let o of f){let s=join(N,`${o}.${l}`);if(h(s)){let w=await e.confirm({message:`${o}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(w)||!w){e.log.warn(`Skipped ${o}`);continue}}let a=P[o];a=a.replace(/@\/utils/g,`@/${c.paths.utils.replace(/^src\//,"")}`),p(s,a),e.log.success(`${o} \u2192 ${c.paths.components}/${o}.${l}`);}if(d){let o=join(N,`theme-provider.${l}`);if(h(o)){let a=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(a)&&a?(p(o,P.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else p(o,P.theme),e.log.success(`theme-provider \u2192 ${c.paths.components}/theme-provider.${l}`);if(c.paths.globals){let a=join(n,c.paths.globals);if(h(a)){let w=F(a);w.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(p(a,w+L),e.log.success(`Theme tokens appended to ${i.cyan(c.paths.globals)}`));}else e.log.warn(`Globals file not found at ${c.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=c.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(b.size){let o=k(n),s=[...b],a=e.spinner();a.start("Installing packages");try{execSync(y(o,s),{cwd:n,stdio:"ignore"}),a.stop("Packages installed");}catch{a.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(o,s)}`);}}e.outro("Done.");}var ue={version:"1.1.0"};var D=new Command;D.name("drivn").description("Drivn \u2014 Modern UI components").version(ue.version);D.command("create").description("Initialize Drivn in your project").action(U);D.command("add [components...]").description("Add components to your project").action(pe);D.parse();

package/package.json

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