drivn 1.16.0 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +54 -54
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import {Command}from'commander';import*as n from'@clack/prompts';import
|
|
2
|
+
import {Command}from'commander';import*as n from'@clack/prompts';import m 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 V={next:"Next.js",react:"React"};function _(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")),s={...t.dependencies,...t.devDependencies},l="react";s.next&&(l="next");let d=existsSync(join(e,"src")),u=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:u}}var U="drivn.config.json";function K(e){let r=join(e,U);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function Y(e,r){let t=join(e,U);writeFileSync(t,JSON.stringify(r,null,2));}function Ye(e){existsSync(e)||mkdirSync(e,{recursive:true});}function h(e,r){Ye(dirname(e)),writeFileSync(e,r);}function j(e){return readFileSync(e,"utf-8")}function y(e){return existsSync(e)}function E(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":existsSync(join(e,"yarn.lock"))?"yarn":"npm"}function C(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:e==="yarn"?`yarn add ${t}`:`npm install ${t}`}function M(e){return e==="pnpm"?"pnpm dlx":e==="yarn"?"yarn dlx":"npx"}var w=`@import "tailwindcss";
|
|
3
3
|
|
|
4
4
|
:root {
|
|
5
5
|
/* Surfaces */
|
|
@@ -142,7 +142,7 @@ import { twMerge } from 'tailwind-merge'
|
|
|
142
142
|
export function cn(...inputs: ClassValue[]) {
|
|
143
143
|
return twMerge(clsx(inputs))
|
|
144
144
|
}
|
|
145
|
-
`,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(
|
|
145
|
+
`,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(y(join(e,r)))return r;return null}async function q(){let e=process.cwd();console.log(""),console.log(m.bgCyan(m.bold(m.black(" Drivn "))));let r;try{r=_(e),n.log.success(`Detected ${m.cyan(V[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(y(join(e,"drivn.config.json"))){let a=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(a)||!a)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",s=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:s,defaultValue:s})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils}},u=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${u}`);y(f)||h(f,Xe);let g=Je(e);if(g){let a=await n.confirm({message:`Found ${m.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(a)&&a&&(h(join(e,g),w),d.paths.globals=g,n.log.success(`Color tokens written to ${m.cyan(g)}`));}else {let a=r.srcDir?"src/styles/globals.css":"styles/globals.css",c=await n.text({message:"Where should the globals CSS file be created?",placeholder:a,defaultValue:a});n.isCancel(c)||(h(join(e,c),w),d.paths.globals=c,n.log.success(`Color tokens written to ${m.cyan(c)}`));}Y(e,d);let b=E(e),p=M(b),x=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(C(b,x),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${C(b,x)}`);}n.log.info(`Add components with: ${m.cyan(`${p} drivn add button`)}`),n.log.info(`Add dark/light theme: ${m.cyan(`${p} drivn add theme`)}`),n.outro("Drivn initialized");}var J=`'use client'
|
|
146
146
|
|
|
147
147
|
import { ThemeProvider as NextThemesProvider } from 'next-themes'
|
|
148
148
|
|
|
@@ -161,7 +161,7 @@ export function ThemeProvider({
|
|
|
161
161
|
</NextThemesProvider>
|
|
162
162
|
)
|
|
163
163
|
}
|
|
164
|
-
`;var
|
|
164
|
+
`;var Z=`'use client'
|
|
165
165
|
|
|
166
166
|
import * as React from 'react'
|
|
167
167
|
import { ChevronDown } from 'lucide-react'
|
|
@@ -293,7 +293,7 @@ export const Accordion = Object.assign(AccordionRoot, {
|
|
|
293
293
|
Trigger,
|
|
294
294
|
Content
|
|
295
295
|
})
|
|
296
|
-
`;var
|
|
296
|
+
`;var Q=`import * as React from 'react'
|
|
297
297
|
import { cn } from '@/utils/cn'
|
|
298
298
|
|
|
299
299
|
const styles = {
|
|
@@ -341,7 +341,7 @@ export function Alert({
|
|
|
341
341
|
</div>
|
|
342
342
|
)
|
|
343
343
|
}
|
|
344
|
-
`;var
|
|
344
|
+
`;var ee=`import * as React from 'react'
|
|
345
345
|
import { cn } from '@/utils/cn'
|
|
346
346
|
|
|
347
347
|
interface AspectRatioProps {
|
|
@@ -364,7 +364,7 @@ export function AspectRatio({
|
|
|
364
364
|
</div>
|
|
365
365
|
)
|
|
366
366
|
}
|
|
367
|
-
`;var
|
|
367
|
+
`;var te=`import * as React from 'react'
|
|
368
368
|
import { cn } from '@/utils/cn'
|
|
369
369
|
|
|
370
370
|
const styles = {
|
|
@@ -408,7 +408,7 @@ export function Avatar({
|
|
|
408
408
|
</div>
|
|
409
409
|
)
|
|
410
410
|
}
|
|
411
|
-
`;var
|
|
411
|
+
`;var ne=`import * as React from 'react'
|
|
412
412
|
import { cn } from '@/utils/cn'
|
|
413
413
|
|
|
414
414
|
const styles = {
|
|
@@ -438,7 +438,7 @@ export function Badge({ variant = 'default', className, children }: BadgeProps)
|
|
|
438
438
|
</span>
|
|
439
439
|
)
|
|
440
440
|
}
|
|
441
|
-
`;var
|
|
441
|
+
`;var oe=`import * as React from 'react'
|
|
442
442
|
import { cn } from '@/utils/cn'
|
|
443
443
|
import { ChevronRight, MoreHorizontal } from 'lucide-react'
|
|
444
444
|
|
|
@@ -554,7 +554,7 @@ export const Breadcrumb = Object.assign(BreadcrumbRoot, {
|
|
|
554
554
|
Separator: BreadcrumbSeparator,
|
|
555
555
|
Ellipsis,
|
|
556
556
|
})
|
|
557
|
-
`;var
|
|
557
|
+
`;var re=`import * as React from 'react'
|
|
558
558
|
import { Loader2 } from 'lucide-react'
|
|
559
559
|
import { cn } from '@/utils/cn'
|
|
560
560
|
|
|
@@ -634,7 +634,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
|
|
|
634
634
|
)
|
|
635
635
|
|
|
636
636
|
Button.displayName = 'Button'
|
|
637
|
-
`;var
|
|
637
|
+
`;var se=`'use client'
|
|
638
638
|
|
|
639
639
|
import * as React from 'react'
|
|
640
640
|
import {
|
|
@@ -810,7 +810,7 @@ export { type DateRange, type Locale }
|
|
|
810
810
|
export const Calendar = Object.assign(CalendarRoot, {
|
|
811
811
|
Range
|
|
812
812
|
})
|
|
813
|
-
`;var
|
|
813
|
+
`;var ae=`'use client'
|
|
814
814
|
|
|
815
815
|
import * as React from 'react'
|
|
816
816
|
import { CalendarDays } from 'lucide-react'
|
|
@@ -1034,7 +1034,7 @@ export { type DateRange, type Locale }
|
|
|
1034
1034
|
export const DatePicker = Object.assign(DatePickerRoot, {
|
|
1035
1035
|
Range,
|
|
1036
1036
|
})
|
|
1037
|
-
`;var
|
|
1037
|
+
`;var ie=`'use client'
|
|
1038
1038
|
|
|
1039
1039
|
import * as React from 'react'
|
|
1040
1040
|
import { Command as CommandPrimitive } from 'cmdk'
|
|
@@ -1265,7 +1265,7 @@ export const Command = Object.assign(CommandRoot, {
|
|
|
1265
1265
|
Shortcut,
|
|
1266
1266
|
Dialog: CommandDialog,
|
|
1267
1267
|
})
|
|
1268
|
-
`;var
|
|
1268
|
+
`;var ce=`'use client'
|
|
1269
1269
|
|
|
1270
1270
|
import * as React from 'react'
|
|
1271
1271
|
import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
|
|
@@ -1514,7 +1514,7 @@ export const Carousel = Object.assign(CarouselRoot, {
|
|
|
1514
1514
|
Next,
|
|
1515
1515
|
Dots
|
|
1516
1516
|
})
|
|
1517
|
-
`;var
|
|
1517
|
+
`;var le=`import * as React from 'react'
|
|
1518
1518
|
import { cn } from '@/utils/cn'
|
|
1519
1519
|
|
|
1520
1520
|
const styles = {
|
|
@@ -1581,7 +1581,7 @@ export const Card = Object.assign(CardRoot, {
|
|
|
1581
1581
|
Preview,
|
|
1582
1582
|
Info
|
|
1583
1583
|
})
|
|
1584
|
-
`;var
|
|
1584
|
+
`;var de=`'use client'
|
|
1585
1585
|
|
|
1586
1586
|
import * as React from 'react'
|
|
1587
1587
|
import { Check } from 'lucide-react'
|
|
@@ -1644,7 +1644,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
|
|
|
1644
1644
|
)
|
|
1645
1645
|
|
|
1646
1646
|
Checkbox.displayName = 'Checkbox'
|
|
1647
|
-
`;var
|
|
1647
|
+
`;var pe=`'use client'
|
|
1648
1648
|
|
|
1649
1649
|
import * as React from 'react'
|
|
1650
1650
|
import { Command as CommandPrimitive } from 'cmdk'
|
|
@@ -2039,7 +2039,7 @@ export const Combobox = Object.assign(ComboboxRoot, {
|
|
|
2039
2039
|
Item,
|
|
2040
2040
|
Separator: ComboboxSeparator,
|
|
2041
2041
|
})
|
|
2042
|
-
`;var
|
|
2042
|
+
`;var ue=`'use client'
|
|
2043
2043
|
|
|
2044
2044
|
import * as React from 'react'
|
|
2045
2045
|
import { cn } from '@/utils/cn'
|
|
@@ -2153,7 +2153,7 @@ export const Collapsible = Object.assign(CollapsibleRoot, {
|
|
|
2153
2153
|
Trigger,
|
|
2154
2154
|
Content,
|
|
2155
2155
|
})
|
|
2156
|
-
`;var
|
|
2156
|
+
`;var me=`'use client'
|
|
2157
2157
|
|
|
2158
2158
|
import * as React from 'react'
|
|
2159
2159
|
import { ChevronRight } from 'lucide-react'
|
|
@@ -2430,7 +2430,7 @@ export const ContextMenu = Object.assign(ContextMenuRoot, {
|
|
|
2430
2430
|
Label: ContextMenuLabel,
|
|
2431
2431
|
Separator: ContextMenuSeparator,
|
|
2432
2432
|
})
|
|
2433
|
-
`;var
|
|
2433
|
+
`;var fe=`'use client'
|
|
2434
2434
|
|
|
2435
2435
|
import * as React from 'react'
|
|
2436
2436
|
import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react'
|
|
@@ -2681,7 +2681,7 @@ function DataTablePagination({
|
|
|
2681
2681
|
export const DataTable = Object.assign(DataTableRoot, {
|
|
2682
2682
|
Pagination: DataTablePagination
|
|
2683
2683
|
})
|
|
2684
|
-
`;var
|
|
2684
|
+
`;var ge=`'use client'
|
|
2685
2685
|
|
|
2686
2686
|
import * as React from 'react'
|
|
2687
2687
|
import { X } from 'lucide-react'
|
|
@@ -2837,7 +2837,7 @@ export const Dialog = Object.assign(DialogRoot, {
|
|
|
2837
2837
|
Trigger,
|
|
2838
2838
|
Content,
|
|
2839
2839
|
})
|
|
2840
|
-
`;var
|
|
2840
|
+
`;var be=`'use client'
|
|
2841
2841
|
|
|
2842
2842
|
import * as React from 'react'
|
|
2843
2843
|
import { X } from 'lucide-react'
|
|
@@ -3056,7 +3056,7 @@ export const Drawer = Object.assign(DrawerRoot, {
|
|
|
3056
3056
|
Header,
|
|
3057
3057
|
Footer,
|
|
3058
3058
|
})
|
|
3059
|
-
`;var
|
|
3059
|
+
`;var he=`'use client'
|
|
3060
3060
|
|
|
3061
3061
|
import * as React from 'react'
|
|
3062
3062
|
import { cn } from '@/utils/cn'
|
|
@@ -3254,7 +3254,7 @@ export const Dropdown = Object.assign(DropdownRoot, {
|
|
|
3254
3254
|
Label,
|
|
3255
3255
|
Separator: DropdownSeparator
|
|
3256
3256
|
})
|
|
3257
|
-
`;var
|
|
3257
|
+
`;var ve=`import * as React from 'react'
|
|
3258
3258
|
import { cn } from '@/utils/cn'
|
|
3259
3259
|
|
|
3260
3260
|
const styles = {
|
|
@@ -3277,7 +3277,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
|
|
|
3277
3277
|
)
|
|
3278
3278
|
|
|
3279
3279
|
Input.displayName = 'Input'
|
|
3280
|
-
`;var
|
|
3280
|
+
`;var xe=`import * as React from 'react'
|
|
3281
3281
|
import { cn } from '@/utils/cn'
|
|
3282
3282
|
|
|
3283
3283
|
const styles = {
|
|
@@ -3334,7 +3334,7 @@ function Group({
|
|
|
3334
3334
|
}
|
|
3335
3335
|
|
|
3336
3336
|
export const Kbd = Object.assign(KbdRoot, { Group })
|
|
3337
|
-
`;var
|
|
3337
|
+
`;var ye=`import * as React from 'react'
|
|
3338
3338
|
import { cn } from '@/utils/cn'
|
|
3339
3339
|
|
|
3340
3340
|
export function Label({
|
|
@@ -3351,7 +3351,7 @@ export function Label({
|
|
|
3351
3351
|
/>
|
|
3352
3352
|
)
|
|
3353
3353
|
}
|
|
3354
|
-
`;var
|
|
3354
|
+
`;var Ne=`'use client'
|
|
3355
3355
|
|
|
3356
3356
|
import * as React from 'react'
|
|
3357
3357
|
import { ChevronDown } from 'lucide-react'
|
|
@@ -3502,7 +3502,7 @@ export const NavigationMenu = Object.assign(NavigationMenuRoot, {
|
|
|
3502
3502
|
Content,
|
|
3503
3503
|
Link
|
|
3504
3504
|
})
|
|
3505
|
-
`;var
|
|
3505
|
+
`;var Ce=`import * as React from 'react'
|
|
3506
3506
|
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
|
|
3507
3507
|
import { cn } from '@/utils/cn'
|
|
3508
3508
|
|
|
@@ -3635,7 +3635,7 @@ export const Pagination = Object.assign(PaginationRoot, {
|
|
|
3635
3635
|
Next,
|
|
3636
3636
|
Ellipsis: PaginationEllipsis,
|
|
3637
3637
|
})
|
|
3638
|
-
`;var
|
|
3638
|
+
`;var we=`'use client'
|
|
3639
3639
|
|
|
3640
3640
|
import * as React from 'react'
|
|
3641
3641
|
import { cn } from '@/utils/cn'
|
|
@@ -3741,7 +3741,7 @@ export const Popover = Object.assign(PopoverRoot, {
|
|
|
3741
3741
|
Trigger,
|
|
3742
3742
|
Content
|
|
3743
3743
|
})
|
|
3744
|
-
`;var
|
|
3744
|
+
`;var Re=`import * as React from 'react'
|
|
3745
3745
|
import { cn } from '@/utils/cn'
|
|
3746
3746
|
|
|
3747
3747
|
const styles = {
|
|
@@ -3779,7 +3779,7 @@ export function Progress({
|
|
|
3779
3779
|
</div>
|
|
3780
3780
|
)
|
|
3781
3781
|
}
|
|
3782
|
-
`;var
|
|
3782
|
+
`;var ke=`'use client'
|
|
3783
3783
|
|
|
3784
3784
|
import * as React from 'react'
|
|
3785
3785
|
import { cn } from '@/utils/cn'
|
|
@@ -3928,7 +3928,7 @@ function useRadioGroup() {
|
|
|
3928
3928
|
}
|
|
3929
3929
|
|
|
3930
3930
|
export const RadioGroup = Object.assign(RadioGroupRoot, { Item })
|
|
3931
|
-
`;var
|
|
3931
|
+
`;var Se=`'use client'
|
|
3932
3932
|
|
|
3933
3933
|
import * as React from 'react'
|
|
3934
3934
|
import { ChevronDown } from 'lucide-react'
|
|
@@ -4084,7 +4084,7 @@ export const Select = Object.assign(SelectRoot, {
|
|
|
4084
4084
|
Menu,
|
|
4085
4085
|
Option
|
|
4086
4086
|
})
|
|
4087
|
-
`;var
|
|
4087
|
+
`;var Pe=`import * as React from 'react'
|
|
4088
4088
|
import { cn } from '@/utils/cn'
|
|
4089
4089
|
|
|
4090
4090
|
const styles = {
|
|
@@ -4130,7 +4130,7 @@ export function ScrollArea({
|
|
|
4130
4130
|
</div>
|
|
4131
4131
|
)
|
|
4132
4132
|
}
|
|
4133
|
-
`;var
|
|
4133
|
+
`;var Te=`import * as React from 'react'
|
|
4134
4134
|
import { cn } from '@/utils/cn'
|
|
4135
4135
|
|
|
4136
4136
|
const styles = {
|
|
@@ -4154,7 +4154,7 @@ export function Separator({
|
|
|
4154
4154
|
/>
|
|
4155
4155
|
)
|
|
4156
4156
|
}
|
|
4157
|
-
`;var
|
|
4157
|
+
`;var De=`import * as React from 'react'
|
|
4158
4158
|
import { cn } from '@/utils/cn'
|
|
4159
4159
|
|
|
4160
4160
|
export function Skeleton({
|
|
@@ -4171,7 +4171,7 @@ export function Skeleton({
|
|
|
4171
4171
|
/>
|
|
4172
4172
|
)
|
|
4173
4173
|
}
|
|
4174
|
-
`;var
|
|
4174
|
+
`;var Ie=`'use client'
|
|
4175
4175
|
|
|
4176
4176
|
import * as React from 'react'
|
|
4177
4177
|
import { ChevronDown, PanelLeft } from 'lucide-react'
|
|
@@ -4457,7 +4457,7 @@ export const Sidebar = Object.assign(SidebarRoot, {
|
|
|
4457
4457
|
Separator: SidebarSeparator,
|
|
4458
4458
|
CollapseButton,
|
|
4459
4459
|
})
|
|
4460
|
-
`;var
|
|
4460
|
+
`;var Ee=`'use client'
|
|
4461
4461
|
|
|
4462
4462
|
import * as React from 'react'
|
|
4463
4463
|
import { cn } from '@/utils/cn'
|
|
@@ -4602,7 +4602,7 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(({
|
|
|
4602
4602
|
)
|
|
4603
4603
|
|
|
4604
4604
|
Slider.displayName = 'Slider'
|
|
4605
|
-
`;var
|
|
4605
|
+
`;var Me=`'use client'
|
|
4606
4606
|
|
|
4607
4607
|
import * as React from 'react'
|
|
4608
4608
|
import { Check } from 'lucide-react'
|
|
@@ -4751,7 +4751,7 @@ function useStepper() {
|
|
|
4751
4751
|
export const Stepper = Object.assign(StepperRoot, {
|
|
4752
4752
|
Item
|
|
4753
4753
|
})
|
|
4754
|
-
`;var
|
|
4754
|
+
`;var Le=`'use client'
|
|
4755
4755
|
|
|
4756
4756
|
import * as React from 'react'
|
|
4757
4757
|
import { cn } from '@/utils/cn'
|
|
@@ -4793,7 +4793,7 @@ export function Switch({
|
|
|
4793
4793
|
</button>
|
|
4794
4794
|
)
|
|
4795
4795
|
}
|
|
4796
|
-
`;var
|
|
4796
|
+
`;var Oe=`'use client'
|
|
4797
4797
|
|
|
4798
4798
|
import * as React from 'react'
|
|
4799
4799
|
import { cn } from '@/utils/cn'
|
|
@@ -4907,7 +4907,7 @@ export const Tabs = Object.assign(TabsRoot, {
|
|
|
4907
4907
|
Tab,
|
|
4908
4908
|
Panel
|
|
4909
4909
|
})
|
|
4910
|
-
`;var
|
|
4910
|
+
`;var Ae=`import * as React from 'react'
|
|
4911
4911
|
import { cn } from '@/utils/cn'
|
|
4912
4912
|
|
|
4913
4913
|
const styles = {
|
|
@@ -4934,7 +4934,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
|
|
|
4934
4934
|
))
|
|
4935
4935
|
|
|
4936
4936
|
Textarea.displayName = 'Textarea'
|
|
4937
|
-
`;var
|
|
4937
|
+
`;var He=`'use client'
|
|
4938
4938
|
|
|
4939
4939
|
import * as React from 'react'
|
|
4940
4940
|
import { Clock } from 'lucide-react'
|
|
@@ -5156,7 +5156,7 @@ function TimePickerInput({
|
|
|
5156
5156
|
export const TimePicker = Object.assign(TimePickerRoot, {
|
|
5157
5157
|
Input: TimePickerInput
|
|
5158
5158
|
})
|
|
5159
|
-
`;var
|
|
5159
|
+
`;var Be=`'use client'
|
|
5160
5160
|
|
|
5161
5161
|
import * as React from 'react'
|
|
5162
5162
|
import { Toaster as Sonner, toast } from 'sonner'
|
|
@@ -5199,7 +5199,7 @@ function Toaster() {
|
|
|
5199
5199
|
}
|
|
5200
5200
|
|
|
5201
5201
|
export { Toaster, toast }
|
|
5202
|
-
`;var
|
|
5202
|
+
`;var je=`'use client'
|
|
5203
5203
|
|
|
5204
5204
|
import * as React from 'react'
|
|
5205
5205
|
import { cn } from '@/utils/cn'
|
|
@@ -5361,7 +5361,7 @@ const Ctx = React.createContext<ToggleGroupCtx | null>(null)
|
|
|
5361
5361
|
export const Toggle = Object.assign(ToggleButton, {
|
|
5362
5362
|
Group: ToggleGroupRoot,
|
|
5363
5363
|
})
|
|
5364
|
-
`;var
|
|
5364
|
+
`;var ze=`import * as React from 'react'
|
|
5365
5365
|
import { cn } from '@/utils/cn'
|
|
5366
5366
|
|
|
5367
5367
|
const styles = {
|
|
@@ -5539,7 +5539,7 @@ export const Table = Object.assign(TableRoot, {
|
|
|
5539
5539
|
Head,
|
|
5540
5540
|
Cell,
|
|
5541
5541
|
})
|
|
5542
|
-
`;var
|
|
5542
|
+
`;var Ve=`import * as React from 'react'
|
|
5543
5543
|
import { cn } from '@/utils/cn'
|
|
5544
5544
|
|
|
5545
5545
|
const styles = {
|
|
@@ -5584,7 +5584,7 @@ export function Tooltip({
|
|
|
5584
5584
|
</span>
|
|
5585
5585
|
)
|
|
5586
5586
|
}
|
|
5587
|
-
`;var
|
|
5587
|
+
`;var _e=`
|
|
5588
5588
|
/* react-day-picker theme integration */
|
|
5589
5589
|
.rdp-root {
|
|
5590
5590
|
--rdp-accent-color: var(--primary);
|
|
@@ -5595,7 +5595,7 @@ export function Tooltip({
|
|
|
5595
5595
|
--rdp-selected-border: none;
|
|
5596
5596
|
--rdp-day_button-border: none;
|
|
5597
5597
|
}
|
|
5598
|
-
`,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:[]}],
|
|
5598
|
+
`,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:[]}],R={accordion:Z,alert:Q,"aspect-ratio":ee,avatar:te,badge:ne,breadcrumb:oe,button:re,calendar:se,"date-picker":ae,command:ie,carousel:ce,card:le,checkbox:de,combobox:pe,collapsible:ue,"context-menu":me,"data-table":fe,dialog:ge,drawer:be,dropdown:he,input:ve,kbd:xe,label:ye,"navigation-menu":Ne,pagination:Ce,popover:we,progress:Re,"radio-group":ke,select:Se,"scroll-area":Pe,separator:Te,skeleton:De,sidebar:Ie,slider:Ee,stepper:Me,switch:Le,table:ze,tabs:Oe,textarea:Ae,"time-picker":He,theme:J,toast:Be,toggle:je,tooltip:Ve};async function $e(e){let r=process.cwd();n.intro("drivn add");let t=K(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(a=>({label:a.name,hint:a.description,value:a.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let s=e.filter(o=>!v.find(a=>a.name===o));s.length&&(n.log.error(`Unknown components: ${s.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"),u=new Set,f=new Set,g=o=>{if(u.has(o))return;let a=v.find(c=>c.name===o);a&&(a.dependencies.forEach(c=>g(c)),a.npmDependencies?.forEach(c=>f.add(c)),u.add(o));};d.forEach(g),l&&f.add("next-themes");let b=[...u].filter(o=>!d.includes(o));b.length&&n.log.info(`Required dependency: ${b.join(", ")}`);let p=t.typescript?"tsx":"jsx",x=join(r,t.paths.components);for(let o of u){let a=join(x,`${o}.${p}`);if(y(a)){let P=await n.confirm({message:`${o}.${p} exists. Overwrite?`,initialValue:false});if(n.isCancel(P)||!P){n.log.warn(`Skipped ${o}`);continue}}let c=R[o];c=c.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),h(a,c),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${p}`);}if(l){let o=join(x,`theme-provider.${p}`);if(y(o)){let c=await n.confirm({message:`theme-provider.${p} exists. Overwrite?`,initialValue:false});!n.isCancel(c)&&c?(h(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${p}`)):n.log.warn("Skipped theme-provider");}else h(o,R.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${p}`);if(t.paths.globals){let c=join(r,t.paths.globals);if(y(c)){let P=j(c);P.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(h(c,P+k),n.log.success(`Theme tokens appended to ${m.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 a=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(m.bold("Complete the setup:")),n.log.message(""),n.log.message(m.bold(`${m.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(m.cyan(` import { ThemeProvider } from "${a}/theme-provider"`)),n.log.message(""),n.log.message(m.bold(`${m.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(m.cyan(" <html suppressHydrationWarning>")),n.log.message(""),n.log.message(m.bold(`${m.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(m.cyan(" <ThemeProvider>")),n.log.message(m.cyan(" {children}")),n.log.message(m.cyan(" </ThemeProvider>")),n.log.message("");}if(u.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(y(o)){let a=j(o);a.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(h(o,a+_e),n.log.success(`Calendar tokens appended to ${m.cyan(t.paths.globals)}`));}}if(f.size){let o=E(r),a=[...f],c=n.spinner();c.start("Installing packages");try{execSync(C(o,a),{cwd:r,stdio:"ignore"}),c.stop("Packages installed");}catch{c.stop("Failed to install packages"),n.log.warn(`Run manually: ${C(o,a)}`);}}n.outro("Done.");}var z=`# Drivn Component Conventions
|
|
5599
5599
|
|
|
5600
5600
|
## Core Philosophy
|
|
5601
5601
|
- **Zero runtime UI deps** \u2014 No Radix, no cva, no external UI primitives. Pure React + Tailwind.
|
|
@@ -5708,13 +5708,13 @@ import { cn } from '@/utils/cn'
|
|
|
5708
5708
|
- Components declare internal deps (other Drivn components)
|
|
5709
5709
|
- Some components need npm packages (react-day-picker, cmdk, embla-carousel-react, sonner)
|
|
5710
5710
|
- The CLI resolves and installs all dependencies automatically
|
|
5711
|
-
`;var L={version:"1.
|
|
5712
|
-
${
|
|
5713
|
-
${
|
|
5714
|
-
# (default: src/components/ui/)`),{content:[{type:"text",text:JSON.stringify({componentsToInstall:[...d],npmDependencies:[...
|
|
5715
|
-
${
|
|
5711
|
+
`;var L={version:"1.17.0"};var nt=["npm","pnpm","yarn"];function O(e){return v.find(r=>r.name===e)}function ot(e){let r=new Set,t=s=>{if(r.has(s))return;let l=O(s);l&&(l.dependencies.forEach(d=>t(d)),r.add(s));};return t(e),r.delete(e),[...r]}async function Ge(){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 s=O(t);if(!s)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:s.name,description:s.description,dependencies:s.dependencies,npmDependencies:s.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 s=O(t);if(!s)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=ot(t);return {content:[{type:"text",text:JSON.stringify({name:s.name,description:s.description,dependencies:s.dependencies,npmDependencies:s.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 s=t.toLowerCase(),l=v.filter(d=>d.name.includes(s)||d.description.toLowerCase().includes(s));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(nt).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:s})=>{let l=s??"npm",d=new Set,u=new Set,f=[],g=p=>{if(d.has(p))return;let x=O(p);if(!x){f.push(p);return}x.dependencies.forEach(o=>g(o)),x.npmDependencies.forEach(o=>u.add(o)),d.add(p);};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 b=[];return b.push(`# Install components via CLI
|
|
5712
|
+
${M(l)} drivn@latest add ${[...d].join(" ")}`),u.size&&b.push(`# Install required npm dependencies
|
|
5713
|
+
${C(l,[...u])}`),b.push(`# Components will be installed to your configured components directory
|
|
5714
|
+
# (default: src/components/ui/)`),{content:[{type:"text",text:JSON.stringify({componentsToInstall:[...d],npmDependencies:[...u],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 === */
|
|
5715
|
+
${w}
|
|
5716
5716
|
|
|
5717
5717
|
/* === Theme Tokens === */
|
|
5718
|
-
${k}`}]})),e.tool("get_drivn_rules","Get Drivn coding conventions and component patterns",{},async()=>({content:[{type:"text",text:
|
|
5718
|
+
${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:`${w}
|
|
5719
5719
|
|
|
5720
|
-
${k}`}]}));for(let t of v){let
|
|
5720
|
+
${k}`}]}));for(let t of v){let s=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,s,{description:t.description},async()=>({contents:[{uri:s,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(q);I.command("add [components...]").description("Add components to your project").action($e);I.command("mcp").description("Start the Drivn MCP server").action(Ge);I.parse();
|