@octanejs/shadcn 0.0.51 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -154,25 +154,25 @@
     "./theme.css": "./src/styles/theme.css"
   },
   "dependencies": {
-    "@octanejs/aria": "0.0.58",
-    "@octanejs/base-ui": "0.1.62",
-    "@octanejs/lucide": "0.1.55",
-    "@octanejs/radix": "0.1.62",
-    "@octanejs/sonner": "0.1.56",
+    "@octanejs/aria": "0.0.60",
+    "@octanejs/base-ui": "0.1.64",
+    "@octanejs/lucide": "0.1.57",
+    "@octanejs/radix": "0.1.64",
+    "@octanejs/sonner": "0.1.58",
     "class-variance-authority": "0.7.1",
     "cn": "0.2.6"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
-    "@tsrx/react": "^0.3.7",
+    "@tsrx/react": "^0.4.5",
     "@types/react": "^19.2.17",
     "clsx": "^2.1.1",
     "esbuild": "^0.28.1",
     "lucide-react": "1.24.0",
-    "octane": "0.10.0",
+    "octane": "0.11.0",
     "radix-ui": "^1.6.4",
     "react": "19.2.7",
     "react-dom": "19.2.7",

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

@@ -66,6 +66,8 @@ export function AccordionContent({ className, children, ...props }: Record<strin
 				'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>
+		>
+			{children}
+		</div>
 	</AccordionPrimitive.Panel>
 }

package/src/bases/base-ui/ui/alert-dialog.tsrx

@@ -44,10 +44,11 @@ export function AlertDialogOverlay({ className, ...props }: Record<string, any>)
 	/>
 }
 
