@octanejs/shadcn 0.0.7 → 0.0.9

package/README.md

@@ -13,20 +13,187 @@ Upstream pin: `shadcn-ui/ui@4baadbc6` + CLI `shadcn@4.14.1`.
   radix-backed Tier-2 components, and the first Tier-3 composites (Sidebar with
   `useSidebar`/`useIsMobile`, Field), plus `cn()` and the default neutral theme
   tokens (`@octanejs/shadcn/theme.css`).
-- **Two consumption modes**: import from the package entry, or install
+- **Two consumption modes**: import from the package subpaths, or install
   components AS SOURCE with the upstream shadcn CLI against the generated
-  registry (`registry/`, 47 items — `pnpm registry:build` / `registry:check`).
+  registry (`registry/` — `pnpm registry:build` / `registry:check`).
+- **Three primitive bases in one registry**, selected the way shadcn selects its
+  own: `components.json`'s `style` field, substituted into the registry URL. See
+  [Installing with the shadcn CLI](#installing-with-the-shadcn-cli).
 - **Styling flavors**: components are migrating to the default-Tailwind
   (utilities-inlined) flavor — class strings work against any Tailwind v4 build
   with the shadcn theme tokens. The not-yet-migrated families still carry the
   upstream `cn-*` semantic hooks and need a shadcn style sheet (e.g.
   `style-nova`). `status.json` lists exactly which families are which.
 
+## Component coverage
+
+Each primitive base ships the families its primitives support, exactly as upstream's do.
+Switching `style` changes which primitive a component is built on — the `data-slot` contract and
+component names stay identical.
+
+<!-- BEGIN COVERAGE -->
+
+**44 families** — Radix 44/44 · React Aria 33/44 · Base UI 35/44
+
+✅ ported · — not ported yet (fair game) · ⛔ blocked, see notes below
+
+| Family | Radix | React Aria | Base UI |
+| --- | :---: | :---: | :---: |
+| `accordion` | ✅ | ✅ | ✅ |
+| `alert` | ✅ | ✅ | ✅ |
+| `alert-dialog` | ✅ | ✅ | ✅ |
+| `aspect-ratio` | ✅ | ✅ | ✅ |
+| `avatar` | ✅ | ✅ | ✅ |
+| `badge` | ✅ | ✅ | ✅ |
+| `breadcrumb` | ✅ | ✅ | ✅ |
+| `button` | ✅ | ✅ | ✅ |
+| `card` | ✅ | ✅ | ✅ |
+| `checkbox` | ✅ | ✅ | ✅ |
+| `collapsible` | ✅ | ✅ | ✅ |
+| `context-menu` | ✅ | ⛔ | — |
+| `dialog` | ✅ | ✅ | ✅ |
+| `dropdown-menu` | ✅ | ⛔ | ✅ |
+| `empty` | ✅ | ✅ | ✅ |
+| `field` | ✅ | ✅ | ✅ |
+| `hover-card` | ✅ | ⛔ | — |
+| `input` | ✅ | ✅ | ✅ |
+| `item` | ✅ | ✅ | ✅ |
+| `kbd` | ✅ | ✅ | ✅ |
+| `label` | ✅ | ✅ | ✅ |
+| `menubar` | ✅ | ⛔ | — |
+| `native-select` | ✅ | ✅ | ✅ |
+| `navigation-menu` | ✅ | ⛔ | ⛔ |
+| `pagination` | ✅ | ✅ | ✅ |
+| `popover` | ✅ | ✅ | ✅ |
+| `progress` | ✅ | ⛔ | ✅ |
+| `radio-group` | ✅ | ✅ | ✅ |
+| `scroll-area` | ✅ | ✅ | ⛔ |
+| `select` | ✅ | ⛔ | ⛔ |
+| `separator` | ✅ | ✅ | ✅ |
+| `sheet` | ✅ | ✅ | ✅ |
+| `sidebar` | ✅ | ⛔ | — |
+| `skeleton` | ✅ | ✅ | ✅ |
+| `slider` | ✅ | ✅ | ✅ |
+| `sonner` | ✅ | ⛔ | ⛔ |
+| `spinner` | ✅ | ✅ | ✅ |
+| `switch` | ✅ | ✅ | ✅ |
+| `table` | ✅ | ✅ | ✅ |
+| `tabs` | ✅ | ✅ | ⛔ |
+| `textarea` | ✅ | ✅ | ✅ |
+| `toggle` | ✅ | ✅ | ✅ |
+| `toggle-group` | ✅ | ⛔ | ✅ |
+| `tooltip` | ✅ | ⛔ | ✅ |
+
+**Blocked**
+
+| Base | Family | Reason |
+| --- | --- | --- |
+| Base UI | `navigation-menu` | @octanejs/base-ui has no navigation-menu primitive |
+| Base UI | `scroll-area` | @octanejs/base-ui has no scroll-area primitive |
+| Base UI | `select` | @octanejs/base-ui has no select primitive |
+| Base UI | `sonner` | needs next-themes, which has no octane binding |
+| Base UI | `tabs` | @octanejs/base-ui has no tabs primitive |
+| React Aria | `context-menu` | no counterpart in upstream’s aria base |
+| React Aria | `dropdown-menu` | no counterpart in upstream’s aria base |
+| React Aria | `hover-card` | no counterpart in upstream’s aria base |
+| React Aria | `menubar` | no counterpart in upstream’s aria base |
+| React Aria | `navigation-menu` | no counterpart in upstream’s aria base |
+| React Aria | `progress` | no counterpart in upstream’s aria base |
+| React Aria | `select` | needs input-group |
+| React Aria | `sidebar` | no counterpart in upstream’s aria base |
+| React Aria | `sonner` | needs next-themes, which has no octane binding |
+| React Aria | `toggle-group` | no counterpart in upstream’s aria base |
+| React Aria | `tooltip` | no counterpart in upstream’s aria base |
+
+<!-- END COVERAGE -->
+
+The table is generated from the sources by `pnpm coverage:build` and gated by `coverage:check`,
+so it cannot drift as families land.
+
+## Installing with the shadcn CLI
+
+The registry is consumed by the **upstream** `shadcn` CLI — nothing octane-specific is
+required on the consumer side.
+
+Add the registry to your `components.json` and pick a base with `style`:
+
+```jsonc
+{
+  "style": "base-nova", // base-nova | radix-nova | aria-nova
+  "registries": {
+    "@octane": "https://octanejs.dev/r/styles/{style}/{name}.json"
+  }
+}
+```
+
+```bash
+npx shadcn add @octane/button
+```
+
+`{style}` and `{name}` are the only placeholders the CLI substitutes, and it never parses the
+style string — so the base is chosen entirely by which tree the registry serves. This is the
+same mechanism shadcn uses upstream, where its own registry is
+`<host>/styles/{style}/{name}.json`.
+
+| `style` | Primitives | Families |
+| --- | --- | --- |
+| `base-nova` *(default)* | `@octanejs/base-ui` | 21 |
+| `radix-nova` | `@octanejs/radix` | 44 |
+| `aria-nova` | `@octanejs/aria` | 33 |
+
+The bases deliberately ship different family counts, exactly as upstream's do — a base only
+has the families its primitives support. Switching `style` changes which primitive a component
+is built on; the `data-slot` contract and component names stay identical, so your markup and
+styling do not change.
+
+A registry URL without the `{style}` segment resolves to the default style, so
+`https://octanejs.dev/r/{name}.json` serves the Base UI variant.
+
+### Serving it locally
+
+```bash
+pnpm --dir packages/shadcn registry:build   # regenerate from src/
+pnpm --dir packages/shadcn registry:serve   # http://localhost:4517
+```
+
+Then point `components.json` at `http://localhost:4517/styles/{style}/{name}.json`, which is
+what `playground/octane` does.
+
+## Importing from the package
+
+There is no barrel entry. Every family has its own subpath, so an app pulls in only what it
+uses — the Radix base at the bare name, the others under their base:
+
 ```tsx
-import { Button, Dialog, Tabs } from '@octanejs/shadcn';
+// Radix base (the bare subpaths)
+import { Button } from '@octanejs/shadcn/Button';
+import { Dialog, DialogContent, DialogTitle } from '@octanejs/shadcn/Dialog';
+
+// React Aria base
+import { Button } from '@octanejs/shadcn/react-aria/Button';
+
+// Base UI base
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogMedia,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from '@octanejs/shadcn/base-ui/AlertDialog';
+
 import '@octanejs/shadcn/theme.css';
 ```
 
+Subpaths are `PascalCase` and map to the family, not the export: `AlertDialogTrigger` and its
+siblings all come from `.../AlertDialog`. `cn` lives at `@octanejs/shadcn/cn`, shared types at
+`@octanejs/shadcn/types`, and `useIsMobile` at `@octanejs/shadcn/hooks/use-mobile`.
+
+
 Octane adaptations are uniform and documented per file: no `"use client"`,
 refs as props, native events (`onInput` per keystroke), `asChild` and Portal
 children composed as element descriptors, and children forwarding through the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -104,6 +104,41 @@
     "./react-aria/Tabs": "./src/bases/react-aria/ui/tabs.tsrx",
     "./react-aria/Textarea": "./src/bases/react-aria/ui/textarea.tsrx",
     "./react-aria/Toggle": "./src/bases/react-aria/ui/toggle.tsrx",
+    "./base-ui/Accordion": "./src/bases/base-ui/ui/accordion.tsrx",
+    "./base-ui/Alert": "./src/bases/base-ui/ui/alert.tsrx",
+    "./base-ui/AlertDialog": "./src/bases/base-ui/ui/alert-dialog.tsrx",
+    "./base-ui/AspectRatio": "./src/bases/base-ui/ui/aspect-ratio.tsrx",
+    "./base-ui/Avatar": "./src/bases/base-ui/ui/avatar.tsrx",
+    "./base-ui/Badge": "./src/bases/base-ui/ui/badge.tsrx",
+    "./base-ui/Breadcrumb": "./src/bases/base-ui/ui/breadcrumb.tsrx",
+    "./base-ui/Button": "./src/bases/base-ui/ui/button.tsrx",
+    "./base-ui/Card": "./src/bases/base-ui/ui/card.tsrx",
+    "./base-ui/Checkbox": "./src/bases/base-ui/ui/checkbox.tsrx",
+    "./base-ui/Collapsible": "./src/bases/base-ui/ui/collapsible.tsrx",
+    "./base-ui/Dialog": "./src/bases/base-ui/ui/dialog.tsrx",
+    "./base-ui/DropdownMenu": "./src/bases/base-ui/ui/dropdown-menu.tsrx",
+    "./base-ui/Empty": "./src/bases/base-ui/ui/empty.tsrx",
+    "./base-ui/Field": "./src/bases/base-ui/ui/field.tsrx",
+    "./base-ui/Input": "./src/bases/base-ui/ui/input.tsrx",
+    "./base-ui/Item": "./src/bases/base-ui/ui/item.tsrx",
+    "./base-ui/Kbd": "./src/bases/base-ui/ui/kbd.tsrx",
+    "./base-ui/Label": "./src/bases/base-ui/ui/label.tsrx",
+    "./base-ui/NativeSelect": "./src/bases/base-ui/ui/native-select.tsrx",
+    "./base-ui/Pagination": "./src/bases/base-ui/ui/pagination.tsrx",
+    "./base-ui/Popover": "./src/bases/base-ui/ui/popover.tsrx",
+    "./base-ui/Progress": "./src/bases/base-ui/ui/progress.tsrx",
+    "./base-ui/RadioGroup": "./src/bases/base-ui/ui/radio-group.tsrx",
+    "./base-ui/Separator": "./src/bases/base-ui/ui/separator.tsrx",
+    "./base-ui/Sheet": "./src/bases/base-ui/ui/sheet.tsrx",
+    "./base-ui/Skeleton": "./src/bases/base-ui/ui/skeleton.tsrx",
+    "./base-ui/Slider": "./src/bases/base-ui/ui/slider.tsrx",
+    "./base-ui/Spinner": "./src/bases/base-ui/ui/spinner.tsrx",
+    "./base-ui/Switch": "./src/bases/base-ui/ui/switch.tsrx",
+    "./base-ui/Table": "./src/bases/base-ui/ui/table.tsrx",
+    "./base-ui/Textarea": "./src/bases/base-ui/ui/textarea.tsrx",
+    "./base-ui/Toggle": "./src/bases/base-ui/ui/toggle.tsrx",
+    "./base-ui/ToggleGroup": "./src/bases/base-ui/ui/toggle-group.tsrx",
+    "./base-ui/Tooltip": "./src/bases/base-ui/ui/tooltip.tsrx",
     "./cn": "./src/lib/utils.ts",
     "./types": "./src/lib/types.ts",
     "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
@@ -113,13 +148,14 @@
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "3.6.0",
-    "@octanejs/aria": "0.0.16",
-    "@octanejs/lucide": "0.1.17",
-    "@octanejs/radix": "0.1.21",
-    "@octanejs/sonner": "0.1.17"
+    "@octanejs/aria": "0.0.18",
+    "@octanejs/base-ui": "0.1.22",
+    "@octanejs/lucide": "0.1.19",
+    "@octanejs/radix": "0.1.23",
+    "@octanejs/sonner": "0.1.19"
   },
   "peerDependencies": {
-    "octane": "0.1.22"
+    "octane": "0.1.24"
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
@@ -129,12 +165,15 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.22"
+    "octane": "0.1.24"
   },
   "scripts": {
     "test": "vitest run",
     "registry:build": "node scripts/build-registry.mjs",
     "registry:check": "node scripts/build-registry.mjs --check",
+    "registry:serve": "node scripts/serve-registry.mjs",
+    "coverage:build": "node scripts/build-coverage-table.mjs",
+    "coverage:check": "node scripts/build-coverage-table.mjs --check",
     "typecheck": "node scripts/typecheck.mjs"
   }
 }

