@swift-rust/ui 0.2.0 → 0.6.0

package/dist/registry.test.js

@@ -0,0 +1,82 @@
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, test } from "bun:test";
+const REGISTRY = join(import.meta.dir, "..", "registry", "components");
+// The style dimension ("design" prop — React reserves `style`) shipped first on
+// these components; each must offer the full design set.
+const DESIGN_COMPONENTS = ["accordion", "alert", "avatar", "button", "card", "input"];
+const DESIGNS = ["flat", "soft", "3d", "glass", "neo", "brutal", "gradient"];
+// Purely presentational components must NOT carry 'use client'. Under swift-rust's
+// SSR + islands model, a 'use client' component used directly in a server page is
+// wrapped as an island and its children don't cross the boundary — hydration then
+// wipes the children (an Alert rendered empty). Static SSR keeps children and ships
+// zero JS. Only genuinely stateful components (accordion: useState/context) opt in.
+const PRESENTATIONAL = ["button", "card", "input", "label", "avatar", "alert"];
+const STATEFUL = ["accordion"];
+describe("registry components", () => {
+    const files = readdirSync(REGISTRY).filter((f) => f.endsWith(".tsx"));
+    const firstLine = (slug) => readFileSync(join(REGISTRY, `${slug}.tsx`), "utf8").split("\n")[0]?.trim();
+    test("presentational components are server-renderable (no 'use client')", () => {
+        for (const slug of PRESENTATIONAL) {
+            expect({ slug, directive: firstLine(slug) }).not.toEqual({
+                slug,
+                directive: '"use client";',
+            });
+        }
+    });
+    test("stateful components declare 'use client'", () => {
+        for (const slug of STATEFUL) {
+            expect(firstLine(slug)).toBe('"use client";');
+        }
+    });
+    test("every component transpiles as TSX", () => {
+        const transpiler = new Bun.Transpiler({ loader: "tsx" });
+        for (const file of files) {
+            const src = readFileSync(join(REGISTRY, file), "utf8");
+            expect(() => transpiler.transformSync(src)).not.toThrow();
+        }
+    });
+    test("no Tailwind v3-only classnames (renamed or removed in v4)", () => {
+        // Utilities that v4 removed or renamed; using them warns or silently breaks.
+        const banned = [
+            /\boutline-none\b/, // → outline-hidden (v4's outline-none means something else)
+            /\bbg-gradient-to-/, // → bg-linear-to-*
+            /\bflex-shrink-/, // → shrink-*
+            /\bflex-grow\b/, // → grow
+            /\b(?:bg|text|border|ring|divide|placeholder)-opacity-\d/, // → color/NN syntax
+            /\boverflow-ellipsis\b/, // → text-ellipsis
+            /\bdecoration-(?:slice|clone)\b/, // → box-decoration-*
+        ];
+        for (const file of files) {
+            const src = readFileSync(join(REGISTRY, file), "utf8");
+            for (const re of banned) {
+                expect({ file, matches: re.test(src) ? re.source : null }).toEqual({
+                    file,
+                    matches: null,
+                });
+            }
+        }
+    });
+    test("design-dimension components expose every design style", () => {
+        for (const name of DESIGN_COMPONENTS) {
+            const src = readFileSync(join(REGISTRY, `${name}.tsx`), "utf8");
+            for (const design of DESIGNS) {
+                expect({ name, design, present: src.includes(`"${design}"`) }).toEqual({
+                    name,
+                    design,
+                    present: true,
+                });
+            }
+        }
+    });
+    test("button exposes the full variant and size matrix", () => {
+        const src = readFileSync(join(REGISTRY, "button.tsx"), "utf8");
+        for (const v of ["default", "outline", "secondary", "ghost", "destructive", "link"]) {
+            expect(src).toContain(`${v}:`);
+        }
+        for (const s of ["xs", "sm", "md", "lg", "icon", "icon-xs", "icon-sm", "icon-md", "icon-lg"]) {
+            expect(src).toContain(`"${s}"`);
+        }
+    });
+});
+//# sourceMappingURL=registry.test.js.map

