@octanejs/shadcn 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -104,6 +104,27 @@
     "./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/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/Dialog": "./src/bases/base-ui/ui/dialog.tsrx",
+    "./base-ui/Empty": "./src/bases/base-ui/ui/empty.tsrx",
+    "./base-ui/Input": "./src/bases/base-ui/ui/input.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/Popover": "./src/bases/base-ui/ui/popover.tsrx",
+    "./base-ui/RadioGroup": "./src/bases/base-ui/ui/radio-group.tsrx",
+    "./base-ui/Separator": "./src/bases/base-ui/ui/separator.tsrx",
+    "./base-ui/Skeleton": "./src/bases/base-ui/ui/skeleton.tsrx",
+    "./base-ui/Spinner": "./src/bases/base-ui/ui/spinner.tsrx",
+    "./base-ui/Switch": "./src/bases/base-ui/ui/switch.tsrx",
+    "./base-ui/Textarea": "./src/bases/base-ui/ui/textarea.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 +134,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.17",
+    "@octanejs/base-ui": "0.1.21",
+    "@octanejs/lucide": "0.1.18",
+    "@octanejs/radix": "0.1.22",
+    "@octanejs/sonner": "0.1.18"
   },
   "peerDependencies": {
-    "octane": "0.1.22"
+    "octane": "0.1.23"
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
@@ -129,7 +151,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.22"
+    "octane": "0.1.23"
   },
   "scripts": {
     "test": "vitest run",

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}
+	/>
+}

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

@@ -0,0 +1,69 @@
+// Base UI base button — runs on the @octanejs/base-ui `Button` primitive.
+//
+// TWO THINGS HERE ARE RECORDED FACTS, not guesses, both from the React Aria base's own
+// provenance note:
+//   1. Upstream's bases SHARE button's cva strings exactly, so the class strings below are the
+//      package's shipped utilities-inlined flavor and match the other bases.
+//   2. The Base UI base OMITS the `data-variant`/`data-size` attributes the aria base sets. They
+//      are deliberately absent rather than forgotten — no selector in these strings keys off
+//      them, so nothing styles differently for their absence.
+//
+// NO LinkButton. The aria base has one because RAC ships a `Link` primitive slotted as a button;
+// Base UI has no such primitive, and upstream's Base UI base composes links through the `render`
+// prop instead. Inventing one here would be an API this base does not have — `pagination`, which
+// consumes it in the aria base, therefore stays unported until the upstream source says how.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Button as ButtonPrimitive } from '@octanejs/base-ui/button';
+
+import { cn } from '../../../lib/utils';
+
+export 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]:pr-2 has-data-[icon=inline-start]:pl-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]:pr-1.5 has-data-[icon=inline-start]:pl-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]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3.5',
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-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',
+		},
+	},
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps extends Record<string, any> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ButtonProps) @{
+	<ButtonPrimitive
+		data-slot="button"
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,76 @@
+// Base UI base card — 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/card.tsx`, which was not available at port time.
+// 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 CardProps extends DivProps {
+	size?: 'default' | 'sm';
+}
+
+export function Card({ className, size = 'default', ...props }: CardProps) @{
+	<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}
+	/>
+}
+
+export function CardHeader({ className, ...props }: DivProps) @{
+	<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}
+	/>
+}
+
+export function CardTitle({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-title"
+		className={cn(
+			'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function CardDescription({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+}
+
+export function CardAction({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-action"
+		className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+		{...props}
+	/>
+}
+
+export function CardContent({ className, ...props }: DivProps) @{
+	<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-footer"
+		className={cn(
+			'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,43 @@
+// Base UI base checkbox — runs on the @octanejs/base-ui `Checkbox` primitive.
+//
+// THE CONDITIONAL UTILITIES ARE ADAPTED, NOT COPIED, and the reason is structural rather than
+// stylistic. Base UI's Checkbox.Root renders a `<span role="checkbox">` — verified by rendering
+// it, not assumed — with a visually-hidden native `<input>` alongside it for form submission.
+// A `<span>` is never `:disabled`, so Tailwind's `disabled:` variant (which compiles to the
+// `:disabled` pseudo-class) can NEVER match. The primitive publishes `data-disabled` instead:
+//
+//   radix base:   `disabled:opacity-50`        -> matches, Root is a real button
+//   base-ui base: `data-disabled:opacity-50`   <- what this file uses
+//
+// `data-checked:` needs no change — the radix base already uses that exact form, and Base UI
+// emits `data-checked`/`data-unchecked` too. `focus-visible:` also stays: the span carries
+// tabindex, so the native pseudo-class applies.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities are taken from this package's radix base
+// rather than transcribed from upstream's Base UI source.
+import { Checkbox as CheckboxPrimitive } from '@octanejs/base-ui/checkbox';
+import { CheckIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+export interface CheckboxProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Checkbox({ className, ...props }: CheckboxProps) @{
+	<CheckboxPrimitive.Root
+		data-slot="checkbox"
+		className={cn(
+			'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			data-slot="checkbox-indicator"
+			className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+		>
+			<CheckIcon />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+}