@octanejs/shadcn 0.0.8 → 0.0.10

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

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

@@ -39,15 +39,53 @@ export interface TooltipContentProps extends Record<string, unknown> {
 	children?: OctaneNode;
 }
 
+export interface BaseUiPositioningProps {
+	/** Forwarded to the Positioner; see the note at the top of this file. */
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	sideOffset?: number;
+	align?: 'start' | 'center' | 'end';
+	alignOffset?: number;
+	anchor?: unknown;
+	positionMethod?: 'absolute' | 'fixed';
+	collisionBoundary?: unknown;
+	collisionPadding?: unknown;
+	collisionAvoidance?: unknown;
+	arrowPadding?: number;
+	sticky?: boolean;
+	disableAnchorTracking?: boolean;
+}
+
 export function TooltipContent({
 	className,
 	sideOffset = 0,
+	align,
+	side,
+	alignOffset,
+	anchor,
+	positionMethod,
+	collisionBoundary,
+	collisionPadding,
+	collisionAvoidance,
+	arrowPadding,
+	sticky,
+	disableAnchorTracking,
 	children,
 	...props
-}: TooltipContentProps) {
+}: TooltipContentProps & BaseUiPositioningProps) {
 	return createElement(TooltipPrimitive.Portal, {
 		children: createElement(TooltipPrimitive.Positioner, {
+			side,
 			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			positionMethod,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			arrowPadding,
+			sticky,
+			disableAnchorTracking,
 			children: createElement(TooltipPrimitive.Popup, {
 				'data-slot': 'tooltip-content',
 				className: cn(