@octanejs/shadcn 0.0.52 → 0.0.53

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

@@ -34,22 +34,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<
-		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 function Menubar({ className, ...props }: Props) @{
 	<MenubarPrimitive
@@ -129,7 +128,12 @@ export function MenubarContent({
 	</MenuPrimitive.Portal>
 }
 
-export function MenubarItem({ className, inset, variant = 'default', ...props }: Props & {
+export function MenubarItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -138,17 +142,19 @@ export function MenubarItem({ className, inset, variant = 'default', ...props }:
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/menubar-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/menubar-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 MenubarCheckboxItem(props: Props & {
-	checked?: boolean;
-	inset?: boolean;
-}) @{
+export function MenubarCheckboxItem(
+	props: Props & {
+		checked?: boolean;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<MenuPrimitive.CheckboxItem
@@ -161,9 +167,7 @@ export function MenubarCheckboxItem(props: Props & {
 		checked={checked}
 		{...rest}
 	>
-		<span
-			className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
-		>
+		<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
 			<MenuPrimitive.CheckboxItemIndicator>
 				<CheckIcon />
 			</MenuPrimitive.CheckboxItemIndicator>
@@ -172,24 +176,24 @@ export function MenubarCheckboxItem(props: Props & {
 	</MenuPrimitive.CheckboxItem>
 }
 
-export function MenubarRadioItem(props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
-	className?: string;
-	inset?: boolean;
-}) @{
+export function MenubarRadioItem(
+	props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
+		className?: string;
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<MenuPrimitive.RadioItem
 		data-slot="menubar-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 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-1.5 pl-7 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}
 	>
-		<span
-			className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
-		>
+		<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
 			<MenuPrimitive.RadioItemIndicator>
 				<CheckIcon />
 			</MenuPrimitive.RadioItemIndicator>
@@ -239,7 +243,7 @@ export function MenubarSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="menubar-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-none 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:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none 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:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

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

@@ -12,10 +12,9 @@ import { ChevronDownIcon } from '@octanejs/lucide';
 import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
-export type NativeSelectProps =
-	Omit<HostProps<'select'>, 'size'> & {
-		size?: 'sm' | 'default';
-	};
+export type NativeSelectProps = Omit<HostProps<'select'>, 'size'> & {
+	size?: 'sm' | 'default';
+};
 
 export function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) @{
 	<div

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

@@ -12,37 +12,45 @@ function NavigationMenu({
 	children,
 	...props
 }: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
-	return <NavigationMenuPrimitive.Root
-		data-slot="navigation-menu"
-		className={cn(
-			'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<NavigationMenuPositioner align={align} />
-	</NavigationMenuPrimitive.Root>;
+	return (
+		<NavigationMenuPrimitive.Root
+			data-slot="navigation-menu"
+			className={cn(
+				'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<NavigationMenuPositioner align={align} />
+		</NavigationMenuPrimitive.Root>
+	);
 }
 
-function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<
-	typeof NavigationMenuPrimitive.List
->) {
-	return <NavigationMenuPrimitive.List
-		data-slot="navigation-menu-list"
-		className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}
-		{...props}
-	/>;
+function NavigationMenuList({
+	className,
+	...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+	return (
+		<NavigationMenuPrimitive.List
+			data-slot="navigation-menu-list"
+			className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}
+			{...props}
+		/>
+	);
 }
 
-function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<
-	typeof NavigationMenuPrimitive.Item
->) {
-	return <NavigationMenuPrimitive.Item
-		data-slot="navigation-menu-item"
-		className={cn('relative', className)}
-		{...props}
-	/>;
+function NavigationMenuItem({
+	className,
+	...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+	return (
+		<NavigationMenuPrimitive.Item
+			data-slot="navigation-menu-item"
+			className={cn('relative', className)}
+			{...props}
+		/>
+	);
 }
 
 const navigationMenuTriggerStyle = cva(
@@ -54,29 +62,32 @@ function NavigationMenuTrigger({
 	children,
 	...props
 }: NavigationMenuPrimitive.Trigger.Props) {
-	return <NavigationMenuPrimitive.Trigger
-		data-slot="navigation-menu-trigger"
-		className={cn(navigationMenuTriggerStyle(), 'group', className)}
-		{...props}
-	>
-		{children}
-		{' '}
-		<ChevronDownIcon
-			className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-			aria-hidden="true"
-		/>
-	</NavigationMenuPrimitive.Trigger>;
+	return (
+		<NavigationMenuPrimitive.Trigger
+			data-slot="navigation-menu-trigger"
+			className={cn(navigationMenuTriggerStyle(), 'group', className)}
+			{...props}
+		>
+			{children}{' '}
+			<ChevronDownIcon
+				className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+				aria-hidden="true"
+			/>
+		</NavigationMenuPrimitive.Trigger>
+	);
 }
 
 function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
-	return <NavigationMenuPrimitive.Content
-		data-slot="navigation-menu-content"
-		className={cn(
-			'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<NavigationMenuPrimitive.Content
+			data-slot="navigation-menu-content"
+			className={cn(
+				'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function NavigationMenuPositioner({
@@ -87,51 +98,66 @@ function NavigationMenuPositioner({
 	alignOffset = 0,
 	...props
 }: NavigationMenuPrimitive.Positioner.Props) {
-	return <NavigationMenuPrimitive.Portal>
-		<NavigationMenuPrimitive.Positioner
-			side={side}
-			sideOffset={sideOffset}
-			align={align}
-			alignOffset={alignOffset}
-			className={cn(
-				'ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none',
-				className,
-			)}
-			{...props}
-		>
-			<NavigationMenuPrimitive.Popup
-				className="bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
+	return (
+		<NavigationMenuPrimitive.Portal>
+			<NavigationMenuPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				className={cn(
+					'ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none',
+					className,
+				)}
+				{...props}
 			>
-				<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
-			</NavigationMenuPrimitive.Popup>
-		</NavigationMenuPrimitive.Positioner>
-	</NavigationMenuPrimitive.Portal>;
+				<NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]">
+					<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+				</NavigationMenuPrimitive.Popup>
+			</NavigationMenuPrimitive.Positioner>
+		</NavigationMenuPrimitive.Portal>
+	);
 }
 
 function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
-	return <NavigationMenuPrimitive.Link
-		data-slot="navigation-menu-link"
-		className={cn(
-			'data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*=\'size-\'])]:size-4',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<NavigationMenuPrimitive.Link
+			data-slot="navigation-menu-link"
+			className={cn(
+				"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-function NavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef<
-	typeof NavigationMenuPrimitive.Icon
->) {
-	return <NavigationMenuPrimitive.Icon
-		data-slot="navigation-menu-indicator"
-		className={cn(
-			'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
-			className,
-		)}
-		{...props}
-	>
-		<div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
-	</NavigationMenuPrimitive.Icon>;
+function NavigationMenuIndicator({
+	className,
+	...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+	return (
+		<NavigationMenuPrimitive.Icon
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+				className,
+			)}
+			{...props}
+		>
+			<div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
+		</NavigationMenuPrimitive.Icon>
+	);
 }
 
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner };
+export {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuIndicator,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle,
+	NavigationMenuPositioner,
+};

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

@@ -95,7 +95,11 @@ export function PaginationPrevious({
 	</PaginationLink>
 }
 
-export function PaginationNext({ className, text = 'Next', ...props }: PaginationLinkProps & {
+export function PaginationNext({
+	className,
+	text = 'Next',
+	...props
+}: PaginationLinkProps & {
 	text?: string;
 }) @{
 	<PaginationLink
@@ -114,7 +118,7 @@ export function PaginationEllipsis({ className, ...props }: Props) @{
 		aria-hidden="true"
 		data-slot="pagination-ellipsis"
 		className={cn(
-			'flex size-8 items-center justify-center [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}

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

@@ -42,22 +42,21 @@ export function PopoverTrigger(props: Record<string, unknown>) @{
 }
 
 /** Props routed to the Positioner rather than the popup. */
-export type BaseUiPositioningProps =
-	Pick<
-		PopoverPrimitive.Positioner.Props,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'anchor'
-		| 'positionMethod'
-		| 'collisionBoundary'
-		| 'collisionPadding'
-		| 'collisionAvoidance'
-		| 'arrowPadding'
-		| 'sticky'
-		| 'disableAnchorTracking'
-	>;
+export type BaseUiPositioningProps = Pick<
+	PopoverPrimitive.Positioner.Props,
+	| 'side'
+	| 'sideOffset'
+	| 'align'
+	| 'alignOffset'
+	| 'anchor'
+	| 'positionMethod'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'collisionAvoidance'
+	| 'arrowPadding'
+	| 'sticky'
+	| 'disableAnchorTracking'
+>;
 
 export interface PopoverContentProps extends Record<string, unknown>, BaseUiPositioningProps {
 	className?: string;

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

@@ -54,9 +54,7 @@ export function RadioGroupItem({ className, ...props }: ItemProps) @{
 			data-slot="radio-group-indicator"
 			className="flex size-full items-center justify-center"
 		>
-			<CircleIcon
-				className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"
-			/>
+			<CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
 		</RadioPrimitive.Indicator>
 	</RadioPrimitive.Root>
 }

package/src/bases/base-ui/ui/scroll-area.tsrx

@@ -4,18 +4,22 @@ import { ScrollArea as ScrollAreaPrimitive } from '@octanejs/base-ui/scroll-area
 import { cn } from 'cn';
 
 function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
-	return <ScrollAreaPrimitive.Root
-		data-slot="scroll-area"
-		className={cn('relative', className)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.Viewport
-			data-slot="scroll-area-viewport"
-			className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
-		>{children}</ScrollAreaPrimitive.Viewport>
-		<ScrollBar />
-		<ScrollAreaPrimitive.Corner />
-	</ScrollAreaPrimitive.Root>;
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn('relative', className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
 }
 
 function ScrollBar({
@@ -23,21 +27,23 @@ function ScrollBar({
 	orientation = 'vertical',
 	...props
 }: ScrollAreaPrimitive.Scrollbar.Props) {
-	return <ScrollAreaPrimitive.Scrollbar
-		data-slot="scroll-area-scrollbar"
-		data-orientation={orientation}
-		orientation={orientation}
-		className={cn(
-			'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
-			className,
-		)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.Thumb
-			data-slot="scroll-area-thumb"
-			className="rounded-full relative flex-1 bg-border"
-		/>
-	</ScrollAreaPrimitive.Scrollbar>;
+	return (
+		<ScrollAreaPrimitive.Scrollbar
+			data-slot="scroll-area-scrollbar"
+			data-orientation={orientation}
+			orientation={orientation}
+			className={cn(
+				'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+				className,
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Thumb
+				data-slot="scroll-area-thumb"
+				className="rounded-full relative flex-1 bg-border"
+			/>
+		</ScrollAreaPrimitive.Scrollbar>
+	);
 }
 
 export { ScrollArea, ScrollBar };