sprawlify 0.0.108 → 0.0.109
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.mjs +244 -67
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -8,7 +8,7 @@ import { existsSync } from "fs";
|
|
|
8
8
|
import prompts from "prompts";
|
|
9
9
|
import { faker } from "@faker-js/faker";
|
|
10
10
|
//#region package.json
|
|
11
|
-
var version = "0.0.
|
|
11
|
+
var version = "0.0.109";
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/utils/file-helper.ts
|
|
14
14
|
const FILE_BACKUP_SUFFIX = ".bak";
|
|
@@ -190,7 +190,7 @@ const PRESETS = { monochrome: {
|
|
|
190
190
|
react: {
|
|
191
191
|
dependencies: {
|
|
192
192
|
react: "^18.2.0",
|
|
193
|
-
"@sprawlify/react": "^0.0.
|
|
193
|
+
"@sprawlify/react": "^0.0.108",
|
|
194
194
|
"lucide-react": "^0.577.0",
|
|
195
195
|
"class-variance-authority": "^0.7.1",
|
|
196
196
|
clsx: "^2.1.1",
|
|
@@ -211,7 +211,7 @@ const PRESETS = { monochrome: {
|
|
|
211
211
|
"lucide-react"
|
|
212
212
|
],
|
|
213
213
|
files: [{
|
|
214
|
-
content: "\"use client\"
|
|
214
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nfunction Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n );\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"group not-last:border-b\", className)}\n {...props}\n />\n );\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\n return (\n <AccordionPrimitive.ItemTrigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n {children}\n <AccordionPrimitive.ItemIndicator className=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\n <ChevronDownIcon\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none shrink-0\"\n />\n </AccordionPrimitive.ItemIndicator>\n </AccordionPrimitive.ItemTrigger>\n );\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {\n return (\n <AccordionPrimitive.ItemContent\n data-slot=\"accordion-content\"\n className=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n {...props}\n >\n <div\n className={cn(\n \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n className,\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.ItemContent>\n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
|
|
215
215
|
type: "registry:ui",
|
|
216
216
|
path: "accordion.tsx"
|
|
217
217
|
}]
|
|
@@ -225,16 +225,30 @@ const PRESETS = { monochrome: {
|
|
|
225
225
|
"@sprawlify/react"
|
|
226
226
|
],
|
|
227
227
|
files: [{
|
|
228
|
-
content: "\"use client\"
|
|
228
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst alertVariants = cva(\n \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>) {\n return (\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"root\"\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"title\"\n data-slot=\"alert-title\"\n className={cn(\n \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"description\"\n data-slot=\"alert-description\"\n className={cn(\n \"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"action\"\n data-slot=\"alert-action\"\n className={cn(\"absolute top-2 right-2\", className)}\n {...props}\n />\n );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n",
|
|
229
229
|
type: "registry:ui",
|
|
230
230
|
path: "alert.tsx"
|
|
231
231
|
}]
|
|
232
232
|
},
|
|
233
|
+
{
|
|
234
|
+
name: "alert-dialog",
|
|
235
|
+
dependencies: [
|
|
236
|
+
"react",
|
|
237
|
+
"@sprawlify/react",
|
|
238
|
+
"@/lib/utils",
|
|
239
|
+
"@/components/ui/button"
|
|
240
|
+
],
|
|
241
|
+
files: [{
|
|
242
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/react/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n return <Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogBackdrop({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n return (\n <AlertDialogPrimitive.Backdrop\n data-slot=\"alert-dialog-backdrop\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n size?: \"default\" | \"sm\";\n}) {\n return (\n <AlertDialogPortal>\n <AlertDialogBackdrop />\n <AlertDialogPrimitive.Positioner>\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n data-size={size}\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n className,\n )}\n {...props}\n />\n </AlertDialogPrimitive.Positioner>\n </AlertDialogPortal>\n );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-header\"\n className={cn(\n \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-footer\"\n className={cn(\n \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogMedia({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-media\"\n className={cn(\n \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n return (\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n className={cn(\n \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n return (\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n className={cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n value = \"cancel\",\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n return (\n <Button variant={variant} size={size} asChild>\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-cancel\"\n value={value}\n className={cn(className)}\n {...props}\n />\n </Button>\n );\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n return (\n <Button variant={variant} size={size} asChild>\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-action\"\n className={cn(className)}\n {...props}\n />\n </Button>\n );\n}\n\nexport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogAction,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogBackdrop,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n};\n",
|
|
243
|
+
type: "registry:ui",
|
|
244
|
+
path: "alert-dialog.tsx"
|
|
245
|
+
}]
|
|
246
|
+
},
|
|
233
247
|
{
|
|
234
248
|
name: "aspect-ratio",
|
|
235
249
|
dependencies: ["@sprawlify/react"],
|
|
236
250
|
files: [{
|
|
237
|
-
content: "\"use client\"
|
|
251
|
+
content: "\"use client\";\n\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/react/aspect-ratio\";\n\nfunction AspectRatio({\n children,\n ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n return (\n <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props}>\n <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n {children}\n </AspectRatioPrimitive.Content>\n </AspectRatioPrimitive.Root>\n );\n}\n\nexport { AspectRatio };\n",
|
|
238
252
|
type: "registry:ui",
|
|
239
253
|
path: "aspect-ratio.tsx"
|
|
240
254
|
}]
|
|
@@ -247,7 +261,7 @@ const PRESETS = { monochrome: {
|
|
|
247
261
|
"@/lib/utils"
|
|
248
262
|
],
|
|
249
263
|
files: [{
|
|
250
|
-
content: "\"use client\"
|
|
264
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n size?: \"default\" | \"sm\" | \"lg\";\n}) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(\n \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", className)}\n {...props}\n />\n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-scope=\"avatar\"\n data-part=\"badge\"\n data-slot=\"avatar-badge\"\n className={cn(\n \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"avatar\"\n data-paert=\"group\"\n data-slot=\"avatar-group\"\n className={cn(\n \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"avatar\"\n data-paert=\"group-count\"\n data-slot=\"avatar-group-count\"\n className={cn(\n \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n",
|
|
251
265
|
type: "registry:ui",
|
|
252
266
|
path: "avatar.tsx"
|
|
253
267
|
}]
|
|
@@ -261,7 +275,7 @@ const PRESETS = { monochrome: {
|
|
|
261
275
|
"@sprawlify/react"
|
|
262
276
|
],
|
|
263
277
|
files: [{
|
|
264
|
-
content: "\"use client\"
|
|
278
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction Badge({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.span> & VariantProps<typeof badgeVariants>) {\n return (\n <sprawlify.span\n data-scope=\"badge\"\n data-part=\"root\"\n data-slot=\"badge\"\n data-variant={variant}\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nexport { Badge, badgeVariants };\n",
|
|
265
279
|
type: "registry:ui",
|
|
266
280
|
path: "badge.tsx"
|
|
267
281
|
}]
|
|
@@ -275,7 +289,7 @@ const PRESETS = { monochrome: {
|
|
|
275
289
|
"@sprawlify/react"
|
|
276
290
|
],
|
|
277
291
|
files: [{
|
|
278
|
-
content: "\"use client\"
|
|
292
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive:\n \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.button> & VariantProps<typeof buttonVariants>) {\n return (\n <sprawlify.button\n data-scope=\"button\"\n data-part=\"root\"\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Button, buttonVariants };\n",
|
|
279
293
|
type: "registry:ui",
|
|
280
294
|
path: "button.tsx"
|
|
281
295
|
}]
|
|
@@ -289,7 +303,7 @@ const PRESETS = { monochrome: {
|
|
|
289
303
|
"@sprawlify/react"
|
|
290
304
|
],
|
|
291
305
|
files: [{
|
|
292
|
-
content: "\"use client\"
|
|
306
|
+
content: "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonGroupVariants = cva(\n \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n },\n);\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>) {\n return (\n <sprawlify.div\n data-scope=\"button-group\"\n data-part=\"root\"\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={cn(buttonGroupVariants({ orientation, className }))}\n {...props}\n />\n );\n}\n\nfunction ButtonGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n className={cn(\n \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-scope=\"button-group\"\n data-part=\"separator\"\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n",
|
|
293
307
|
type: "registry:ui",
|
|
294
308
|
path: "button-group.tsx"
|
|
295
309
|
}]
|
|
@@ -302,7 +316,7 @@ const PRESETS = { monochrome: {
|
|
|
302
316
|
"@sprawlify/react"
|
|
303
317
|
],
|
|
304
318
|
files: [{
|
|
305
|
-
content: "\"use client\"
|
|
319
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & { size?: \"default\" | \"sm\" }) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"root\"\n data-slot=\"card\"\n data-size={size}\n className={cn(\n \"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"header\"\n data-slot=\"card-header\"\n className={cn(\n \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"title\"\n data-slot=\"card-title\"\n className={cn(\n \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"description\"\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"action\"\n data-slot=\"card-action\"\n className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n {...props}\n />\n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"content\"\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"footer\"\n data-slot=\"card-footer\"\n className={cn(\n \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n",
|
|
306
320
|
type: "registry:ui",
|
|
307
321
|
path: "card.tsx"
|
|
308
322
|
}]
|
|
@@ -316,7 +330,7 @@ const PRESETS = { monochrome: {
|
|
|
316
330
|
"lucide-react"
|
|
317
331
|
],
|
|
318
332
|
files: [{
|
|
319
|
-
content: "\"use client\"
|
|
333
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n <CheckboxPrimitive.HiddenInput />\n </CheckboxPrimitive.Root>\n );\n}\n\nexport { Checkbox };\n",
|
|
320
334
|
type: "registry:ui",
|
|
321
335
|
path: "checkbox.tsx"
|
|
322
336
|
}]
|
|
@@ -325,7 +339,7 @@ const PRESETS = { monochrome: {
|
|
|
325
339
|
name: "collapsible",
|
|
326
340
|
dependencies: ["@sprawlify/react"],
|
|
327
341
|
files: [{
|
|
328
|
-
content: "\"use client\"
|
|
342
|
+
content: "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/react/collapsible\";\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n return <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
|
|
329
343
|
type: "registry:ui",
|
|
330
344
|
path: "collapsible.tsx"
|
|
331
345
|
}]
|
|
@@ -339,7 +353,7 @@ const PRESETS = { monochrome: {
|
|
|
339
353
|
"lucide-react"
|
|
340
354
|
],
|
|
341
355
|
files: [{
|
|
342
|
-
content: "\"use client\"
|
|
356
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return (\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n positioning={{ offset: { mainAxis: 4 } }}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n className={cn(\n \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n data-slot=\"dropdown-menu-checkbox-item-indicator\"\n >\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n <span\n className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n data-slot=\"dropdown-menu-radio-item-indicator\"\n >\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n",
|
|
343
357
|
type: "registry:ui",
|
|
344
358
|
path: "dropdown-menu.tsx"
|
|
345
359
|
}]
|
|
@@ -352,7 +366,7 @@ const PRESETS = { monochrome: {
|
|
|
352
366
|
"@sprawlify/react"
|
|
353
367
|
],
|
|
354
368
|
files: [{
|
|
355
|
-
content: "\"use client\"
|
|
369
|
+
content: "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Empty({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"empty\"\n data-part=\"root\"\n data-slot=\"empty\"\n className={cn(\n \"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"empty-header\"\n className={cn(\"gap-2 flex max-w-sm flex-col items-center\", className)}\n {...props}\n />\n );\n}\n\nconst emptyMediaVariants = cva(\n \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction EmptyMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof emptyMediaVariants>) {\n return (\n <sprawlify.div\n data-slot=\"empty-icon\"\n data-variant={variant}\n className={cn(emptyMediaVariants({ variant, className }))}\n {...props}\n />\n );\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"empty-title\"\n className={cn(\"text-sm font-medium tracking-tight\", className)}\n {...props}\n />\n );\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n return (\n <sprawlify.p\n data-slot=\"empty-description\"\n className={cn(\n \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"empty-content\"\n className={cn(\n \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n",
|
|
356
370
|
type: "registry:ui",
|
|
357
371
|
path: "empty.tsx"
|
|
358
372
|
}]
|
|
@@ -368,7 +382,7 @@ const PRESETS = { monochrome: {
|
|
|
368
382
|
"@sprawlify/react"
|
|
369
383
|
],
|
|
370
384
|
files: [{
|
|
371
|
-
content: "\"use client\"
|
|
385
|
+
content: "\"use client\";\n\nimport { useMemo } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof sprawlify.fieldset>) {\n return (\n <sprawlify.fieldset\n data-scope=\"field\"\n data-part=\"set\"\n data-slot=\"field-set\"\n className={cn(\n \"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<typeof sprawlify.legend> & { variant?: \"legend\" | \"label\" }) {\n return (\n <sprawlify.legend\n data-scope=\"field\"\n data-part=\"legend\"\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"group\"\n data-slot=\"field-group\"\n className={cn(\n \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n responsive:\n \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n});\n\nfunction Field({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof fieldVariants>) {\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"field\"\n data-part=\"root\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"content\"\n data-slot=\"field-content\"\n className={cn(\"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\", className)}\n {...props}\n />\n );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n return (\n <Label\n data-scope=\"field\"\n data-part=\"label\"\n data-slot=\"field-label\"\n className={cn(\n \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"title\"\n data-slot=\"field-title\"\n className={cn(\n \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n return (\n <sprawlify.p\n data-scope=\"field\"\n data-part=\"description\"\n data-slot=\"field-description\"\n className={cn(\n \"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n children?: React.ReactNode;\n}) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"separator\"\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n \"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\",\n className,\n )}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <span\n className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n data-scope=\"field\"\n data-part=\"separator-content\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </sprawlify.div>\n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <sprawlify.div\n role=\"alert\"\n data-scope=\"field\"\n data-part=\"error\"\n data-slot=\"field-error\"\n className={cn(\"text-destructive text-sm font-normal\", className)}\n {...props}\n >\n {content}\n </sprawlify.div>\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n};\n",
|
|
372
386
|
type: "registry:ui",
|
|
373
387
|
path: "field.tsx"
|
|
374
388
|
}]
|
|
@@ -381,7 +395,7 @@ const PRESETS = { monochrome: {
|
|
|
381
395
|
"@sprawlify/react"
|
|
382
396
|
],
|
|
383
397
|
files: [{
|
|
384
|
-
content: "\"use client\"
|
|
398
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <sprawlify.input\n type={type}\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n className={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n",
|
|
385
399
|
type: "registry:ui",
|
|
386
400
|
path: "input.tsx"
|
|
387
401
|
}]
|
|
@@ -398,7 +412,7 @@ const PRESETS = { monochrome: {
|
|
|
398
412
|
"@sprawlify/react"
|
|
399
413
|
],
|
|
400
414
|
files: [{
|
|
401
|
-
content: "\"use client\"
|
|
415
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n className={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.textarea>) {\n return (\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n",
|
|
402
416
|
type: "registry:ui",
|
|
403
417
|
path: "input-group.tsx"
|
|
404
418
|
}]
|
|
@@ -413,7 +427,7 @@ const PRESETS = { monochrome: {
|
|
|
413
427
|
"@sprawlify/react"
|
|
414
428
|
],
|
|
415
429
|
files: [{
|
|
416
|
-
content: "\"use client\"
|
|
430
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n role=\"list\"\n data-scope=\"item\"\n data-part=\"group\"\n data-slot=\"item-group\"\n className={cn(\n \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-scope=\"item\"\n data-part=\"separator\"\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n );\n}\n\nconst itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemVariants>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"root\"\n data-slot=\"item\"\n data-variant={variant}\n data-size={size}\n className={cn(itemVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image:\n \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction ItemMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemMediaVariants>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"media\"\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n );\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"content\"\n data-slot=\"item-content\"\n className={cn(\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"title\"\n data-slot=\"item-title\"\n className={cn(\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n return (\n <sprawlify.p\n data-scope=\"item\"\n data-part=\"description\"\n data-slot=\"item-description\"\n className={cn(\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"actions\"\n data-slot=\"item-actions\"\n className={cn(\"gap-2 flex items-center\", className)}\n {...props}\n />\n );\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"header\"\n data-slot=\"item-header\"\n className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n {...props}\n />\n );\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"footer\"\n data-slot=\"item-footer\"\n className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n {...props}\n />\n );\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n};\n",
|
|
417
431
|
type: "registry:ui",
|
|
418
432
|
path: "item.tsx"
|
|
419
433
|
}]
|
|
@@ -422,7 +436,7 @@ const PRESETS = { monochrome: {
|
|
|
422
436
|
name: "kbd",
|
|
423
437
|
dependencies: ["@/lib/utils", "@sprawlify/react"],
|
|
424
438
|
files: [{
|
|
425
|
-
content: "\"use client\"
|
|
439
|
+
content: "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n return (\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"root\"\n data-slot=\"kbd\"\n className={cn(\n \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n return (\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"group\"\n data-slot=\"kbd-group\"\n className={cn(\"gap-1 inline-flex items-center\", className)}\n {...props}\n />\n );\n}\n\nexport { Kbd, KbdGroup };\n",
|
|
426
440
|
type: "registry:ui",
|
|
427
441
|
path: "kbd.tsx"
|
|
428
442
|
}]
|
|
@@ -435,7 +449,7 @@ const PRESETS = { monochrome: {
|
|
|
435
449
|
"@sprawlify/react"
|
|
436
450
|
],
|
|
437
451
|
files: [{
|
|
438
|
-
content: "\"use client\"
|
|
452
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof sprawlify.label>) {\n return (\n <sprawlify.label\n data-scope=\"label\"\n data-part=\"root\"\n data-slot=\"label\"\n className={cn(\n \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Label };\n",
|
|
439
453
|
type: "registry:ui",
|
|
440
454
|
path: "label.tsx"
|
|
441
455
|
}]
|
|
@@ -448,7 +462,7 @@ const PRESETS = { monochrome: {
|
|
|
448
462
|
"lucide-react"
|
|
449
463
|
],
|
|
450
464
|
files: [{
|
|
451
|
-
content: "\"use client\"
|
|
465
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n return (\n <div\n className={cn(\n \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n className,\n )}\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n data-size={size}\n >\n <select\n data-slot=\"native-select\"\n data-size={size}\n className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n {...props}\n />\n <ChevronDownIcon\n className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n aria-hidden=\"true\"\n data-slot=\"native-select-icon\"\n />\n </div>\n );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n return (\n <option\n data-scope=\"native-select\"\n data-part=\"option\"\n data-slot=\"native-select-option\"\n {...props}\n />\n );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n return (\n <optgroup\n data-scope=\"native-select\"\n data-part=\"optgroup\"\n data-slot=\"native-select-optgroup\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
|
|
452
466
|
type: "registry:ui",
|
|
453
467
|
path: "native-select.tsx"
|
|
454
468
|
}]
|
|
@@ -461,7 +475,7 @@ const PRESETS = { monochrome: {
|
|
|
461
475
|
"@/lib/utils"
|
|
462
476
|
],
|
|
463
477
|
files: [{
|
|
464
|
-
content: "\"use client\"
|
|
478
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n return (\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-area\"\n className={cn(\"relative\", className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n data-slot=\"scroll-area-viewport\"\n className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n );\n}\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n return (\n <ScrollAreaPrimitive.Scrollbar\n data-slot=\"scroll-area-scrollbar\"\n data-orientation={orientation}\n orientation={orientation}\n className={cn(\n \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n className,\n )}\n {...props}\n >\n <ScrollAreaPrimitive.Thumb\n data-slot=\"scroll-area-thumb\"\n className=\"rounded-full bg-border relative flex-1\"\n />\n </ScrollAreaPrimitive.Scrollbar>\n );\n}\n\nexport { ScrollArea, ScrollBar };\n",
|
|
465
479
|
type: "registry:ui",
|
|
466
480
|
path: "scroll-area.tsx"
|
|
467
481
|
}]
|
|
@@ -474,7 +488,7 @@ const PRESETS = { monochrome: {
|
|
|
474
488
|
"@/lib/utils"
|
|
475
489
|
],
|
|
476
490
|
files: [{
|
|
477
|
-
content: "\"use client\"
|
|
491
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/react/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n return (\n <SeparatorPrimitive.Root\n data-slot=\"separator\"\n decorative={decorative}\n orientation={orientation}\n className={cn(\n \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Separator };\n",
|
|
478
492
|
type: "registry:ui",
|
|
479
493
|
path: "separator.tsx"
|
|
480
494
|
}]
|
|
@@ -488,7 +502,7 @@ const PRESETS = { monochrome: {
|
|
|
488
502
|
"@/lib/utils"
|
|
489
503
|
],
|
|
490
504
|
files: [{
|
|
491
|
-
content: "\"use client\"
|
|
505
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/react/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n className={cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", className)}\n {...props}\n />\n );\n}\n\nconst tabsListVariants = cva(\n \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n data-variant={variant}\n className={cn(tabsListVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n return (\n <TabsPrimitive.Trigger\n data-slot=\"tabs-trigger\"\n className={cn(\n \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n return (\n <TabsPrimitive.Content\n data-slot=\"tabs-content\"\n className={cn(\"text-sm flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n",
|
|
492
506
|
type: "registry:ui",
|
|
493
507
|
path: "tabs.tsx"
|
|
494
508
|
}]
|
|
@@ -501,7 +515,7 @@ const PRESETS = { monochrome: {
|
|
|
501
515
|
"@sprawlify/react"
|
|
502
516
|
],
|
|
503
517
|
files: [{
|
|
504
|
-
content: "\"use client\"
|
|
518
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n return (\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n className={cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Textarea };\n",
|
|
505
519
|
type: "registry:ui",
|
|
506
520
|
path: "textarea.tsx"
|
|
507
521
|
}]
|
|
@@ -519,7 +533,7 @@ const PRESETS = { monochrome: {
|
|
|
519
533
|
},
|
|
520
534
|
solid: {
|
|
521
535
|
dependencies: {
|
|
522
|
-
"@sprawlify/solid": "^0.0.
|
|
536
|
+
"@sprawlify/solid": "^0.0.108",
|
|
523
537
|
"lucide-solid": "^0.577.0",
|
|
524
538
|
"solid-js": "^1.8.0",
|
|
525
539
|
"class-variance-authority": "^0.7.1",
|
|
@@ -541,7 +555,7 @@ const PRESETS = { monochrome: {
|
|
|
541
555
|
"solid-js"
|
|
542
556
|
],
|
|
543
557
|
files: [{
|
|
544
|
-
content: "import { Accordion as AccordionPrimitive } from \"@sprawlify/solid/accordion\";\
|
|
558
|
+
content: "import { Accordion as AccordionPrimitive } from \"@sprawlify/solid/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\nfunction Accordion(props: ComponentProps<typeof AccordionPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n class={cn(\"flex w-full flex-col\", local.class)}\n {...others}\n />\n );\n}\n\nfunction AccordionItem(props: ComponentProps<typeof AccordionPrimitive.Item>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n class={cn(\"group not-last:border-b\", local.class)}\n {...others}\n />\n );\n}\n\nfunction AccordionTrigger(props: ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <AccordionPrimitive.ItemTrigger\n data-slot=\"accordion-trigger\"\n class={cn(\n \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n local.class,\n )}\n {...others}\n >\n {local.children}\n <AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\n <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\n </AccordionPrimitive.ItemIndicator>\n </AccordionPrimitive.ItemTrigger>\n );\n}\n\nfunction AccordionContent(props: ComponentProps<typeof AccordionPrimitive.ItemContent>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <AccordionPrimitive.ItemContent\n data-slot=\"accordion-content\"\n class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n {...others}\n >\n <div\n class={cn(\n \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n local.class,\n )}\n >\n {local.children}\n </div>\n </AccordionPrimitive.ItemContent>\n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
|
|
545
559
|
type: "registry:ui",
|
|
546
560
|
path: "accordion.tsx"
|
|
547
561
|
}]
|
|
@@ -560,6 +574,21 @@ const PRESETS = { monochrome: {
|
|
|
560
574
|
path: "alert.tsx"
|
|
561
575
|
}]
|
|
562
576
|
},
|
|
577
|
+
{
|
|
578
|
+
name: "alert-dialog",
|
|
579
|
+
dependencies: [
|
|
580
|
+
"@sprawlify/solid",
|
|
581
|
+
"@/lib/utils",
|
|
582
|
+
"@/components/ui/button",
|
|
583
|
+
"solid-js",
|
|
584
|
+
"solid-js/web"
|
|
585
|
+
],
|
|
586
|
+
files: [{
|
|
587
|
+
content: "import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/solid/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nfunction AlertDialog(props: ComponentProps<typeof AlertDialogPrimitive.Root>) {\n return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger(props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal(props: ComponentProps<typeof Portal>) {\n return <Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogBackdrop(props: ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <AlertDialogPrimitive.Backdrop\n data-slot=\"alert-dialog-backdrop\"\n class={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogContent(\n props: ComponentProps<typeof AlertDialogPrimitive.Content> & {\n size?: \"default\" | \"sm\";\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"size\", \"children\"]);\n const size = () => local.size ?? \"default\";\n\n return (\n <AlertDialogPortal>\n <AlertDialogBackdrop />\n <AlertDialogPrimitive.Positioner>\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n data-size={size()}\n class={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n local.class,\n )}\n {...others}\n >\n {local.children}\n </AlertDialogPrimitive.Content>\n </AlertDialogPrimitive.Positioner>\n </AlertDialogPortal>\n );\n}\n\nfunction AlertDialogHeader(props: ComponentProps<\"div\">) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-header\"\n class={cn(\n \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogFooter(props: ComponentProps<\"div\">) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-footer\"\n class={cn(\n \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogMedia(props: ComponentProps<\"div\">) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-slot=\"alert-dialog-media\"\n class={cn(\n \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogTitle(props: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n class={cn(\n \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogDescription(props: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n class={cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction AlertDialogCancel(\n props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n Pick<ComponentProps<typeof Button>, \"variant\" | \"size\">,\n) {\n const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\", \"value\", \"children\"]);\n const variant = () => local.variant ?? \"outline\";\n const size = () => local.size ?? \"default\";\n const value = () => local.value ?? \"cancel\";\n\n return (\n <Button\n variant={variant()}\n size={size()}\n asChild={(props) => (\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-cancel\"\n class={cn(local.class)}\n value={value()}\n {...props()}\n {...others}\n >\n {local.children}\n </AlertDialogPrimitive.CloseTrigger>\n )}\n />\n );\n}\n\nfunction AlertDialogAction(\n props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n Pick<ComponentProps<typeof Button>, \"variant\" | \"size\">,\n) {\n const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\", \"children\"]);\n const variant = () => local.variant ?? \"default\";\n const size = () => local.size ?? \"default\";\n\n return (\n <Button\n variant={variant()}\n size={size()}\n asChild={(props) => (\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-action\"\n class={cn(local.class)}\n {...props()}\n {...others}\n >\n {local.children}\n </AlertDialogPrimitive.CloseTrigger>\n )}\n />\n );\n}\n\nexport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogAction,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogBackdrop,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n};\n",
|
|
588
|
+
type: "registry:ui",
|
|
589
|
+
path: "alert-dialog.tsx"
|
|
590
|
+
}]
|
|
591
|
+
},
|
|
563
592
|
{
|
|
564
593
|
name: "aspect-ratio",
|
|
565
594
|
dependencies: ["@sprawlify/solid", "solid-js"],
|
|
@@ -857,7 +886,7 @@ const PRESETS = { monochrome: {
|
|
|
857
886
|
},
|
|
858
887
|
svelte: {
|
|
859
888
|
dependencies: {
|
|
860
|
-
"@sprawlify/svelte": "^0.0.
|
|
889
|
+
"@sprawlify/svelte": "^0.0.108",
|
|
861
890
|
svelte: "^5.54.0",
|
|
862
891
|
"lucide-svelte": "^0.577.0",
|
|
863
892
|
"class-variance-authority": "^0.7.1",
|
|
@@ -900,7 +929,7 @@ const PRESETS = { monochrome: {
|
|
|
900
929
|
path: "accordion/accordion.svelte"
|
|
901
930
|
},
|
|
902
931
|
{
|
|
903
|
-
content: "export { default as Accordion } from \"./accordion.svelte\"
|
|
932
|
+
content: "export { default as Accordion } from \"./accordion.svelte\";\nexport { default as AccordionItem } from \"./accordion-item.svelte\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.svelte\";\nexport { default as AccordionContent } from \"./accordion-content.svelte\";\n",
|
|
904
933
|
type: "registry:ui",
|
|
905
934
|
path: "accordion/index.ts"
|
|
906
935
|
}
|
|
@@ -943,6 +972,83 @@ const PRESETS = { monochrome: {
|
|
|
943
972
|
}
|
|
944
973
|
]
|
|
945
974
|
},
|
|
975
|
+
{
|
|
976
|
+
name: "alert-dialog",
|
|
977
|
+
dependencies: [
|
|
978
|
+
"@sprawlify/svelte",
|
|
979
|
+
"@/components/ui/button",
|
|
980
|
+
"@/lib/utils",
|
|
981
|
+
"svelte",
|
|
982
|
+
"svelte/elements"
|
|
983
|
+
],
|
|
984
|
+
files: [
|
|
985
|
+
{
|
|
986
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { Button } from \"@/components/ui/button\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, \"variant\" | \"size\"> {}\r\n\r\n let { class: className, variant = \"default\", size = \"default\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Button {variant} {size}>\r\n {#snippet asChild(props)}\r\n <AlertDialogPrimitive.CloseTrigger\r\n data-slot=\"alert-dialog-cancel\"\r\n class={cn(className)}\r\n {...props()}\r\n {...rest}\r\n >\r\n {@render children?.()}\r\n </AlertDialogPrimitive.CloseTrigger>\r\n {/snippet}\r\n</Button>",
|
|
987
|
+
type: "registry:ui",
|
|
988
|
+
path: "alert-dialog/alert-dialog-action.svelte"
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Backdrop> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Backdrop\r\n data-slot=\"alert-dialog-backdrop\"\r\n class={cn(\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</AlertDialogPrimitive.Backdrop>",
|
|
992
|
+
type: "registry:ui",
|
|
993
|
+
path: "alert-dialog/alert-dialog-backdrop.svelte"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { Button } from \"@/components/ui/button\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, \"variant\" | \"size\"> {}\r\n\r\n let { class: className, variant = \"outline\", size = \"default\", value = \"cancel\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Button {variant} {size}>\r\n {#snippet asChild(props)}\r\n <AlertDialogPrimitive.CloseTrigger\r\n data-slot=\"alert-dialog-cancel\"\r\n class={cn(className)}\r\n value={value}\r\n {...props()}\r\n {...rest}\r\n >\r\n {@render children?.()}\r\n </AlertDialogPrimitive.CloseTrigger>\r\n {/snippet}\r\n</Button>",
|
|
997
|
+
type: "registry:ui",
|
|
998
|
+
path: "alert-dialog/alert-dialog-cancel.svelte"
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { cn } from \"@/lib/utils\"\r\n import AlertDialogPortal from \"./alert-dialog-portal.svelte\"\r\n import AlertDialogBackdrop from \"./alert-dialog-backdrop.svelte\"\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Content> {\r\n size?: \"default\" | \"sm\"\r\n }\r\n\r\n let { class: className, size = \"default\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPortal>\r\n <AlertDialogBackdrop />\r\n <AlertDialogPrimitive.Positioner>\r\n <AlertDialogPrimitive.Content\r\n data-slot=\"alert-dialog-content\"\r\n data-size={size}\r\n class={cn(\r\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\r\n className\r\n )}\r\n {...rest}\r\n >\r\n {@render children?.()}\r\n </AlertDialogPrimitive.Content>\r\n </AlertDialogPrimitive.Positioner>\r\n</AlertDialogPortal>",
|
|
1002
|
+
type: "registry:ui",
|
|
1003
|
+
path: "alert-dialog/alert-dialog-content.svelte"
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Description> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Description\r\n data-slot=\"alert-dialog-description\"\r\n class={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</AlertDialogPrimitive.Description>",
|
|
1007
|
+
type: "registry:ui",
|
|
1008
|
+
path: "alert-dialog/alert-dialog-description.svelte"
|
|
1009
|
+
},
|
|
1010
|
+
{
|
|
1011
|
+
content: "<script lang=\"ts\">\r\n import { cn } from \"@/lib/utils\"\r\n import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-slot=\"alert-dialog-footer\"\r\n class={cn(\r\n \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>",
|
|
1012
|
+
type: "registry:ui",
|
|
1013
|
+
path: "alert-dialog/alert-dialog-footer.svelte"
|
|
1014
|
+
},
|
|
1015
|
+
{
|
|
1016
|
+
content: "<script lang=\"ts\">\r\n import { cn } from \"@/lib/utils\"\r\n import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-slot=\"alert-dialog-header\"\r\n class={cn(\"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>",
|
|
1017
|
+
type: "registry:ui",
|
|
1018
|
+
path: "alert-dialog/alert-dialog-header.svelte"
|
|
1019
|
+
},
|
|
1020
|
+
{
|
|
1021
|
+
content: "<script lang=\"ts\">\r\n import { cn } from \"@/lib/utils\"\r\n import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-slot=\"alert-dialog-media\"\r\n class={cn(\"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>",
|
|
1022
|
+
type: "registry:ui",
|
|
1023
|
+
path: "alert-dialog/alert-dialog-media.svelte"
|
|
1024
|
+
},
|
|
1025
|
+
{
|
|
1026
|
+
content: "<script lang=\"ts\">\r\n import { Portal } from \"@sprawlify/svelte/portal\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof Portal> {\r\n \"data-slot\"?: string\r\n }\r\n\r\n let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Portal data-slot=\"alert-dialog-portal\" {...rest}>\r\n {@render children?.()}\r\n</Portal>",
|
|
1027
|
+
type: "registry:ui",
|
|
1028
|
+
path: "alert-dialog/alert-dialog-portal.svelte"
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Title> {}\r\n\r\n let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Title\r\n data-slot=\"alert-dialog-title\"\r\n class={cn(\"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</AlertDialogPrimitive.Title>",
|
|
1032
|
+
type: "registry:ui",
|
|
1033
|
+
path: "alert-dialog/alert-dialog-title.svelte"
|
|
1034
|
+
},
|
|
1035
|
+
{
|
|
1036
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Trigger> {}\r\n\r\n let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...rest}>\r\n {@render children?.()}\r\n</AlertDialogPrimitive.Trigger>",
|
|
1037
|
+
type: "registry:ui",
|
|
1038
|
+
path: "alert-dialog/alert-dialog-trigger.svelte"
|
|
1039
|
+
},
|
|
1040
|
+
{
|
|
1041
|
+
content: "<script lang=\"ts\">\r\n import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n import type { ComponentProps } from \"svelte\"\r\n\r\n interface Props extends ComponentProps<typeof AlertDialogPrimitive.Root> {\r\n \"data-slot\"?: string\r\n }\r\n\r\n let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...rest}>\r\n {@render children?.()}\r\n</AlertDialogPrimitive.Root>",
|
|
1042
|
+
type: "registry:ui",
|
|
1043
|
+
path: "alert-dialog/alert-dialog.svelte"
|
|
1044
|
+
},
|
|
1045
|
+
{
|
|
1046
|
+
content: "export { default as AlertDialog } from \"./alert-dialog.svelte\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.svelte\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.svelte\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.svelte\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.svelte\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.svelte\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.svelte\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.svelte\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.svelte\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.svelte\";\nexport { default as AlertDialogCancel } from \"./alert-dialog-cancel.svelte\";\nexport { default as AlertDialogAction } from \"./alert-dialog-action.svelte\";\n",
|
|
1047
|
+
type: "registry:ui",
|
|
1048
|
+
path: "alert-dialog/index.ts"
|
|
1049
|
+
}
|
|
1050
|
+
]
|
|
1051
|
+
},
|
|
946
1052
|
{
|
|
947
1053
|
name: "aspect-ratio",
|
|
948
1054
|
dependencies: ["@sprawlify/svelte", "svelte"],
|
|
@@ -1685,7 +1791,7 @@ const PRESETS = { monochrome: {
|
|
|
1685
1791
|
},
|
|
1686
1792
|
vue: {
|
|
1687
1793
|
dependencies: {
|
|
1688
|
-
"@sprawlify/vue": "^0.0.
|
|
1794
|
+
"@sprawlify/vue": "^0.0.108",
|
|
1689
1795
|
vue: "^3.4.0",
|
|
1690
1796
|
"lucide-vue-next": "^0.577.0",
|
|
1691
1797
|
"class-variance-authority": "^0.7.1",
|
|
@@ -1708,27 +1814,27 @@ const PRESETS = { monochrome: {
|
|
|
1708
1814
|
],
|
|
1709
1815
|
files: [
|
|
1710
1816
|
{
|
|
1711
|
-
content: "<script lang=\"ts\">\
|
|
1817
|
+
content: "<script lang=\"ts\">\nimport type { AccordionItemContentProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionContentProps extends /* @vue-ignore */ AccordionItemContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<AccordionContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AccordionPrimitive.ItemContent\n data-slot=\"accordion-content\"\n class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n v-bind=\"rest\"\n >\n <div :class=\"className\">\n <slot />\n </div>\n </AccordionPrimitive.ItemContent>\n</template>\n",
|
|
1712
1818
|
type: "registry:ui",
|
|
1713
1819
|
path: "accordion/accordion-content.vue"
|
|
1714
1820
|
},
|
|
1715
1821
|
{
|
|
1716
|
-
content: "<script lang=\"ts\">\
|
|
1822
|
+
content: "<script lang=\"ts\">\nimport type { AccordionItemProps as AccordionPrimitiveItemProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionItemProps extends /* @vue-ignore */ AccordionPrimitiveItemProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, disabled, ...rest } = defineProps<AccordionItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"group not-last:border-b\", attrs.class as string));\n<\/script>\n\n<template>\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n :value=\"value\"\n :disabled=\"disabled\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </AccordionPrimitive.Item>\n</template>\n",
|
|
1717
1823
|
type: "registry:ui",
|
|
1718
1824
|
path: "accordion/accordion-item.vue"
|
|
1719
1825
|
},
|
|
1720
1826
|
{
|
|
1721
|
-
content: "<script lang=\"ts\">\
|
|
1827
|
+
content: "<script lang=\"ts\">\nimport type { AccordionItemTriggerProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionTriggerProps extends /* @vue-ignore */ AccordionItemTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<AccordionTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AccordionPrimitive.ItemTrigger v-bind=\"props\" :class=\"className\" data-slot=\"accordion-trigger\">\n <slot />\n <AccordionPrimitive.ItemIndicator\n class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\"\n >\n <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\n </AccordionPrimitive.ItemIndicator>\n </AccordionPrimitive.ItemTrigger>\n</template>\n",
|
|
1722
1828
|
type: "registry:ui",
|
|
1723
1829
|
path: "accordion/accordion-trigger.vue"
|
|
1724
1830
|
},
|
|
1725
1831
|
{
|
|
1726
|
-
content: "<script lang=\"ts\">\
|
|
1832
|
+
content: "<script lang=\"ts\">\nimport type { AccordionRootProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { AccordionRoot } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\n\nconst { collapsible, defaultValue, multiple, ...rest } = defineProps<AccordionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"flex w-full flex-col\", attrs.class as string));\n<\/script>\n\n<template>\n <AccordionRoot\n data-slot=\"accordion\"\n :collapsible=\"collapsible\"\n :default-value=\"defaultValue\"\n :multiple=\"multiple\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </AccordionRoot>\n</template>\n",
|
|
1727
1833
|
type: "registry:ui",
|
|
1728
1834
|
path: "accordion/accordion.vue"
|
|
1729
1835
|
},
|
|
1730
1836
|
{
|
|
1731
|
-
content: "export { default as Accordion } from \"./accordion.vue\"
|
|
1837
|
+
content: "export { default as Accordion } from \"./accordion.vue\";\nexport { default as AccordionItem } from \"./accordion-item.vue\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.vue\";\nexport { default as AccordionContent } from \"./accordion-content.vue\";\n",
|
|
1732
1838
|
type: "registry:ui",
|
|
1733
1839
|
path: "accordion/index.ts"
|
|
1734
1840
|
}
|
|
@@ -1770,11 +1876,82 @@ const PRESETS = { monochrome: {
|
|
|
1770
1876
|
}
|
|
1771
1877
|
]
|
|
1772
1878
|
},
|
|
1879
|
+
{
|
|
1880
|
+
name: "alert-dialog",
|
|
1881
|
+
dependencies: [
|
|
1882
|
+
"@sprawlify/vue",
|
|
1883
|
+
"vue",
|
|
1884
|
+
"@/lib/utils",
|
|
1885
|
+
"@/components/ui/button"
|
|
1886
|
+
],
|
|
1887
|
+
files: [
|
|
1888
|
+
{
|
|
1889
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogBackdropProps as AlertDialogPrimitiveBackdropProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogBackdropProps\n extends /* @vue-ignore */ AlertDialogPrimitiveBackdropProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogBackdropProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Backdrop\n data-slot=\"alert-dialog-backdrop\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Backdrop>\n</template>\n",
|
|
1890
|
+
type: "registry:ui",
|
|
1891
|
+
path: "alert-dialog/alert-dialog-backdrop.vue"
|
|
1892
|
+
},
|
|
1893
|
+
{
|
|
1894
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogCloseTriggerProps } from \"@sprawlify/vue/alert-dialog\";\nimport { type ButtonProps } from \"@/components/ui/button\";\n\nexport interface AlertDialogCloseProps\n extends /* @vue-ignore */ AlertDialogCloseTriggerProps, Pick<ButtonProps, \"variant\" | \"size\"> {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n asChild,\n variant = \"default\",\n size = \"default\",\n ...rest\n} = defineProps<AlertDialogCloseProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <Button :variant=\"variant\" :size=\"size\" asChild>\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-close\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.CloseTrigger>\n </Button>\n</template>\n",
|
|
1895
|
+
type: "registry:ui",
|
|
1896
|
+
path: "alert-dialog/alert-dialog-close.vue"
|
|
1897
|
+
},
|
|
1898
|
+
{
|
|
1899
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogContentProps as AlertDialogPrimitiveContentProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogContentProps\n extends /* @vue-ignore */ AlertDialogPrimitiveContentProps {\n size?: \"default\" | \"sm\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport AlertDialogPortal from \"./alert-dialog-portal.vue\";\nimport AlertDialogBackdrop from \"./alert-dialog-backdrop.vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AlertDialogContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogBackdrop />\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Content>\n </AlertDialogPortal>\n</template>\n",
|
|
1900
|
+
type: "registry:ui",
|
|
1901
|
+
path: "alert-dialog/alert-dialog-content.vue"
|
|
1902
|
+
},
|
|
1903
|
+
{
|
|
1904
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogDescriptionProps as AlertDialogPrimitiveDescriptionProps } from \"@sprawlify/vue/alert-dialog\";\nexport interface AlertDialogDescriptionProps\n extends /* @vue-ignore */ AlertDialogPrimitiveDescriptionProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Description>\n</template>\n",
|
|
1905
|
+
type: "registry:ui",
|
|
1906
|
+
path: "alert-dialog/alert-dialog-description.vue"
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogFooterProps\n extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1910
|
+
type: "registry:ui",
|
|
1911
|
+
path: "alert-dialog/alert-dialog-footer.vue"
|
|
1912
|
+
},
|
|
1913
|
+
{
|
|
1914
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogHeaderProps\n extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-header\"\n :class=\"className\"\n :as-child=\"asChild\"\n v-bind=\"rest\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1915
|
+
type: "registry:ui",
|
|
1916
|
+
path: "alert-dialog/alert-dialog-header.vue"
|
|
1917
|
+
},
|
|
1918
|
+
{
|
|
1919
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogMediaProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-media\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1920
|
+
type: "registry:ui",
|
|
1921
|
+
path: "alert-dialog/alert-dialog-media.vue"
|
|
1922
|
+
},
|
|
1923
|
+
{
|
|
1924
|
+
content: "<script lang=\"ts\">\nexport interface AlertDialogPortalProps {\n to?: string | Element;\n disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<AlertDialogPortalProps>();\n<\/script>\n\n<template>\n <Teleport\n data-slot=\"alert-dialog-portal\"\n :to=\"to || 'body'\"\n :disabled=\"disabled || false\"\n v-bind=\"rest\"\n >\n <slot />\n </Teleport>\n</template>\n",
|
|
1925
|
+
type: "registry:ui",
|
|
1926
|
+
path: "alert-dialog/alert-dialog-portal.vue"
|
|
1927
|
+
},
|
|
1928
|
+
{
|
|
1929
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogTitleProps as AlertDialogPrimitiveTitleProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTitleProps extends /* @vue-ignore */ AlertDialogPrimitiveTitleProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Title>\n</template>\n",
|
|
1930
|
+
type: "registry:ui",
|
|
1931
|
+
path: "alert-dialog/alert-dialog-title.vue"
|
|
1932
|
+
},
|
|
1933
|
+
{
|
|
1934
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogTriggerProps as AlertDialogPrimitiveTriggerProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTriggerProps\n extends /* @vue-ignore */ AlertDialogPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Trigger\n data-slot=\"alert-dialog-trigger\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Trigger>\n</template>\n",
|
|
1935
|
+
type: "registry:ui",
|
|
1936
|
+
path: "alert-dialog/alert-dialog-trigger.vue"
|
|
1937
|
+
},
|
|
1938
|
+
{
|
|
1939
|
+
content: "<script lang=\"ts\">\nimport type { AlertDialogRootProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogProps extends /* @vue-ignore */ AlertDialogRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\n\nconst { ...rest } = defineProps<AlertDialogProps>();\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" v-bind=\"rest\">\n <slot />\n </AlertDialogPrimitive.Root>\n</template>\n",
|
|
1940
|
+
type: "registry:ui",
|
|
1941
|
+
path: "alert-dialog/alert-dialog.vue"
|
|
1942
|
+
},
|
|
1943
|
+
{
|
|
1944
|
+
content: "export { default as AlertDialog } from \"./alert-dialog.vue\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.vue\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.vue\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.vue\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.vue\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.vue\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.vue\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.vue\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.vue\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.vue\";\nexport { default as AlertDialogClose } from \"./alert-dialog-close.vue\";\n",
|
|
1945
|
+
type: "registry:ui",
|
|
1946
|
+
path: "alert-dialog/index.ts"
|
|
1947
|
+
}
|
|
1948
|
+
]
|
|
1949
|
+
},
|
|
1773
1950
|
{
|
|
1774
1951
|
name: "aspect-ratio",
|
|
1775
1952
|
dependencies: ["@sprawlify/vue"],
|
|
1776
1953
|
files: [{
|
|
1777
|
-
content: "<script lang=\"ts\">\nimport type { AspectRatioRootProps } from \"@sprawlify/vue/aspect-ratio\";\n\nexport interface AspectRatioProps
|
|
1954
|
+
content: "<script lang=\"ts\">\nimport type { AspectRatioRootProps } from \"@sprawlify/vue/aspect-ratio\";\n\nexport interface AspectRatioProps extends /* @vue-ignore */ AspectRatioRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/vue/aspect-ratio\";\n\nconst { asChild, ...rest } = defineProps<AspectRatioProps>();\n<\/script>\n\n<template>\n <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" v-bind=\"rest\" :as-child=\"asChild\">\n <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n <slot />\n </AspectRatioPrimitive.Content>\n </AspectRatioPrimitive.Root>\n</template>\n",
|
|
1778
1955
|
type: "registry:ui",
|
|
1779
1956
|
path: "aspect-ratio/aspect-ratio.vue"
|
|
1780
1957
|
}, {
|
|
@@ -1797,7 +1974,7 @@ const PRESETS = { monochrome: {
|
|
|
1797
1974
|
path: "avatar/avatar-badge.vue"
|
|
1798
1975
|
},
|
|
1799
1976
|
{
|
|
1800
|
-
content: "<script lang=\"ts\">\nimport type { AvatarFallbackProps as AvatarPrimitiveFallbackProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarFallbackProps
|
|
1977
|
+
content: "<script lang=\"ts\">\nimport type { AvatarFallbackProps as AvatarPrimitiveFallbackProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarFallbackProps extends /* @vue-ignore */ AvatarPrimitiveFallbackProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarFallbackProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AvatarPrimitive.Fallback>\n</template>\n",
|
|
1801
1978
|
type: "registry:ui",
|
|
1802
1979
|
path: "avatar/avatar-fallback.vue"
|
|
1803
1980
|
},
|
|
@@ -1812,12 +1989,12 @@ const PRESETS = { monochrome: {
|
|
|
1812
1989
|
path: "avatar/avatar-group.vue"
|
|
1813
1990
|
},
|
|
1814
1991
|
{
|
|
1815
|
-
content: "<script lang=\"ts\">\nimport type { AvatarImageProps as AvatarPrimitiveImageProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarImageProps
|
|
1992
|
+
content: "<script lang=\"ts\">\nimport type { AvatarImageProps as AvatarPrimitiveImageProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarImageProps extends /* @vue-ignore */ AvatarPrimitiveImageProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarImageProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
1816
1993
|
type: "registry:ui",
|
|
1817
1994
|
path: "avatar/avatar-image.vue"
|
|
1818
1995
|
},
|
|
1819
1996
|
{
|
|
1820
|
-
content: "<script lang=\"ts\">\nimport type { AvatarRootProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarProps
|
|
1997
|
+
content: "<script lang=\"ts\">\nimport type { AvatarRootProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarProps extends /* @vue-ignore */ AvatarRootProps {\n size?: \"default\" | \"sm\" | \"lg\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AvatarProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AvatarPrimitive.Root>\n</template>\n",
|
|
1821
1998
|
type: "registry:ui",
|
|
1822
1999
|
path: "avatar/avatar.vue"
|
|
1823
2000
|
},
|
|
@@ -1875,7 +2052,7 @@ const PRESETS = { monochrome: {
|
|
|
1875
2052
|
],
|
|
1876
2053
|
files: [
|
|
1877
2054
|
{
|
|
1878
|
-
content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ButtonGroupSeparatorProps
|
|
2055
|
+
content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ButtonGroupSeparatorProps extends /* @vue-ignore */ SeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ButtonGroupSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Separator\n data-scope=\"button-group\"\n data-part=\"separator\"\n data-slot=\"button-group-separator\"\n :orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </Separator>\n</template>\n",
|
|
1879
2056
|
type: "registry:ui",
|
|
1880
2057
|
path: "button-group/button-group-separator.vue"
|
|
1881
2058
|
},
|
|
@@ -1956,7 +2133,7 @@ const PRESETS = { monochrome: {
|
|
|
1956
2133
|
"lucide-vue-next"
|
|
1957
2134
|
],
|
|
1958
2135
|
files: [{
|
|
1959
|
-
content: "<script lang=\"ts\">\nimport type { CheckboxRootProps } from \"@sprawlify/vue/checkbox\";\n\nexport interface CheckboxProps
|
|
2136
|
+
content: "<script lang=\"ts\">\nimport type { CheckboxRootProps } from \"@sprawlify/vue/checkbox\";\n\nexport interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/vue/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { ...rest } = defineProps<CheckboxProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <CheckboxPrimitive.Root data-slot=\"checkbox\" :class=\"className\" v-bind=\"rest\">\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n class=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n <CheckboxPrimitive.HiddenInput />\n </CheckboxPrimitive.Root>\n</template>\n",
|
|
1960
2137
|
type: "registry:ui",
|
|
1961
2138
|
path: "checkbox/checkbox.vue"
|
|
1962
2139
|
}, {
|
|
@@ -1974,17 +2151,17 @@ const PRESETS = { monochrome: {
|
|
|
1974
2151
|
],
|
|
1975
2152
|
files: [
|
|
1976
2153
|
{
|
|
1977
|
-
content: "<script lang=\"ts\">\nimport type { CollapsibleContentProps as CollapsiblePrimitiveContentProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleContentProps\n
|
|
2154
|
+
content: "<script lang=\"ts\">\nimport type { CollapsibleContentProps as CollapsiblePrimitiveContentProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleContentProps\n extends /* @vue-ignore */ CollapsiblePrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" :class=\"className\" v-bind=\"rest\">\n <slot />\n </CollapsiblePrimitive.Content>\n</template>\n",
|
|
1978
2155
|
type: "registry:ui",
|
|
1979
2156
|
path: "collapsible/collapsible-content.vue"
|
|
1980
2157
|
},
|
|
1981
2158
|
{
|
|
1982
|
-
content: "<script lang=\"ts\">\nimport type { CollapsibleTriggerProps as CollapsiblePrimitiveTriggerProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleTriggerProps\n
|
|
2159
|
+
content: "<script lang=\"ts\">\nimport type { CollapsibleTriggerProps as CollapsiblePrimitiveTriggerProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleTriggerProps\n extends /* @vue-ignore */ CollapsiblePrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" :class=\"className\" v-bind=\"rest\">\n <slot />\n </CollapsiblePrimitive.Trigger>\n</template>\n",
|
|
1983
2160
|
type: "registry:ui",
|
|
1984
2161
|
path: "collapsible/collapsible-trigger.vue"
|
|
1985
2162
|
},
|
|
1986
2163
|
{
|
|
1987
|
-
content: "<script lang=\"ts\">\nimport type { CollapsibleRootProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleProps
|
|
2164
|
+
content: "<script lang=\"ts\">\nimport type { CollapsibleRootProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleProps extends /* @vue-ignore */ CollapsibleRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <CollapsiblePrimitive.Root data-slot=\"collapsible\" :class=\"className\" v-bind=\"rest\">\n <slot />\n </CollapsiblePrimitive.Root>\n</template>\n",
|
|
1988
2165
|
type: "registry:ui",
|
|
1989
2166
|
path: "collapsible/collapsible.vue"
|
|
1990
2167
|
},
|
|
@@ -2005,27 +2182,27 @@ const PRESETS = { monochrome: {
|
|
|
2005
2182
|
],
|
|
2006
2183
|
files: [
|
|
2007
2184
|
{
|
|
2008
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuCheckboxItemProps\n
|
|
2185
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuCheckboxItemProps\n extends /* @vue-ignore */ DropdownMenuCheckboxItemPrimitiveProps {\n inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, checked, ...rest } = defineProps<DropdownMenuCheckboxItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n :data-inset=\"inset\"\n :value=\"value\"\n :checked=\"checked\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <span\n class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n data-slot=\"dropdown-menu-checkbox-item-indicator\"\n >\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <slot />\n </DropdownMenuPrimitive.CheckboxItem>\n</template>\n",
|
|
2009
2186
|
type: "registry:ui",
|
|
2010
2187
|
path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
|
|
2011
2188
|
},
|
|
2012
2189
|
{
|
|
2013
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuContentProps\n
|
|
2190
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuContentProps\n extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuContentProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Teleport to=\"body\">\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Positioner>\n </Teleport>\n</template>\n",
|
|
2014
2191
|
type: "registry:ui",
|
|
2015
2192
|
path: "dropdown-menu/dropdown-menu-content.vue"
|
|
2016
2193
|
},
|
|
2017
2194
|
{
|
|
2018
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuGroupProps
|
|
2195
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuGroupProps extends /* @vue-ignore */ DropdownMenuItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.ItemGroup\n data-slot=\"dropdown-menu-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.ItemGroup>\n</template>\n",
|
|
2019
2196
|
type: "registry:ui",
|
|
2020
2197
|
path: "dropdown-menu/dropdown-menu-group.vue"
|
|
2021
2198
|
},
|
|
2022
2199
|
{
|
|
2023
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemProps as DropdownMenuPrimitiveItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuItemProps
|
|
2200
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemProps as DropdownMenuPrimitiveItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuItemProps extends /* @vue-ignore */ DropdownMenuPrimitiveItemProps {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, variant = \"default\", asChild, ...rest } = defineProps<DropdownMenuItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n :data-inset=\"inset\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Item>\n</template>\n",
|
|
2024
2201
|
type: "registry:ui",
|
|
2025
2202
|
path: "dropdown-menu/dropdown-menu-item.vue"
|
|
2026
2203
|
},
|
|
2027
2204
|
{
|
|
2028
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupLabelProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuLabelProps
|
|
2205
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupLabelProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuLabelProps extends /* @vue-ignore */ DropdownMenuItemGroupLabelProps {\n inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, asChild, ...rest } = defineProps<DropdownMenuLabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset=true]:pl-7\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n :data-inset=\"inset\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.ItemGroupLabel>\n</template>\n",
|
|
2029
2206
|
type: "registry:ui",
|
|
2030
2207
|
path: "dropdown-menu/dropdown-menu-label.vue"
|
|
2031
2208
|
},
|
|
@@ -2035,17 +2212,17 @@ const PRESETS = { monochrome: {
|
|
|
2035
2212
|
path: "dropdown-menu/dropdown-menu-portal.vue"
|
|
2036
2213
|
},
|
|
2037
2214
|
{
|
|
2038
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioGroupProps\n
|
|
2215
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioGroupProps\n extends /* @vue-ignore */ DropdownMenuRadioItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuRadioGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.RadioItemGroup\n data-slot=\"dropdown-menu-radio-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.RadioItemGroup>\n</template>\n",
|
|
2039
2216
|
type: "registry:ui",
|
|
2040
2217
|
path: "dropdown-menu/dropdown-menu-radio-group.vue"
|
|
2041
2218
|
},
|
|
2042
2219
|
{
|
|
2043
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemProps as DropdownMenuPrimitiveRadioItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioItemProps\n
|
|
2220
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemProps as DropdownMenuPrimitiveRadioItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioItemProps\n extends /* @vue-ignore */ DropdownMenuPrimitiveRadioItemProps {\n inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, ...rest } = defineProps<DropdownMenuRadioItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n :data-inset=\"inset\"\n :value=\"value\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <span\n class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n data-slot=\"dropdown-menu-radio-item-indicator\"\n >\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <slot />\n </DropdownMenuPrimitive.RadioItem>\n</template>\n",
|
|
2044
2221
|
type: "registry:ui",
|
|
2045
2222
|
path: "dropdown-menu/dropdown-menu-radio-item.vue"
|
|
2046
2223
|
},
|
|
2047
2224
|
{
|
|
2048
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuSeparatorProps as DropdownMenuPrimitiveSeparatorProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSeparatorProps\n
|
|
2225
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuSeparatorProps as DropdownMenuPrimitiveSeparatorProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSeparatorProps\n extends /* @vue-ignore */ DropdownMenuPrimitiveSeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSeparatorProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"bg-border -mx-1 my-1 h-px\", attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
2049
2226
|
type: "registry:ui",
|
|
2050
2227
|
path: "dropdown-menu/dropdown-menu-separator.vue"
|
|
2051
2228
|
},
|
|
@@ -2055,27 +2232,27 @@ const PRESETS = { monochrome: {
|
|
|
2055
2232
|
path: "dropdown-menu/dropdown-menu-shortcut.vue"
|
|
2056
2233
|
},
|
|
2057
2234
|
{
|
|
2058
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubContentProps\n
|
|
2235
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubContentProps\n extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Teleport to=\"body\">\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Positioner>\n </Teleport>\n</template>\n",
|
|
2059
2236
|
type: "registry:ui",
|
|
2060
2237
|
path: "dropdown-menu/dropdown-menu-sub-content.vue"
|
|
2061
2238
|
},
|
|
2062
2239
|
{
|
|
2063
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubTriggerProps\n
|
|
2240
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubTriggerProps\n extends /* @vue-ignore */ DropdownMenuTriggerItemProps {\n inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRightIcon } from \"lucide-vue-next\";\n\nconst { inset, ...rest } = defineProps<DropdownMenuSubTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n :data-inset=\"inset\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n</template>\n",
|
|
2064
2241
|
type: "registry:ui",
|
|
2065
2242
|
path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
|
|
2066
2243
|
},
|
|
2067
2244
|
{
|
|
2068
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubProps
|
|
2245
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubProps extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu-sub\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Root>\n</template>\n",
|
|
2069
2246
|
type: "registry:ui",
|
|
2070
2247
|
path: "dropdown-menu/dropdown-menu-sub.vue"
|
|
2071
2248
|
},
|
|
2072
2249
|
{
|
|
2073
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerProps as DropdownMenuPrimitiveTriggerProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuTriggerProps\n
|
|
2250
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerProps as DropdownMenuPrimitiveTriggerProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuTriggerProps\n extends /* @vue-ignore */ DropdownMenuPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Trigger>\n</template>\n",
|
|
2074
2251
|
type: "registry:ui",
|
|
2075
2252
|
path: "dropdown-menu/dropdown-menu-trigger.vue"
|
|
2076
2253
|
},
|
|
2077
2254
|
{
|
|
2078
|
-
content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuProps
|
|
2255
|
+
content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuProps extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, positioning, ...rest } = defineProps<DropdownMenuProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n :positioning=\"{ offset: { mainAxis: 4 }, ...positioning }\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DropdownMenuPrimitive.Root>\n</template>\n",
|
|
2079
2256
|
type: "registry:ui",
|
|
2080
2257
|
path: "dropdown-menu/dropdown-menu.vue"
|
|
2081
2258
|
},
|
|
@@ -2389,17 +2566,17 @@ const PRESETS = { monochrome: {
|
|
|
2389
2566
|
path: "native-select/index.ts"
|
|
2390
2567
|
},
|
|
2391
2568
|
{
|
|
2392
|
-
content: "<script lang=\"ts\">\nimport type { OptgroupHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptGroupProps
|
|
2569
|
+
content: "<script lang=\"ts\">\nimport type { OptgroupHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptGroupProps extends /* @vue-ignore */ OptgroupHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <optgroup\n data-scope=\"native-select\"\n data-part=\"optgroup\"\n data-slot=\"native-select-optgroup\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </optgroup>\n</template>\n",
|
|
2393
2570
|
type: "registry:ui",
|
|
2394
2571
|
path: "native-select/native-select-optgroup.vue"
|
|
2395
2572
|
},
|
|
2396
2573
|
{
|
|
2397
|
-
content: "<script lang=\"ts\">\nimport type { OptionHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptionProps
|
|
2574
|
+
content: "<script lang=\"ts\">\nimport type { OptionHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptionProps extends /* @vue-ignore */ OptionHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <option\n data-scope=\"native-select\"\n data-part=\"option\"\n data-slot=\"native-select-option\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </option>\n</template>\n",
|
|
2398
2575
|
type: "registry:ui",
|
|
2399
2576
|
path: "native-select/native-select-option.vue"
|
|
2400
2577
|
},
|
|
2401
2578
|
{
|
|
2402
|
-
content: "<script lang=\"ts\">\nimport type { SelectHTMLAttributes } from \"vue\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\n\nexport interface NativeSelectProps
|
|
2579
|
+
content: "<script lang=\"ts\">\nimport type { SelectHTMLAttributes } from \"vue\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\n\nexport interface NativeSelectProps extends /* @vue-ignore */ Omit<SelectHTMLAttributes, \"size\"> {\n size?: \"sm\" | \"default\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { size = \"default\", ...rest } = defineProps<NativeSelectProps>();\nconst attrs = useAttrs();\n\nconst wrapperClassName = computed(() =>\n cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", attrs.class as string),\n);\n\nconst selectClassName = computed(() =>\n cn(\n \"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\",\n ),\n);\n<\/script>\n\n<template>\n <div\n :class=\"wrapperClassName\"\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n :data-size=\"size\"\n >\n <select data-slot=\"native-select\" :data-size=\"size\" :class=\"selectClassName\" v-bind=\"rest\">\n <slot />\n </select>\n <ChevronDownIcon\n class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n aria-hidden=\"true\"\n data-slot=\"native-select-icon\"\n />\n </div>\n</template>\n",
|
|
2403
2580
|
type: "registry:ui",
|
|
2404
2581
|
path: "native-select/native-select.vue"
|
|
2405
2582
|
}
|
|
@@ -2419,12 +2596,12 @@ const PRESETS = { monochrome: {
|
|
|
2419
2596
|
path: "scroll-area/index.ts"
|
|
2420
2597
|
},
|
|
2421
2598
|
{
|
|
2422
|
-
content: "<script lang=\"ts\">\nimport type { ScrollAreaRootProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollAreaProps
|
|
2599
|
+
content: "<script lang=\"ts\">\nimport type { ScrollAreaRootProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollAreaProps extends /* @vue-ignore */ ScrollAreaRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport ScrollBar from \"./scroll-bar.vue\";\n\nconst { ...rest } = defineProps<ScrollAreaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"relative\", attrs.class as string));\n<\/script>\n\n<template>\n <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" :class=\"className\" v-bind=\"rest\">\n <ScrollAreaPrimitive.Viewport\n data-slot=\"scroll-area-viewport\"\n class=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n >\n <slot />\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n</template>\n",
|
|
2423
2600
|
type: "registry:ui",
|
|
2424
2601
|
path: "scroll-area/scroll-area.vue"
|
|
2425
2602
|
},
|
|
2426
2603
|
{
|
|
2427
|
-
content: "<script lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollBarProps
|
|
2604
|
+
content: "<script lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollBarProps extends /* @vue-ignore */ ScrollAreaScrollbarProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ScrollBarProps>();\n\nconst className = cn(\n \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n rest.class as string,\n);\n<\/script>\n\n<template>\n <ScrollAreaPrimitive.Scrollbar\n data-slot=\"scroll-area-scrollbar\"\n :data-orientation=\"orientation || 'vertical'\"\n :orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <ScrollAreaPrimitive.Thumb\n data-slot=\"scroll-area-thumb\"\n class=\"rounded-full bg-border relative flex-1\"\n />\n </ScrollAreaPrimitive.Scrollbar>\n</template>\n",
|
|
2428
2605
|
type: "registry:ui",
|
|
2429
2606
|
path: "scroll-area/scroll-bar.vue"
|
|
2430
2607
|
}
|
|
@@ -2442,7 +2619,7 @@ const PRESETS = { monochrome: {
|
|
|
2442
2619
|
type: "registry:ui",
|
|
2443
2620
|
path: "separator/index.ts"
|
|
2444
2621
|
}, {
|
|
2445
|
-
content: "<script lang=\"ts\">\nimport type { SeparatorRootProps } from \"@sprawlify/vue/separator\";\n\nexport interface SeparatorProps
|
|
2622
|
+
content: "<script lang=\"ts\">\nimport type { SeparatorRootProps } from \"@sprawlify/vue/separator\";\n\nexport interface SeparatorProps extends /* @vue-ignore */ SeparatorRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/vue/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n orientation = \"horizontal\",\n decorative = true,\n asChild,\n ...rest\n} = defineProps<SeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <SeparatorPrimitive.Root\n data-slot=\"separator\"\n :decorative=\"decorative\"\n :orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </SeparatorPrimitive.Root>\n</template>\n",
|
|
2446
2623
|
type: "registry:ui",
|
|
2447
2624
|
path: "separator/separator.vue"
|
|
2448
2625
|
}]
|
|
@@ -2462,22 +2639,22 @@ const PRESETS = { monochrome: {
|
|
|
2462
2639
|
path: "tabs/index.ts"
|
|
2463
2640
|
},
|
|
2464
2641
|
{
|
|
2465
|
-
content: "<script lang=\"ts\">\nimport type { TabContentProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsContentProps
|
|
2642
|
+
content: "<script lang=\"ts\">\nimport type { TabContentProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsContentProps extends /* @vue-ignore */ TabContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-sm flex-1 outline-none\", attrs.class as string));\n<\/script>\n\n<template>\n <TabsPrimitive.Content data-slot=\"tabs-content\" :class=\"className\" :value=\"value\" v-bind=\"rest\">\n <slot />\n </TabsPrimitive.Content>\n</template>\n",
|
|
2466
2643
|
type: "registry:ui",
|
|
2467
2644
|
path: "tabs/tabs-content.vue"
|
|
2468
2645
|
},
|
|
2469
2646
|
{
|
|
2470
|
-
content: "<script lang=\"ts\">\nimport type { TabListProps } from \"@sprawlify/vue/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\n \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface TabsListProps
|
|
2647
|
+
content: "<script lang=\"ts\">\nimport type { TabListProps } from \"@sprawlify/vue/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\n \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface TabsListProps extends /* @vue-ignore */ TabListProps {\n variant?: VariantProps<typeof tabsListVariants>[\"variant\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { variant = \"default\", ...rest } = defineProps<TabsListProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(tabsListVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </TabsPrimitive.List>\n</template>\n",
|
|
2471
2648
|
type: "registry:ui",
|
|
2472
2649
|
path: "tabs/tabs-list.vue"
|
|
2473
2650
|
},
|
|
2474
2651
|
{
|
|
2475
|
-
content: "<script lang=\"ts\">\nimport type { TabTriggerProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsTriggerProps
|
|
2652
|
+
content: "<script lang=\"ts\">\nimport type { TabTriggerProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsTriggerProps extends /* @vue-ignore */ TabTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*=size-])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" :value=\"value\" :class=\"className\" v-bind=\"rest\">\n <slot />\n </TabsPrimitive.Trigger>\n</template>\n",
|
|
2476
2653
|
type: "registry:ui",
|
|
2477
2654
|
path: "tabs/tabs-trigger.vue"
|
|
2478
2655
|
},
|
|
2479
2656
|
{
|
|
2480
|
-
content: "<script lang=\"ts\">\nimport type { TabsRootProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsProps
|
|
2657
|
+
content: "<script lang=\"ts\">\nimport type { TabsRootProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsProps extends /* @vue-ignore */ TabsRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"horizontal\", ...rest } = defineProps<TabsProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <TabsPrimitive.Root data-slot=\"tabs\" :class=\"className\" v-bind=\"rest\">\n <slot />\n </TabsPrimitive.Root>\n</template>\n",
|
|
2481
2658
|
type: "registry:ui",
|
|
2482
2659
|
path: "tabs/tabs.vue"
|
|
2483
2660
|
}
|