@octanejs/shadcn 0.0.52 → 0.0.54

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

@@ -57,12 +57,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,
@@ -80,8 +82,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 {
@@ -89,8 +90,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.
@@ -115,17 +115,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,
@@ -150,12 +148,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',
@@ -256,7 +256,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,
 			),
@@ -264,7 +265,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();
@@ -377,7 +382,11 @@ export function SidebarGroup({ className, ...props }: Props) @{
 	/>
 }
 
-export function SidebarGroupLabel({ className, asChild = false, ...props }: Props & {
+export function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: Props & {
 	asChild?: boolean;
 }) @{
 	@if (asChild) {
@@ -403,7 +412,11 @@ export function SidebarGroupLabel({ className, asChild = false, ...props }: Prop
 	}
 }
 
-export function SidebarGroupAction({ className, asChild = false, ...props }: Props & {
+export function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: Props & {
 	asChild?: boolean;
 }) @{
 	@if (asChild) {
@@ -462,7 +475,8 @@ 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',
@@ -477,13 +491,15 @@ const sidebarMenuButtonVariants = cva(
 	},
 );
 
-export function SidebarMenuButton(props: Props & {
-	asChild?: boolean;
-	isActive?: boolean;
-	tooltip?: string | Record<string, unknown>;
-	variant?: VariantProps<typeof sidebarMenuButtonVariants>['variant'];
-	size?: VariantProps<typeof sidebarMenuButtonVariants>['size'];
-}) {
+export function SidebarMenuButton(
+	props: Props & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | Record<string, unknown>;
+		variant?: VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+		size?: VariantProps<typeof sidebarMenuButtonVariants>['size'];
+	},
+) {
 	const {
 		asChild = false,
 		isActive = false,
@@ -513,8 +529,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,
@@ -578,7 +593,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/radix/ui/slider.tsrx

@@ -28,7 +28,7 @@ export function Slider({
 	...props
 }: SliderProps) {
 	const _values = useMemo(
-		() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+		() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
 		[value, defaultValue, min, max],
 	);
 
@@ -50,19 +50,21 @@ export function Slider({
 			SliderPrimitive.Track,
 			{
 				'data-slot': 'slider-track',
-				className: 'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+				className:
+					'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
 			},
 			createElement(SliderPrimitive.Range, {
 				'data-slot': 'slider-range',
-				className: 'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+				className:
+					'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
 			}),
 		),
-		...Array.from(
-			{ length: _values.length },
-			(_, index) => createElement(SliderPrimitive.Thumb, {
+		...Array.from({ length: _values.length }, (_, index) =>
+			createElement(SliderPrimitive.Thumb, {
 				'data-slot': 'slider-thumb',
 				key: index,
-				className: 'block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+				className:
+					'block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
 			}),
 		),
 	);

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

@@ -8,7 +8,11 @@ import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 
-export function Tabs({ className, orientation = 'horizontal', ...props }: Props & {
+export function Tabs({
+	className,
+	orientation = 'horizontal',
+	...props
+}: Props & {
 	orientation?: 'horizontal' | 'vertical';
 }) @{
 	<TabsPrimitive.Root
@@ -35,9 +39,11 @@ export const tabsListVariants = cva(
 	},
 );
 
-export function TabsList({ className, variant = 'default', ...props }: Props & VariantProps<
-	typeof tabsListVariants
->) @{
+export function TabsList({
+	className,
+	variant = 'default',
+	...props
+}: Props & VariantProps<typeof tabsListVariants>) @{
 	<TabsPrimitive.List
 		data-slot="tabs-list"
 		data-variant={variant}
@@ -50,7 +56,7 @@ export function TabsTrigger({ className, ...props }: Props) @{
 	<TabsPrimitive.Trigger
 		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-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 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-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 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-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-active:after:opacity-100',

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

@@ -7,12 +7,13 @@ import { Toggle as TogglePrimitive } from '@octanejs/radix';
 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-[state=on]:bg-accent data-[state=on]: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-[state=on]:bg-accent data-[state=on]: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/radix/ui/tooltip.tsrx

@@ -57,7 +57,8 @@ export function TooltipContent({
 				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/react-aria/ui/accordion.tsrx

@@ -15,59 +15,70 @@ import { cn } from 'cn';
 import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 
 export function Accordion({ className, ...props }: DisclosureGroupProps) {
-	return <AccordionPrimitive
-		data-slot="accordion"
-		className={cn('flex w-full flex-col', className)}
-		{...props}
-	/>;
+	return (
+		<AccordionPrimitive
+			data-slot="accordion"
+			className={cn('flex w-full flex-col', className)}
+			{...props}
+		/>
+	);
 }
 
 export function AccordionItem({ className, ...props }: DisclosureProps) {
-	return <AccordionItemPrimitive
-		data-slot="accordion-item"
-		className={cn('not-last:border-b', className)}
-		{...props}
-	/>;
+	return (
+		<AccordionItemPrimitive
+			data-slot="accordion-item"
+			className={cn('not-last:border-b', className)}
+			{...props}
+		/>
+	);
 }
 
-export function AccordionTrigger({ className, children, ...props }: Omit<
-	ButtonProps,
-	'children'
-> & { children: OctaneNode }) {
-	return <AccordionHeaderPrimitive className="flex">
-		<AccordionTriggerPrimitive
-			slot="trigger"
-			data-slot="accordion-trigger"
-			className={cn(
-				'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<ChevronDownIcon
-				data-slot="accordion-trigger-icon"
-				className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-			/>
-			<ChevronUpIcon
-				data-slot="accordion-trigger-icon"
-				className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-			/>
-		</AccordionTriggerPrimitive>
-	</AccordionHeaderPrimitive>;
+export function AccordionTrigger({
+	className,
+	children,
+	...props
+}: Omit<ButtonProps, 'children'> & { children: OctaneNode }) {
+	return (
+		<AccordionHeaderPrimitive className="flex">
+			<AccordionTriggerPrimitive
+				slot="trigger"
+				data-slot="accordion-trigger"
+				className={cn(
+					'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				/>
+				<ChevronUpIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				/>
+			</AccordionTriggerPrimitive>
+		</AccordionHeaderPrimitive>
+	);
 }
 
 export function AccordionContent({ className, children, ...props }: DisclosurePanelProps) {
-	return <AccordionContentPrimitive
-		data-slot="accordion-content"
-		className="h-(--disclosure-panel-height) overflow-clip text-sm transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up"
-		{...props}
-	>
-		<div
-			className={cn(
-				'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
-				className,
-			)}
-		>{children}</div>
-	</AccordionContentPrimitive>;
+	return (
+		<AccordionContentPrimitive
+			data-slot="accordion-content"
+			className="h-(--disclosure-panel-height) overflow-clip text-sm transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up"
+			{...props}
+		>
+			<div
+				className={cn(
+					'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+					className,
+				)}
+			>
+				{children}
+			</div>
+		</AccordionContentPrimitive>
+	);
 }