@octanejs/shadcn 0.0.52 → 0.0.53

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

@@ -8,19 +8,23 @@ import { cn } from 'cn';
 const Select = SelectPrimitive.Root;
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
-	return <SelectPrimitive.Group
-		data-slot="select-group"
-		className={cn('scroll-my-1 p-1', className)}
-		{...props}
-	/>;
+	return (
+		<SelectPrimitive.Group
+			data-slot="select-group"
+			className={cn('scroll-my-1 p-1', className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
-	return <SelectPrimitive.Value
-		data-slot="select-value"
-		className={cn('flex flex-1 text-left', className)}
-		{...props}
-	/>;
+	return (
+		<SelectPrimitive.Value
+			data-slot="select-value"
+			className={cn('flex flex-1 text-left', className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectTrigger({
@@ -31,20 +35,22 @@ function SelectTrigger({
 }: SelectPrimitive.Trigger.Props & {
 	size?: 'sm' | 'default';
 }) {
-	return <SelectPrimitive.Trigger
-		data-slot="select-trigger"
-		data-size={size}
-		className={cn(
-			'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=\'size-\'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<SelectPrimitive.Icon
-			render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
-		/>
-	</SelectPrimitive.Trigger>;
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon
+				render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
+			/>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
@@ -56,102 +62,128 @@ function SelectContent({
 	alignOffset = 0,
 	alignItemWithTrigger = true,
 	...props
-}: SelectPrimitive.Popup.Props & Pick<
-	SelectPrimitive.Positioner.Props,
-	'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
->) {
-	return <SelectPrimitive.Portal>
-		<SelectPrimitive.Positioner
-			side={side}
-			sideOffset={sideOffset}
-			align={align}
-			alignOffset={alignOffset}
-			alignItemWithTrigger={alignItemWithTrigger}
-			className="isolate z-50"
-		>
-			<SelectPrimitive.Popup
-				data-slot="select-content"
-				data-align-trigger={alignItemWithTrigger}
-				className={cn(
-					'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
-					className,
-				)}
-				{...props}
+}: SelectPrimitive.Popup.Props &
+	Pick<
+		SelectPrimitive.Positioner.Props,
+		'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
+	>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				alignItemWithTrigger={alignItemWithTrigger}
+				className="isolate z-50"
 			>
-				<SelectScrollUpButton />
-				<SelectPrimitive.List>{children}</SelectPrimitive.List>
-				<SelectScrollDownButton />
-			</SelectPrimitive.Popup>
-		</SelectPrimitive.Positioner>
-	</SelectPrimitive.Portal>;
+				<SelectPrimitive.Popup
+					data-slot="select-content"
+					data-align-trigger={alignItemWithTrigger}
+					className={cn(
+						'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+						className,
+					)}
+					{...props}
+				>
+					<SelectScrollUpButton />
+					<SelectPrimitive.List>{children}</SelectPrimitive.List>
+					<SelectScrollDownButton />
+				</SelectPrimitive.Popup>
+			</SelectPrimitive.Positioner>
+		</SelectPrimitive.Portal>
+	);
 }
 
 function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
-	return <SelectPrimitive.GroupLabel
-		data-slot="select-label"
-		className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
-		{...props}
-	/>;
+	return (
+		<SelectPrimitive.GroupLabel
+			data-slot="select-label"
+			className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
-	return <SelectPrimitive.Item
-		data-slot="select-item"
-		className={cn(
-			'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
-			className,
-		)}
-		{...props}
-	>
-		<SelectPrimitive.ItemText
-			className="flex flex-1 gap-2 shrink-0 whitespace-nowrap"
-		>{children}</SelectPrimitive.ItemText>
-		<SelectPrimitive.ItemIndicator
-			render={<span
-				className="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
-			/>}
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
 		>
-			<CheckIcon className="pointer-events-none" />
-		</SelectPrimitive.ItemIndicator>
-	</SelectPrimitive.Item>;
+			<SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+				{children}
+			</SelectPrimitive.ItemText>
+			<SelectPrimitive.ItemIndicator
+				render={
+					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+				}
+			>
+				<CheckIcon className="pointer-events-none" />
+			</SelectPrimitive.ItemIndicator>
+		</SelectPrimitive.Item>
+	);
 }
 
 function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
-	return <SelectPrimitive.Separator
-		data-slot="select-separator"
-		className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
-		{...props}
-	/>;
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
+			{...props}
+		/>
+	);
 }
 
-function SelectScrollUpButton({ className, ...props }: React.ComponentProps<
-	typeof SelectPrimitive.ScrollUpArrow
->) {
-	return <SelectPrimitive.ScrollUpArrow
-		data-slot="select-scroll-up-button"
-		className={cn(
-			'bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=\'size-\'])]:size-4 top-0 w-full',
-			className,
-		)}
-		{...props}
-	>
-		<ChevronUpIcon />
-	</SelectPrimitive.ScrollUpArrow>;
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+	return (
+		<SelectPrimitive.ScrollUpArrow
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUpIcon />
+		</SelectPrimitive.ScrollUpArrow>
+	);
 }
 
-function SelectScrollDownButton({ className, ...props }: React.ComponentProps<
-	typeof SelectPrimitive.ScrollDownArrow
->) {
-	return <SelectPrimitive.ScrollDownArrow
-		data-slot="select-scroll-down-button"
-		className={cn(
-			'bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=\'size-\'])]:size-4 bottom-0 w-full',
-			className,
-		)}
-		{...props}
-	>
-		<ChevronDownIcon />
-	</SelectPrimitive.ScrollDownArrow>;
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+	return (
+		<SelectPrimitive.ScrollDownArrow
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDownIcon />
+		</SelectPrimitive.ScrollDownArrow>
+	);
 }
 
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

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

@@ -82,10 +82,12 @@ export function SheetContent(props: SheetContentProps) @{
 			@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>}
+					render={
+						<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					}
 				/>
 			}
 		</SheetPrimitive.Popup>

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

@@ -74,12 +74,14 @@ export function useSidebar(): SidebarContextProps {
 	return context;
 }
 
-export function SidebarProvider(props: Props & {
-	defaultOpen?: boolean;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	style?: Record<string, string>;
-}) {
+export function SidebarProvider(
+	props: Props & {
+		defaultOpen?: boolean;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		style?: Record<string, string>;
+	},
+) {
 	const {
 		defaultOpen = true,
 		open: openProp,
@@ -97,8 +99,7 @@ export function SidebarProvider(props: Props & {
 	const [_open, _setOpen] = useState(defaultOpen);
 	const open = openProp ?? _open;
 	const setOpen = useCallback((value: boolean | ((value: boolean) => boolean)) => {
-		const openState =
-			typeof value === 'function' ? value(open) : value;
+		const openState = typeof value === 'function' ? value(open) : value;
 		if (setOpenProp) {
 			setOpenProp(openState);
 		} else {
@@ -106,8 +107,7 @@ export function SidebarProvider(props: Props & {
 		}
 
 		// This sets the cookie to keep the sidebar state.
-		document.cookie =
-			`${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 	});
 
 	// Helper to toggle the sidebar.
@@ -132,17 +132,15 @@ export function SidebarProvider(props: Props & {
 	// This makes it easier to style the sidebar with Tailwind classes.
 	const state = open ? 'expanded' : 'collapsed';
 
-	const contextValue = useMemo<SidebarContextProps>(
-		() => ({
-			state,
-			open,
-			setOpen,
-			isMobile,
-			openMobile,
-			setOpenMobile,
-			toggleSidebar,
-		}),
-	);
+	const contextValue = useMemo<SidebarContextProps>(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar,
+	}));
 
 	return createElement(
 		SidebarContext,
@@ -167,12 +165,14 @@ export function SidebarProvider(props: Props & {
 	);
 }
 
-export function Sidebar(props: Props & {
-	side?: 'left' | 'right';
-	variant?: 'sidebar' | 'floating' | 'inset';
-	collapsible?: 'offcanvas' | 'icon' | 'none';
-	dir?: string;
-}) {
+export function Sidebar(
+	props: Props & {
+		side?: 'left' | 'right';
+		variant?: 'sidebar' | 'floating' | 'inset';
+		collapsible?: 'offcanvas' | 'icon' | 'none';
+		dir?: string;
+	},
+) {
 	const {
 		side = 'left',
 		variant = 'sidebar',
@@ -273,7 +273,8 @@ export function Sidebar(props: Props & {
 				{
 					'data-sidebar': 'sidebar',
 					'data-slot': 'sidebar-inner',
-					className: 'flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border',
+					className:
+						'flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border',
 				},
 				props.children,
 			),
@@ -281,7 +282,11 @@ export function Sidebar(props: Props & {
 	);
 }
 
-export function SidebarTrigger({ className, onClick, ...props }: Props & {
+export function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: Props & {
 	onClick?: (event: MouseEvent) => void;
 }) @{
 	const { toggleSidebar } = useSidebar();
@@ -394,7 +399,10 @@ export function SidebarGroup({ className, ...props }: Props) @{
 	/>
 }
 
-export function SidebarGroupLabel({ className, ...props }: Props & {
+export function SidebarGroupLabel({
+	className,
+	...props
+}: Props & {
 	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
 	asChild?: never;
 }) @{
@@ -409,7 +417,10 @@ export function SidebarGroupLabel({ className, ...props }: Props & {
 	/>
 }
 
-export function SidebarGroupAction({ className, ...props }: Props & {
+export function SidebarGroupAction({
+	className,
+	...props
+}: Props & {
 	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
 	asChild?: never;
 }) @{
@@ -461,7 +472,8 @@ export const sidebarMenuButtonVariants = cva(
 		variants: {
 			variant: {
 				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-				outline: 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+				outline:
+					'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
 			},
 			size: {
 				default: 'h-8 text-sm',
@@ -476,14 +488,16 @@ export const sidebarMenuButtonVariants = cva(
 	},
 );
 
-export function SidebarMenuButton(props: Props & {
-	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
-	asChild?: never;
-	isActive?: boolean;
-	tooltip?: string | Record<string, unknown>;
-	variant?: VariantProps<typeof sidebarMenuButtonVariants>['variant'];
-	size?: VariantProps<typeof sidebarMenuButtonVariants>['size'];
-}) {
+export function SidebarMenuButton(
+	props: Props & {
+		/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
+		asChild?: never;
+		isActive?: boolean;
+		tooltip?: string | Record<string, unknown>;
+		variant?: VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+		size?: VariantProps<typeof sidebarMenuButtonVariants>['size'];
+	},
+) {
 	const {
 		isActive = false,
 		variant = 'default',
@@ -512,8 +526,7 @@ export function SidebarMenuButton(props: Props & {
 		return button;
 	}
 
-	const tooltipProps =
-		typeof tooltip === 'string' ? { children: tooltip } : tooltip;
+	const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
 
 	return createElement(
 		Tooltip,
@@ -529,7 +542,11 @@ export function SidebarMenuButton(props: Props & {
 	);
 }
 
-export function SidebarMenuAction({ className, showOnHover = false, ...props }: Props & {
+export function SidebarMenuAction({
+	className,
+	showOnHover = false,
+	...props
+}: Props & {
 	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
 	asChild?: never;
 	showOnHover?: boolean;
@@ -559,7 +576,11 @@ export function SidebarMenuBadge({ className, ...props }: Props) @{
 	/>
 }
 
-export function SidebarMenuSkeleton({ className, showIcon = false, ...props }: Props & {
+export function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: Props & {
 	showIcon?: boolean;
 }) @{
 	// Random width between 50 to 90%.

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

@@ -77,9 +77,7 @@ export function Slider<Value extends number | readonly number[]>({
 		thumbAlignment="edge"
 		{...props}
 	>
-		<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"
-		>
+		<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">
 			<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"

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

@@ -62,7 +62,7 @@ export function TabsTrigger({ className, ...props }: StyledProps<TabsPrimitive.T
 	<TabsPrimitive.Tab
 		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-[orientation=vertical]/tabs:w-full group-data-[orientation=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 aria-disabled:pointer-events-none aria-disabled:opacity-50 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',
+			"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-[orientation=vertical]/tabs:w-full group-data-[orientation=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 aria-disabled:pointer-events-none aria-disabled:opacity-50 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-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',

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

@@ -77,9 +77,9 @@ export function ToggleGroup({
 		)}
 		{...props}
 	>
-		<ToggleGroupContext
-			value={{ variant, size, spacing, orientation }}
-		>{children}</ToggleGroupContext>
+		<ToggleGroupContext value={{ variant, size, spacing, orientation }}>
+			{children}
+		</ToggleGroupContext>
 	</ToggleGroupPrimitive>
 }
 

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

@@ -17,12 +17,13 @@ import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
 import { cn } from 'cn';
 
 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',
+	"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',
+				outline:
+					'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
 			},
 			size: {
 				default: 'h-9 min-w-9 px-2',

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

@@ -40,22 +40,21 @@ export interface TooltipContentProps extends Record<string, unknown> {
 }
 
 /** Props routed to the Positioner rather than the popup. */
-export type BaseUiPositioningProps =
-	Pick<
-		TooltipPrimitive.Positioner.Props,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'anchor'
-		| 'positionMethod'
-		| 'collisionBoundary'
-		| 'collisionPadding'
-		| 'collisionAvoidance'
-		| 'arrowPadding'
-		| 'sticky'
-		| 'disableAnchorTracking'
-	>;
+export type BaseUiPositioningProps = Pick<
+	TooltipPrimitive.Positioner.Props,
+	| 'side'
+	| 'sideOffset'
+	| 'align'
+	| 'alignOffset'
+	| 'anchor'
+	| 'positionMethod'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'collisionAvoidance'
+	| 'arrowPadding'
+	| 'sticky'
+	| 'disableAnchorTracking'
+>;
 
 export function TooltipContent({
 	className,
@@ -104,7 +103,8 @@ export function TooltipContent({
 					createElement(Fragment, { key: 'content', 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',
+						className:
+							'z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground',
 					}),
 				],
 			}),

package/src/bases/radix/ui/accordion.tsrx

@@ -67,6 +67,8 @@ export function AccordionContent(props: Props) @{
 				'h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
 				className,
 			)}
-		>{props.children}</div>
+		>
+			{props.children}
+		</div>
 	</AccordionPrimitive.Content>
 }

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

@@ -88,7 +88,7 @@ export function AlertDialogMedia({ className, ...props }: Props) @{
 	<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}