shapes-ui 0.1.1

package/src/routeTree.gen.ts

@@ -0,0 +1,131 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as ComponentsRouteImport } from './routes/components'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ComponentsIndexRouteImport } from './routes/components.index'
+import { Route as ComponentsSlugRouteImport } from './routes/components.$slug'
+
+const ComponentsRoute = ComponentsRouteImport.update({
+  id: '/components',
+  path: '/components',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ComponentsIndexRoute = ComponentsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ComponentsRoute,
+} as any)
+const ComponentsSlugRoute = ComponentsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => ComponentsRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/components': typeof ComponentsRouteWithChildren
+  '/components/$slug': typeof ComponentsSlugRoute
+  '/components/': typeof ComponentsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/components/$slug': typeof ComponentsSlugRoute
+  '/components': typeof ComponentsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/components': typeof ComponentsRouteWithChildren
+  '/components/$slug': typeof ComponentsSlugRoute
+  '/components/': typeof ComponentsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/components' | '/components/$slug' | '/components/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/components/$slug' | '/components'
+  id: '__root__' | '/' | '/components' | '/components/$slug' | '/components/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ComponentsRoute: typeof ComponentsRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/components': {
+      id: '/components'
+      path: '/components'
+      fullPath: '/components'
+      preLoaderRoute: typeof ComponentsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/components/': {
+      id: '/components/'
+      path: '/'
+      fullPath: '/components/'
+      preLoaderRoute: typeof ComponentsIndexRouteImport
+      parentRoute: typeof ComponentsRoute
+    }
+    '/components/$slug': {
+      id: '/components/$slug'
+      path: '/$slug'
+      fullPath: '/components/$slug'
+      preLoaderRoute: typeof ComponentsSlugRouteImport
+      parentRoute: typeof ComponentsRoute
+    }
+  }
+}
+
+interface ComponentsRouteChildren {
+  ComponentsSlugRoute: typeof ComponentsSlugRoute
+  ComponentsIndexRoute: typeof ComponentsIndexRoute
+}
+
+const ComponentsRouteChildren: ComponentsRouteChildren = {
+  ComponentsSlugRoute: ComponentsSlugRoute,
+  ComponentsIndexRoute: ComponentsIndexRoute,
+}
+
+const ComponentsRouteWithChildren = ComponentsRoute._addFileChildren(
+  ComponentsRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ComponentsRoute: ComponentsRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+// Create a new router instance
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    context: {},
+
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  });
+
+  return router;
+};

package/src/routes/__root.tsx

@@ -0,0 +1,72 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { Suspense } from "react";
+
+import { Footer } from "@/components/docs/layout/footer";
+import { Header } from "@/components/docs/layout/header";
+import { SuspenseFallback } from "@/components/docs/layout/suspense-fallback";
+import { ThemeProvider } from "@/components/docs/theme-provider";
+import globalCss from "@/styles/globals.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "Shapes UI - The better way to build web apps",
+      },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: globalCss,
+      },
+      {
+        rel: "icon",
+        href: "/favicon.ico",
+      },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+});
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={<SuspenseFallback className=" h-dvh" />}>
+      <ThemeProvider>
+        <html lang="en">
+          <head>
+            <HeadContent />
+          </head>
+          <body className="flex h-dvh flex-col">
+            <Header />
+            <main className=" container mx-auto flex flex-1 overflow-hidden border-x">
+              {children}
+            </main>
+            <Footer />
+            <TanStackDevtools
+              config={{
+                position: "bottom-right",
+              }}
+              plugins={[
+                {
+                  name: "Tanstack Router",
+                  render: <TanStackRouterDevtoolsPanel />,
+                },
+              ]}
+            />
+            <Scripts />
+          </body>
+        </html>
+      </ThemeProvider>
+    </Suspense>
+  );
+}

package/src/routes/components.$slug.tsx

