@octanejs/shadcn 0.0.8 → 0.0.10

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,10 +1,10 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "license": "MIT",
   "type": "module",
   "engines": {
-    "node": ">=22"
+    "node": ">=22.22.2"
   },
   "description": "shadcn/ui for the octane renderer — the Radix-base shadcn component distribution ported onto octane: cva-variant components preserving the upstream data-slot/class contract, built on @octanejs/radix, published as importable source with a shadcn-CLI-compatible registry planned.",
   "author": {
@@ -108,22 +108,36 @@
     "./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",
@@ -134,14 +148,14 @@
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "3.6.0",
-    "@octanejs/aria": "0.0.17",
-    "@octanejs/base-ui": "0.1.21",
-    "@octanejs/lucide": "0.1.18",
-    "@octanejs/radix": "0.1.22",
-    "@octanejs/sonner": "0.1.18"
+    "@octanejs/aria": "0.0.19",
+    "@octanejs/base-ui": "0.1.23",
+    "@octanejs/lucide": "0.1.20",
+    "@octanejs/radix": "0.1.24",
+    "@octanejs/sonner": "0.1.20"
   },
   "peerDependencies": {
-    "octane": "0.1.23"
+    "octane": "0.1.25"
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
@@ -151,12 +165,15 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.23"
+    "octane": "0.1.25"
   },
   "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/avatar.tsrx

