npm - @voila.dev/ui - Versions diffs - 1.1.9 - Mend

@voila.dev/ui 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/package.json +78 -0
package/src/components/ui/accordion.tsx +79 -0
package/src/components/ui/alert-dialog.tsx +198 -0
package/src/components/ui/alert.tsx +105 -0
package/src/components/ui/aspect-ratio.tsx +30 -0
package/src/components/ui/avatar.tsx +125 -0
package/src/components/ui/badge-variants.ts +166 -0
package/src/components/ui/badge.tsx +45 -0
package/src/components/ui/banner.tsx +84 -0
package/src/components/ui/breadcrumb.tsx +127 -0
package/src/components/ui/button-group.tsx +99 -0
package/src/components/ui/button-variants.ts +108 -0
package/src/components/ui/button.tsx +54 -0
package/src/components/ui/calendar.tsx +266 -0
package/src/components/ui/card.tsx +155 -0
package/src/components/ui/carousel.tsx +319 -0
package/src/components/ui/chat.tsx +896 -0
package/src/components/ui/checkbox-group.tsx +44 -0
package/src/components/ui/checkbox.tsx +34 -0
package/src/components/ui/chip.tsx +60 -0
package/src/components/ui/collapsible.tsx +44 -0
package/src/components/ui/color-picker.tsx +191 -0
package/src/components/ui/combobox.tsx +317 -0
package/src/components/ui/command.tsx +187 -0
package/src/components/ui/confirm-dialog.tsx +125 -0
package/src/components/ui/context-menu.tsx +254 -0
package/src/components/ui/copyable-text.tsx +65 -0
package/src/components/ui/date-picker.tsx +316 -0
package/src/components/ui/date-time-picker.tsx +1071 -0
package/src/components/ui/dialog.tsx +176 -0
package/src/components/ui/direction.tsx +15 -0
package/src/components/ui/drawer.tsx +178 -0
package/src/components/ui/dropdown-menu.tsx +247 -0
package/src/components/ui/empty.tsx +131 -0
package/src/components/ui/field.tsx +257 -0
package/src/components/ui/formatted-input.tsx +219 -0
package/src/components/ui/gallery.tsx +161 -0
package/src/components/ui/hover-card.tsx +77 -0
package/src/components/ui/icon-picker.tsx +193 -0
package/src/components/ui/image-cropper.tsx +787 -0
package/src/components/ui/image-upload-field.tsx +344 -0
package/src/components/ui/input-group.tsx +175 -0
package/src/components/ui/input-otp.tsx +83 -0
package/src/components/ui/input.tsx +21 -0
package/src/components/ui/item.tsx +212 -0
package/src/components/ui/kbd.tsx +62 -0
package/src/components/ui/label.tsx +19 -0
package/src/components/ui/list.tsx +46 -0
package/src/components/ui/menu-variants.ts +71 -0
package/src/components/ui/menubar.tsx +226 -0
package/src/components/ui/money-input.tsx +96 -0
package/src/components/ui/native-date-picker.tsx +120 -0
package/src/components/ui/native-select.tsx +74 -0
package/src/components/ui/navigation-menu.tsx +183 -0
package/src/components/ui/pagination.tsx +150 -0
package/src/components/ui/popover.tsx +104 -0
package/src/components/ui/profile-header.tsx +196 -0
package/src/components/ui/progress.tsx +71 -0
package/src/components/ui/radio-group.tsx +115 -0
package/src/components/ui/rating.tsx +200 -0
package/src/components/ui/resizable.tsx +61 -0
package/src/components/ui/responsive-dialog.tsx +278 -0
package/src/components/ui/responsive-select.tsx +289 -0
package/src/components/ui/responsive-sheet.tsx +225 -0
package/src/components/ui/scroll-area.tsx +51 -0
package/src/components/ui/section.tsx +106 -0
package/src/components/ui/segmented-control.tsx +148 -0
package/src/components/ui/select.tsx +216 -0
package/src/components/ui/separator.tsx +69 -0
package/src/components/ui/sheet.tsx +154 -0
package/src/components/ui/shortcut.tsx +41 -0
package/src/components/ui/sidebar.tsx +739 -0
package/src/components/ui/skeleton.tsx +23 -0
package/src/components/ui/slider.tsx +74 -0
package/src/components/ui/sonner.tsx +64 -0
package/src/components/ui/spinner.tsx +19 -0
package/src/components/ui/stat-card.tsx +138 -0
package/src/components/ui/stepper.tsx +181 -0
package/src/components/ui/sticky-action-bar.tsx +42 -0
package/src/components/ui/switch.tsx +30 -0
package/src/components/ui/table.tsx +132 -0
package/src/components/ui/tabs.tsx +77 -0
package/src/components/ui/textarea.tsx +24 -0
package/src/components/ui/time-picker.tsx +221 -0
package/src/components/ui/toggle-group.tsx +86 -0
package/src/components/ui/toggle.tsx +43 -0
package/src/components/ui/tooltip.tsx +79 -0
package/src/components/ui/translation-input.tsx +126 -0
package/src/components/ui/user-avatar.tsx +74 -0
package/src/css-modules.d.ts +4 -0
package/src/hooks/use-command-palette.ts +28 -0
package/src/hooks/use-mobile.ts +21 -0
package/src/hooks/use-pagination.ts +81 -0
package/src/hooks/use-picker-state.ts +44 -0
package/src/lib/cva.ts +18 -0
package/src/lib/time-math.ts +62 -0
package/src/lib/utils.ts +14 -0
package/src/styles/globals.css +36 -0
package/src/styles.css +10 -0