@@ -0,0 +1,62 @@
+import { MDXContent } from "@content-collections/mdx/react";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { allComponents } from "content-collections";
+import { useEffect, useState } from "react";
+
+import { PageHeader } from "@/components/docs/layout/page-header";
+import { mdxComponents } from "@/components/docs/markdown/components";
+import { RenderPreview } from "@/components/docs/markdown/render-preview";
+
+export const Route = createFileRoute("/components/$slug")({
+  loader: ({ params }) => {
+    const { slug } = params;
+    const component = (allComponents as any[]).find((c) => c.slug === slug);
+
+    if (!component) {
+      throw notFound();
+    }
+
+    return component;
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: `${loaderData?.title} - Shapes UI`,
+      },
+    ],
+    links: [
+      {
+        rel: "icon",
+        href: "/favicon.ico",
+      },
+    ],
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const component = Route.useLoaderData();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return (
+    <div className=" flex flex-col gap-6 ">
+      <PageHeader title={component?.title} subtitle={component?.description} />
+      <div className="container mx-auto max-w-4xl min-w-0 p-6">
+        {isMounted ? (
+          <MDXContent code={component.mdx} components={{ ...mdxComponents, RenderPreview }} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/routes/components.index.tsx

@@ -0,0 +1,55 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { allComponents } from "content-collections";
+
+import { PageHeader } from "@/components/docs/layout/page-header";
+
+export const Route = createFileRoute("/components/")({
+  component: RouteComponent,
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "All components - Shapes UI",
+      },
+    ],
+    links: [
+      {
+        rel: "icon",
+        href: "/favicon.ico?url",
+      },
+    ],
+  }),
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title="Components">
+        <p className=" text-sm text-muted-foreground">
+          List of all available components. We are working on adding more components.
+        </p>
+      </PageHeader>
+
+      <div className="mx-auto grid w-full max-w-5xl grid-cols-3 gap-2 p-6">
+        {[...allComponents]
+          .sort((a, b) => a.title.localeCompare(b.title))
+          .map((component) => (
+            <Link
+              key={component.slug}
+              to="/components/$slug"
+              params={{ slug: component.slug }}
+              className=" rounded border p-4 text-sm hover:bg-accent/40"
+            >
+              {component.title}
+            </Link>
+          ))}
+      </div>
+    </div>
+  );
+}

package/src/routes/components.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+import { SplitLayout } from "@/components/docs/layout/split-layout";
+
+export const Route = createFileRoute("/components")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <SplitLayout>
+      <Outlet />
+    </SplitLayout>
+  );
+}

package/src/routes/index.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+  return (
+    <div className=" flex-1 ">
+      <div className=" container mx-auto flex h-full flex-col items-center justify-center gap-6 p-6">
+        <h1 className=" text-center text-4xl font-bold">Build better products. Faster.</h1>
+        <div className=" w-fit rounded border bg-accent px-2 py-1 leading-0 text-accent-foreground">
+          <span className=" font-mono text-xs uppercase">alpha coming soon</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,66 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Grotesk:wght@300..700&display=swap");
+
+@import "./styles.css";
+
+:root {
+  --shiki-light-bg: transparent;
+  --shiki-dark-bg: transparent;
+}
+
+.shiki,
+.shiki code,
+.shiki pre {
+  background-color: transparent !important;
+}
+
+.shiki {
+  margin: 0;
+  overflow-x: auto;
+}
+
+.shiki,
+.shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark);
+}
+
+.line {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.line-number {
+  display: inline-block;
+  width: 1.5rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: var(--muted-foreground);
+  user-select: none;
+  opacity: 0.5;
+}
+
+/* Right-to-left opacity mask for images and svgs */
+.mask-rtl {
+  -webkit-mask-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 1) 15%,
+    rgba(0, 0, 0, 0.85) 45%,
+    rgba(0, 0, 0, 0.45) 70%,
+    rgba(0, 0, 0, 0.1) 85%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 1) 15%,
+    rgba(0, 0, 0, 0.85) 45%,
+    rgba(0, 0, 0, 0.45) 70%,
+    rgba(0, 0, 0, 0.1) 85%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}

package/src/styles/styles.css

