@octanejs/shadcn 0.0.1

package/src/ui/slider.tsrx

@@ -0,0 +1,69 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/slider.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis).
+//
+// The Track/Range/Thumb tree is composed with createElement: upstream renders
+// one Thumb per entry of `_values` via an array map, and mapped/prop-position
+// descriptors are the octane channel for computed children (see
+// breadcrumb.tsrx's comment on opaque compiled children).
+import { createElement, useMemo } from 'octane';
+import { Slider as SliderPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export interface SliderProps extends Record<string, unknown> {
+	className?: string;
+	defaultValue?: number[];
+	value?: number[];
+	min?: number;
+	max?: number;
+}
+
+export function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: SliderProps) {
+	const _values = useMemo(
+		() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+		[value, defaultValue, min, max],
+	);
+
+	return createElement(
+		SliderPrimitive.Root,
+		{
+			'data-slot': 'slider',
+			defaultValue,
+			value,
+			min,
+			max,
+			className: cn(
+				'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+				className,
+			),
+			...props,
+		},
+		createElement(
+			SliderPrimitive.Track,
+			{
+				'data-slot': 'slider-track',
+				className: 'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+			},
+			createElement(SliderPrimitive.Range, {
+				'data-slot': 'slider-range',
+				className: 'absolute bg-primary 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: 'block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+			}),
+		),
+	);
+}

package/src/ui/sonner.tsrx

@@ -0,0 +1,45 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/sonner.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis). IconPlaceholder resolves to lucide (see
+// spinner.tsrx).
+//
+// OCTANE DIVERGENCE: upstream reads the theme from next-themes' useTheme()
+// (Next.js-specific); here `theme` is an ordinary prop with upstream's
+// 'system' default — pass your app's theme source explicitly. The icon
+// descriptors are composed with createElement (they travel through a props
+// object, the documented channel for element descriptors).
+import { createElement } from 'octane';
+import { Toaster as Sonner, type ToasterProps } from '@octanejs/sonner';
+import {
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+} from '@octanejs/lucide';
+
+export function Toaster({ theme = 'system', ...props }: ToasterProps) {
+	return createElement(Sonner, {
+		theme: theme as ToasterProps['theme'],
+		className: 'toaster group',
+		icons: {
+			success: createElement(CircleCheckIcon, { className: 'size-4' }),
+			info: createElement(InfoIcon, { className: 'size-4' }),
+			warning: createElement(TriangleAlertIcon, { className: 'size-4' }),
+			error: createElement(OctagonXIcon, { className: 'size-4' }),
+			loading: createElement(Loader2Icon, { className: 'size-4 animate-spin' }),
+		},
+		style: {
+			'--normal-bg': 'var(--popover)',
+			'--normal-text': 'var(--popover-foreground)',
+			'--normal-border': 'var(--border)',
+			'--border-radius': 'var(--radius)',
+		},
+		toastOptions: {
+			classNames: {
+				toast: 'cn-toast',
+			},
+		},
+		...props,
+	});
+}

package/src/ui/spinner.tsrx

@@ -0,0 +1,23 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/spinner.tsx.
+//
+// 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.
+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/ui/switch.tsrx

@@ -0,0 +1,30 @@
+// Default-Tailwind switch flavor (package canonical) — utilities-inlined
+// upstream styling. Octane adaptations: "use client" dropped, radix-ui →
+// @octanejs/radix; pure template JSX.
+import { Switch as SwitchPrimitive } from '@octanejs/radix';
+
+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 disabled:cursor-not-allowed 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-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=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-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground',
+			)}
+		/>
+	</SwitchPrimitive.Root>
+}

package/src/ui/table.tsrx

@@ -0,0 +1,80 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/table.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis). Table renders inside the upstream
+// table-container wrapper div.
+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/ui/tabs.tsrx

