@octanejs/shadcn 0.0.6 → 0.0.8

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

@@ -0,0 +1,20 @@
+import {
+	DisclosurePanel as CollapsibleContentPrimitive,
+	Disclosure as CollapsiblePrimitive,
+	Button as CollapsibleTriggerPrimitive,
+	type ButtonProps,
+	type DisclosurePanelProps,
+	type DisclosureProps,
+} from '@octanejs/aria/components';
+
+export function Collapsible({ ...props }: DisclosureProps) {
+	return <CollapsiblePrimitive data-slot="collapsible" {...props} />;
+}
+
+export function CollapsibleTrigger({ ...props }: ButtonProps) {
+	return <CollapsibleTriggerPrimitive slot="trigger" data-slot="collapsible-trigger" {...props} />;
+}
+
+export function CollapsibleContent({ ...props }: DisclosurePanelProps) {
+	return <CollapsibleContentPrimitive data-slot="collapsible-content" {...props} />;
+}

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

@@ -0,0 +1,131 @@
+import { type OctaneNode } from 'octane';
+import {
+	Dialog as DialogPrimitive,
+	DialogTrigger as DialogTriggerPrimitive,
+	Heading,
+	ModalOverlay as ModalOverlayPrimitive,
+	Modal as ModalPrimitive,
+	type DialogProps as DialogPrimitiveProps,
+	type DialogTriggerProps as DialogTriggerPrimitiveProps,
+	type ModalOverlayProps as ModalOverlayPrimitiveProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Button } from './button.tsrx';
+import { XIcon } from '@octanejs/lucide';
+
+export function DialogTrigger({ ...props }: DialogTriggerPrimitiveProps) {
+	return <DialogTriggerPrimitive data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose({ className, variant = 'outline', size = 'default', ...props }: Record<
+	string,
+	any
+>) {
+	return <Button
+		slot="close"
+		data-slot="dialog-close"
+		variant={variant}
+		size={size}
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function DialogOverlay({ className, children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & {
+	className?: string;
+	children: OctaneNode;
+}) {
+	return <ModalOverlayPrimitive
+		data-slot="dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	>{children}</ModalOverlayPrimitive>;
+}
+
+export function Dialog({
+	className,
+	children,
+	showCloseButton = true,
+	isDismissable = true,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & Pick<
+	Record<string, any>,
+	'isDismissable'
+> & {
+	className?: string;
+	children: OctaneNode;
+	showCloseButton?: boolean;
+}) {
+	return <DialogOverlay isDismissable={isDismissable} {...props}>
+		<ModalPrimitive
+			data-slot="dialog-content"
+			className={cn(
+				'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 sm:max-w-sm',
+				className,
+			)}
+		>
+			<DialogPrimitive data-slot="dialog" className="[display:inherit] [gap:inherit] outline-none">
+				{children}
+				{showCloseButton &&
+					<DialogClose variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogClose>}
+			</DialogPrimitive>
+		</ModalPrimitive>
+	</DialogOverlay>;
+}
+
+export function DialogHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="dialog-header"
+		className={cn('flex flex-col gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function DialogFooter({ className, showCloseButton = false, children, ...props }: HostProps<
+	'div'
+> & {
+	showCloseButton?: boolean;
+}) {
+	return <div
+		data-slot="dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		{showCloseButton && <DialogClose variant="outline">Close</DialogClose>}
+	</div>;
+}
+
+export function DialogTitle({ className, ...props }: Omit<Record<string, any>, 'slot'>) {
+	return <Heading
+		slot="title"
+		data-slot="dialog-title"
+		className={cn('text-base leading-none font-medium', className)}
+		{...props}
+	/>;
+}
+
+export function DialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
+	return <div
+		data-slot="dialog-description"
+		className={cn(
+			'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,79 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Empty({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="empty"
+		className={cn(
+			'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function EmptyHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="empty-header"
+		className={cn('flex max-w-sm flex-col items-center gap-2', className)}
+		{...props}
+	/>;
+}
+
+const emptyMediaVariants = cva(
+	'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+	{
+		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',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function EmptyMedia({ className, variant = 'default', ...props }: HostProps<
+	'div'
+> & VariantProps<typeof emptyMediaVariants>) {
+	return <div
+		data-slot="empty-icon"
+		data-variant={variant}
+		className={cn(emptyMediaVariants({ variant, className }))}
+		{...props}
+	/>;
+}
+
+export function EmptyTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="empty-title"
+		className={cn('text-sm font-medium tracking-tight', className)}
+		{...props}
+	/>;
+}
+
+export function EmptyDescription({ className, ...props }: HostProps<'p'>) {
+	return <div
+		data-slot="empty-description"
+		className={cn(
+			'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function EmptyContent({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="empty-content"
+		className={cn(
+			'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+			className,
+		)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,170 @@
+import { type OctaneNode, useMemo } from 'octane';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Label } from './label.tsrx';
+import { Separator } from './separator.tsrx';
+
+export function FieldSet({ className, ...props }: HostProps<'fieldset'>) {
+	return <fieldset
+		data-slot="field-set"
+		className={cn(
+			'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldLegend({ className, variant = 'legend', ...props }: HostProps<'legend'> & {
+	variant?: 'legend' | 'label';
+}) {
+	return <legend
+		data-slot="field-legend"
+		data-variant={variant}
+		className={cn(
+			'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldGroup({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="field-group"
+		className={cn(
+			'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
+	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',
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
+});
+
+export function Field({ className, orientation = 'vertical', ...props }: HostProps<
+	'div'
+> & VariantProps<typeof fieldVariants>) {
+	return <div
+		role="group"
+		data-slot="field"
+		data-orientation={orientation}
+		className={cn(fieldVariants({ orientation }), className)}
+		{...props}
+	/>;
+}
+
+export function FieldContent({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="field-content"
+		className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+		{...props}
+	/>;
+}
+
+export function FieldLabel({ className, ...props }: Record<string, any>) {
+	return <Label
+		data-slot="field-label"
+		className={cn(
+			'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-selected:border-primary/30 has-data-selected:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 dark:has-data-selected:border-primary/20 dark:has-data-selected:bg-primary/10',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="field-label"
+		className={cn(
+			'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldDescription({ className, ...props }: HostProps<'p'>) {
+	return <p
+		data-slot="field-description"
+		className={cn(
+			'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+			'last:mt-0 nth-last-2:-mt-1',
+			'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldSeparator({ children, className, ...props }: HostProps<'div'> & {
+	children?: OctaneNode;
+}) {
+	return <div
+		data-slot="field-separator"
+		data-content={!!children}
+		className={cn(
+			'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+			className,
+		)}
+		{...props}
+	>
+		<Separator className="absolute inset-0 top-1/2" />
+		{children &&
+			<span
+				className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+				data-slot="field-separator-content"
+			>{children}</span>}
+	</div>;
+}
+
+export function FieldError({ className, children, errors, ...props }: HostProps<'div'> & {
+	errors?: Array<{ message?: string } | undefined>;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		if (!errors?.length) {
+			return null;
+		}
+
+		const uniqueErrors = [
+			...new Map(errors.map((error) => [error?.message, error])).values(),
+		];
+
+		if (uniqueErrors?.length == 1) {
+			return uniqueErrors[0]?.message;
+		}
+
+		return <ul className="ml-4 flex list-disc flex-col gap-1">{uniqueErrors.map(
+			(error, index) => error?.message && <li key={index}>{error.message}</li>,
+		)}</ul>;
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return <div
+		role="alert"
+		data-slot="field-error"
+		className={cn('text-sm font-normal text-destructive', className)}
+		{...props}
+	>{content}</div>;
+}

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

@@ -0,0 +1,28 @@
+// React Aria base input — structure from upstream `bases/aria/ui/input.tsx`
+// (RAC Input, className routed through composeRenderProps so a caller's render
+// prop still receives its render values). Class strings are the package's
+// shipped utilities-inlined flavor, matching the Radix base.
+//
+// OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event;
+// native `change` keeps its commit-on-blur meaning.
+import { composeRenderProps, Input as InputPrimitive } from '@octanejs/aria/components';
+import type { InputProps as InputPrimitiveProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export interface InputProps extends InputPrimitiveProps {}
+
+export function Input({ className, type, ...props }: InputProps) @{
+	<InputPrimitive
+		type={type}
+		data-slot="input"
+		className={composeRenderProps(
+			className,
+			(resolved: string | undefined) => cn(
+				'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+				resolved,
+			),
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,148 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Link as LinkPrimitive, type LinkProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Separator } from './separator.tsrx';
+
+export function ItemGroup({ className, ...props }: HostProps<'div'>) {
+	return <div
+		role="list"
+		data-slot="item-group"
+		className={cn(
+			'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemSeparator({ className, ...props }: Record<string, any>) {
+	return <Separator
+		data-slot="item-separator"
+		orientation="horizontal"
+		className={cn('my-2', className)}
+		{...props}
+	/>;
+}
+
+const itemVariants = cva(
+	'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent',
+				outline: 'border-border',
+				muted: 'border-transparent bg-muted/50',
+			},
+			size: {
+				default: 'gap-2.5 px-3 py-2.5',
+				sm: 'gap-2.5 px-3 py-2.5',
+				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export function Item({ className, variant = 'default', size = 'default', ...props }: Omit<
+	LinkProps,
+	'children'
+> & Record<string, unknown> & VariantProps<typeof itemVariants>) {
+	const Element =
+		'href' in props ? LinkPrimitive : 'div';
+	return <Element
+		data-slot="item"
+		data-variant={variant}
+		data-size={size}
+		className={cn(itemVariants({ variant, size, className }))}
+		{...props}
+	/>;
+}
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+	{
+		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',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function ItemMedia({ className, variant = 'default', ...props }: HostProps<
+	'div'
+> & VariantProps<typeof itemMediaVariants>) {
+	return <div
+		data-slot="item-media"
+		data-variant={variant}
+		className={cn(itemMediaVariants({ variant, className }))}
+		{...props}
+	/>;
+}
+
+export function ItemContent({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-content"
+		className={cn(
+			'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-title"
+		className={cn(
+			'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemDescription({ className, ...props }: HostProps<'p'>) {
+	return <p
+		data-slot="item-description"
+		className={cn(
+			'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemActions({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-actions"
+		className={cn('flex items-center gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function ItemHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-header"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function ItemFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-footer"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,30 @@
+// React Aria base kbd — structure from upstream `bases/aria/ui/kbd.tsx`, which
+// renders BOTH parts through RAC's Keyboard primitive (the Radix base uses a
+// plain <kbd> host for each; upstream likewise renders KbdGroup as a keyboard
+// element rather than a <div>). Class strings are the package's shipped
+// utilities-inlined flavor, matching the Radix base.
+import { Keyboard as KbdPrimitive } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export interface KbdProps extends HostProps<'kbd'> {}
+
+export function Kbd({ className, ...props }: KbdProps) @{
+	<KbdPrimitive
+		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',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function KbdGroup({ className, ...props }: KbdProps) @{
+	<KbdPrimitive
+		data-slot="kbd-group"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,22 @@
+import { LabelContext, Label as LabelPrimitive, type LabelProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export function Label({ className, htmlFor, slot, ...props }: LabelProps) {
+	const label = <LabelPrimitive
+		data-slot="label"
+		className={cn(
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50',
+			className,
+		)}
+		{...props}
+		htmlFor={htmlFor}
+		slot={slot}
+	/>;
+
+	if (htmlFor && slot === undefined) {
+		return <LabelContext.Provider value={null}>{label}</LabelContext.Provider>;
+	}
+
+	return label;
+}

package/src/bases/react-aria/ui/native-select.tsrx

@@ -0,0 +1,44 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { ChevronDownIcon } from '@octanejs/lucide';
+
+type NativeSelectProps =
+	Omit<HostProps<'select'>, 'size'> & {
+		size?: 'sm' | 'default';
+	};
+
+export function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
+	return <div
+		className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
+		data-slot="native-select-wrapper"
+		data-size={size}
+	>
+		<select
+			data-slot="native-select"
+			data-size={size}
+			className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+			{...props}
+		/>
+		<ChevronDownIcon
+			className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+			aria-hidden="true"
+			data-slot="native-select-icon"
+		/>
+	</div>;
+}
+
+export function NativeSelectOption({ className, ...props }: HostProps<'option'>) {
+	return <option
+		data-slot="native-select-option"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>;
+}
+
+export function NativeSelectOptGroup({ className, ...props }: HostProps<'optgroup'>) {
+	return <optgroup
+		data-slot="native-select-optgroup"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>;
+}