@@ -0,0 +1,113 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&: is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popup: oklch(1 0 0);
+  --popup-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(57.7% 0.245 27.325);
+  --destructive-foreground: oklch(57.7% 0.245 27.325);
+  --success: oklch(56.4% 0.168 143.8);
+  --success-foreground: oklch(56.4% 0.168 143.8);
+  --warning: oklch(68.1% 0.15 59);
+  --warning-foreground: oklch(68.1% 0.15 59);
+  --info: oklch(60.9% 0.202 257.2);
+  --info-foreground: oklch(60.9% 0.202 257.2);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.25rem;
+  --transform-origin: center;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popup: oklch(0.145 0 0);
+  --popup-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(39.6% 0.141 25.723);
+  --destructive-foreground: oklch(55.109% 0.20302 26.431);
+  --success: oklch(63.4% 0.188 142.8);
+  --success-foreground: oklch(75.202% 0.22616 142.706);
+  --warning: oklch(78.5% 0.162 64.8);
+  --warning-foreground: oklch(78.5% 0.162 64.8);
+  --info: oklch(70.1% 0.156 247.3);
+  --info-foreground: oklch(70.1% 0.156 247.3);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border box-border;
+  }
+
+  body {
+    @apply relative isolate bg-background text-foreground;
+  }
+}
+
+@theme inline {
+  --font-sans: "Inter", sans-serif;
+  --font-heading: "Space Grotesk", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popup: var(--popup);
+  --color-popup-foreground: var(--popup-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Update radius if you want rounded corners */
+  --radius: var(--radius);
+  --radius-xs: calc(var(--radius) * 0.25);
+  --radius-sm: calc(var(--radius) * 0.5);
+  --radius-md: var(--radius); /* This is what '.rounded' usually targets */
+  --radius-lg: calc(var(--radius) * 1.5);
+  --radius-xl: calc(var(--radius) * 2);
+  --radius-2xl: calc(var(--radius) * 2.5);
+}

package/src/types/registry-item.ts

@@ -0,0 +1,13 @@
+export type RegistryItem = {
+  name: string;
+  type: "registry:ui" | "registry:hook" | "registry:recipe";
+  dependencies?: string[];
+  registryDependencies?: string[];
+  files: {
+    path: string;
+    content: string;
+    type: "registry:ui";
+  }[];
+};
+
+export type RegistryIndex = RegistryItem[];

package/src/utils/cli-utils.ts

@@ -0,0 +1,46 @@
+import path from "node:path";
+
+import { cancel, isCancel } from "@clack/prompts";
+import fs from "fs-extra";
+
+import { configSchema, type Config } from "@/utils/schema";
+
+export function exitIfCancelled<T>(value: T): Exclude<T, symbol> {
+  if (isCancel(value)) {
+    cancel("Operation cancelled.");
+    process.exit(0);
+  }
+  return value as Exclude<T, symbol>;
+}
+
+export async function getConfig(): Promise<Config | null> {
+  const configPath = path.join(process.cwd(), "shapes.json");
+  if (!fs.existsSync(configPath)) return null;
+  return configSchema.parse(await fs.readJSON(configPath));
+}
+
+export async function readPackageJson() {
+  const pkgPath = path.join(process.cwd(), "package.json");
+  if (!(await fs.pathExists(pkgPath))) return null;
+  return fs.readJSON(pkgPath);
+}
+
+export function getDepVersion(pkg: Record<string, any> | null, name: string) {
+  return pkg?.dependencies?.[name] ?? pkg?.devDependencies?.[name] ?? null;
+}
+
+export function parseMajor(version: string | null) {
+  if (!version) return null;
+  const match = version.match(/\d+/);
+  return match ? Number.parseInt(match[0], 10) : null;
+}
+
+export function isTailwindV4Installed(pkg: Record<string, any> | null) {
+  const major = parseMajor(getDepVersion(pkg, "tailwindcss"));
+  return major === 4;
+}
+
+export function getMissingDeps(pkg: Record<string, any> | null, deps: string[]) {
+  if (!pkg) return deps;
+  return deps.filter((dep) => !pkg.dependencies?.[dep] && !pkg.devDependencies?.[dep]);
+}

package/src/utils/package-manager.ts

@@ -0,0 +1,27 @@
+import { detect } from "detect-package-manager";
+
+export async function getPackageManager() {
+  try {
+    return await detect();
+  } catch {
+    return "npm";
+  }
+}
+
+export async function getInstallCommand(deps: string[], dev = false) {
+  const pm = await getPackageManager();
+
+  if (pm === "yarn") {
+    return ["yarn", "add", ...(dev ? ["-D"] : []), ...deps];
+  }
+
+  if (pm === "pnpm") {
+    return ["pnpm", "add", ...(dev ? ["-D"] : []), ...deps];
+  }
+
+  if (pm === "bun") {
+    return ["bun", "add", ...(dev ? ["-d"] : []), ...deps];
+  }
+
+  return ["npm", "install", ...(dev ? ["--save-dev"] : []), ...deps];
+}

package/src/utils/schema.ts

@@ -0,0 +1,25 @@
+import fs from "fs-extra";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+
+export const configSchema = z.object({
+  $schema: z.string().optional(),
+  style: z.enum(["default", "brutalist", "minimal"]).default("default"),
+  tailwind: z.object({
+    config: z.string().optional(),
+    css: z.string().default("src/styles/globals.css"),
+    baseColor: z.string().default("zinc"),
+  }),
+  paths: z.object({
+    ui: z.string().default("./src/components/ui"),
+    lib: z.string().default("./src/lib"),
+  }),
+});
+
+export type Config = z.infer<typeof configSchema>;
+
+export function generateSchemaJson() {
+  const jsonSchema = zodToJsonSchema(configSchema as any, "ShapesUIConfig");
+  fs.writeJSONSync("./public/schema.json", jsonSchema, { spaces: 2 });
+  console.log("✅ Schema generated at ./public/schema.json");
+}