@clubedge/create-clubedge-app 0.2.0 → 0.3.0

package/template/packages/storage/src/s3.test.ts

@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const send = vi.fn();
+
+vi.mock("@aws-sdk/client-s3", () => {
+  class Command {
+    constructor(public readonly input: Record<string, unknown>) {}
+  }
+  return {
+    S3Client: vi.fn(function () {
+      return { send };
+    }),
+    PutObjectCommand: class extends Command {},
+    GetObjectCommand: class extends Command {},
+    DeleteObjectCommand: class extends Command {},
+    HeadObjectCommand: class extends Command {},
+  };
+});
+vi.mock("@aws-sdk/s3-request-presigner", () => ({
+  getSignedUrl: vi.fn(async () => "https://signed.example/object"),
+}));
+
+const { S3Client } = await import("@aws-sdk/client-s3");
+const { createS3Storage } = await import("./s3");
+
+describe("createS3Storage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("does not create a client until the first operation", async () => {
+    const storage = createS3Storage({ bucket: "files", region: "auto" });
+    expect(S3Client).not.toHaveBeenCalled();
+    send.mockResolvedValueOnce({});
+    await storage.delete("a.txt");
+    await storage.delete("b.txt");
+    expect(S3Client).toHaveBeenCalledTimes(1);
+  });
+
+  it("uploads to the configured bucket and builds the public URL", async () => {
+    const storage = createS3Storage({
+      bucket: "files",
+      region: "auto",
+      publicUrl: "https://cdn.example/",
+    });
+    send.mockResolvedValueOnce({});
+
+    const result = await storage.upload({
+      key: "avatars/1.png",
+      body: new Uint8Array([1, 2, 3]),
+      contentType: "image/png",
+      contentLength: 3,
+    });
+
+    expect(send.mock.calls[0][0].input).toMatchObject({
+      Bucket: "files",
+      Key: "avatars/1.png",
+      ContentType: "image/png",
+      ContentLength: 3,
+    });
+    expect(result).toEqual({ key: "avatars/1.png", url: "https://cdn.example/avatars/1.png" });
+  });
+
+  it("fails clearly when the bucket is not configured", async () => {
+    const storage = createS3Storage({ region: "auto" });
+    await expect(storage.exists("a.txt")).rejects.toThrow("STORAGE_BUCKET must be configured");
+    expect(send).not.toHaveBeenCalled();
+  });
+
+  it("treats a missing object as not existing and rethrows other errors", async () => {
+    const storage = createS3Storage({ bucket: "files", region: "auto" });
+    send.mockRejectedValueOnce(Object.assign(new Error("missing"), { name: "NotFound" }));
+    expect(await storage.exists("a.txt")).toBe(false);
+
+    send.mockRejectedValueOnce(Object.assign(new Error("denied"), { name: "AccessDenied" }));
+    await expect(storage.exists("a.txt")).rejects.toThrow("denied");
+  });
+
+  it("signs download URLs with a default five-minute expiry", async () => {
+    const { getSignedUrl } = await import("@aws-sdk/s3-request-presigner");
+    const storage = createS3Storage({ bucket: "files", region: "auto" });
+
+    expect(await storage.getSignedUrl("a.txt")).toBe("https://signed.example/object");
+    expect(vi.mocked(getSignedUrl).mock.calls[0][2]).toEqual({ expiresIn: 300 });
+  });
+});

package/template/packages/storage/src/s3.ts

@@ -0,0 +1,86 @@
+import {
+  DeleteObjectCommand,
+  GetObjectCommand,
+  HeadObjectCommand,
+  PutObjectCommand,
+  S3Client,
+} from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import type { StorageProvider, UploadInput } from "./types";
+
+export interface S3StorageConfig {
+  /** Optional so the app can start without storage; operations fail until it is set. */
+  bucket?: string;
+  region: string;
+  endpoint?: string;
+  accessKeyId?: string;
+  secretAccessKey?: string;
+  /** Public base URL for uploaded objects, such as a CDN or R2 public bucket. */
+  publicUrl?: string;
+}
+
+function bodyForS3(body: UploadInput["body"]) {
+  if (body instanceof Blob) return body.stream();
+  if (body instanceof ArrayBuffer) return new Uint8Array(body);
+  return body;
+}
+
+/** Works with AWS S3 and S3-compatible services such as Cloudflare R2 and MinIO. */
+export function createS3Storage(config: S3StorageConfig): StorageProvider {
+  let s3Client: S3Client | undefined;
+
+  function client() {
+    s3Client ??= new S3Client({
+      region: config.region,
+      ...(config.endpoint ? { endpoint: config.endpoint } : {}),
+      credentials:
+        config.accessKeyId && config.secretAccessKey
+          ? { accessKeyId: config.accessKeyId, secretAccessKey: config.secretAccessKey }
+          : undefined,
+    });
+    return s3Client;
+  }
+
+  function bucket() {
+    if (!config.bucket) throw new Error("STORAGE_BUCKET must be configured for S3 storage.");
+    return config.bucket;
+  }
+
+  return {
+    async upload({ key, body, contentType, contentLength }) {
+      await client().send(
+        new PutObjectCommand({
+          Bucket: bucket(),
+          Key: key,
+          Body: bodyForS3(body),
+          ContentType: contentType,
+          ...(contentLength ? { ContentLength: contentLength } : {}),
+        }),
+      );
+      const url = config.publicUrl ? `${config.publicUrl.replace(/\/$/, "")}/${key}` : undefined;
+      return { key, url };
+    },
+    async download(key) {
+      const result = await client().send(new GetObjectCommand({ Bucket: bucket(), Key: key }));
+      if (!result.Body) throw new Error(`Storage object not found: ${key}`);
+      return result.Body.transformToWebStream() as ReadableStream<Uint8Array>;
+    },
+    async delete(key) {
+      await client().send(new DeleteObjectCommand({ Bucket: bucket(), Key: key }));
+    },
+    async exists(key) {
+      try {
+        await client().send(new HeadObjectCommand({ Bucket: bucket(), Key: key }));
+        return true;
+      } catch (error) {
+        if (error && typeof error === "object" && "name" in error && error.name === "NotFound")
+          return false;
+        throw error;
+      }
+    },
+    async getSignedUrl(key, options) {
+      const command = new GetObjectCommand({ Bucket: bucket(), Key: key });
+      return getSignedUrl(client(), command, { expiresIn: options?.expiresInSeconds ?? 300 });
+    },
+  };
+}