-export function AlertDialogContent({ className, size = 'default', ...props }: Record<
-	string,
-	any
->) @{
+export function AlertDialogContent({
+	className,
+	size = 'default',
+	...props
+}: Record<string, any>) @{
 	<AlertDialogPortal>
 		<AlertDialogOverlay key="overlay" />
 		<AlertDialogPrimitive.Popup
@@ -89,7 +90,7 @@ 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',
+			"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}

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

@@ -14,12 +14,13 @@ import { cn } from 'cn';
 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',
+	"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',
+				destructive:
+					'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
 			},
 		},
 		defaultVariants: {

package/src/bases/base-ui/ui/aspect-ratio.tsrx

@@ -15,9 +15,11 @@ export interface AspectRatioProps extends DivProps {
 export function AspectRatio({ ratio, className, ...props }: AspectRatioProps) @{
 	<div
 		data-slot="aspect-ratio"
-		style={{
-			'--ratio': ratio,
-		} as Record<string, string | number>}
+		style={
+			{
+				'--ratio': ratio,
+			} as Record<string, string | number>
+		}
 		className={cn('relative aspect-(--ratio)', className)}
 		{...props}
 	/>

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

@@ -28,7 +28,8 @@ export const badgeVariants = cva(
 			variant: {
 				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
 				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-				destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				destructive:
+					'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
 				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
 				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
 				link: 'text-primary underline-offset-4 hover:underline',

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

@@ -55,10 +55,10 @@ export function BreadcrumbItem({ className, ...props }: Props) @{
 
 export interface BreadcrumbLinkProps extends Props {
 	/**
- * NOT SUPPORTED in this base — see the header. Declared as `never` so markup carrying it over
- * from the radix base fails to compile instead of silently rendering the anchor AND the child,
- * which nests one link inside another.
- */
+	 * NOT SUPPORTED in this base — see the header. Declared as `never` so markup carrying it over
+	 * from the radix base fails to compile instead of silently rendering the anchor AND the child,
+	 * which nests one link inside another.
+	 */
 	asChild?: never;
 }
 

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

@@ -18,25 +18,32 @@ import { Button as ButtonPrimitive } from '@octanejs/base-ui/button';
 import { cn } from 'cn';
 
 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',
+	"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',
+				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',
+				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-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',
 			},
 		},

package/src/bases/base-ui/ui/context-menu.tsrx

@@ -31,22 +31,21 @@ import { cn } from 'cn';
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 
 /** Props routed to the Positioner rather than the popup. */
-export type BaseUiPositioningProps =
-	Pick<
-		ContextMenuPrimitive.Positioner.Props,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'anchor'
-		| 'positionMethod'
-		| 'collisionBoundary'
-		| 'collisionPadding'
-		| 'collisionAvoidance'
-		| 'arrowPadding'
-		| 'sticky'
-		| 'disableAnchorTracking'
-	>;
+export type BaseUiPositioningProps = Pick<
+	ContextMenuPrimitive.Positioner.Props,
+	| 'side'
+	| 'sideOffset'
+	| 'align'
+	| 'alignOffset'
+	| 'anchor'
+	| 'positionMethod'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'collisionAvoidance'
+	| 'arrowPadding'
+	| 'sticky'
+	| 'disableAnchorTracking'
+>;
 
 export function ContextMenu(props: Record<string, unknown>) @{
 	<ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
@@ -119,7 +118,12 @@ export function ContextMenuContent({
 	</ContextMenuPrimitive.Portal>
 }
 
-export function ContextMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+export function ContextMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -128,7 +132,7 @@ export function ContextMenuItem({ className, inset, variant = 'default', ...prop
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive',
+			"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
 			className,
 		)}
 		{...props}
@@ -142,7 +146,7 @@ export function ContextMenuSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="context-menu-sub-trigger"
 		data-inset={inset}
 		className={cn(
-			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}
@@ -195,17 +199,19 @@ export function ContextMenuSubContent({
 	</ContextMenuPrimitive.Portal>
 }
 
-export function ContextMenuCheckboxItem(props: Props & {
-	checked?: boolean;
-	inset?: boolean;
-}) @{
+export function ContextMenuCheckboxItem(
+	props: Props & {
+		checked?: boolean;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<ContextMenuPrimitive.CheckboxItem
 		data-slot="context-menu-checkbox-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		checked={checked}
@@ -223,17 +229,19 @@ export function ContextMenuCheckboxItem(props: Props & {
 	</ContextMenuPrimitive.CheckboxItem>
 }
 
-export function ContextMenuRadioItem(props: Omit<
-	ContextMenuPrimitive.RadioItem.Props,
-	'className'
-> & { className?: string; inset?: boolean }) @{
+export function ContextMenuRadioItem(
+	props: Omit<ContextMenuPrimitive.RadioItem.Props, 'className'> & {
+		className?: string;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<ContextMenuPrimitive.RadioItem
 		data-slot="context-menu-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

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

@@ -72,10 +72,12 @@ export function DialogContent({
 				<DialogPrimitive.Close
 					data-slot="dialog-close"
 					className="absolute top-2 right-2"
-					render={<Button variant="ghost" size="icon-sm">
-						<XIcon />
-						<span className="sr-only">Close</span>
-					</Button>}
+					render={
+						<Button variant="ghost" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					}
 				/>
 			}
 		</DialogPrimitive.Popup>

package/src/bases/base-ui/ui/dropdown-menu.tsrx

@@ -58,22 +58,21 @@ export function DropdownMenuTrigger(props: Record<string, unknown>) @{
 }
 
 /** Props routed to the Positioner rather than the popup. */
-export type BaseUiPositioningProps =
-	Pick<
-		MenuPrimitive.Positioner.Props,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'anchor'
-		| 'positionMethod'
-		| 'collisionBoundary'
-		| 'collisionPadding'
-		| 'collisionAvoidance'
-		| 'arrowPadding'
-		| 'sticky'
-		| 'disableAnchorTracking'
-	>;
+export type BaseUiPositioningProps = Pick<
+	MenuPrimitive.Positioner.Props,
+	| 'side'
+	| 'sideOffset'
+	| 'align'
+	| 'alignOffset'
+	| 'anchor'
+	| 'positionMethod'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'collisionAvoidance'
+	| 'arrowPadding'
+	| 'sticky'
+	| 'disableAnchorTracking'
+>;
 
 export interface DropdownMenuContentProps extends Props, BaseUiPositioningProps {}
 
@@ -124,7 +123,12 @@ export function DropdownMenuGroup(props: Record<string, unknown>) @{
 	<MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 }
 
-export function DropdownMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+export function DropdownMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -133,24 +137,26 @@ export function DropdownMenuItem({ className, inset, variant = 'default', ...pro
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',
+			"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
 			className,
 		)}
 		{...props}
 	/>
 }
 
-export function DropdownMenuCheckboxItem(props: Props & {
-	checked?: boolean;
-	inset?: boolean;
-}) @{
+export function DropdownMenuCheckboxItem(
+	props: Props & {
+		checked?: boolean;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<MenuPrimitive.CheckboxItem
 		data-slot="dropdown-menu-checkbox-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		checked={checked}
@@ -172,17 +178,19 @@ export function DropdownMenuRadioGroup(props: Record<string, unknown>) @{
 	<MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
 }
 
-export function DropdownMenuRadioItem(props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
-	className?: string;
-	inset?: boolean;
-}) @{
+export function DropdownMenuRadioItem(
+	props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
+		className?: string;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<MenuPrimitive.RadioItem
 		data-slot="dropdown-menu-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}
@@ -243,7 +251,7 @@ export function DropdownMenuSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="dropdown-menu-sub-trigger"
 		data-inset={inset}
 		className={cn(
-			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

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

@@ -33,7 +33,7 @@ export const emptyMediaVariants = cva(
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: 'flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*=\'size-\'])]:size-4',
+				icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
 			},
 		},
 		defaultVariants: {

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

@@ -36,7 +36,11 @@ export function FieldSet({ className, ...props }: Props) @{
 	/>
 }
 
-export function FieldLegend({ className, variant = 'legend', ...props }: Props & {
+export function FieldLegend({
+	className,
+	variant = 'legend',
+	...props
+}: Props & {
 	variant?: 'legend' | 'label';
 }) @{
 	<legend
@@ -67,8 +71,10 @@ export const fieldVariants = cva(
 		variants: {
 			orientation: {
 				vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
-				horizontal: 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-				responsive: 'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				horizontal:
+					'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				responsive:
+					'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			},
 		},
 		defaultVariants: {
@@ -77,7 +83,11 @@ export const fieldVariants = cva(
 	},
 );
 
-export function Field({ className, orientation = 'vertical', ...props }: Props & {
+export function Field({
+	className,
+	orientation = 'vertical',
+	...props
+}: Props & {
 	orientation?: VariantProps<typeof fieldVariants>['orientation'];
 }) @{
 	<div
@@ -169,19 +179,15 @@ export function FieldError(props: Props & { errors?: Array<{ message?: string }
 		const errors = props.errors;
 		if (!errors?.length) return null;
 
-		const uniqueErrors = [
-			...new Map(errors.map((error) => [error?.message, error])).values(),
-		];
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 
 		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
 
 		return createElement(
 			'ul',
 			{ className: 'ml-4 flex list-disc flex-col gap-1' },
-			uniqueErrors.map(
-				(error, index) => error?.message
-					? createElement('li', { key: index }, error.message)
-					: null,
+			uniqueErrors.map((error, index) =>
+				error?.message ? createElement('li', { key: index }, error.message) : null,
 			),
 		);
 	});

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

@@ -29,22 +29,21 @@ import { PreviewCard as PreviewCardPrimitive } from '@octanejs/base-ui/preview-c
 import { cn } from 'cn';
 
 /** Props routed to the Positioner rather than the popup. */
-export type BaseUiPositioningProps =
-	Pick<
-		PreviewCardPrimitive.Positioner.Props,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'anchor'
-		| 'positionMethod'
-		| 'collisionBoundary'
-		| 'collisionPadding'
-		| 'collisionAvoidance'
-		| 'arrowPadding'
-		| 'sticky'
-		| 'disableAnchorTracking'
-	>;
+export type BaseUiPositioningProps = Pick<
+	PreviewCardPrimitive.Positioner.Props,
+	| 'side'
+	| 'sideOffset'
+	| 'align'
+	| 'alignOffset'
+	| 'anchor'
+	| 'positionMethod'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'collisionAvoidance'
+	| 'arrowPadding'
+	| 'sticky'
+	| 'disableAnchorTracking'
+>;
 
 export function HoverCard(props: Record<string, unknown>) @{
 	<PreviewCardPrimitive.Root data-slot="hover-card" {...props} />

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

@@ -85,8 +85,9 @@ export const itemMediaVariants = cva(
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: '[&_svg:not([class*=\'size-\'])]:size-4',
-				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image:
+					'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
 			},
 		},
 		defaultVariants: {

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

@@ -11,7 +11,7 @@ export function Kbd({ className, ...props }: HostProps<'kbd'>) @{
 	<kbd
 		data-slot="kbd"
 		className={cn(
-			'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*=\'size-\'])]:size-3',
+			"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
 			className,
 		)}
 		{...props}