@@ -0,0 +1,69 @@
+// Tabs — maintainer-supplied default-Tailwind flavor, class strings verbatim.
+// Octane adaptations: "use client" dropped, radix-ui → @octanejs/radix, cva →
+// class-variance-authority (unchanged).
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Tabs({ className, orientation = 'horizontal', ...props }: Props & {
+	orientation?: 'horizontal' | 'vertical';
+}) @{
+	<TabsPrimitive.Root
+		data-slot="tabs"
+		data-orientation={orientation}
+		orientation={orientation}
+		className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+		{...props}
+	/>
+}
+
+export const tabsListVariants = cva(
+	'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-muted',
+				line: 'gap-1 bg-transparent',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function TabsList({ className, variant = 'default', ...props }: Props & VariantProps<
+	typeof tabsListVariants
+>) @{
+	<TabsPrimitive.List
+		data-slot="tabs-list"
+		data-variant={variant}
+		className={cn(tabsListVariants({ variant }), className)}
+		{...props}
+	/>
+}
+
+export function TabsTrigger({ className, ...props }: Props) @{
+	<TabsPrimitive.Trigger
+		data-slot="tabs-trigger"
+		className={cn(
+			'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+			'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+			'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function TabsContent({ className, ...props }: Props) @{
+	<TabsPrimitive.Content
+		data-slot="tabs-content"
+		className={cn('flex-1 text-sm outline-none', className)}
+		{...props}
+	/>
+}

package/src/ui/textarea.tsrx

@@ -0,0 +1,20 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/textarea.tsx.
+//
+// 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 interface TextareaProps extends HostProps<'textarea'> {}
+
+export function Textarea({ className, ...props }: TextareaProps) @{
+	<textarea
+		data-slot="textarea"
+		className={cn(
+			'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/ui/toggle-group.tsrx

@@ -0,0 +1,100 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/toggle-group.tsx (the `"use client"` directive
+// is dropped — octane has no RSC axis). React.createContext/useContext map onto
+// octane's createContext/useContext.
+//
+// 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).
+import { createContext, createElement, useContext, type OctaneNode } from 'octane';
+import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from '@octanejs/radix';
+
+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';
+	children?: OctaneNode;
+}
+
+export function ToggleGroup({
+	className,
+	variant,
+	size,
+	spacing = 2,
+	orientation = 'horizontal',
+	children,
+	...props
+}: ToggleGroupProps) {
+	return createElement(
+		ToggleGroupPrimitive.Root,
+		{
+			'data-slot': 'toggle-group',
+			'data-variant': variant,
+			'data-size': size,
+			'data-spacing': spacing,
+			'data-orientation': orientation,
+			// Forwarded to the primitive: it drives RovingFocusGroup's arrow-key
+			// axis (a vertical group must ignore left/right and use up/down).
+			orientation,
+			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);
+	<ToggleGroupPrimitive.Item
+		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/ui/toggle.tsrx

@@ -0,0 +1,47 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/toggle.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis).
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from '@octanejs/radix';
+
+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-[state=on]:bg-accent data-[state=on]: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.Root
+		data-slot="toggle"
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
+}

package/src/ui/tooltip.tsrx

@@ -0,0 +1,65 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/tooltip.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis).
+//
+// TooltipContent renders Portal > Content + Arrow: the Portal's child must be
+// a real element DESCRIPTOR (radix portals cannot enumerate opaque compiled
+// .tsrx children), so the pair is composed with createElement. The consumer's
+// children flow into the Content primitive through the ordinary props.children
+// channel.
+import { createElement, type OctaneNode } from 'octane';
+import { Tooltip as TooltipPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export interface TooltipProviderProps extends Record<string, unknown> {
+	delayDuration?: number;
+}
+
+export function TooltipProvider({ delayDuration = 0, ...props }: TooltipProviderProps) @{
+	<TooltipPrimitive.Provider
+		data-slot="tooltip-provider"
+		delayDuration={delayDuration}
+		{...props}
+	/>
+}
+
+export function Tooltip(props: Record<string, unknown>) @{
+	<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+export function TooltipTrigger(props: Record<string, unknown>) @{
+	<TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+export interface TooltipContentProps extends Record<string, unknown> {
+	className?: string;
+	sideOffset?: number;
+	children?: OctaneNode;
+}
+
+export function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: TooltipContentProps) {
+	return createElement(TooltipPrimitive.Portal, {
+		children: createElement(TooltipPrimitive.Content, {
+			'data-slot': 'tooltip-content',
+			sideOffset,
+			className: cn(
+				'z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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,
+			children: [
+				children,
+				createElement(TooltipPrimitive.Arrow, {
+					key: 'arrow',
+					className: 'z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground',
+				}),
+			],
+		}),
+	});
+}