package/dist/registry.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.test.js","sourceRoot":"","sources":["../src/registry.test.ts"],"names":[],"mappings":"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"}

package/dist/smoke.test.js

@@ -6,13 +6,15 @@ test("package exports core API", () => {
     expect(typeof mod.add).toBe("function");
     expect(typeof mod.list).toBe("function");
 });
-test("COMPONENTS map lists all 35 components", () => {
+test("COMPONENTS map lists the full registry", () => {
     const components = mod.COMPONENTS;
-    expect(Object.keys(components).length).toBe(35);
+    expect(Object.keys(components).length).toBeGreaterThanOrEqual(60);
     const button = components.button;
     expect(button).toBeDefined();
     expect(button?.files).toContain("button.tsx");
     expect(components["dropdown-menu"]).toBeDefined();
-    expect(components["navigation-menu"]).toBeDefined();
+    expect(components["data-table"]).toBeDefined();
+    expect(components["code-block"]).toBeDefined();
+    expect(components.stepper).toBeDefined();
 });
 //# sourceMappingURL=smoke.test.js.map

package/dist/smoke.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"smoke.test.js","sourceRoot":"","sources":["../src/smoke.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,GAAG,MAAM,SAAS,CAAC;AAE/B,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1B,MAAM,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAClD,MAAM,UAAU,GAAG,GAAG,CAAC,UAAiD,CAAC;IACzE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACjC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;IAC7B,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAClD,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACtD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"smoke.test.js","sourceRoot":"","sources":["../src/smoke.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,GAAG,MAAM,SAAS,CAAC;AAE/B,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACpC,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1B,MAAM,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAClD,MAAM,UAAU,GAAG,GAAG,CAAC,UAAiD,CAAC;IACzE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACjC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;IAC7B,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAClD,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC/C,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC/C,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3C,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@swift-rust/ui",
-  "version": "0.2.0",
-  "description": "shadcn-style component registry for swift-rust.",
+  "version": "0.6.0",
+  "description": "swift-rust ui — a shadcn-style component registry with a third style dimension (variant × size × design) built for Tailwind v4.",
   "license": "MIT",
   "homepage": "https://swift-rust.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/swift-rust/swift-rust.git",
+    "url": "https://github.com/colesites/swift-rust.git",
     "directory": "packages/ui"
   },
   "type": "module",
@@ -36,19 +36,19 @@
     "clean": "rm -rf dist .turbo"
   },
   "dependencies": {
-    "@clack/prompts": "^0.7.0",
+    "@clack/prompts": "^1.5.1",
     "picocolors": "^1.0.1"
   },
   "devDependencies": {
     "@types/bun": "^1.3.0",
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.5.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
     "typescript": "^6.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/swift-rust/swift-rust/issues"
+    "url": "https://github.com/colesites/swift-rust/issues"
   }
 }

package/registry/components/accordion.tsx

