@octanejs/shadcn 0.0.5 → 0.0.7

package/src/bases/react-aria/ui/table.tsrx

@@ -0,0 +1,98 @@
+// OCTANE ADAPTATION: RAC's collection props are generic over the item type, and
+// its JSX signatures fix that parameter at `object`. The wrappers therefore
+// carry the same `T extends object` constraint upstream's collection types
+// assume, so a caller's item type flows through instead of widening.
+import {
+	Cell as CellPrimitive,
+	Column as ColumnPrimitive,
+	Row as RowPrimitive,
+	TableBody as TableBodyPrimitive,
+	TableFooter as TableFooterPrimitive,
+	TableHeader as TableHeaderPrimitive,
+	Table as TablePrimitive,
+	type CellProps,
+	type ColumnProps,
+	type RowProps,
+	type TableBodyProps,
+	type TableFooterProps,
+	type TableHeaderProps,
+	type TableProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Table({ className, ...props }: TableProps) {
+	return <div data-slot="table-container" className="relative w-full overflow-x-auto">
+		<TablePrimitive
+			data-slot="table"
+			className={cn('w-full caption-bottom text-sm', className)}
+			{...props}
+		/>
+	</div>;
+}
+
+export function TableHeader<T extends object>({ className, ...props }: TableHeaderProps<T>) {
+	return <TableHeaderPrimitive
+		data-slot="table-header"
+		className={cn('[&_tr]:border-b', className)}
+		{...props}
+	/>;
+}
+
+export function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>) {
+	return <TableBodyPrimitive
+		data-slot="table-body"
+		className={cn('data-empty:h-24 data-empty:text-center [&_tr:last-child]:border-0', className)}
+		{...props}
+	/>;
+}
+
+export function TableFooter<T extends object>({ className, ...props }: TableFooterProps<T>) {
+	return <TableFooterPrimitive
+		data-slot="table-footer"
+		className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+		{...props}
+	/>;
+}
+
+export function TableRow<T extends object>({ className, ...props }: RowProps<T>) {
+	return <RowPrimitive
+		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 data-selected:bg-muted',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function TableHead({ className, ...props }: ColumnProps) {
+	return <ColumnPrimitive
+		data-slot="table-head"
+		className={cn(
+			'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function TableCell({ className, ...props }: CellProps) {
+	return <CellPrimitive
+		data-slot="table-cell"
+		className={cn(
+			'p-2 align-middle whitespace-nowrap [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function TableCaption({ className, ...props }: HostProps<'figcaption'>) {
+	return <figcaption
+		data-slot="table-caption"
+		className={cn('mt-4 text-center text-sm text-muted-foreground', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/tabs.tsrx

@@ -0,0 +1,67 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+	TabList as TabListPrimitive,
+	TabPanel as TabPanelPrimitive,
+	Tab as TabPrimitive,
+	Tabs as TabsPrimitive,
+} from '@octanejs/aria/components';
+import type { TabPanelProps, TabProps, TabsProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export function Tabs({ className, ...props }: TabsProps) {
+	return <TabsPrimitive
+		data-slot="tabs"
+		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 }: Record<
+	string,
+	any
+> & VariantProps<typeof tabsListVariants>) {
+	return <TabListPrimitive
+		data-slot="tabs-list"
+		data-variant={variant}
+		className={cn(tabsListVariants({ variant }), className)}
+		{...props}
+	/>;
+}
+
+export function TabsTrigger({ className, ...props }: TabProps) {
+	return <TabPrimitive
+		data-slot="tabs-trigger"
+		className={cn(
+			'relative inline-flex h-[calc(100%-1px)] flex-1 cursor-default 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none 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-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent',
+			'data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected: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-selected:after:opacity-100',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function TabsContent({ className, ...props }: TabPanelProps) {
+	return <TabPanelPrimitive
+		data-slot="tabs-content"
+		className={cn('flex-1 text-sm outline-none', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/textarea.tsrx

@@ -0,0 +1,26 @@
+// React Aria base textarea — structure from upstream `bases/aria/ui/textarea.tsx`
+// (RAC TextArea, className through composeRenderProps). Class strings are the
+// package's shipped utilities-inlined flavor, matching the Radix base.
+//
+// OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event, not
+// a synthetic `onChange`; native `change` keeps its commit-on-blur meaning.
+import { composeRenderProps, TextArea as TextareaPrimitive } from '@octanejs/aria/components';
+import type { TextAreaProps as TextareaPrimitiveProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export interface TextareaProps extends TextareaPrimitiveProps {}
+
+export function Textarea({ className, ...props }: TextareaProps) @{
+	<TextareaPrimitive
+		data-slot="textarea"
+		className={composeRenderProps(
+			className,
+			(resolved: string | undefined) => 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',
+				resolved,
+			),
+		)}
+		{...props}
+	/>
+}

package/src/bases/react-aria/ui/toggle.tsrx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ToggleButton as TogglePrimitive, type ToggleButtonProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export const toggleVariants = cva(
+	'group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-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 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 data-selected:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-input bg-transparent hover:bg-muted',
+			},
+			size: {
+				default: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] 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 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export function Toggle({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ToggleButtonProps & VariantProps<typeof toggleVariants>) {
+	return <TogglePrimitive
+		data-slot="toggle"
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>;
+}

package/src/index.ts

@@ -1,263 +0,0 @@
-// @octanejs/shadcn — shadcn/ui (Radix base) for the octane renderer.
-//
-// Upstream pin: shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544 (main,
-// 2026-07-24) + CLI shadcn@4.14.1. Components are authored in `.tsrx` so the
-// octane compiler owns templates and hook slots; the cva variant maps, class
-// strings, and data-slot attributes are preserved byte-for-byte from the
-// pinned upstream sources (the public styling contract). See
-// docs/shadcn-port-plan.md.
-export { cn } from './lib/utils';
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion.tsrx';
-export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants } from './ui/alert.tsrx';
-export {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogMedia,
-	AlertDialogOverlay,
-	AlertDialogPortal,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from './ui/alert-dialog.tsrx';
-export { AspectRatio } from './ui/aspect-ratio.tsrx';
-export {
-	Avatar,
-	AvatarImage,
-	AvatarFallback,
-	AvatarBadge,
-	AvatarGroup,
-	AvatarGroupCount,
-} from './ui/avatar.tsrx';
-export { Badge, badgeVariants, type BadgeProps } from './ui/badge.tsrx';
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-} from './ui/breadcrumb.tsrx';
-export { Button, buttonVariants, type ButtonProps } from './ui/button.tsrx';
-export { Checkbox } from './ui/checkbox.tsrx';
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible.tsrx';
-export {
-	ContextMenu,
-	ContextMenuTrigger,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuCheckboxItem,
-	ContextMenuRadioItem,
-	ContextMenuLabel,
-	ContextMenuSeparator,
-	ContextMenuShortcut,
-	ContextMenuGroup,
-	ContextMenuPortal,
-	ContextMenuSub,
-	ContextMenuSubContent,
-	ContextMenuSubTrigger,
-	ContextMenuRadioGroup,
-} from './ui/context-menu.tsrx';
-export {
-	Dialog,
-	DialogClose,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogOverlay,
-	DialogPortal,
-	DialogTitle,
-	DialogTrigger,
-} from './ui/dialog.tsrx';
-export {
-	DropdownMenu,
-	DropdownMenuPortal,
-	DropdownMenuTrigger,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuLabel,
-	DropdownMenuItem,
-	DropdownMenuCheckboxItem,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubTrigger,
-	DropdownMenuSubContent,
-} from './ui/dropdown-menu.tsrx';
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardAction,
-	CardDescription,
-	CardContent,
-} from './ui/card.tsrx';
-export {
-	Empty,
-	EmptyHeader,
-	EmptyTitle,
-	EmptyDescription,
-	EmptyContent,
-	EmptyMedia,
-	emptyMediaVariants,
-} from './ui/empty.tsrx';
-export {
-	Field,
-	FieldContent,
-	FieldDescription,
-	FieldError,
-	FieldGroup,
-	FieldLabel,
-	FieldLegend,
-	FieldSeparator,
-	FieldSet,
-	FieldTitle,
-} from './ui/field.tsrx';
-export { HoverCard, HoverCardTrigger, HoverCardContent } from './ui/hover-card.tsrx';
-export { useIsMobile } from './hooks/use-mobile';
-export { Input, type InputProps } from './ui/input.tsrx';
-export {
-	Item,
-	ItemMedia,
-	ItemContent,
-	ItemActions,
-	ItemGroup,
-	ItemSeparator,
-	ItemTitle,
-	ItemDescription,
-	ItemHeader,
-	ItemFooter,
-	itemVariants,
-	itemMediaVariants,
-} from './ui/item.tsrx';
-export { Kbd, KbdGroup } from './ui/kbd.tsrx';
-export { Label } from './ui/label.tsrx';
-export {
-	Menubar,
-	MenubarPortal,
-	MenubarMenu,
-	MenubarTrigger,
-	MenubarContent,
-	MenubarGroup,
-	MenubarSeparator,
-	MenubarLabel,
-	MenubarItem,
-	MenubarShortcut,
-	MenubarCheckboxItem,
-	MenubarRadioGroup,
-	MenubarRadioItem,
-	MenubarSub,
-	MenubarSubTrigger,
-	MenubarSubContent,
-} from './ui/menubar.tsrx';
-export { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from './ui/native-select.tsrx';
-export {
-	NavigationMenu,
-	NavigationMenuList,
-	NavigationMenuItem,
-	NavigationMenuContent,
-	NavigationMenuTrigger,
-	NavigationMenuLink,
-	NavigationMenuIndicator,
-	NavigationMenuViewport,
-	navigationMenuTriggerStyle,
-} from './ui/navigation-menu.tsrx';
-export {
-	Pagination,
-	PaginationContent,
-	PaginationEllipsis,
-	PaginationItem,
-	PaginationLink,
-	PaginationNext,
-	PaginationPrevious,
-} from './ui/pagination.tsrx';
-export {
-	Popover,
-	PopoverAnchor,
-	PopoverContent,
-	PopoverDescription,
-	PopoverHeader,
-	PopoverTitle,
-	PopoverTrigger,
-} from './ui/popover.tsrx';
-export { Progress } from './ui/progress.tsrx';
-export { RadioGroup, RadioGroupItem } from './ui/radio-group.tsrx';
-export { ScrollArea, ScrollBar } from './ui/scroll-area.tsrx';
-export {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectScrollDownButton,
-	SelectScrollUpButton,
-	SelectSeparator,
-	SelectTrigger,
-	SelectValue,
-} from './ui/select.tsrx';
-export { Separator } from './ui/separator.tsrx';
-export {
-	Sheet,
-	SheetTrigger,
-	SheetClose,
-	SheetContent,
-	SheetHeader,
-	SheetFooter,
-	SheetTitle,
-	SheetDescription,
-} from './ui/sheet.tsrx';
-export {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarGroup,
-	SidebarGroupAction,
-	SidebarGroupContent,
-	SidebarGroupLabel,
-	SidebarHeader,
-	SidebarInput,
-	SidebarInset,
-	SidebarMenu,
-	SidebarMenuAction,
-	SidebarMenuBadge,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarMenuSkeleton,
-	SidebarMenuSub,
-	SidebarMenuSubButton,
-	SidebarMenuSubItem,
-	SidebarProvider,
-	SidebarRail,
-	SidebarSeparator,
-	SidebarTrigger,
-	useSidebar,
-} from './ui/sidebar.tsrx';
-export { Slider } from './ui/slider.tsrx';
-export { Skeleton } from './ui/skeleton.tsrx';
-export { Toaster } from './ui/sonner.tsrx';
-export { Spinner } from './ui/spinner.tsrx';
-export { Switch } from './ui/switch.tsrx';
-export {
-	Table,
-	TableHeader,
-	TableBody,
-	TableFooter,
-	TableHead,
-	TableRow,
-	TableCell,
-	TableCaption,
-} from './ui/table.tsrx';
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from './ui/tabs.tsrx';
-export { Textarea } from './ui/textarea.tsrx';
-export { Toggle, toggleVariants } from './ui/toggle.tsrx';
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip.tsrx';
-export { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.tsrx';