package/template/packages/storage/src/supabase.ts

@@ -0,0 +1,69 @@
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type { StorageProvider, UploadInput } from "./types";
+
+export interface SupabaseStorageConfig {
+  /** Optional so the app can start without storage; operations fail until it is set. */
+  bucket?: string;
+  /**
+   * Returns a Supabase client for the current request. Passing the user's session client
+   * keeps Storage row-level security policies in effect.
+   */
+  getClient: () => Promise<Pick<SupabaseClient, "storage">> | Pick<SupabaseClient, "storage">;
+}
+
+function toBlob(body: UploadInput["body"], type: string) {
+  if (body instanceof Blob) return body;
+  if (body instanceof ArrayBuffer) return new Blob([body], { type });
+  if (body instanceof Uint8Array) return new Blob([body.slice().buffer], { type });
+  throw new Error("Supabase Storage uploads require a Blob or byte array.");
+}
+
+export function createSupabaseStorage({
+  bucket,
+  getClient,
+}: SupabaseStorageConfig): StorageProvider {
+  function bucketName() {
+    if (!bucket) throw new Error("SUPABASE_STORAGE_BUCKET must be configured.");
+    return bucket;
+  }
+
+  return {
+    async upload({ key, body, contentType }) {
+      const supabase = await getClient();
+      const { error } = await supabase.storage
+        .from(bucketName())
+        .upload(key, toBlob(body, contentType), { contentType, upsert: false });
+      if (error) throw error;
+      return { key };
+    },
+    async download(key) {
+      const supabase = await getClient();
+      const { data, error } = await supabase.storage.from(bucketName()).download(key);
+      if (error) throw error;
+      return data.stream() as ReadableStream<Uint8Array>;
+    },
+    async delete(key) {
+      const supabase = await getClient();
+      const { error } = await supabase.storage.from(bucketName()).remove([key]);
+      if (error) throw error;
+    },
+    async exists(key) {
+      const supabase = await getClient();
+      const pieces = key.split("/");
+      const name = pieces.pop();
+      const { data, error } = await supabase.storage
+        .from(bucketName())
+        .list(pieces.join("/"), { search: name });
+      if (error) throw error;
+      return data.some((file) => file.name === name);
+    },
+    async getSignedUrl(key, options) {
+      const supabase = await getClient();
+      const { data, error } = await supabase.storage
+        .from(bucketName())
+        .createSignedUrl(key, options?.expiresInSeconds ?? 300);
+      if (error) throw error;
+      return data.signedUrl;
+    },
+  };
+}

package/template/packages/storage/src/types.ts

@@ -0,0 +1,18 @@
+export interface UploadInput {
+  key: string;
+  body: ReadableStream<Uint8Array> | Blob | ArrayBuffer | Uint8Array;
+  contentType: string;
+  contentLength?: number;
+}
+
+export interface SignedUrlOptions {
+  expiresInSeconds?: number;
+}
+
+export interface StorageProvider {
+  upload(input: UploadInput): Promise<{ key: string; url?: string }>;
+  download(key: string): Promise<ReadableStream<Uint8Array>>;
+  delete(key: string): Promise<void>;
+  exists(key: string): Promise<boolean>;
+  getSignedUrl(key: string, options?: SignedUrlOptions): Promise<string>;
+}

package/template/packages/storage/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*.ts"]
+}

package/template/packages/ui/components.json

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

package/template/packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@clubedge/ui",
+  "version": "0.3.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./lib/*": "./src/lib/*.ts",
+    "./globals.css": "./src/styles/globals.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.4.0",
+    "lucide-react": "^0.468.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "tailwindcss": "^4.1.13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

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

@@ -0,0 +1,48 @@
+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 "cn";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/template/packages/ui/src/components/breadcrumb.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "cn";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+  );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+        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]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        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]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { cn } from "cn";
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/template/packages/ui/src/components/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "cn";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/template/packages/ui/src/components/label.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "cn";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/template/packages/ui/src/components/separator.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { cn } from "cn";
+
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };