drivn 1.3.1 → 1.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as e from'@clack/prompts';import i from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var A={next:"Next.js",react:"React"};function B(t){let n=join(t,"package.json");if(!existsSync(n))throw new Error("package.json not found");let a=JSON.parse(readFileSync(n,"utf-8")),b={...a.dependencies,...a.devDependencies},p="react";b.next&&(p="next");let g=existsSync(join(t,"src")),u=existsSync(join(t,"tsconfig.json"));return {framework:p,srcDir:g,typescript:u}}var V="drivn.config.json";function _(t){let n=join(t,V);return existsSync(n)?JSON.parse(readFileSync(n,"utf-8")):null}function $(t,n){let a=join(t,V);writeFileSync(a,JSON.stringify(n,null,2));}function Pe(t){existsSync(t)||mkdirSync(t,{recursive:true});}function d(t,n){Pe(dirname(t)),writeFileSync(t,n);}function M(t){return readFileSync(t,"utf-8")}function m(t){return existsSync(t)}function P(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,n){let a=n.join(" ");return t==="pnpm"?`pnpm add ${a}`:`npm install ${a}`}function F(t){return t==="pnpm"?"pnpm dlx":"npx"}var D=`@import "tailwindcss";
+import {Command}from'commander';import*as e from'@clack/prompts';import i from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var A={next:"Next.js",react:"React"};function B(t){let o=join(t,"package.json");if(!existsSync(o))throw new Error("package.json not found");let a=JSON.parse(readFileSync(o,"utf-8")),b={...a.dependencies,...a.devDependencies},p="react";b.next&&(p="next");let g=existsSync(join(t,"src")),u=existsSync(join(t,"tsconfig.json"));return {framework:p,srcDir:g,typescript:u}}var V="drivn.config.json";function $(t){let o=join(t,V);return existsSync(o)?JSON.parse(readFileSync(o,"utf-8")):null}function _(t,o){let a=join(t,V);writeFileSync(a,JSON.stringify(o,null,2));}function Te(t){existsSync(t)||mkdirSync(t,{recursive:true});}function d(t,o){Te(dirname(t)),writeFileSync(t,o);}function M(t){return readFileSync(t,"utf-8")}function m(t){return existsSync(t)}function P(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,o){let a=o.join(" ");return t==="pnpm"?`pnpm add ${a}`:`npm install ${a}`}function F(t){return t==="pnpm"?"pnpm dlx":"npx"}var S=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var Ee=`import { type ClassValue, clsx } from 'clsx'
+`;var Me=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,Le=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ie(t){for(let n of Le)if(m(join(t,n)))return n;return null}async function G(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let n;try{n=B(t),e.log.success(`Detected ${i.cyan(A[n.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(m(join(t,"drivn.config.json"))){let r=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(r)||!r)&&(e.cancel("Setup cancelled"),process.exit(0));}let a=n.srcDir?"src/components/ui":"components/ui",b=n.srcDir?"src/utils":"utils",p=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:a,defaultValue:a}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:b,defaultValue:b})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),g={framework:n.framework,typescript:n.typescript,paths:{components:p.components,utils:p.utils},installed:[]},u=n.typescript?"ts":"js",v=join(t,p.utils,`cn.${u}`);m(v)||d(v,Ee);let h=Ie(t);if(h){let r=await e.confirm({message:`Found ${i.cyan(h)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(r)&&r&&(d(join(t,h),D),g.paths.globals=h,e.log.success(`Color tokens written to ${i.cyan(h)}`));}else {let r=n.srcDir?"src/styles/globals.css":"styles/globals.css",c=await e.text({message:"Where should the globals CSS file be created?",placeholder:r,defaultValue:r});e.isCancel(c)||(d(join(t,c),D),g.paths.globals=c,e.log.success(`Color tokens written to ${i.cyan(c)}`));}$(t,g);let x=P(t),l=F(x),N=["clsx","tailwind-merge","lucide-react"],o=e.spinner();o.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var K=`'use client'
+`,Oe=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ae(t){for(let o of Oe)if(m(join(t,o)))return o;return null}async function G(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let o;try{o=B(t),e.log.success(`Detected ${i.cyan(A[o.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(m(join(t,"drivn.config.json"))){let r=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(r)||!r)&&(e.cancel("Setup cancelled"),process.exit(0));}let a=o.srcDir?"src/components/ui":"components/ui",b=o.srcDir?"src/utils":"utils",p=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:a,defaultValue:a}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:b,defaultValue:b})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),g={framework:o.framework,typescript:o.typescript,paths:{components:p.components,utils:p.utils},installed:[]},u=o.typescript?"ts":"js",v=join(t,p.utils,`cn.${u}`);m(v)||d(v,Me);let h=Ae(t);if(h){let r=await e.confirm({message:`Found ${i.cyan(h)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(r)&&r&&(d(join(t,h),S),g.paths.globals=h,e.log.success(`Color tokens written to ${i.cyan(h)}`));}else {let r=o.srcDir?"src/styles/globals.css":"styles/globals.css",c=await e.text({message:"Where should the globals CSS file be created?",placeholder:r,defaultValue:r});e.isCancel(c)||(d(join(t,c),S),g.paths.globals=c,e.log.success(`Color tokens written to ${i.cyan(c)}`));}_(t,g);let x=P(t),l=F(x),N=["clsx","tailwind-merge","lucide-react"],n=e.spinner();n.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),n.stop("Dependencies installed");}catch{n.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var K=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -161,7 +161,7 @@ export function ThemeProvider({
     </NextThemesProvider>
   )
 }
-`;var Y=`'use client'
+`;var U=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -293,7 +293,7 @@ export const Accordion = Object.assign(AccordionRoot, {
   Trigger,
   Content
 })
-`;var W=`import * as React from 'react'
+`;var Y=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -341,7 +341,7 @@ export function Alert({
     </div>
   )
 }
-`;var U=`import * as React from 'react'
+`;var W=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1491,19 +1491,19 @@ export const Carousel = Object.assign(CarouselRoot, {
   Next,
   Dots
 })
-`;var oe=`import * as React from 'react'
+`;var ne=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
   base: cn(
+    'w-48 aspect-square flex flex-col',
     'bg-card border border-border rounded-[20px]',
     'overflow-hidden transition-all duration-200'
   ),
   hover: 'hover:bg-accent hover:border-border hover:-translate-y-1',
   preview: cn(
-    'h-[140px] flex items-center justify-center',
-    'border-b border-border p-6',
-    'bg-[radial-gradient(ellipse_at_50%_50%,hsl(239_84%_67%_/_0.08)_0%,transparent_70%)]'
+    'flex-1 flex items-center justify-center',
+    'border-b border-border p-6'
   ),
   info: 'p-5 flex justify-between items-center',
 }
@@ -1558,7 +1558,7 @@ export const Card = Object.assign(CardRoot, {
   Preview,
   Info
 })
-`;var ne=`'use client'
+`;var oe=`'use client'
 
 import * as React from 'react'
 import { Check } from 'lucide-react'
@@ -2004,6 +2004,63 @@ Input.displayName = 'Input'
 `;var ce=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
+const styles = {
+  base: cn(
+    'pointer-events-none inline-flex items-center',
+    'justify-center select-none',
+    'h-5 w-fit min-w-5 gap-1 rounded-sm px-1',
+    'font-mono text-xs font-medium',
+    '[&_svg:not([class*=size-])]:size-3'
+  ),
+  variants: {
+    default: 'bg-muted text-muted-foreground',
+    outline: 'border border-border text-muted-foreground',
+  },
+  group: 'inline-flex items-center gap-1',
+}
+
+interface KbdProps {
+  variant?: keyof typeof styles.variants
+  className?: string
+  children: React.ReactNode
+}
+
+function KbdRoot({
+  variant = 'default',
+  className,
+  children,
+}: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        styles.base,
+        styles.variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+function Group({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <kbd className={cn(styles.group, className)}>
+      {children}
+    </kbd>
+  )
+}
+
+export const Kbd = Object.assign(KbdRoot, { Group })
+`;var ie=`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
 export function Label({
   className,
   ...props
@@ -2018,7 +2075,7 @@ export function Label({
     />
   )
 }
-`;var ie=`import * as React from 'react'
+`;var le=`import * as React from 'react'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -2151,7 +2208,7 @@ export const Pagination = Object.assign(PaginationRoot, {
   Next,
   Ellipsis: PaginationEllipsis,
 })
-`;var le=`'use client'
+`;var de=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2256,7 +2313,7 @@ export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content
 })
-`;var de=`import * as React from 'react'
+`;var pe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2294,7 +2351,7 @@ export function Progress({
     </div>
   )
 }
-`;var pe=`'use client'
+`;var ue=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2443,7 +2500,7 @@ function useRadioGroup() {
 }
 
 export const RadioGroup = Object.assign(RadioGroupRoot, { Item })
-`;var ue=`'use client'
+`;var me=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -2597,7 +2654,7 @@ export const Select = Object.assign(SelectRoot, {
   Menu,
   Option
 })
-`;var me=`import * as React from 'react'
+`;var fe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2621,7 +2678,438 @@ export function Separator({
     />
   )
 }
-`;var fe=`'use client'
+`;var ge=`'use client'
+
+import * as React from 'react'
+import { ChevronDown, PanelLeft } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: cn(
+    'flex flex-col h-full bg-card border-border overflow-hidden',
+    'transition-[width] duration-200 ease-in-out'
+  ),
+  variants: {
+    default: 'border-r',
+    floating: cn(
+      'border rounded-xl shadow-lg m-2',
+      'h-[calc(100%-16px)]'
+    ),
+  },
+  width: {
+    expanded: 'w-[240px]',
+    collapsed: 'w-[60px]',
+  },
+  header: cn(
+    'flex items-center gap-2 px-3 py-3',
+    'border-b border-border shrink-0'
+  ),
+  content: 'flex-1 overflow-y-auto px-2 py-2 flex flex-col gap-1',
+  footer: cn(
+    'flex items-center mt-auto px-3 py-3',
+    'border-t border-border shrink-0'
+  ),
+  group: 'py-2',
+  groupHeading: cn(
+    'flex items-center justify-between w-full',
+    'px-2 py-1.5 text-xs font-medium text-muted-foreground',
+    'hover:text-foreground/80 transition-colors cursor-pointer'
+  ),
+  groupIcon: cn(
+    'w-3 h-3 text-muted-foreground/60',
+    'transition-transform duration-200'
+  ),
+  groupPanel: 'grid transition-[grid-template-rows] duration-200',
+  groupContent: 'overflow-hidden flex flex-col gap-1',
+  item: cn(
+    'flex items-center gap-3 w-full px-2 py-2',
+    'text-sm text-muted-foreground rounded-lg',
+    'hover:bg-accent hover:text-foreground',
+    'transition-colors cursor-pointer'
+  ),
+  itemActive: 'bg-accent text-foreground font-medium',
+  itemIcon: 'w-4 h-4 shrink-0',
+  itemBadge: cn(
+    'ml-auto text-xs font-medium px-1.5 py-0.5',
+    'rounded-md bg-primary/10 text-primary'
+  ),
+  separator: 'mx-2 my-2 h-px border-0 bg-muted',
+  collapseBtn: cn(
+    'flex items-center justify-center',
+    'w-7 h-7 rounded-md ml-auto shrink-0',
+    'text-muted-foreground hover:text-foreground',
+    'hover:bg-accent transition-colors cursor-pointer'
+  ),
+}
+
+type Variant = keyof typeof styles.variants
+type Side = 'left' | 'right'
+type IconProp = React.ComponentType<{ className?: string }> | React.ReactElement
+
+interface SidebarCtx {
+  collapsed: boolean
+  setCollapsed: (v: boolean) => void
+  variant: Variant
+  side: Side
+}
+
+function SidebarRoot({
+  children,
+  defaultCollapsed = false,
+  collapsed: controlled,
+  onCollapsedChange,
+  variant = 'default',
+  side = 'left',
+  className,
+}: {
+  children: React.ReactNode
+  defaultCollapsed?: boolean
+  collapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+  variant?: Variant
+  side?: Side
+  className?: string
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed)
+  const collapsed = controlled ?? uncontrolled
+  const setCollapsed = React.useCallback(
+    (v: boolean) => {
+      onCollapsedChange?.(v)
+      if (controlled === undefined) setUncontrolled(v)
+    },
+    [controlled, onCollapsedChange]
+  )
+
+  return (
+    <Ctx.Provider value={{ collapsed, setCollapsed, variant, side }}>
+      <aside
+        className={cn(styles.base, styles.variants[variant], collapsed ? styles.width.collapsed : styles.width.expanded, className)}
+      >
+        {children}
+      </aside>
+    </Ctx.Provider>
+  )
+}
+
+function Header({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { collapsed } = useSidebar()
+  return (
+    <div className={cn(styles.header, collapsed && 'justify-center px-2 gap-0', className)}>
+      {children}
+    </div>
+  )
+}
+
+function CollapseButton({
+  className,
+}: {
+  className?: string
+}) {
+  const { collapsed, setCollapsed } = useSidebar()
+  return (
+    <button
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      className={cn(styles.collapseBtn, collapsed && 'ml-0', className)}
+      onClick={() => setCollapsed(!collapsed)}
+    >
+      <PanelLeft className={cn('w-4 h-4 transition-transform duration-200', collapsed && 'rotate-180')} />
+    </button>
+  )
+}
+
+function SidebarContent({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(styles.content, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Footer({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  const { collapsed } = useSidebar()
+  return (
+    <div className={cn(styles.footer, collapsed && 'px-2 justify-center overflow-hidden', className)}>
+      {children}
+    </div>
+  )
+}
+
+function Group({
+  children,
+  heading,
+  defaultOpen = true,
+  collapsible = true,
+  className,
+}: {
+  children: React.ReactNode
+  heading?: string
+  defaultOpen?: boolean
+  collapsible?: boolean
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(defaultOpen)
+  const { collapsed } = useSidebar()
+
+  return (
+    <div className={cn(styles.group, className)}>
+      {heading && !collapsed && (
+        collapsible ? (
+          <button
+            className={styles.groupHeading}
+            onClick={() => setOpen(!open)}
+          >
+            {heading}
+            <ChevronDown className={cn(styles.groupIcon, open && 'rotate-180')} />
+          </button>
+        ) : (
+          <span className={styles.groupHeading}>
+            {heading}
+          </span>
+        )
+      )}
+      <div
+        className={styles.groupPanel}
+        style={{ gridTemplateRows: !heading || open || collapsed ? '1fr' : '0fr' }}
+      >
+        <div className={styles.groupContent}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Item({
+  children,
+  icon: Icon,
+  active,
+  badge,
+  className,
+  ...props
+}: {
+  children: React.ReactNode
+  icon?: IconProp
+  active?: boolean
+  badge?: string | number
+  className?: string
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { collapsed } = useSidebar()
+  return (
+    <button
+      className={cn(styles.item, active && styles.itemActive, collapsed && 'justify-center px-0', className)}
+      title={collapsed ? String(children) : undefined}
+      {...props}
+    >
+      {Icon && (
+        React.isValidElement(Icon)
+          ? Icon
+          : <Icon className={styles.itemIcon} />
+      )}
+      {!collapsed && (
+        <>
+          <span className="truncate">{children}</span>
+          {badge !== undefined && (
+            <span className={styles.itemBadge}>
+              {badge}
+            </span>
+          )}
+        </>
+      )}
+    </button>
+  )
+}
+
+function SidebarSeparator({
+  className,
+}: {
+  className?: string
+}) {
+  return <hr className={cn(styles.separator, className)} />
+}
+
+const Ctx = React.createContext<SidebarCtx | null>(null)
+
+function useSidebar() {
+  const ctx = React.useContext(Ctx)
+  if (!ctx) throw new Error('Sidebar compound used outside <Sidebar>')
+  return ctx
+}
+
+export { useSidebar }
+
+export const Sidebar = Object.assign(SidebarRoot, {
+  Header,
+  Content: SidebarContent,
+  Footer,
+  Group,
+  Item,
+  Separator: SidebarSeparator,
+  CollapseButton,
+})
+`;var he=`'use client'
+
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+const styles = {
+  base: 'relative cursor-pointer touch-none select-none',
+  track: 'relative bg-border rounded-full',
+  range: 'absolute bg-foreground rounded-full',
+  thumb: cn(
+    'absolute rounded-full bg-foreground shadow-sm',
+    'cursor-grab active:cursor-grabbing'
+  ),
+  horizontal: {
+    base: 'w-full',
+    track: 'w-full',
+    range: 'inset-y-0 left-0',
+    thumb: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
+  },
+  vertical: {
+    base: 'h-48',
+    track: 'h-full',
+    range: 'inset-x-0 bottom-0',
+    thumb: 'left-1/2 -translate-x-1/2 translate-y-1/2',
+  },
+  sizes: {
+    sm: { track: 'h-1', thumb: 'w-3 h-3', vTrack: 'w-1' },
+    md: { track: 'h-1.5', thumb: 'w-4 h-4', vTrack: 'w-1.5' },
+    lg: { track: 'h-2', thumb: 'w-5 h-5', vTrack: 'w-2' },
+  },
+  disabled: 'opacity-50 cursor-default pointer-events-none',
+}
+
+interface SliderProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'defaultValue'
+> {
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  orientation?: 'horizontal' | 'vertical'
+  onChange?: (value: number) => void
+  disabled?: boolean
+  size?: keyof typeof styles.sizes
+  name?: string
+}
+
+function snap(val: number, min: number, step: number) {
+  return Math.round((val - min) / step) * step + min
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(({
+  value,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = 'horizontal',
+  onChange,
+  disabled,
+  size = 'md',
+  name,
+  className,
+  ...props
+}, ref) => {
+    const [internal, setInternal] = React.useState(defaultValue)
+    const isControlled = value !== undefined
+    const current = isControlled ? value : internal
+    const trackRef = React.useRef<HTMLDivElement>(null)
+
+    const isH = orientation === 'horizontal'
+    const s = styles.sizes[size]
+    const dir = isH ? styles.horizontal : styles.vertical
+    const pct = (Math.min(Math.max(current, min), max) - min) / (max - min) * 100
+
+    function resolve(x: number, y: number) {
+      const el = trackRef.current
+      if (!el) return
+      const r = el.getBoundingClientRect()
+      const ratio = isH
+        ? (x - r.left) / r.width
+        : 1 - (y - r.top) / r.height
+      const raw = min + ratio * (max - min)
+      const clamped = Math.min(Math.max(snap(raw, min, step), min), max)
+      if (!isControlled) setInternal(clamped)
+      onChange?.(clamped)
+    }
+
+    function handlePointerDown(e: React.PointerEvent) {
+      if (disabled) return
+      e.preventDefault()
+      resolve(e.clientX, e.clientY)
+      const onMove = (ev: PointerEvent) =>
+        resolve(ev.clientX, ev.clientY)
+      const onUp = () => {
+        document.removeEventListener('pointermove', onMove)
+        document.removeEventListener('pointerup', onUp)
+      }
+      document.addEventListener('pointermove', onMove)
+      document.addEventListener('pointerup', onUp)
+    }
+
+    return (
+      <div
+        className={cn(styles.base, dir.base, disabled && styles.disabled, className)}
+        {...props}
+      >
+        <div
+          ref={trackRef}
+          className={cn(styles.track, dir.track, isH ? s.track : s.vTrack)}
+          onPointerDown={handlePointerDown}
+        >
+          <div
+            className={cn(styles.range, dir.range)}
+            style={isH ? { width: \`\${pct}%\` } : { height: \`\${pct}%\` }}
+          />
+          <div
+            role="slider"
+            aria-valuenow={current}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            className={cn(styles.thumb, dir.thumb, s.thumb)}
+            style={isH ? { left: \`\${pct}%\` } : { bottom: \`\${pct}%\` }}
+          />
+        </div>
+        <input
+          ref={ref}
+          type="range"
+          name={name}
+          value={current}
+          min={min}
+          max={max}
+          step={step}
+          className="sr-only"
+          tabIndex={-1}
+          readOnly
+        />
+      </div>
+    )
+  }
+)
+
+Slider.displayName = 'Slider'
+`;var be=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2662,7 +3150,7 @@ export function Switch({
     </button>
   )
 }
-`;var ge=`'use client'
+`;var ve=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2776,7 +3264,7 @@ export const Tabs = Object.assign(TabsRoot, {
   Tab,
   Panel
 })
-`;var he=`import * as React from 'react'
+`;var xe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2803,7 +3291,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var be=`'use client'
+`;var ye=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -2846,7 +3334,7 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var ve=`import * as React from 'react'
+`;var Ne=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3020,7 +3508,7 @@ export const Table = Object.assign(TableRoot, {
   Head,
   Cell,
 })
-`;var xe=`import * as React from 'react'
+`;var Ce=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3065,7 +3553,7 @@ export function Tooltip({
     </span>
   )
 }
-`;var ye=`
+`;var Re=`
 /* react-day-picker theme integration */
 .rdp-root {
   --rdp-accent-color: var(--primary);
@@ -3076,4 +3564,4 @@ export function Tooltip({
   --rdp-selected-border: none;
   --rdp-day_button-border: none;
 }
-`,w=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],S={accordion:Y,alert:W,avatar:U,badge:q,breadcrumb:X,button:J,calendar:Q,"date-picker":Z,command:ee,carousel:te,card:oe,checkbox:ne,dialog:re,dropdown:se,input:ae,label:ce,pagination:ie,popover:le,progress:de,"radio-group":pe,select:ue,separator:me,switch:fe,table:ve,tabs:ge,textarea:he,theme:K,toast:be,tooltip:xe};async function Ne(t){let n=process.cwd();e.intro("drivn add");let a=_(n);if(a||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let o=await e.multiselect({message:"Select components to add",options:w.map(r=>({label:r.name,hint:r.description,value:r.name})),required:true});e.isCancel(o)&&(e.cancel("Cancelled"),process.exit(0)),t=o;}let b=t.filter(o=>!w.find(r=>r.name===o));b.length&&(e.log.error(`Unknown components: ${b.join(", ")}`),e.log.info("Available: "+w.map(o=>o.name).join(", ")),e.outro("Cancelled"),process.exit(1));let p=t.includes("theme"),g=t.filter(o=>o!=="theme"),u=new Set,v=new Set,h=o=>{if(u.has(o))return;let r=w.find(c=>c.name===o);r&&(r.dependencies.forEach(c=>h(c)),r.npmDependencies?.forEach(c=>v.add(c)),u.add(o));};g.forEach(h),p&&v.add("next-themes");let x=[...u].filter(o=>!g.includes(o));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=a.typescript?"tsx":"jsx",N=join(n,a.paths.components);for(let o of u){let r=join(N,`${o}.${l}`);if(m(r)){let C=await e.confirm({message:`${o}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(C)||!C){e.log.warn(`Skipped ${o}`);continue}}let c=S[o];c=c.replace(/@\/utils/g,`@/${a.paths.utils.replace(/^src\//,"")}`),d(r,c),e.log.success(`${o} \u2192 ${a.paths.components}/${o}.${l}`);}if(p){let o=join(N,`theme-provider.${l}`);if(m(o)){let c=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(c)&&c?(d(o,S.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else d(o,S.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`);if(a.paths.globals){let c=join(n,a.paths.globals);if(m(c)){let C=M(c);C.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(d(c,C+O),e.log.success(`Theme tokens appended to ${i.cyan(a.paths.globals)}`));}else e.log.warn(`Globals file not found at ${a.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let r=a.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${r}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(u.has("calendar")&&a.paths.globals){let o=join(n,a.paths.globals);if(m(o)){let r=M(o);r.includes(".rdp-root")?e.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(d(o,r+ye),e.log.success(`Calendar tokens appended to ${i.cyan(a.paths.globals)}`));}}if(v.size){let o=P(n),r=[...v],c=e.spinner();c.start("Installing packages");try{execSync(y(o,r),{cwd:n,stdio:"ignore"}),c.stop("Packages installed");}catch{c.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(o,r)}`);}}e.outro("Done.");}var Ce={version:"1.3.1"};var T=new Command;T.name("drivn").description("Drivn \u2014 Modern UI components").version(Ce.version);T.command("create").description("Initialize Drivn in your project").action(G);T.command("add [components...]").description("Add components to your project").action(Ne);T.parse();
+`,w=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"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:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"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:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],D={accordion:U,alert:Y,avatar:W,badge:q,breadcrumb:X,button:J,calendar:Q,"date-picker":Z,command:ee,carousel:te,card:ne,checkbox:oe,dialog:re,dropdown:se,input:ae,kbd:ce,label:ie,pagination:le,popover:de,progress:pe,"radio-group":ue,select:me,separator:fe,sidebar:ge,slider:he,switch:be,table:Ne,tabs:ve,textarea:xe,theme:K,toast:ye,tooltip:Ce};async function we(t){let o=process.cwd();e.intro("drivn add");let a=$(o);if(a||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let n=await e.multiselect({message:"Select components to add",options:w.map(r=>({label:r.name,hint:r.description,value:r.name})),required:true});e.isCancel(n)&&(e.cancel("Cancelled"),process.exit(0)),t=n;}let b=t.filter(n=>!w.find(r=>r.name===n));b.length&&(e.log.error(`Unknown components: ${b.join(", ")}`),e.log.info("Available: "+w.map(n=>n.name).join(", ")),e.outro("Cancelled"),process.exit(1));let p=t.includes("theme"),g=t.filter(n=>n!=="theme"),u=new Set,v=new Set,h=n=>{if(u.has(n))return;let r=w.find(c=>c.name===n);r&&(r.dependencies.forEach(c=>h(c)),r.npmDependencies?.forEach(c=>v.add(c)),u.add(n));};g.forEach(h),p&&v.add("next-themes");let x=[...u].filter(n=>!g.includes(n));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=a.typescript?"tsx":"jsx",N=join(o,a.paths.components);for(let n of u){let r=join(N,`${n}.${l}`);if(m(r)){let C=await e.confirm({message:`${n}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(C)||!C){e.log.warn(`Skipped ${n}`);continue}}let c=D[n];c=c.replace(/@\/utils/g,`@/${a.paths.utils.replace(/^src\//,"")}`),d(r,c),e.log.success(`${n} \u2192 ${a.paths.components}/${n}.${l}`);}if(p){let n=join(N,`theme-provider.${l}`);if(m(n)){let c=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(c)&&c?(d(n,D.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else d(n,D.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`);if(a.paths.globals){let c=join(o,a.paths.globals);if(m(c)){let C=M(c);C.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(d(c,C+O),e.log.success(`Theme tokens appended to ${i.cyan(a.paths.globals)}`));}else e.log.warn(`Globals file not found at ${a.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let r=a.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${r}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(u.has("calendar")&&a.paths.globals){let n=join(o,a.paths.globals);if(m(n)){let r=M(n);r.includes(".rdp-root")?e.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(d(n,r+Re),e.log.success(`Calendar tokens appended to ${i.cyan(a.paths.globals)}`));}}if(v.size){let n=P(o),r=[...v],c=e.spinner();c.start("Installing packages");try{execSync(y(n,r),{cwd:o,stdio:"ignore"}),c.stop("Packages installed");}catch{c.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(n,r)}`);}}e.outro("Done.");}var ke={version:"1.5.0"};var T=new Command;T.name("drivn").description("Drivn \u2014 Modern UI components").version(ke.version);T.command("create").description("Initialize Drivn in your project").action(G);T.command("add [components...]").description("Add components to your project").action(we);T.parse();

package/package.json

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