package/src/bases/base-ui/ui/accordion.tsrx

@@ -0,0 +1,71 @@
+// Base UI base accordion — transcribed from upstream's `bases/base-ui/ui/accordion.tsx`
+// (maintainer-supplied), class strings and data-slot names verbatim. Runs on
+// @octanejs/base-ui/accordion.
+//
+// Note the part mapping: upstream shadcn names the content part `AccordionContent` while the
+// underlying Base UI part is `Accordion.Panel`, and `AccordionTrigger` renders the
+// `Accordion.Header` wrapper itself rather than exposing it. Both are upstream's shape, kept
+// as-is so consumers following the shadcn docs get the components they expect.
+//
+// Octane adaptations: no `"use client"` (octane has no Server Components); upstream's
+// IconPlaceholder resolves at port time to lucide via @octanejs/lucide.
+import { Accordion as AccordionPrimitive } from '@octanejs/base-ui/accordion';
+import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+export function Accordion({ className, ...props }: Record<string, any>) @{
+	<AccordionPrimitive.Root
+		data-slot="accordion"
+		className={cn('flex w-full flex-col', className)}
+		{...props}
+	/>
+}
+
+export function AccordionItem({ className, ...props }: Record<string, any>) @{
+	<AccordionPrimitive.Item
+		data-slot="accordion-item"
+		className={cn('not-last:border-b', className)}
+		{...props}
+	/>
+}
+
+export function AccordionTrigger({ className, children, ...props }: Record<string, any>) @{
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			data-slot="accordion-trigger"
+			className={cn(
+				'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+			/>
+			<ChevronUpIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+			/>
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+}
+
+// `className` styles the INNER div, not the panel — upstream keeps the panel's own class string
+// fixed so the open/close animation hooks cannot be overridden away by a consumer class.
+export function AccordionContent({ className, children, ...props }: Record<string, any>) @{
+	<AccordionPrimitive.Panel
+		data-slot="accordion-content"
+		className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+		{...props}
+	>
+		<div
+			className={cn(
+				'h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+				className,
+			)}
+		>{children}</div>
+	</AccordionPrimitive.Panel>
+}

package/src/bases/base-ui/ui/alert-dialog.tsrx

@@ -0,0 +1,149 @@
+// Base UI base alert-dialog — transcribed from upstream's `bases/base-ui/ui/alert-dialog.tsx`
+// (maintainer-supplied), running on @octanejs/base-ui's AlertDialog. Upstream part mapping:
+// Overlay -> Backdrop, Content -> Popup, Cancel -> Close. This port also composes Action via Close.
+//
+// TWO DELIBERATE DEPARTURES FROM THE SOURCE:
+// - Upstream's AlertDialogTitle carries `cn-font-heading`, a semantic hook from the pinned cn-*
+//   system. This package ships the default-Tailwind utilities-inlined flavor instead, the
+//   react-aria base already drops this exact class for that reason, and nothing in the playground
+//   defines it (0 occurrences in the built CSS), so keeping it would ship a class that resolves
+//   to nothing. Every other class string is verbatim.
+// - Upstream renders AlertDialogAction as a plain Button, so it does not dismiss the dialog.
+//   Composing it through Close preserves the public Button-like API and supplies the expected
+//   confirm-and-dismiss behavior shown by Base UI's own alert-dialog examples.
+//
+// Octane adaptations: no `"use client"`; refs are props. AlertDialogContent composes its
+// Portal/Overlay/Popup tree internally, so consumer children still flow through the ordinary
+// props.children channel.
+import { AlertDialog as AlertDialogPrimitive } from '@octanejs/base-ui/alert-dialog';
+
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
+import { Button } from './button.tsrx';
+
+export function AlertDialog({ ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+export function AlertDialogTrigger({ ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+export function AlertDialogPortal({ ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+export function AlertDialogOverlay({ className, ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Backdrop
+		data-slot="alert-dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogContent({ className, size = 'default', ...props }: Record<
+	string,
+	any
+>) @{
+	<AlertDialogPortal>
+		<AlertDialogOverlay key="overlay" />
+		<AlertDialogPrimitive.Popup
+			key="content"
+			data-slot="alert-dialog-content"
+			data-size={size}
+			className={cn(
+				'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+}
+
+export function AlertDialogHeader({ className, ...props }: DivProps) @{
+	<div
+		data-slot="alert-dialog-header"
+		className={cn(
+			'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogFooter({ className, ...props }: DivProps) @{
+	<div
+		data-slot="alert-dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogMedia({ className, ...props }: DivProps) @{
+	<div
+		data-slot="alert-dialog-media"
+		className={cn(
+			'mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=\'size-\'])]:size-6',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogTitle({ className, ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Title
+		data-slot="alert-dialog-title"
+		className={cn(
+			'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogDescription({ className, ...props }: Record<string, any>) @{
+	<AlertDialogPrimitive.Description
+		data-slot="alert-dialog-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDialogAction({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: Record<string, any>) @{
+	<AlertDialogPrimitive.Close
+		data-slot="alert-dialog-action"
+		className={cn(className)}
+		render={<Button variant={variant} size={size} />}
+		{...props}
+	/>
+}
+
+// `render` takes an ELEMENT here, not a function — that is Base UI's render-prop contract, and
+// it is what lets each action keep Close's dismiss behavior while looking like a Button.
+export function AlertDialogCancel({
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
+}: Record<string, any>) @{
+	<AlertDialogPrimitive.Close
+		data-slot="alert-dialog-cancel"
+		className={cn(className)}
+		render={<Button variant={variant} size={size} />}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/alert.tsrx

@@ -0,0 +1,68 @@
+// Base UI base alert — structure and cva strings from upstream `bases/base-ui/ui/alert.tsx`.
+//
+// Alert uses no headless primitive in any base, and this file's nine string literals were
+// verified byte-identical to the React Aria base's `alert.tsrx`. That is a finding, not an
+// assumption: the two bases DO diverge elsewhere (the Radix base's Skeleton is `bg-accent`
+// where aria's is `bg-muted`), so identity is checked per component rather than inherited.
+//
+// Octane adaptations: `React.ComponentProps<'div'>` → the package's `DivProps`; no
+// `"use client"` (octane has no Server Components). Pure template JSX, no consumer-children
+// interleave, so every part uses the `@{ … }` shorthand.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
+
+export const alertVariants = cva(
+	'group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export interface AlertProps extends DivProps {
+	variant?: VariantProps<typeof alertVariants>['variant'];
+}
+
+export function Alert({ className, variant, ...props }: AlertProps) @{
+	<div
+		data-slot="alert"
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+}
+
+export function AlertTitle({ className, ...props }: DivProps) @{
+	<div
+		data-slot="alert-title"
+		className={cn(
+			'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertDescription({ className, ...props }: DivProps) @{
+	<div
+		data-slot="alert-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AlertAction({ className, ...props }: DivProps) @{
+	<div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+}

package/src/bases/base-ui/ui/aspect-ratio.tsrx

@@ -0,0 +1,24 @@
+// Base UI base aspect-ratio — presentational, no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/aspect-ratio.tsx`, which was not available at port time.
+// `alert` was confirmed byte-identical between the two bases, which is why this is plausible —
+// but it is not proof, and the bases DO diverge elsewhere. Diff the class strings against the
+// upstream source before treating this as ported.
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
+
+export interface AspectRatioProps extends DivProps {
+	ratio: number;
+}
+
+export function AspectRatio({ ratio, className, ...props }: AspectRatioProps) @{
+	<div
+		data-slot="aspect-ratio"
+		style={{
+			'--ratio': ratio,
+		} as Record<string, string | number>}
+		className={cn('relative aspect-(--ratio)', className)}
+		{...props}
+	/>
+}