create-strayl-app 1.0.1

package/dist/index.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+
+// src/index.ts
+import { Command } from "commander";
+import pc from "picocolors";
+import { cpSync, existsSync, readFileSync, renameSync, writeFileSync } from "fs";
+import { resolve, dirname, join } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var templateDir = resolve(__dirname, "..", "template");
+var program = new Command();
+program.name("create-strayl-app").description("Scaffold a new Strayl web application").requiredOption("--name <name>", "Name of the new project").action((opts) => {
+  const name = opts.name.trim();
+  if (!name) {
+    console.error(pc.red("Error: --name must not be empty."));
+    process.exit(1);
+  }
+  if (!/^[a-zA-Z0-9_@\/-][a-zA-Z0-9_.\-@\/]*$/.test(name)) {
+    console.error(
+      pc.red(
+        "Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes."
+      )
+    );
+    process.exit(1);
+  }
+  const targetDir = resolve(process.cwd(), name);
+  if (existsSync(targetDir)) {
+    console.error(
+      pc.red(`Error: Directory "${name}" already exists.`)
+    );
+    process.exit(1);
+  }
+  if (!existsSync(templateDir)) {
+    console.error(
+      pc.red("Error: Template directory not found. The package may be corrupted.")
+    );
+    process.exit(1);
+  }
+  console.log(pc.cyan(`Creating project "${name}"...`));
+  cpSync(templateDir, targetDir, { recursive: true });
+  const gitignorePath = join(targetDir, "gitignore");
+  if (existsSync(gitignorePath)) {
+    renameSync(gitignorePath, join(targetDir, ".gitignore"));
+  }
+  const pkgJsonPath = join(targetDir, "package.json");
+  if (existsSync(pkgJsonPath)) {
+    const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+    pkgJson.name = name;
+    writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + "\n");
+  }
+  console.log(pc.green(`
+Project "${name}" created successfully!
+`));
+  console.log("Next steps:");
+  console.log(pc.cyan(`  cd ${name}`));
+  console.log(pc.cyan("  npm install"));
+  console.log(pc.cyan("  npm run dev"));
+  console.log();
+});
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport pc from \"picocolors\";\nimport { cpSync, existsSync, readFileSync, renameSync, writeFileSync } from \"node:fs\";\nimport { resolve, dirname, join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\nconst templateDir = resolve(__dirname, \"..\", \"template\");\n\nconst program = new Command();\n\nprogram\n  .name(\"create-strayl-app\")\n  .description(\"Scaffold a new Strayl web application\")\n  .requiredOption(\"--name <name>\", \"Name of the new project\")\n  .action((opts: { name: string }) => {\n    const name = opts.name.trim();\n\n    if (!name) {\n      console.error(pc.red(\"Error: --name must not be empty.\"));\n      process.exit(1);\n    }\n\n    if (!/^[a-zA-Z0-9_@\\/-][a-zA-Z0-9_.\\-@\\/]*$/.test(name)) {\n      console.error(\n        pc.red(\n          \"Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes.\"\n        )\n      );\n      process.exit(1);\n    }\n\n    const targetDir = resolve(process.cwd(), name);\n\n    if (existsSync(targetDir)) {\n      console.error(\n        pc.red(`Error: Directory \"${name}\" already exists.`)\n      );\n      process.exit(1);\n    }\n\n    if (!existsSync(templateDir)) {\n      console.error(\n        pc.red(\"Error: Template directory not found. The package may be corrupted.\")\n      );\n      process.exit(1);\n    }\n\n    console.log(pc.cyan(`Creating project \"${name}\"...`));\n\n    cpSync(templateDir, targetDir, { recursive: true });\n\n    // npm publish strips .gitignore, so we ship it as \"gitignore\" and rename here\n    const gitignorePath = join(targetDir, \"gitignore\");\n    if (existsSync(gitignorePath)) {\n      renameSync(gitignorePath, join(targetDir, \".gitignore\"));\n    }\n\n    const pkgJsonPath = join(targetDir, \"package.json\");\n    if (existsSync(pkgJsonPath)) {\n      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, \"utf-8\"));\n      pkgJson.name = name;\n      writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + \"\\n\");\n    }\n\n    console.log(pc.green(`\\nProject \"${name}\" created successfully!\\n`));\n    console.log(\"Next steps:\");\n    console.log(pc.cyan(`  cd ${name}`));\n    console.log(pc.cyan(\"  npm install\"));\n    console.log(pc.cyan(\"  npm run dev\"));\n    console.log();\n  });\n\nprogram.parse();\n"],"mappings":";;;;AAAA,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,QAAQ,YAAY,cAAc,YAAY,qBAAqB;AAC5E,SAAS,SAAS,SAAS,YAAY;AACvC,SAAS,qBAAqB;AAE9B,IAAM,YAAY,QAAQ,cAAc,YAAY,GAAG,CAAC;AACxD,IAAM,cAAc,QAAQ,WAAW,MAAM,UAAU;AAEvD,IAAM,UAAU,IAAI,QAAQ;AAE5B,QACG,KAAK,mBAAmB,EACxB,YAAY,uCAAuC,EACnD,eAAe,iBAAiB,yBAAyB,EACzD,OAAO,CAAC,SAA2B;AAClC,QAAM,OAAO,KAAK,KAAK,KAAK;AAE5B,MAAI,CAAC,MAAM;AACT,YAAQ,MAAM,GAAG,IAAI,kCAAkC,CAAC;AACxD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,wCAAwC,KAAK,IAAI,GAAG;AACvD,YAAQ;AAAA,MACN,GAAG;AAAA,QACD;AAAA,MACF;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,YAAY,QAAQ,QAAQ,IAAI,GAAG,IAAI;AAE7C,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ;AAAA,MACN,GAAG,IAAI,qBAAqB,IAAI,mBAAmB;AAAA,IACrD;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,WAAW,WAAW,GAAG;AAC5B,YAAQ;AAAA,MACN,GAAG,IAAI,oEAAoE;AAAA,IAC7E;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,UAAQ,IAAI,GAAG,KAAK,qBAAqB,IAAI,MAAM,CAAC;AAEpD,SAAO,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;AAGlD,QAAM,gBAAgB,KAAK,WAAW,WAAW;AACjD,MAAI,WAAW,aAAa,GAAG;AAC7B,eAAW,eAAe,KAAK,WAAW,YAAY,CAAC;AAAA,EACzD;AAEA,QAAM,cAAc,KAAK,WAAW,cAAc;AAClD,MAAI,WAAW,WAAW,GAAG;AAC3B,UAAM,UAAU,KAAK,MAAM,aAAa,aAAa,OAAO,CAAC;AAC7D,YAAQ,OAAO;AACf,kBAAc,aAAa,KAAK,UAAU,SAAS,MAAM,CAAC,IAAI,IAAI;AAAA,EACpE;AAEA,UAAQ,IAAI,GAAG,MAAM;AAAA,WAAc,IAAI;AAAA,CAA2B,CAAC;AACnE,UAAQ,IAAI,aAAa;AACzB,UAAQ,IAAI,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC;AACnC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI;AACd,CAAC;AAEH,QAAQ,MAAM;","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "create-strayl-app",
+  "version": "1.0.1",
+  "description": "Scaffold a new Strayl web application",
+  "type": "module",
+  "bin": {
+    "create-strayl-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "strayl",
+    "create",
+    "app",
+    "scaffold"
+  ],
+  "author": "Strayl Inc",
+  "license": "MIT"
+}