@@ -2,23 +2,101 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const AccordionContext = React.createContext<{
+/**
+ * swift-rust ui · Accordion
+ *
+ * variant — default (divided), outline (separated items), secondary, ghost
+ * size    — sm, default, lg
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ *
+ * variant/size/design are set once on <Accordion> and flow to items via context.
+ */
+
+export type AccordionVariant = "default" | "outline" | "secondary" | "ghost";
+export type AccordionSize = "default" | "sm" | "lg";
+export type AccordionDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+// Item chrome. The default variant is a classic divided list; the others render
+// separated, surfaced items so designs (glass, brutal, …) have a card to paint.
+const ITEM_VARIANTS: Record<AccordionVariant, string> = {
+  default: "border-b border-border last:border-b-0",
+  outline: "mb-2 rounded-lg border border-border px-4 last:mb-0",
+  secondary: "mb-2 rounded-lg bg-secondary px-4 text-secondary-foreground last:mb-0",
+  ghost: "rounded-lg px-2 hover:bg-secondary/50",
+};
+
+const TRIGGER_SIZES: Record<AccordionSize, string> = {
+  sm: "py-3 text-xs",
+  default: "py-4 text-sm",
+  lg: "py-5 text-base",
+};
+
+const CONTENT_SIZES: Record<AccordionSize, string> = {
+  sm: "pb-3 text-xs",
+  default: "pb-4 text-sm",
+  lg: "pb-5 text-base",
+};
+
+// Designs only decorate non-default variants' item surfaces (the divided list
+// has no surface to paint).
+const ITEM_DESIGNS: Record<AccordionDesign, string> = {
+  flat: "",
+  soft: "rounded-xl border-transparent bg-muted",
+  // Depth via a darker bottom lip + a top sheen — no drop shadow.
+  "3d": "border-transparent border-b-4 border-b-black/15 bg-linear-to-b from-white/20 to-transparent dark:border-b-black/40",
+  // Liquid glass panels.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/30 via-white/10 to-white/5 " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[5px_5px_10px_rgba(0,0,0,0.12),-5px_-5px_10px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[5px_5px_10px_rgba(0,0,0,0.6),-5px_-5px_10px_rgba(255,255,255,0.05)]",
+  brutal:
+    "rounded-none border-2 border-foreground shadow-[4px_4px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-background),var(--color-background))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
+};
+
+interface AccordionContextValue {
   openItems: Set<string>;
   toggle: (value: string) => void;
   type: "single" | "multiple";
-} | null>(null);
+  variant: AccordionVariant;
+  size: AccordionSize;
+  design: AccordionDesign;
+}
+
+export const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+function useAccordion(): AccordionContextValue {
+  const ctx = React.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used inside <Accordion>");
+  return ctx;
+}
+
+export interface AccordionProps {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  design?: AccordionDesign;
+  className?: string;
+  children: React.ReactNode;
+}
 
 export function Accordion({
   type = "single",
   defaultValue,
+  variant = "default",
+  size = "default",
+  design = "flat",
   className,
   children,
-}: {
-  type?: "single" | "multiple";
-  defaultValue?: string | string[];
-  className?: string;
-  children: React.ReactNode;
-}) {
+}: AccordionProps) {
   const [openItems, setOpenItems] = React.useState<Set<string>>(
     () => new Set(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []),
   );
@@ -34,7 +112,7 @@ export function Accordion({
     });
   };
   return (
-    <AccordionContext.Provider value={{ openItems, toggle, type }}>
+    <AccordionContext.Provider value={{ openItems, toggle, type, variant, size, design }}>
       <div className={className}>{children}</div>
     </AccordionContext.Provider>
   );
