@static-ui/core 0.1.0-beta.1

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+type FrameworkId = "react" | "nextjs" | "vue" | "nuxt" | "solid" | "svelte" | "astro" | "remix";
+interface ComponentSchema {
+    name: string;
+    description: string;
+    category: string;
+    frameworks: FrameworkId[];
+    props: ComponentProp[];
+    dependencies: Record<FrameworkId, string[]>;
+    tailwindClasses: string;
+    slots: ComponentSlot[];
+    variants: Record<string, ComponentVariantDefinition>;
+}
+interface ComponentProp {
+    name: string;
+    type: string;
+    default?: string;
+    description?: string;
+    required?: boolean;
+}
+interface ComponentSlot {
+    name: string;
+    description?: string;
+    required?: boolean;
+}
+interface ComponentVariantDefinition {
+    values: Record<string, string>;
+    default: string;
+}
+interface GeneratedComponent {
+    framework: FrameworkId;
+    name: string;
+    content: string;
+    extension: string;
+    dependencies: string[];
+}
+
+declare const buttonSchema: ComponentSchema;
+
+declare function generateReactComponent(schema: ComponentSchema): GeneratedComponent;
+
+declare function generateVueComponent(schema: ComponentSchema): GeneratedComponent;
+
+declare function generateSolidComponent(schema: ComponentSchema): GeneratedComponent;
+
+declare function generateSvelteComponent(schema: ComponentSchema): GeneratedComponent;
+
+export { type ComponentProp, type ComponentSchema, type ComponentSlot, type ComponentVariantDefinition, type FrameworkId, type GeneratedComponent, buttonSchema, generateReactComponent, generateSolidComponent, generateSvelteComponent, generateVueComponent };

package/dist/index.js

@@ -0,0 +1,255 @@
+// src/schemas/button.ts
+var buttonSchema = {
+  name: "button",
+  description: "A clickable element that triggers an action",
+  category: "actions",
+  frameworks: ["react", "nextjs", "vue", "nuxt", "solid", "svelte"],
+  props: [
+    { name: "variant", type: "'default' | 'outline' | 'destructive'", default: "default", description: "Button visual style" },
+    { name: "size", type: "'default' | 'sm' | 'lg'", default: "default", description: "Button size" },
+    { name: "disabled", type: "boolean", default: "false", description: "Whether the button is disabled" },
+    { name: "children", type: "React.ReactNode", description: "Button content", required: true }
+  ],
+  dependencies: {
+    react: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+    nextjs: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+    vue: ["class-variance-authority", "clsx", "tailwind-merge"],
+    nuxt: ["class-variance-authority", "clsx", "tailwind-merge"],
+    solid: ["clsx", "tailwind-merge"],
+    svelte: ["clsx", "tailwind-merge"],
+    astro: [],
+    remix: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"]
+  },
+  tailwindClasses: "inline-flex items-center justify-center font-medium rounded-md text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2",
+  slots: [
+    { name: "root", description: "The button element itself" }
+  ],
+  variants: {
+    variant: {
+      values: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-border bg-background text-foreground hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      },
+      default: "default"
+    },
+    size: {
+      values: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8"
+      },
+      default: "default"
+    }
+  }
+};
+
+// src/generators/react.ts
+function generateReactComponent(schema) {
+  const variantsCode = schema.variants ? Object.entries(schema.variants).reduce((acc, [name, variant]) => {
+    const entries = Object.entries(variant.values).map(([k, v]) => `        ${k}: "${v}",`).join("\n");
+    return `${acc}
+    ${name}: {
+${entries}
+    },
+    defaultVariants: {
+      ${name}: "${variant.default}",
+    },`;
+  }, `const ${schema.name}Variants = cva("${schema.tailwindClasses}", {`) + "\n  });" : "";
+  const content = `import * as React from "react"
+import { Button as BaseButton } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+${variantsCode}
+
+export interface ${capitalize(schema.name)}Props
+  extends React.ComponentPropsWithoutRef<typeof BaseButton>,
+    VariantProps<typeof ${schema.name}Variants> {}
+
+const ${capitalize(schema.name)} = React.forwardRef<HTMLButtonElement, ${capitalize(schema.name)}Props>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <BaseButton
+        ref={ref}
+        className={cn(${schema.name}Variants({ variant, size, className }))}
+        {...props}
+      />
+    )
+  }
+)
+
+${capitalize(schema.name)}.displayName = "${capitalize(schema.name)}"
+
+export { ${capitalize(schema.name)}, ${schema.name}Variants }
+`;
+  return {
+    framework: "react",
+    name: schema.name,
+    content,
+    extension: ".tsx",
+    dependencies: schema.dependencies.react
+  };
+}
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+// src/generators/vue.ts
+function generateVueComponent(schema) {
+  const variantProps = schema.variants ? Object.entries(schema.variants).map(([name, v]) => `    ${name}: {
+      type: String,
+      default: "${v.default}",
+      validator: (value: string) => ["${Object.keys(v.values).join('", "')}"].includes(value),
+    },`).join("\n") : "";
+  const variantClasses = schema.variants ? Object.entries(schema.variants).map(([name, v]) => {
+    const entries = Object.entries(v.values).map(([k, cls]) => `      case "${k}": classes.push("${cls}"); break;`).join("\n");
+    return `  const ${name}Classes = computed(() => {
+    const classes: string[] = [];
+    switch (props.${name}) {
+${entries}
+    }
+    return classes;
+  });`;
+  }).join("\n\n") : "";
+  const mergedClasses = schema.variants ? `const mergedClasses = computed(() => {
+    return cn("${schema.tailwindClasses}", ...${Object.keys(schema.variants).map((v) => `${v}Classes.value`).join(", ")});
+  });` : `const mergedClasses = "${schema.tailwindClasses}";`;
+  const content = `<template>
+  <button
+    :class="mergedClasses"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+
+interface Props {
+  variant?: "${Object.keys(schema.variants?.variant?.values || {}).join('" | "')}"
+  size?: "${Object.keys(schema.variants?.size?.values || {}).join('" | "')}"
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "${schema.variants?.variant?.default || "default"}",
+  size: "${schema.variants?.size?.default || "default"}",
+  disabled: false,
+})
+
+${variantClasses}
+
+${mergedClasses}
+</script>
+`;
+  return {
+    framework: "vue",
+    name: schema.name,
+    content,
+    extension: ".vue",
+    dependencies: schema.dependencies.vue
+  };
+}
+
+// src/generators/solid.ts
+function generateSolidComponent(schema) {
+  const variantEntries = schema.variants ? Object.entries(schema.variants).map(([name, v]) => {
+    const entries = Object.entries(v.values).map(([k, cls]) => `    ${k}: "${cls}"`).join(",\n");
+    return `const ${schema.name}${capitalize2(name)} = {
+${entries},
+  } as const;`;
+  }).join("\n\n") : "";
+  const variantFn = schema.variants ? `function get${capitalize2(schema.name)}Classes(props: ${capitalize2(schema.name)}Props) {
+    const classes = ["${schema.tailwindClasses}"];
+    ${Object.entries(schema.variants).map(([name, v]) => {
+    return `if (props.${name}) classes.push(${schema.name}${capitalize2(name)}[props.${name}]);`;
+  }).join("\n    ")}
+    return cn(...classes);
+  }` : "";
+  const content = `import type { ComponentProps } from "solid-js"
+import { cn } from "@/lib/utils"
+
+${variantEntries}
+
+export interface ${capitalize2(schema.name)}Props {
+  variant?: "${Object.keys(schema.variants?.variant?.values || {}).join('" | "')}"
+  size?: "${Object.keys(schema.variants?.size?.values || {}).join('" | "')}"
+  disabled?: boolean
+  class?: string
+  children?: any
+}
+
+${variantFn}
+
+export function ${capitalize2(schema.name)}(props: ${capitalize2(schema.name)}Props) {
+  return (
+    <button
+      class={get${capitalize2(schema.name)}Classes(props)}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </button>
+  )
+}
+`;
+  return {
+    framework: "solid",
+    name: schema.name,
+    content,
+    extension: ".tsx",
+    dependencies: schema.dependencies.solid
+  };
+}
+function capitalize2(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+// src/generators/svelte.ts
+function generateSvelteComponent(schema) {
+  const variantProps = schema.variants ? Object.entries(schema.variants).map(([name, v]) => {
+    return `  let ${name}: "${Object.keys(v.values).join('" | "')}" = "${v.default}";`;
+  }).join("\n") : "";
+  const variantClassMap = schema.variants ? Object.entries(schema.variants).map(([name, v]) => {
+    const mapEntries = Object.entries(v.values).map(([k, cls]) => `      "${k}": "${cls}"`).join(",\n");
+    return `  const ${name}Classes: Record<string, string> = {
+${mapEntries},
+  };`;
+  }).join("\n\n") : "";
+  const scriptContent = `<script lang="ts">
+  import { cn } from "$lib/utils"
+
+  export let disabled = false;
+${variantProps ? "\n" + variantProps : ""}
+${variantClassMap ? "\n" + variantClassMap : ""}
+
+  $: classes = cn(
+    "${schema.tailwindClasses}",
+    ${schema.variants ? Object.entries(schema.variants).map(([name]) => `${name}Classes[${name}]`).join(",\n    ") : ""}
+  );
+</script>
+`;
+  const templateContent = `
+<button class={classes} {disabled} on:click>
+  <slot />
+</button>
+`;
+  const content = scriptContent + templateContent;
+  return {
+    framework: "svelte",
+    name: schema.name,
+    content,
+    extension: ".svelte",
+    dependencies: schema.dependencies.svelte
+  };
+}
+export {
+  buttonSchema,
+  generateReactComponent,
+  generateSolidComponent,
+  generateSvelteComponent,
+  generateVueComponent
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@static-ui/core",
+  "version": "0.1.0-beta.1",
+  "private": false,
+  "type": "module",
+  "description": "Static UI core - component schemas and multi-framework code generators. Source of truth for component definitions.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "static-ui",
+    "core",
+    "schemas",
+    "codegen",
+    "components",
+    "multi-framework"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Anshul563/static-ui.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://get-staticui.vercel.app",
+  "bugs": {
+    "url": "https://github.com/Anshul563/static-ui/issues"
+  },
+  "author": {
+    "name": "Anshul Shakya",
+    "url": "https://github.com/Anshul563"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "tsup": "^8.0.1"
+  }
+}

package/src/generators/index.ts

@@ -0,0 +1,4 @@
+export { generateReactComponent } from "./react.js";
+export { generateVueComponent } from "./vue.js";
+export { generateSolidComponent } from "./solid.js";
+export { generateSvelteComponent } from "./svelte.js";

package/src/generators/react.ts

@@ -0,0 +1,54 @@
+import type { ComponentSchema, GeneratedComponent } from "../types.js";
+
+export function generateReactComponent(schema: ComponentSchema): GeneratedComponent {
+  const variantsCode = schema.variants ? Object.entries(schema.variants).reduce((acc, [name, variant]) => {
+    const entries = Object.entries(variant.values).map(([k, v]) => `        ${k}: "${v}",`).join("\n");
+    return `${acc}
+    ${name}: {
+${entries}
+    },
+    defaultVariants: {
+      ${name}: "${variant.default}",
+    },`;
+  }, `const ${schema.name}Variants = cva("${schema.tailwindClasses}", {`) + "\n  });" : "";
+
+  const content = `import * as React from "react"
+import { Button as BaseButton } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+${variantsCode}
+
+export interface ${capitalize(schema.name)}Props
+  extends React.ComponentPropsWithoutRef<typeof BaseButton>,
+    VariantProps<typeof ${schema.name}Variants> {}
+
+const ${capitalize(schema.name)} = React.forwardRef<HTMLButtonElement, ${capitalize(schema.name)}Props>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <BaseButton
+        ref={ref}
+        className={cn(${schema.name}Variants({ variant, size, className }))}
+        {...props}
+      />
+    )
+  }
+)
+
+${capitalize(schema.name)}.displayName = "${capitalize(schema.name)}"
+
+export { ${capitalize(schema.name)}, ${schema.name}Variants }
+`;
+
+  return {
+    framework: "react",
+    name: schema.name,
+    content,
+    extension: ".tsx",
+    dependencies: schema.dependencies.react,
+  };
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

package/src/generators/solid.ts

@@ -0,0 +1,59 @@
+import type { ComponentSchema, GeneratedComponent } from "../types.js";
+
+export function generateSolidComponent(schema: ComponentSchema): GeneratedComponent {
+  const variantEntries = schema.variants
+    ? Object.entries(schema.variants).map(([name, v]) => {
+        const entries = Object.entries(v.values).map(([k, cls]) => `    ${k}: "${cls}"`).join(",\n");
+        return `const ${schema.name}${capitalize(name)} = {\n${entries},\n  } as const;`;
+      }).join("\n\n")
+    : "";
+
+  const variantFn = schema.variants
+    ? `function get${capitalize(schema.name)}Classes(props: ${capitalize(schema.name)}Props) {
+    const classes = ["${schema.tailwindClasses}"];
+    ${Object.entries(schema.variants).map(([name, v]) => {
+      return `if (props.${name}) classes.push(${schema.name}${capitalize(name)}[props.${name}]);`;
+    }).join("\n    ")}
+    return cn(...classes);
+  }`
+    : "";
+
+  const content = `import type { ComponentProps } from "solid-js"
+import { cn } from "@/lib/utils"
+
+${variantEntries}
+
+export interface ${capitalize(schema.name)}Props {
+  variant?: "${Object.keys(schema.variants?.variant?.values || {}).join('" | "')}"
+  size?: "${Object.keys(schema.variants?.size?.values || {}).join('" | "')}"
+  disabled?: boolean
+  class?: string
+  children?: any
+}
+
+${variantFn}
+
+export function ${capitalize(schema.name)}(props: ${capitalize(schema.name)}Props) {
+  return (
+    <button
+      class={get${capitalize(schema.name)}Classes(props)}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </button>
+  )
+}
+`;
+
+  return {
+    framework: "solid",
+    name: schema.name,
+    content,
+    extension: ".tsx",
+    dependencies: schema.dependencies.solid,
+  };
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

package/src/generators/svelte.ts

@@ -0,0 +1,48 @@
+import type { ComponentSchema, GeneratedComponent } from "../types.js";
+
+export function generateSvelteComponent(schema: ComponentSchema): GeneratedComponent {
+  const variantProps = schema.variants
+    ? Object.entries(schema.variants).map(([name, v]) => {
+        return `  let ${name}: "${Object.keys(v.values).join('" | "')}" = "${v.default}";`;
+      }).join("\n")
+    : "";
+
+  const variantClassMap = schema.variants
+    ? Object.entries(schema.variants).map(([name, v]) => {
+        const mapEntries = Object.entries(v.values).map(([k, cls]) => `      "${k}": "${cls}"`).join(",\n");
+        return `  const ${name}Classes: Record<string, string> = {\n${mapEntries},\n  };`;
+      }).join("\n\n")
+    : "";
+
+  const scriptContent = `<script lang="ts">
+  import { cn } from "$lib/utils"
+
+  export let disabled = false;
+${variantProps ? "\n" + variantProps : ""}
+${variantClassMap ? "\n" + variantClassMap : ""}
+
+  $: classes = cn(
+    "${schema.tailwindClasses}",
+    ${schema.variants
+      ? Object.entries(schema.variants).map(([name]) => `${name}Classes[${name}]`).join(",\n    ")
+      : ""}
+  );
+</script>
+`;
+
+  const templateContent = `
+<button class={classes} {disabled} on:click>
+  <slot />
+</button>
+`;
+
+  const content = scriptContent + templateContent;
+
+  return {
+    framework: "svelte",
+    name: schema.name,
+    content,
+    extension: ".svelte",
+    dependencies: schema.dependencies.svelte,
+  };
+}

package/src/generators/vue.ts

@@ -0,0 +1,70 @@
+import type { ComponentSchema, GeneratedComponent } from "../types.js";
+
+export function generateVueComponent(schema: ComponentSchema): GeneratedComponent {
+  const variantProps = schema.variants
+    ? Object.entries(schema.variants).map(([name, v]) => `    ${name}: {
+      type: String,
+      default: "${v.default}",
+      validator: (value: string) => ["${Object.keys(v.values).join('", "')}"].includes(value),
+    },`).join("\n")
+    : "";
+
+  const variantClasses = schema.variants
+    ? Object.entries(schema.variants).map(([name, v]) => {
+        const entries = Object.entries(v.values).map(([k, cls]) => `      case "${k}": classes.push("${cls}"); break;`).join("\n");
+        return `  const ${name}Classes = computed(() => {
+    const classes: string[] = [];
+    switch (props.${name}) {
+${entries}
+    }
+    return classes;
+  });`;
+      }).join("\n\n")
+    : "";
+
+  const mergedClasses = schema.variants
+    ? `const mergedClasses = computed(() => {
+    return cn("${schema.tailwindClasses}", ...${Object.keys(schema.variants).map(v => `${v}Classes.value`).join(", ")});
+  });`
+    : `const mergedClasses = "${schema.tailwindClasses}";`;
+
+  const content = `<template>
+  <button
+    :class="mergedClasses"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+
+interface Props {
+  variant?: "${Object.keys(schema.variants?.variant?.values || {}).join('" | "')}"
+  size?: "${Object.keys(schema.variants?.size?.values || {}).join('" | "')}"
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "${schema.variants?.variant?.default || "default"}",
+  size: "${schema.variants?.size?.default || "default"}",
+  disabled: false,
+})
+
+${variantClasses}
+
+${mergedClasses}
+</script>
+`;
+
+  return {
+    framework: "vue",
+    name: schema.name,
+    content,
+    extension: ".vue",
+    dependencies: schema.dependencies.vue,
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { ComponentSchema, GeneratedComponent, ComponentProp, ComponentSlot, ComponentVariantDefinition, FrameworkId } from "./types.js";
+export { buttonSchema } from "./schemas/button.js";
+export { generateReactComponent, generateVueComponent, generateSolidComponent, generateSvelteComponent } from "./generators/index.js";

package/src/schemas/button.ts

@@ -0,0 +1,46 @@
+import type { ComponentSchema } from "../types.js";
+
+export const buttonSchema: ComponentSchema = {
+  name: "button",
+  description: "A clickable element that triggers an action",
+  category: "actions",
+  frameworks: ["react", "nextjs", "vue", "nuxt", "solid", "svelte"],
+  props: [
+    { name: "variant", type: "'default' | 'outline' | 'destructive'", default: "default", description: "Button visual style" },
+    { name: "size", type: "'default' | 'sm' | 'lg'", default: "default", description: "Button size" },
+    { name: "disabled", type: "boolean", default: "false", description: "Whether the button is disabled" },
+    { name: "children", type: "React.ReactNode", description: "Button content", required: true },
+  ],
+  dependencies: {
+    react: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+    nextjs: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+    vue: ["class-variance-authority", "clsx", "tailwind-merge"],
+    nuxt: ["class-variance-authority", "clsx", "tailwind-merge"],
+    solid: ["clsx", "tailwind-merge"],
+    svelte: ["clsx", "tailwind-merge"],
+    astro: [],
+    remix: ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  },
+  tailwindClasses: "inline-flex items-center justify-center font-medium rounded-md text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2",
+  slots: [
+    { name: "root", description: "The button element itself" },
+  ],
+  variants: {
+    variant: {
+      values: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-border bg-background text-foreground hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      },
+      default: "default",
+    },
+    size: {
+      values: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+      },
+      default: "default",
+    },
+  },
+};

package/src/types.ts

@@ -0,0 +1,48 @@
+export type FrameworkId =
+  | "react"
+  | "nextjs"
+  | "vue"
+  | "nuxt"
+  | "solid"
+  | "svelte"
+  | "astro"
+  | "remix";
+
+export interface ComponentSchema {
+  name: string;
+  description: string;
+  category: string;
+  frameworks: FrameworkId[];
+  props: ComponentProp[];
+  dependencies: Record<FrameworkId, string[]>;
+  tailwindClasses: string;
+  slots: ComponentSlot[];
+  variants: Record<string, ComponentVariantDefinition>;
+}
+
+export interface ComponentProp {
+  name: string;
+  type: string;
+  default?: string;
+  description?: string;
+  required?: boolean;
+}
+
+export interface ComponentSlot {
+  name: string;
+  description?: string;
+  required?: boolean;
+}
+
+export interface ComponentVariantDefinition {
+  values: Record<string, string>;
+  default: string;
+}
+
+export interface GeneratedComponent {
+  framework: FrameworkId;
+  name: string;
+  content: string;
+  extension: string;
+  dependencies: string[];
+}