package/template/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  }
+}

package/template/gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+.output
+.vinxi
+.nitro
+.wrangler
+*.local
+.env
+.env.*
+!.env.example

package/template/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "my-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/geist": "^5.1.1",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@tailwindcss/vite": "^4.1.4",
+    "@tanstack/react-router": "^1.159.5",
+    "@tanstack/react-start": "^1.159.5",
+    "@tanstack/router-plugin": "^1.159.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.1.4",
+    "tw-animate-css": "^1.2.9",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "typescript": "^5.7.3",
+    "vite": "^7.0.0",
+    "vite-plugin-nitro": "^0.0.0-nightly-20250327-0404e32"
+  }
+}

package/template/public/favicon.ico

@@ -0,0 +1 @@
+

package/template/src/components/theme-provider.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}

package/template/src/components/ui/badge.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button,a&]:cursor-pointer [button,a&]:pointer-coarse:after:absolute [button,a&]:pointer-coarse:after:size-full [button,a&]:pointer-coarse:after:min-h-11 [button,a&]:pointer-coarse:after:min-w-11",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default:
+          "h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs",
+        lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm",
+        sm: "h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground [button,a&]:hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white [button,a&]:hover:bg-destructive/90",
+        error:
+          "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+        info: "bg-info/8 text-info-foreground dark:bg-info/16",
+        outline:
+          "border-input bg-background text-foreground dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+        secondary:
+          "bg-secondary text-secondary-foreground [button,a&]:hover:bg-secondary/90",
+        success: "bg-success/8 text-success-foreground dark:bg-success/16",
+        warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+      },
+    },
+  },
+);
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  size?: VariantProps<typeof badgeVariants>["size"];
+}
+
+function Badge({ className, variant, size, render, ...props }: BadgeProps) {
+  const defaultProps = {
+    className: cn(badgeVariants({ className, size, variant })),
+    "data-slot": "badge",
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+export { Badge, badgeVariants };

package/template/src/components/ui/button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+        icon: "size-9 sm:size-8",
+        "icon-lg": "size-10 sm:size-9",
+        "icon-sm": "size-8 sm:size-7",
+        "icon-xl":
+          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xs":
+          "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+      },
+      variant: {
+        default:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
+        destructive:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
+        "destructive-outline":
+          "border-input bg-transparent not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
+        ghost:
+          "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
+        link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+        outline:
+          "border-input bg-background not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
+      },
+    },
+  },
+);
+
+interface ButtonProps extends useRender.ComponentProps<"button"> {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+}
+
+function Button({ className, variant, size, render, ...props }: ButtonProps) {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    className: cn(buttonVariants({ className, size, variant })),
+    "data-slot": "button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export { Button, buttonVariants };

package/template/src/components/ui/card.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "relative flex flex-col rounded-lg border bg-card text-card-foreground",
+      className,
+    ),
+    "data-slot": "card",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFrame({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "flex flex-col relative rounded-2xl border bg-background before:absolute before:inset-0 before:rounded-[inherit] before:bg-muted/72 before:pointer-events-none not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:-m-px *:not-last:data-[slot=card]:rounded-b-lg *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-lg)-1px)] *:not-first:data-[slot=card]:rounded-t-lg *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-lg)-1px)] *:data-[slot=card]:[clip-path:inset(-1rem_1px)] *:data-[slot=card]:first:[clip-path:inset(1px_1px_-1rem_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[clip-path:inset(-1rem_1px_1px_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:data-[slot=card]:bg-clip-padding",
+      className,
+    ),
+    "data-slot": "card-frame",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFrameHeader({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("flex flex-col px-6 py-4", className),
+    "data-slot": "card-frame-header",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFrameTitle({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("font-semibold text-sm", className),
+    "data-slot": "card-frame-title",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFrameDescription({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("text-muted-foreground text-sm", className),
+    "data-slot": "card-frame-description",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFrameFooter({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("px-6 py-4", className),
+    "data-slot": "card-frame-footer",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardHeader({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+      className,
+    ),
+    "data-slot": "card-header",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardTitle({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("font-medium text-lg leading-none", className),
+    "data-slot": "card-title",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardDescription({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn("text-muted-foreground text-sm", className),
+    "data-slot": "card-description",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "col-start-2 row-span-2 row-start-1 self-start justify-self-end inline-flex",
+      className,
+    ),
+    "data-slot": "card-action",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardPanel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0",
+      className,
+    ),
+    "data-slot": "card-panel",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+function CardFooter({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4",
+      className,
+    ),
+    "data-slot": "card-footer",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export {
+  Card,
+  CardFrame,
+  CardFrameHeader,
+  CardFrameTitle,
+  CardFrameDescription,
+  CardFrameFooter,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardPanel,
+  CardPanel as CardContent,
+  CardTitle,
+};