@@ -0,0 +1,89 @@
+// Base UI base avatar — runs on @octanejs/base-ui's Avatar (Root/Image/Fallback), a direct
+// one-to-one mapping with the radix base.
+//
+// `AvatarBadge`, `AvatarGroup` and `AvatarGroupCount` are plain host elements in every base —
+// upstream defines no primitive for them — so they are unchanged from the radix source.
+//
+// Nothing here keys off a primitive-emitted attribute: the `data-[size=…]` variants read the
+// `data-size` this component writes itself, and the primitive emits no state attributes at all
+// (verified by rendering it — Root and Fallback are bare spans). So unlike the overlays and the
+// form controls, there is no dialect to get wrong.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { Avatar as AvatarPrimitive } from '@octanejs/base-ui/avatar';
+
+import { cn } from '../../../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export interface AvatarProps extends Props {
+	size?: 'default' | 'sm' | 'lg';
+}
+
+export function Avatar({ className, size = 'default', ...props }: AvatarProps) @{
+	<AvatarPrimitive.Root
+		data-slot="avatar"
+		data-size={size}
+		className={cn(
+			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarImage({ className, ...props }: Props) @{
+	<AvatarPrimitive.Image
+		data-slot="avatar-image"
+		className={cn('aspect-square size-full rounded-full object-cover', className)}
+		{...props}
+	/>
+}
+
+export function AvatarFallback({ className, ...props }: Props) @{
+	<AvatarPrimitive.Fallback
+		data-slot="avatar-fallback"
+		className={cn(
+			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarBadge({ className, ...props }: Props) @{
+	<span
+		data-slot="avatar-badge"
+		className={cn(
+			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarGroup({ className, ...props }: Props) @{
+	<div
+		data-slot="avatar-group"
+		className={cn(
+			'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarGroupCount({ className, ...props }: Props) @{
+	<div
+		data-slot="avatar-group-count"
+		className={cn(
+			'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,56 @@
+// Base UI base badge — a plain host `<span>` carrying the shared cva strings.
+//
+// The cva block is byte-identical to the radix and React Aria bases (checked, not assumed), and no
+// primitive is involved: badge is a span with `data-slot` and `data-variant`, and nothing
+// underneath emits state. So there is no dialect here to get wrong, and no motion to mistranslate.
+//
+// NO ESCAPE HATCH, DELIBERATELY. Upstream's other bases each let a badge render as a different
+// element, and each does it differently: radix takes `asChild` and swaps in `Slot`; React Aria
+// takes a `render` FUNCTION and calls it with the computed props. Base UI has no Slot, and its own
+// convention is a `render` ELEMENT prop backed by `useRender` — but badge is not a Base UI
+// primitive, so nothing here decides which of those shapes upstream's Base UI badge actually
+// exposes, or whether it exposes one at all.
+//
+// Guessing would publish an API this base may not have, and an API shape is not something a later
+// commit can quietly correct. Adding the hatch once the upstream source is available is additive
+// and non-breaking; shipping the wrong one is not. This follows button.tsrx in the same base,
+// which omits `LinkButton` for the same reason. A consumer needing a different element today can
+// spread `badgeVariants({ variant })` onto it directly, which is what the class export is for.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export 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]:pr-1.5 has-data-[icon=inline-start]:pl-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',
+		},
+	},
+);
+
+export interface BadgeProps extends HostProps<'span'> {
+	variant?: VariantProps<typeof badgeVariants>['variant'];
+	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
+	asChild?: never;
+}
+
+export function Badge({ className, variant = 'default', ...props }: BadgeProps) @{
+	<span
+		data-slot="badge"
+		data-variant={variant}
+		className={cn(badgeVariants({ variant }), className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,109 @@
+// Base UI base breadcrumb — class strings from the maintainer-supplied radix source, verbatim.
+// Six of the seven parts are plain host elements with no primitive underneath and no state
+// attributes, so they carry across unchanged and there is no dialect to get wrong.
+//
+// `BreadcrumbLink` IS MISSING ITS ESCAPE HATCH, and unlike badge that costs something real: the
+// `asChild` branch is how a router's Link gets plugged in, which is most of what this family is
+// for. It is still left out, for the same reason:
+//
+//   radix        `asChild` swaps in `Slot`, a pure prop-merger
+//   React Aria   routes through RAC's own `Link` primitive with a `render` prop
+//   Base UI      has neither — no Slot, and no Link primitive
+//
+// Base UI's house convention is a `render` ELEMENT prop backed by `useRender`, and this base
+// already relies on it where a real primitive offers it (see pagination). But breadcrumb has no
+// primitive, so nothing here settles whether upstream's Base UI breadcrumb implements `render`
+// itself, and an API shape is not something a later commit can quietly correct — adding it is
+// additive, shipping the wrong spelling is breaking.
+//
+// Until then a router link still works, it just has to carry the classes itself:
+//
+//     <BreadcrumbItem>
+//       <RouterLink className="transition-colors hover:text-foreground">Home</RouterLink>
+//     </BreadcrumbItem>
+//
+// which loses only the `data-slot="breadcrumb-link"` hook.
+import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+import { type OctaneNode } from 'octane';
+
+import { cn } from '../../../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Breadcrumb({ className, ...props }: Props) @{
+	<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+}
+
+export function BreadcrumbList({ className, ...props }: Props) @{
+	<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}
+	/>
+}
+
+export function BreadcrumbItem({ className, ...props }: Props) @{
+	<li
+		data-slot="breadcrumb-item"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}
+
+export interface BreadcrumbLinkProps extends Props {
+	/**
+ * NOT SUPPORTED in this base — see the header. Declared as `never` so markup carrying it over
+ * from the radix base fails to compile instead of silently rendering the anchor AND the child,
+ * which nests one link inside another.
+ */
+	asChild?: never;
+}
+
+export function BreadcrumbLink({ className, ...props }: BreadcrumbLinkProps) @{
+	<a
+		data-slot="breadcrumb-link"
+		className={cn('transition-colors hover:text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbPage({ className, ...props }: Props) @{
+	<span
+		data-slot="breadcrumb-page"
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn('font-normal text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbSeparator(props: Props & { children?: OctaneNode }) @{
+	const { className, children: _children, ...rest } = props;
+
+	<li
+		data-slot="breadcrumb-separator"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('[&>svg]:size-3.5', className)}
+		{...rest}
+	>
+		{props.children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+	</li>
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: Props) @{
+	<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>
+}

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

@@ -0,0 +1,25 @@
+// Base UI base collapsible — runs on @octanejs/base-ui's Collapsible.
+//
+// PART MAPPING: shadcn names the content part `CollapsibleContent` while the Base UI part
+// underneath is `Collapsible.Panel` — the same rename this base already makes for `accordion`.
+// The exported names and all three `data-slot` values stay as shadcn defines them, so consumers
+// see no difference between bases.
+//
+// No class strings: upstream ships this family unstyled in every base, leaving layout to the
+// consumer. There is correspondingly no styling risk here, and nothing to verify against a
+// class-string source.
+import { Collapsible as CollapsiblePrimitive } from '@octanejs/base-ui/collapsible';
+
+type Props = Record<string, unknown>;
+
+export function Collapsible(props: Props) @{
+	<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+export function CollapsibleTrigger(props: Props) @{
+	<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+}
+
+export function CollapsibleContent(props: Props) @{
+	<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+}