package/src/components/ui/skeleton.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+/**
+ * Purely visual placeholder with no semantics of its own: wrap the loading
+ * region in `role="status"` with sr-only "Loading..." text (or mark the
+ * skeletons `aria-hidden`) so screen readers announce the load.
+ */
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn(
+				"animate-pulse rounded-md bg-muted motion-reduce:animate-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+export { Skeleton };

package/src/components/ui/slider.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { cn } from "#/lib/utils.ts";
+function resolveThumbValues(
+	value: SliderPrimitive.Root.Props["value"],
+	defaultValue: SliderPrimitive.Root.Props["defaultValue"],
+	min: number,
+): readonly number[] {
+	const source = value ?? defaultValue;
+	if (Array.isArray(source)) return source;
+	if (typeof source === "number") return [source];
+	return [min];
+}
+function Slider({
+	className,
+	children,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: SliderPrimitive.Root.Props) {
+	const thumbValues = resolveThumbValues(value, defaultValue, min);
+	return (
+		<SliderPrimitive.Root
+			className={cn(
+				"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+				className,
+			)}
+			data-slot="slider"
+			defaultValue={defaultValue}
+			value={value}
+			min={min}
+			max={max}
+			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.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"
+				>
+					<SliderPrimitive.Indicator
+						data-slot="slider-range"
+						className="bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+					/>
+				</SliderPrimitive.Track>
+				{Array.from({ length: thumbValues.length }, (_, index) => (
+					<SliderPrimitive.Thumb
+						data-slot="slider-thumb"
+						key={index}
+						className="relative block size-3 shrink-0 rounded-full border border-ring bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-none active:ring-3 data-disabled:pointer-events-none data-disabled:opacity-50"
+					/>
+				))}
+			</SliderPrimitive.Control>
+			{children}
+		</SliderPrimitive.Root>
+	);
+}
+function SliderValue({ className, ...props }: SliderPrimitive.Value.Props) {
+	return (
+		<SliderPrimitive.Value
+			data-slot="slider-value"
+			className={cn("text-sm text-muted-foreground tabular-nums", className)}
+			{...props}
+		/>
+	);
+}
+export { Slider, SliderValue };

package/src/components/ui/sonner.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import {
+	CheckCircleIcon,
+	InfoIcon,
+	WarningIcon,
+	WarningOctagonIcon,
+} from "@phosphor-icons/react";
+import * as React from "react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { Spinner } from "#/components/ui/spinner.tsx";
+/* Theme is resolved from the `.dark` class on <html> — the same mechanism the
+ * design tokens use — so the Toaster works without any theme provider. */
+function subscribeToRootThemeClass(onChange: () => void): () => void {
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"],
+	});
+	return () => observer.disconnect();
+}
+function getResolvedTheme(): "light" | "dark" {
+	return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+function useResolvedTheme(): "light" | "dark" {
+	return React.useSyncExternalStore(
+		subscribeToRootThemeClass,
+		getResolvedTheme,
+		() => "light",
+	);
+}
+function Toaster(props: ToasterProps) {
+	const theme = useResolvedTheme();
+	return (
+		<Sonner
+			theme={theme}
+			className="toaster group"
+			closeButton
+			icons={{
+				success: <CheckCircleIcon className="size-4 text-success" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <WarningIcon className="size-4 text-warning" />,
+				error: <WarningOctagonIcon className="size-4 text-destructive" />,
+				loading: <Spinner />,
+			}}
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+					"--border-radius": "var(--radius)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+}
+export { toast } from "sonner";
+export type { ToasterProps };
+export { Toaster };

package/src/components/ui/spinner.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { SpinnerGapIcon } from "@phosphor-icons/react";
+import { cn } from "#/lib/utils.ts";
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+	return (
+		<SpinnerGapIcon
+			data-slot="spinner"
+			role="status"
+			aria-label="Loading"
+			className={cn(
+				"size-4 animate-spin motion-reduce:animate-[spin_3s_linear_infinite]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+export { Spinner };

package/src/components/ui/stat-card.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import { TrendDownIcon, TrendUpIcon } from "@phosphor-icons/react";
+import { Card } from "#/components/ui/card.tsx";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+/**
+ * KPI tile for dashboards: a Card composition pairing a muted label, a large
+ * value, an optional trend delta and an optional full-bleed sparkline. Put a
+ * `Chart.Root` inside `StatCardChart` — or `Chart.Skeleton` / `Chart.Empty`
+ * (from `@voila.dev/ui-chart`) while the metric is loading or has no data.
+ */
+function StatCard({ className, ...props }: React.ComponentProps<typeof Card>) {
+	return (
+		<Card
+			data-slot="stat-card"
+			className={cn("gap-1.5", className)}
+			{...props}
+		/>
+	);
+}
+function StatCardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stat-card-header"
+			className={cn(
+				"flex items-center justify-between gap-2 px-4 group-data-[size=sm]/card:px-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+function StatCardLabel({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stat-card-label"
+			className={cn("truncate text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+function StatCardValue({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stat-card-value"
+			className={cn(
+				"px-4 text-2xl font-semibold tracking-tight tabular-nums group-data-[size=sm]/card:px-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+type StatCardTrend = "up" | "down" | "neutral";
+const statCardDeltaVariants = cva({
+	base: "inline-flex shrink-0 items-center gap-1 text-xs font-medium tabular-nums [&_svg]:size-3.5 [&_svg]:shrink-0",
+	variants: {
+		trend: {
+			up: "text-success",
+			down: "text-destructive",
+			neutral: "text-muted-foreground",
+		},
+	},
+	defaultVariants: {
+		trend: "neutral",
+	},
+});
+const trendIcons: Record<
+	StatCardTrend,
+	React.ComponentType<{ "aria-hidden"?: boolean }> | null
+> = {
+	up: TrendUpIcon,
+	down: TrendDownIcon,
+	neutral: null,
+};
+/**
+ * Trend indicator next to the label or value. `up` renders in the success
+ * color and `down` in the destructive color - for metrics where down is the
+ * good direction (e.g. cancellations), invert with `className` ("text-success"
+ * / "text-destructive" win over the variant color).
+ */
+function StatCardDelta({
+	className,
+	trend = "neutral",
+	children,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof statCardDeltaVariants>) {
+	const TrendIcon = trendIcons[trend];
+	return (
+		<div
+			data-slot="stat-card-delta"
+			data-trend={trend}
+			className={cn(statCardDeltaVariants({ trend }), className)}
+			{...props}
+		>
+			{TrendIcon ? <TrendIcon aria-hidden /> : null}
+			{children}
+		</div>
+	);
+}
+/**
+ * Full-bleed chart slot pinned to the bottom edge of the card: the negative
+ * margin cancels the card's bottom padding and the card's `overflow-hidden`
+ * clips the chart to the rounded corners. Constrain the chart's height on the
+ * `Chart.Root` itself (e.g. `className="h-16 w-full"`).
+ */
+function StatCardChart({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stat-card-chart"
+			className={cn(
+				"mt-auto -mb-4 pt-2 group-data-[size=sm]/card:-mb-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+export {
+	StatCard,
+	StatCardChart,
+	StatCardDelta,
+	StatCardHeader,
+	StatCardLabel,
+	type StatCardTrend,
+	StatCardValue,
+	statCardDeltaVariants,
+};

package/src/components/ui/stepper.tsx ADDED Viewed

@@ -0,0 +1,181 @@
+import { CheckIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { cn } from "#/lib/utils.ts";
+type StepperOrientation = "horizontal" | "vertical";
+type StepperStepState = "completed" | "active" | "inactive";
+const StepperContext = React.createContext<{
+	value: number;
+	orientation: StepperOrientation;
+} | null>(null);
+function useStepperContext(componentName: string) {
+	const context = React.useContext(StepperContext);
+	if (!context) {
+		throw new Error(`<${componentName}> must be used within <Stepper>`);
+	}
+	return context;
+}
+const StepperItemContext = React.createContext<{
+	step: number;
+	state: StepperStepState;
+} | null>(null);
+function useStepperItemContext(componentName: string) {
+	const context = React.useContext(StepperItemContext);
+	if (!context) {
+		throw new Error(`<${componentName}> must be used within <StepperItem>`);
+	}
+	return context;
+}
+/**
+ * Presentational progress indicator for multi-step flows (onboarding,
+ * booking). `value` is the 1-based active step: steps below it render as
+ * completed, the step equal to it as active, the rest as inactive. Navigation
+ * stays with the consumer - wire buttons or router links around it.
+ */
+function Stepper({
+	className,
+	value,
+	orientation = "horizontal",
+	...props
+}: React.ComponentProps<"ol"> & {
+	value: number;
+	orientation?: StepperOrientation;
+}) {
+	const contextValue = React.useMemo(
+		() => ({ value, orientation }),
+		[value, orientation],
+	);
+	return (
+		<StepperContext.Provider value={contextValue}>
+			<ol
+				data-slot="stepper"
+				data-orientation={orientation}
+				className={cn(
+					"group/stepper flex w-full data-[orientation=horizontal]:items-center data-[orientation=horizontal]:gap-2 data-[orientation=vertical]:flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</StepperContext.Provider>
+	);
+}
+function StepperItem({
+	className,
+	step,
+	...props
+}: React.ComponentProps<"li"> & {
+	step: number;
+}) {
+	const { value, orientation } = useStepperContext("StepperItem");
+	const state: StepperStepState =
+		step < value ? "completed" : step === value ? "active" : "inactive";
+	const contextValue = React.useMemo(() => ({ step, state }), [step, state]);
+	return (
+		<StepperItemContext.Provider value={contextValue}>
+			<li
+				data-slot="stepper-item"
+				data-state={state}
+				data-orientation={orientation}
+				aria-current={state === "active" ? "step" : undefined}
+				className={cn(
+					"group/stepper-item flex items-center gap-2 data-[orientation=vertical]:relative data-[orientation=vertical]:items-start data-[orientation=vertical]:pb-6 data-[orientation=vertical]:last:pb-0 data-[orientation=horizontal]:[&:not(:last-child)]:flex-1",
+					className,
+				)}
+				{...props}
+			/>
+		</StepperItemContext.Provider>
+	);
+}
+/**
+ * Step circle: renders the step number (or custom children) and swaps to a
+ * check mark once the step is completed.
+ */
+function StepperIndicator({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"span">) {
+	const { step, state } = useStepperItemContext("StepperIndicator");
+	return (
+		<span
+			data-slot="stepper-indicator"
+			className={cn(
+				"flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground tabular-nums transition-colors group-data-[state=active]/stepper-item:bg-primary group-data-[state=completed]/stepper-item:bg-primary group-data-[state=active]/stepper-item:text-primary-foreground group-data-[state=completed]/stepper-item:text-primary-foreground [&>svg]:size-3.5",
+				className,
+			)}
+			{...props}
+		>
+			{state === "completed" ? <CheckIcon aria-hidden /> : (children ?? step)}
+		</span>
+	);
+}
+function StepperTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stepper-title"
+			className={cn(
+				"text-sm leading-tight font-medium whitespace-nowrap group-data-[state=inactive]/stepper-item:text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+function StepperDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stepper-description"
+			className={cn("text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+/**
+ * Connecting line to the next step. Horizontal: a flexible rule filling the
+ * gap between items. Vertical: an absolute line dropping from the indicator,
+ * sized by the item's bottom padding.
+ */
+function StepperSeparator({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	const { orientation } = useStepperContext("StepperSeparator");
+	return (
+		<div
+			data-slot="stepper-separator"
+			data-orientation={orientation}
+			aria-hidden
+			className={cn(
+				"bg-border transition-colors group-data-[state=completed]/stepper-item:bg-primary",
+				"data-[orientation=horizontal]:h-px data-[orientation=horizontal]:min-w-4 data-[orientation=horizontal]:flex-1",
+				"data-[orientation=vertical]:absolute data-[orientation=vertical]:top-7 data-[orientation=vertical]:bottom-1 data-[orientation=vertical]:left-3 data-[orientation=vertical]:w-px data-[orientation=vertical]:-translate-x-1/2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+export {
+	Stepper,
+	StepperDescription,
+	StepperIndicator,
+	StepperItem,
+	StepperSeparator,
+	type StepperStepState,
+	StepperTitle,
+};

package/src/components/ui/sticky-action-bar.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+/**
+ * Bottom-anchored in-page action bar for a mobile primary action — a sticky
+ * footer, NOT a dialog. It sticks to the bottom of the viewport with a
+ * top border and a background fill, and reserves extra bottom padding for the
+ * iOS home indicator via `env(safe-area-inset-bottom)`.
+ *
+ * It's shown on mobile and hidden from `md` up by default; pass
+ * `hideOnDesktop={false}` (or override via `className`) to keep it on every
+ * breakpoint. Children are laid out in a flex row, so multiple buttons sit
+ * side by side.
+ */
+function StickyActionBar({
+	className,
+	children,
+	hideOnDesktop = true,
+	...props
+}: React.ComponentProps<"div"> & {
+	/** Hide the bar from the `md` breakpoint up (default `true`). */
+	hideOnDesktop?: boolean;
+}) {
+	return (
+		<div
+			data-slot="sticky-action-bar"
+			className={cn(
+				"sticky inset-x-0 bottom-0 z-40 flex items-center gap-2 border-t bg-background px-4 pt-3",
+				// Extra bottom padding clears the iOS home indicator.
+				"pb-[calc(0.75rem+env(safe-area-inset-bottom))]",
+				"*:data-[slot=button]:flex-1",
+				hideOnDesktop && "md:hidden",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+export { StickyActionBar };

package/src/components/ui/switch.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "#/lib/utils.ts";
+type SwitchProps = SwitchPrimitive.Root.Props & {
+	size?: "sm" | "default";
+};
+function Switch({ className, size = "default", ...props }: SwitchProps) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			data-size={size}
+			className={cn(
+				// Track dimensions live on the spacing scale (default 32×18.4, sm
+				// 24×14); the thumb's translate math depends on these widths.
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 motion-reduce:transition-none dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:border-input data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className="pointer-events-none block rounded-full bg-background transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] motion-reduce:transition-none dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+export { Switch, type SwitchProps };