@octanejs/shadcn 0.0.7 → 0.0.9

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

@@ -0,0 +1,121 @@
+// Base UI base sheet — TRANSCRIBED from upstream's `bases/base-ui/ui/sheet.tsx`
+// (maintainer-supplied), class strings verbatim. Runs on @octanejs/base-ui's Dialog:
+// Overlay -> Backdrop, Content -> Popup.
+//
+// UPSTREAM ANIMATES THIS WITH CSS TRANSITIONS, NOT KEYFRAMES, which is why the file is transcribed
+// rather than derived. Base UI publishes `data-starting-style` and `data-ending-style` (see
+// utils/popupStateMapping.ts) and this source drives motion off them with a plain `transition`,
+// where the radix base uses `animate-in` / `animate-out` keyframe utilities.
+//
+// A derived version of this file did jump visibly on close, which is what prompted the
+// transcription. Do NOT infer from that a general rule that keyframes cannot work on Base UI: the
+// same mapping also emits `data-open` and `data-closed`, so `data-closed:animate-out` does match,
+// and the precise cause of that jump was never isolated. What is established here is only what
+// upstream ships, which is this.
+//
+// So the motion here reads: `transition duration-200` plus per-side
+// `data-starting-style:translate-*` / `data-ending-style:translate-*` and an opacity pair —
+// the element sits offset-and-transparent before open and after close, and transitions to its
+// resting position in between.
+//
+// ONE DEPARTURE FROM THE SOURCE: upstream's title carries `cn-font-heading`, a semantic hook from
+// the pinned cn-* system. This package ships the utilities-inlined flavor, the react-aria base
+// drops the same class, and nothing defines it here (0 occurrences in the built CSS).
+//
+// Octane adaptations: no `"use client"`; refs are props.
+import { type OctaneNode } from 'octane';
+import { Dialog as SheetPrimitive } from '@octanejs/base-ui/dialog';
+import { XIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Sheet(props: Record<string, unknown>) @{
+	<SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+export function SheetTrigger(props: Record<string, unknown>) @{
+	<SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+export function SheetClose(props: Record<string, unknown>) @{
+	<SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export function SheetPortal(props: Record<string, unknown>) @{
+	<SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+export function SheetOverlay({ className, ...props }: Props) @{
+	<SheetPrimitive.Backdrop
+		data-slot="sheet-overlay"
+		className={cn(
+			'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export interface SheetContentProps extends Props {
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	showCloseButton?: boolean;
+}
+
+export function SheetContent(props: SheetContentProps) @{
+	const { className, side = 'right', showCloseButton = true, children: _children, ...rest } = props;
+
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Popup
+			data-slot="sheet-content"
+			data-side={side}
+			className={cn(
+				'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+				className,
+			)}
+			{...rest}
+		>
+			{props.children}
+			@if (showCloseButton) {
+				<SheetPrimitive.Close
+					data-slot="sheet-close"
+					render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</Button>}
+				/>
+			}
+		</SheetPrimitive.Popup>
+	</SheetPortal>
+}
+
+export function SheetHeader({ className, ...props }: Props) @{
+	<div data-slot="sheet-header" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />
+}
+
+export function SheetFooter({ className, ...props }: Props) @{
+	<div
+		data-slot="sheet-footer"
+		className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+		{...props}
+	/>
+}
+
+export function SheetTitle({ className, ...props }: Props) @{
+	<SheetPrimitive.Title
+		data-slot="sheet-title"
+		className={cn('text-base font-medium text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function SheetDescription({ className, ...props }: Props) @{
+	<SheetPrimitive.Description
+		data-slot="sheet-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,17 @@
+// Base UI base skeleton — 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/skeleton.tsx`, which was not available at port time.
+// Skeleton is the WORST case for this, and the reason the whole batch is labelled: the Radix
+// base renders `bg-accent` where the React Aria base renders `bg-muted`, so the one token that
+// matters here is known to differ ACROSS bases. Verify against the upstream source.
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
+
+export function Skeleton({ className, ...props }: DivProps) @{
+	<div
+		data-slot="skeleton"
+		className={cn('animate-pulse rounded-md bg-muted', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,111 @@
+// Base UI base slider — TRANSCRIBED from upstream's `bases/base-ui/ui/slider.tsx`
+// (maintainer-supplied). Structure, part tree and class strings follow that source.
+//
+// THE PART TREE IS NOT THE RADIX ONE:
+//
+//     radix     Root >           Track > Range,       Thumb a SIBLING of Track (under Root)
+//     Base UI   Root > Control > Track > Indicator,   Thumb a SIBLING of Track (under Control)
+//
+// The thumb sits OUTSIDE the track in both. That matters: the track carries `overflow-hidden` —
+// which is what gives the fill its rounded ends — and is only `h-1` tall, so a round thumb nested
+// inside it is clipped to a 4px sliver that reads as a missing thumb. Base UI positions the thumb
+// from slider context rather than from its DOM parent (`inset-inline-start: <pct>` plus a
+// centering `translate`), so Control is the box those percentages resolve against.
+//
+// ONE DEPARTURE FROM THE SOURCE, AND IT IS DELIBERATE: upstream writes its orientation variants as
+// `data-horizontal:` / `data-vertical:`. No primitive in @octanejs/base-ui emits those attributes —
+// this one publishes `data-orientation="horizontal" | "vertical"` on Root, Control, Track,
+// Indicator and Thumb (verified by rendering it), so the variants are written as
+// `data-[orientation=…]:` instead. Copied verbatim, upstream's spelling would match nothing and the
+// track would render with no height at all: an invisible rail. Whether the primitive should be
+// emitting the newer attribute names is a question about @octanejs/base-ui, not about this file.
+//
+// `thumbAlignment="edge"` is forwarded as upstream does: it insets the thumb so the two extremes
+// sit flush with the ends of the track instead of overhanging them.
+//
+// Thumbs are composed with createElement for the same reason as the radix base: one per entry of
+// `_values`, and mapped descriptors are octane's channel for computed children.
+import { createElement, useMemo } from 'octane';
+import { Slider as SliderPrimitive } from '@octanejs/base-ui/slider';
+
+import { cn } from '../../../lib/utils';
+
+export interface SliderProps extends Record<string, unknown> {
+	className?: string;
+	defaultValue?: number | number[];
+	value?: number | number[];
+	min?: number;
+	max?: number;
+}
+
+export function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: SliderProps) {
+	// This drives HOW MANY THUMBS get rendered, so a value shape it fails to recognise is a visible
+	// bug rather than a type nicety.
+	//
+	// DEPARTS FROM THE TRANSCRIBED SOURCE, deliberately. Upstream only tests `Array.isArray` and
+	// otherwise falls back to `[min, max]` — but Base UI's Slider accepts a SCALAR for a
+	// single-value slider, and upstream types these props as `SliderPrimitive.Root.Props`, which
+	// permits one. So `defaultValue={30}` renders two thumbs against a one-value slider: the range
+	// fallback fires, and the second thumb has no value behind it.
+	const _values = useMemo(() => {
+		// A controlled `value` wins when present; `??` rather than `||` so a legitimate 0 counts.
+		const provided = value ?? defaultValue;
+		if (Array.isArray(provided)) {
+			return provided;
+		}
+		if (typeof provided === 'number') {
+			return [provided];
+		}
+		// Neither given: upstream's range-across-the-track default, kept as-is in both bases.
+		return [min, max];
+	}, [value, defaultValue, min, max]);
+
+	return createElement(
+		SliderPrimitive.Root,
+		{
+			className: cn(
+				'data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full',
+				className,
+			),
+			'data-slot': 'slider',
+			defaultValue,
+			value,
+			min,
+			max,
+			thumbAlignment: 'edge',
+			...props,
+		},
+		createElement(
+			SliderPrimitive.Control,
+			{
+				className: 'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+			},
+			createElement(
+				SliderPrimitive.Track,
+				{
+					'data-slot': 'slider-track',
+					className: 'relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1',
+				},
+				createElement(SliderPrimitive.Indicator, {
+					'data-slot': 'slider-range',
+					className: 'bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+				}),
+			),
+			...Array.from(
+				{ length: _values.length },
+				(_, index) => createElement(SliderPrimitive.Thumb, {
+					'data-slot': 'slider-thumb',
+					key: index,
+					className: 'relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50',
+				}),
+			),
+		),
+	);
+}

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

@@ -0,0 +1,30 @@
+// Base UI base spinner — 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/spinner.tsx`, which was not available at port time.
+// Diff the class strings against the upstream source before treating this as ported.
+//
+// OCTANE DIVERGENCE: upstream's IconPlaceholder (the CLI-resolved iconLibrary axis) is
+// resolved at port time to the default library, lucide, via @octanejs/lucide. Other icon
+// libraries are a registry-emit concern.
+//
+// The props are a permissive record rather than HostProps<'svg'>: these are forwarded to a
+// lucide component, not applied to a host element, so the host SVG attribute types do not
+// describe them.
+import { Loader2Icon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+export interface SpinnerProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Spinner({ className, ...props }: SpinnerProps) @{
+	<Loader2Icon
+		data-slot="spinner"
+		role="status"
+		aria-label="Loading"
+		className={cn('size-4 animate-spin', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,43 @@
+// Base UI base switch — runs on the @octanejs/base-ui `Switch` primitive.
+//
+// TWO ATTRIBUTE DIALECTS DIFFER FROM THE RADIX BASE, both verified by rendering the primitive:
+//
+//   1. Checked state. Radix publishes `data-state="checked"`, Base UI publishes bare
+//      `data-checked` / `data-unchecked` attributes:
+//        radix:   `data-[state=checked]:bg-primary`
+//        base-ui: `data-checked:bg-primary`
+//      Copying the radix form would leave the switch permanently showing its unchecked colours
+//      and the thumb never translating — the exact symptom of a wrong-base copy.
+//
+//   2. Disabled. Switch.Root renders a `<span role="switch">`, never `:disabled`, so
+//      `disabled:` cannot match; the primitive emits `data-disabled` instead.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
+// rather than upstream's Base UI source.
+import { Switch as SwitchPrimitive } from '@octanejs/base-ui/switch';
+
+import { cn } from '../../../lib/utils';
+
+export interface SwitchProps extends Record<string, unknown> {
+	className?: string;
+	size?: 'sm' | 'default';
+}
+
+export function Switch({ className, size = 'default', ...props }: SwitchProps) @{
+	<SwitchPrimitive.Root
+		data-slot="switch"
+		data-size={size}
+		className={cn(
+			'peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80',
+			className,
+		)}
+		{...props}
+	>
+		<SwitchPrimitive.Thumb
+			data-slot="switch-thumb"
+			className={cn(
+				'pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground',
+			)}
+		/>
+	</SwitchPrimitive.Root>
+}

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

@@ -0,0 +1,85 @@
+// Base UI base table — THIS FAMILY IS BASE-INDEPENDENT. Neither Radix nor Base UI publishes a
+// table primitive, so upstream ships the same plain host elements in both bases and this file is
+// the radix base's content unchanged. (The React Aria base is the odd one out: RAC does have a
+// table, so that base runs on real collection components with generic item types.)
+//
+// There is consequently no dialect to get wrong here and nothing to verify against a primitive:
+// `data-[state=selected]` on the row is written by the CONSUMER — a data-table library setting
+// selection state — not emitted by anything underneath, so unlike checkbox or toggle it is not a
+// Radix-ism that needs translating.
+import { cn } from '../../../lib/utils';
+
+// Multi-host family (div/table/thead/tbody/tr/th/td/caption): no single host
+// prop table applies, so the shared alias stays structural.
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Table({ className, ...props }: Props) @{
+	<div data-slot="table-container" className="relative w-full overflow-x-auto">
+		<table
+			data-slot="table"
+			className={cn('w-full caption-bottom text-sm', className)}
+			{...props}
+		/>
+	</div>
+}
+
+export function TableHeader({ className, ...props }: Props) @{
+	<thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+export function TableBody({ className, ...props }: Props) @{
+	<tbody
+		data-slot="table-body"
+		className={cn('[&_tr:last-child]:border-0', className)}
+		{...props}
+	/>
+}
+
+export function TableFooter({ className, ...props }: Props) @{
+	<tfoot
+		data-slot="table-footer"
+		className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+		{...props}
+	/>
+}
+
+export function TableRow({ className, ...props }: Props) @{
+	<tr
+		data-slot="table-row"
+		className={cn(
+			'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableHead({ className, ...props }: Props) @{
+	<th
+		data-slot="table-head"
+		className={cn(
+			'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableCell({ className, ...props }: Props) @{
+	<td
+		data-slot="table-cell"
+		className={cn(
+			'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TableCaption({ className, ...props }: Props) @{
+	<caption
+		data-slot="table-caption"
+		className={cn('text-muted-foreground mt-4 text-sm', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,22 @@
+// Base UI base textarea — a plain host `<textarea>`. Base UI ships no textarea primitive (its
+// Input is a native `<input>` via Field.Control), so unlike the React Aria base there is no
+// `TextArea` component to compose and this matches the Radix base's plain-host shape.
+//
+// UNVERIFIED PROVENANCE: class string taken from this package's React Aria base rather than
+// transcribed from upstream's Base UI source.
+//
+// OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event, not a synthetic
+// `onChange`; native `change` keeps its commit-on-blur meaning.
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Textarea({ className, ...props }: HostProps<'textarea'>) @{
+	<textarea
+		data-slot="textarea"
+		className={cn(
+			'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/toggle-group.tsrx

@@ -0,0 +1,124 @@
+// Base UI base toggle-group — runs on @octanejs/base-ui's ToggleGroup.
+//
+// THERE IS NO `Item` PART. Verified by rendering the primitive: Base UI's ToggleGroup is a single
+// component whose children are ordinary `Toggle`s carrying a `value`, where radix pairs
+// `ToggleGroup.Root` with `ToggleGroup.Item`. So `ToggleGroupItem` here wraps `Toggle` — the same
+// primitive `toggle.tsrx` uses — and the exported names and `data-slot` values stay as shadcn
+// defines them, so consumers see no difference between bases.
+//
+// TWO API DIFFERENCES A CONSUMER CAN OBSERVE, both inherent to the primitive:
+//
+//   1. `type="single" | "multiple"` is translated to Base UI's `multiple` boolean, so markup
+//      written against the radix base keeps working.
+//
+//   2. VALUES ARE ALWAYS ARRAYS. Base UI's `value` / `defaultValue` / `onValueChange` speak
+//      `string[]` in both modes, where radix's single mode speaks a bare `string`. That is not
+//      translated: faking a scalar would mean inventing conversion behavior on every change, and
+//      silently reshaping the argument to the consumer's handler is worse than a documented
+//      difference. Single mode still yields at most one entry.
+//
+// The pressed dialect is `data-pressed`, not radix's `data-[state=on]` — see toggle.tsrx, whose
+// `toggleVariants` this file reuses, so the two bases cannot drift apart.
+//
+// ToggleGroup is composed with createElement: the consumer's children must sit INSIDE the context
+// Provider, and opaque compiled .tsrx children can only flow through the props.children channel
+// (see breadcrumb.tsrx's comment).
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { createContext, createElement, useContext, type OctaneNode } from 'octane';
+import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from '@octanejs/base-ui/toggle-group';
+import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
+
+import { cn } from '../../../lib/utils';
+import { toggleVariants } from './toggle.tsrx';
+
+const ToggleGroupContext = createContext<
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+		orientation?: 'horizontal' | 'vertical';
+	}
+>({
+	size: 'default',
+	variant: 'default',
+	spacing: 2,
+	orientation: 'horizontal',
+});
+
+export interface ToggleGroupProps extends Record<string, unknown> {
+	className?: string;
+	variant?: VariantProps<typeof toggleVariants>['variant'];
+	size?: VariantProps<typeof toggleVariants>['size'];
+	spacing?: number;
+	orientation?: 'horizontal' | 'vertical';
+	type?: 'single' | 'multiple';
+	children?: OctaneNode;
+}
+
+export function ToggleGroup({
+	className,
+	variant,
+	size,
+	spacing = 2,
+	orientation = 'horizontal',
+	type,
+	children,
+	...props
+}: ToggleGroupProps) {
+	return createElement(
+		ToggleGroupPrimitive,
+		{
+			'data-slot': 'toggle-group',
+			'data-variant': variant,
+			'data-size': size,
+			'data-spacing': spacing,
+			// Forwarded to the primitive: it drives the arrow-key axis (a vertical group must
+			// ignore left/right and use up/down). The primitive also emits `data-orientation`
+			// itself, so unlike the radix base this is not set by hand.
+			orientation,
+			multiple: type === 'multiple',
+			style: { '--gap': spacing },
+			className: cn(
+				'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+				className,
+			),
+			...props,
+		},
+		createElement(
+			ToggleGroupContext.Provider,
+			{ value: { variant, size, spacing, orientation } },
+			children,
+		),
+	);
+}
+
+export interface ToggleGroupItemProps extends Record<string, unknown> {
+	className?: string;
+	variant?: VariantProps<typeof toggleVariants>['variant'];
+	size?: VariantProps<typeof toggleVariants>['size'];
+}
+
+export function ToggleGroupItem({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ToggleGroupItemProps) @{
+	const context = useContext(ToggleGroupContext);
+	<TogglePrimitive
+		data-slot="toggle-group-item"
+		data-variant={context.variant || variant}
+		data-size={context.size || size}
+		data-spacing={context.spacing}
+		className={cn(
+			'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+			toggleVariants({
+				variant: context.variant || variant,
+				size: context.size || size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,57 @@
+// Base UI base toggle — runs on @octanejs/base-ui's Toggle.
+//
+// THE PRESSED-STATE DIALECT DIFFERS, verified by rendering the primitive: Base UI emits a bare
+// `data-pressed` attribute (alongside `aria-pressed`), where radix emits `data-state="on"`. So
+// the radix base's `data-[state=on]:` utilities are replaced with `data-pressed:` — copying them
+// unchanged would leave a toggle that never shows its pressed styling, with nothing failing.
+//
+// `disabled:` is kept rather than converted: Base UI's Toggle renders a real `<button>` (again
+// verified by rendering), so the `:disabled` pseudo-class does match here — unlike checkbox,
+// switch and radio, whose Roots are spans.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
+// rather than transcribed from upstream's Base UI source.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
+
+import { cn } from '../../../lib/utils';
+
+export const toggleVariants = cva(
+	'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-accent data-pressed:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 min-w-9 px-2',
+				sm: 'h-8 min-w-8 px-1.5',
+				lg: 'h-10 min-w-10 px-2.5',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export interface ToggleProps extends Record<string, unknown> {
+	className?: string;
+	variant?: VariantProps<typeof toggleVariants>['variant'];
+	size?: VariantProps<typeof toggleVariants>['size'];
+}
+
+export function Toggle({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ToggleProps) @{
+	<TogglePrimitive
+		data-slot="toggle"
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
+}