@@ -42,15 +120,28 @@ export function Accordion({
 
 export function AccordionItem({
   value,
+  disabled,
   className,
   children,
 }: {
   value: string;
+  disabled?: boolean;
   className?: string;
   children: React.ReactNode;
 }) {
+  const { openItems, variant, design } = useAccordion();
   return (
-    <div data-value={value} className={cn("border-b border-[var(--ui-border)]", className)}>
+    <div
+      data-value={value}
+      data-disabled={disabled ? "" : undefined}
+      data-state={openItems.has(value) ? "open" : "closed"}
+      className={cn(
+        ITEM_VARIANTS[variant],
+        variant !== "default" && ITEM_DESIGNS[design],
+        variant !== "default" && design !== "flat" && "mb-3 last:mb-0",
+        className,
+      )}
+    >
       {children}
     </div>
   );
@@ -58,32 +149,43 @@ export function AccordionItem({
 
 export function AccordionTrigger({
   value,
+  disabled,
   className,
   children,
 }: {
   value: string;
+  disabled?: boolean;
   className?: string;
   children: React.ReactNode;
 }) {
-  const ctx = React.useContext(AccordionContext)!;
+  const ctx = useAccordion();
   const open = ctx.openItems.has(value);
   return (
     <button
       type="button"
+      disabled={disabled}
+      aria-expanded={open}
+      data-state={open ? "open" : "closed"}
       onClick={() => ctx.toggle(value)}
       className={cn(
-        "flex w-full items-center justify-between py-4 text-sm font-medium transition-all",
-        "hover:text-[var(--ui-accent)]",
+        "flex w-full items-center justify-between gap-4 text-left font-medium transition-all",
+        "rounded-md hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        TRIGGER_SIZES[ctx.size],
         className,
       )}
     >
       {children}
       <svg
         viewBox="0 0 24 24"
-        className={cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")}
+        className={cn(
+          "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
+          open && "rotate-180",
+        )}
         fill="none"
         stroke="currentColor"
         strokeWidth="2"
+        aria-hidden="true"
       >
         <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
@@ -100,7 +202,14 @@ export function AccordionContent({
   className?: string;
   children: React.ReactNode;
 }) {
-  const ctx = React.useContext(AccordionContext)!;
+  const ctx = useAccordion();
   if (!ctx.openItems.has(value)) return null;
-  return <div className={cn("pb-4 text-sm text-[var(--ui-fg-muted)]", className)}>{children}</div>;
+  return (
+    <div
+      data-state="open"
+      className={cn("text-muted-foreground", CONTENT_SIZES[ctx.size], className)}
+    >
+      {children}
+    </div>
+  );
 }

package/registry/components/alert-dialog.tsx

@@ -0,0 +1,102 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const AlertDialogContext = React.createContext<{ open: boolean; setOpen: (v: boolean) => void } | null>(null);
+
+export function AlertDialog({
+  open: controlled,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(false);
+  const open = controlled ?? internal;
+  const setOpen = (v: boolean) => {
+    if (controlled === undefined) setInternal(v);
+    onOpenChange?.(v);
+  };
+  return (
+    <AlertDialogContext.Provider value={{ open, setOpen }}>
+      {children}
+      {open ? <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" aria-hidden /> : null}
+    </AlertDialogContext.Provider>
+  );
+}
+
+export function AlertDialogTrigger({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  const ctx = React.useContext(AlertDialogContext);
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => ctx?.setOpen(true),
+    });
+  }
+  return <button type="button" onClick={() => ctx?.setOpen(true)}>{children}</button>;
+}
+
+export function AlertDialogContent({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(AlertDialogContext);
+  if (!ctx?.open) return null;
+  return (
+    <div
+      role="alertdialog"
+      aria-modal
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-background p-6 shadow-lg",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />;
+}
+export function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex justify-end gap-2 pt-2", className)} {...props} />;
+}
+export function AlertDialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-lg font-semibold", className)} {...props} />;
+}
+export function AlertDialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+export function AlertDialogAction({ className, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ctx = React.useContext(AlertDialogContext);
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onClick?.(e);
+        ctx?.setOpen(false);
+      }}
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export function AlertDialogCancel({ className, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ctx = React.useContext(AlertDialogContext);
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onClick?.(e);
+        ctx?.setOpen(false);
+      }}
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg border border-input bg-background px-4 text-sm font-medium hover:bg-secondary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/registry/components/alert.tsx

@@ -1,34 +1,134 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-type Tone = "default" | "success" | "warning" | "destructive" | "info";
-const TONES: Record<Tone, string> = {
-  default: "bg-[var(--ui-surface-2)] text-[var(--ui-fg)]",
-  success: "bg-[#dcfce7] text-[#166534]",
-  warning: "bg-[#fef3c7] text-[#92400e]",
-  destructive: "bg-[#fee2e2] text-[#991b1b]",
-  info: "bg-[#dbeafe] text-[#1e40af]",
+/**
+ * swift-rust ui · Alert
+ *
+ * variant — default, destructive, success, warning, info, outline, secondary
+ * size    — sm, default, lg
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ *
+ * (`tone` is accepted as a deprecated alias of `variant`.)
+ */
+
+export type AlertVariant =
+  | "default"
+  | "destructive"
+  | "success"
+  | "warning"
+  | "info"
+  | "outline"
+  | "secondary";
+export type AlertSize = "default" | "sm" | "lg";
+export type AlertDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<AlertVariant, string> = {
+  default: "border-border bg-card text-card-foreground",
+  destructive:
+    "border-destructive/30 bg-destructive/10 text-destructive [&_[data-alert-description]]:text-destructive/90",
+  success:
+    "border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 " +
+    "[&_[data-alert-description]]:text-emerald-700/90 dark:[&_[data-alert-description]]:text-emerald-400/90",
+  warning:
+    "border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-400 " +
+    "[&_[data-alert-description]]:text-amber-700/90 dark:[&_[data-alert-description]]:text-amber-400/90",
+  info:
+    "border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-400 " +
+    "[&_[data-alert-description]]:text-sky-700/90 dark:[&_[data-alert-description]]:text-sky-400/90",
+  outline: "border-2 border-border bg-transparent text-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+};
+
+const SIZES: Record<AlertSize, string> = {
+  sm: "p-3 text-xs [&_[data-alert-title]]:text-sm",
+  default: "p-4 text-sm",
+  lg: "p-6 text-base",
+};
+
+const DESIGNS: Record<AlertDesign, string> = {
+  flat: "",
+  soft: "rounded-2xl border-transparent",
+  // Depth via a darker bottom lip + a top sheen — no drop shadow.
+  "3d": "border-b-4 border-b-black/15 bg-linear-to-b from-white/20 to-transparent dark:border-b-black/40",
+  // Liquid glass panel.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/30 via-white/10 to-white/5 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.55),0_6px_24px_rgba(31,38,135,0.16)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_6px_24px_rgba(0,0,0,0.4)]",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[6px_6px_12px_rgba(0,0,0,0.12),-6px_-6px_12px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[6px_6px_12px_rgba(0,0,0,0.6),-6px_-6px_12px_rgba(255,255,255,0.05)]",
+  brutal: "rounded-none border-2 border-foreground shadow-[4px_4px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-card),var(--color-card))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
 };
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-  tone?: Tone;
+  variant?: AlertVariant;
+  /** @deprecated use `variant` */
+  tone?: AlertVariant;
+  size?: AlertSize;
+  design?: AlertDesign;
 }
 
-export function Alert({ className, tone = "default", ...props }: AlertProps) {
+export function Alert({
+  className,
+  variant,
+  tone,
+  size = "default",
+  design = "flat",
+  ...props
+}: AlertProps) {
+  const v = variant ?? tone ?? "default";
   return (
     <div
       role="alert"
-      className={cn("relative w-full rounded-lg border border-[var(--ui-border)] p-4 text-sm", TONES[tone], className)}
+      className={cn(
+        "relative grid w-full grid-cols-[0_1fr] gap-y-0.5 rounded-lg border",
+        "has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5",
+        // Reserve room on the trailing edge when an AlertAction is present.
+        "has-[[data-alert-action]]:pr-16",
+        VARIANTS[v],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
       {...props}
     />
   );
 }
 
 export function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-  return <h5 className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />;
+  return (
+    <h5
+      data-alert-title
+      className={cn("col-start-2 mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
 }
 
-export function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />;
+export function AlertDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <div
+      data-alert-description
+      className={cn("col-start-2 text-muted-foreground [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+/** A trailing action (button, link, …) pinned to the top-right of the alert. */
+export function AlertAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-alert-action className={cn("absolute right-3 top-3", className)} {...props} />
+  );
 }

package/registry/components/aspect-ratio.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+  ratio?: number;
+}
+
+export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ ratio = 16 / 9, className, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative w-full overflow-hidden", className)}
+      style={{ aspectRatio: String(ratio), ...style }}
+      {...props}
+    />
+  ),
+);
+AspectRatio.displayName = "AspectRatio";