sprawlify 0.0.99 → 0.0.101

package/dist/index.mjs

@@ -8,7 +8,7 @@ import { existsSync } from "fs";
 import prompts from "prompts";
 import { faker } from "@faker-js/faker";
 //#region package.json
-var version = "0.0.99";
+var version = "0.0.101";
 //#endregion
 //#region src/utils/file-helper.ts
 const FILE_BACKUP_SUFFIX = ".bak";
@@ -197,18 +197,199 @@ const METAFRAMEWORKS = {
 const PRESETS = {
 	clay: {
 		name: "Clay",
-		frameworks: ["react"]
+		frameworks: { react: {} }
 	},
 	monochrome: {
 		name: "Monochrome",
-		frameworks: [
-			"react",
-			"solid",
-			"svelte",
-			"vue"
-		]
+		frameworks: {
+			react: {
+				dependencies: {
+					"@sprawlify/react": "^0.0.100",
+					"class-variance-authority": "^0.7.1",
+					clsx: "^2.1.1",
+					react: "^18.2.0",
+					"tailwind-merge": "^3.3.1"
+				},
+				devDependencies: {},
+				items: [
+					{
+						name: "alert",
+						dependencies: [
+							"react",
+							"class-variance-authority",
+							"@/lib/utils",
+							"@sprawlify/react"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "alert.tsx"
+						}]
+					},
+					{
+						name: "aspect-ratio",
+						dependencies: ["@sprawlify/react"],
+						files: [{
+							content: "import { 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",
+							type: "registry:ui",
+							path: "aspect-ratio.tsx"
+						}]
+					},
+					{
+						name: "avatar",
+						dependencies: [
+							"react",
+							"@sprawlify/react",
+							"@/lib"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "avatar.tsx"
+						}]
+					},
+					{
+						name: "badge",
+						dependencies: [
+							"react",
+							"class-variance-authority",
+							"@/lib/utils",
+							"@sprawlify/react"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "badge.tsx"
+						}]
+					},
+					{
+						name: "button-group",
+						type: "registry:ui",
+						dependencies: [
+							"class-variance-authority",
+							"@/lib/utils",
+							"@/components/ui/separator",
+							"@sprawlify/react"
+						],
+						files: [{
+							content: "import { 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",
+							type: "registry:ui",
+							path: "button-group.tsx"
+						}]
+					},
+					{
+						name: "button",
+						dependencies: [
+							"react",
+							"class-variance-authority",
+							"@/lib/utils",
+							"@sprawlify/react"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "button.tsx"
+						}]
+					},
+					{
+						name: "card",
+						dependencies: [
+							"react",
+							"@/lib/utils",
+							"@sprawlify/react"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "card.tsx"
+						}]
+					},
+					{
+						name: "checkbox",
+						dependencies: [
+							"react",
+							"@sprawlify/react",
+							"@/lib/utils",
+							"lucide-react"
+						],
+						files: [{
+							content: "import * 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",
+							type: "registry:ui",
+							path: "checkbox.tsx"
+						}]
+					},
+					{
+						name: "utils",
+						dependencies: ["clsx", "tailwind-merge"],
+						files: [{
+							content: "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
+							type: "registry:utils",
+							path: "utils.ts"
+						}]
+					}
+				]
+			},
+			solid: {
+				dependencies: {
+					"class-variance-authority": "^0.7.1",
+					clsx: "^2.1.1",
+					"tailwind-merge": "^3.3.1"
+				},
+				devDependencies: {},
+				items: [{
+					name: "utils",
+					dependencies: ["clsx", "tailwind-merge"],
+					files: [{
+						content: "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
+						type: "registry:utils",
+						path: "utils.ts"
+					}]
+				}]
+			},
+			svelte: {
+				dependencies: {
+					"class-variance-authority": "^0.7.1",
+					clsx: "^2.1.1",
+					"tailwind-merge": "^3.3.1"
+				},
+				devDependencies: {},
+				items: [{
+					name: "utils",
+					dependencies: ["clsx", "tailwind-merge"],
+					files: [{
+						content: "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
+						type: "registry:utils",
+						path: "utils.ts"
+					}]
+				}]
+			},
+			vue: {
+				dependencies: {
+					"class-variance-authority": "^0.7.1",
+					clsx: "^2.1.1",
+					"tailwind-merge": "^3.3.1"
+				},
+				devDependencies: {},
+				items: [{
+					name: "utils",
+					dependencies: ["clsx", "tailwind-merge"],
+					files: [{
+						content: "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
+						type: "registry:utils",
+						path: "utils.ts"
+					}]
+				}]
+			}
+		}
 	}
 };
+function getPresetItems(presetName, frameworkName) {
+	return getFrameworkPreset(presetName, frameworkName)?.items ?? [];
+}
+function getFrameworkPreset(presetName, frameworkName) {
+	if (!presetName || !frameworkName) return;
+	return PRESETS[presetName]?.frameworks?.[frameworkName];
+}
 //#endregion
 //#region src/commands/init/options.ts
 const initOptionsSchema = z.object({
@@ -295,7 +476,7 @@ async function promptForMissingSelections(options) {
 			choices: Object.entries(PRESETS).map(([key, preset]) => ({
 				title: preset.name,
 				value: key,
-				disabled: !preset.frameworks.includes(options.framework)
+				disabled: !Object.keys(preset.frameworks).includes(options.framework)
 			})),
 			initial: 0
 		});
@@ -427,19 +608,21 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sprawlify/primitives": "^0.0.100",
+    "@sprawlify/react": "^0.0.100",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "globals": "^17.4.0",
-    "tailwindcss": "^4.2.1",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.0"
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1"
   }
 }`
 		},
@@ -598,14 +781,16 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sprawlify/primitives": "^0.0.100",
+    "@sprawlify/solid": "^0.0.100",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.0",
-    "tailwindcss": "^4.2.1",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1",
     "vite-plugin-solid": "^2.11.11"
   }
 }`
@@ -762,16 +947,20 @@ dist-ssr
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
   },
+  "dependencies": {
+    "@sprawlify/primitives": "^0.0.100",
+    "@sprawlify/svelte": "^0.0.100"
+  },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
     "svelte": "^5.54.0",
     "svelte-check": "^4.4.5",
-    "tailwindcss": "^4.2.1",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.0"
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1"
   }
 }`
 		},
@@ -918,16 +1107,18 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sprawlify/primitives": "^0.0.100",
+    "@sprawlify/vue": "^0.0.100",
     "vue": "^3.5.30"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.0",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/tsconfig": "^0.9.0",
-    "tailwindcss": "^4.2.1",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1",
     "vue-tsc": "^3.2.6"
   }
 }`
@@ -1001,6 +1192,85 @@ export default defineConfig({
 };
 //#endregion
 //#region src/commands/init/run-init.ts
+function resolvePresetFilePath(cwd, file) {
+	const srcPath = path.resolve(cwd, "src");
+	const appPath = path.resolve(cwd, "app");
+	if (file.type === "registry:utils") {
+		if (fsExtra.existsSync(srcPath)) return path.resolve(srcPath, "lib", file.path);
+		if (fsExtra.existsSync(appPath)) return path.resolve(appPath, "lib", file.path);
+		return path.resolve(srcPath, "lib", file.path);
+	}
+	if (file.type === "registry:ui") {
+		if (fsExtra.existsSync(srcPath)) return path.resolve(srcPath, "components", "ui", file.path);
+		if (fsExtra.existsSync(appPath)) return path.resolve(appPath, "components", "ui", file.path);
+		return path.resolve(srcPath, "components", "ui", file.path);
+	}
+	return path.resolve(cwd, file.path);
+}
+function resolveItemsToApply(presetItems, requestedComponents) {
+	const presetItemsByName = new Map(presetItems.map((item) => [item.name, item]));
+	const itemNamesToApply = /* @__PURE__ */ new Set();
+	const packageNames = /* @__PURE__ */ new Set();
+	const unresolvedNames = /* @__PURE__ */ new Set();
+	const queue = requestedComponents.size === 0 ? presetItems.map((item) => item.name) : [...requestedComponents];
+	while (queue.length > 0) {
+		const dependencyName = queue.shift();
+		if (!dependencyName) continue;
+		const matchingItem = presetItemsByName.get(dependencyName);
+		if (matchingItem) {
+			if (itemNamesToApply.has(matchingItem.name)) continue;
+			itemNamesToApply.add(matchingItem.name);
+			for (const nestedDependency of matchingItem.dependencies ?? []) queue.push(nestedDependency);
+			continue;
+		}
+		packageNames.add(dependencyName);
+	}
+	if (requestedComponents.size > 0) {
+		for (const componentName of requestedComponents) if (!presetItemsByName.has(componentName)) unresolvedNames.add(componentName);
+	}
+	return {
+		itemsToApply: [...itemNamesToApply].map((itemName) => presetItemsByName.get(itemName)).filter((item) => Boolean(item)),
+		packageNames,
+		unresolvedNames
+	};
+}
+async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames) {
+	if (!frameworkPreset || packageNames.size === 0) return;
+	const packageJsonPath = path.resolve(cwd, "package.json");
+	if (!fsExtra.existsSync(packageJsonPath)) {
+		logger.warn("Skipping preset package dependencies because package.json was not found.");
+		return;
+	}
+	const packageJson = await fsExtra.readJson(packageJsonPath);
+	let didChange = false;
+	const missingPackages = [];
+	packageJson.dependencies ??= {};
+	packageJson.devDependencies ??= {};
+	for (const packageName of packageNames) {
+		const dependencyVersion = frameworkPreset.dependencies?.[packageName];
+		if (dependencyVersion) {
+			if (!packageJson.dependencies[packageName]) {
+				packageJson.dependencies[packageName] = dependencyVersion;
+				didChange = true;
+			}
+			continue;
+		}
+		const devDependencyVersion = frameworkPreset.devDependencies?.[packageName];
+		if (devDependencyVersion) {
+			if (!packageJson.devDependencies[packageName]) {
+				packageJson.devDependencies[packageName] = devDependencyVersion;
+				didChange = true;
+			}
+			continue;
+		}
+		missingPackages.push(packageName);
+	}
+	if (didChange) {
+		await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+		logger.success("Updated package.json with preset package dependencies.");
+	}
+	if (missingPackages.length > 0) logger.warn(`Skipping unresolved preset packages: ${missingPackages.map((packageName) => highlighter.info(packageName)).join(", ")}.`);
+}
 async function runInit(options) {
 	let cwd = options.cwd;
 	if (options.name && options.name !== ".") {
@@ -1026,12 +1296,7 @@ async function runInit(options) {
 		$schema: "https://ui.primitives.com/schema.json",
 		framework: options.framework,
 		preset: options.preset,
-		metaframework: options.metaframework,
-		aliases: {
-			components: "@/components",
-			ui: "@/components/ui",
-			utils: "@/lib/utils"
-		}
+		metaframework: options.metaframework
 	};
 	let backupPath = null;
 	if (fsExtra.existsSync(componentsJsonPath)) {
@@ -1052,6 +1317,25 @@ async function runInit(options) {
 		}
 		throw error;
 	}
+	const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
+	const { itemsToApply, packageNames, unresolvedNames } = resolveItemsToApply(getPresetItems(options.preset, options.framework), new Set(options.components ?? []));
+	if (unresolvedNames.size > 0) logger.warn(`Skipping unknown preset component options: ${[...unresolvedNames].map((componentName) => highlighter.info(componentName)).join(", ")}.`);
+	if (itemsToApply.length === 0) {
+		await applyPresetPackageDependencies(cwd, frameworkPreset, packageNames);
+		return;
+	}
+	await applyPresetPackageDependencies(cwd, frameworkPreset, packageNames);
+	logger.info(`Applying preset components: ${itemsToApply.map((item) => highlighter.info(item.name)).join(", ")}.`);
+	for (const item of itemsToApply) for (const file of item.files ?? []) {
+		const targetPath = resolvePresetFilePath(cwd, file);
+		if (fsExtra.existsSync(targetPath) && !options.override) {
+			logger.warn(`Skipping ${highlighter.info(path.relative(cwd, targetPath))} because it already exists. Use ${highlighter.info("--override")} to replace it.`);
+			continue;
+		}
+		await fsExtra.ensureDir(path.dirname(targetPath));
+		await fsExtra.writeFile(targetPath, file.content, "utf8");
+		logger.success(`Created ${highlighter.info(path.relative(cwd, targetPath))} from preset component ${highlighter.info(item.name)}.`);
+	}
 }
 //#endregion
 //#region src/commands/init.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprawlify",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "type": "module",
   "description": "A command-line interface for Sprawlify.",
   "author": "sprawlify <npm@sprawlify.com>",