@atelic-action/ui 0.17.2 → 1.1.0

package/src/app/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/app/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const labelVariants = cva(
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/app/ui/option-select.tsx

@@ -0,0 +1,56 @@
+import { cn } from "../lib/utils";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+export interface SelectOption {
+	value: string;
+	label: string;
+}
+
+interface OptionSelectProps {
+	/** Currently selected option value. Omit (undefined) to show the placeholder. */
+	value?: string;
+	/** Fired with the newly selected option value. */
+	onValueChange: (value: string) => void;
+	/** Options to render, in display order. */
+	options: SelectOption[];
+	/** Accessible name for the trigger (also the combobox name in tests). */
+	ariaLabel: string;
+	/** Shown when no value matches (value is always set in most filters). */
+	placeholder?: string;
+	/** Width / layout classes for the trigger; the white surface is baked in. */
+	className?: string;
+}
+
+/**
+ * Thin, reusable wrapper over the Radix Select primitives for the common case:
+ * a single-select driven by a flat `options` array. Bakes in the raised white
+ * surface used for filters/search so callers only pass width + the options.
+ * Reach for the raw Select primitives only when you need grouping, custom item
+ * rendering, or anything this does not express.
+ *
+ * Note: Radix forbids an empty-string option value. For an "all / none" option,
+ * use a sentinel value and map it back in the caller's onValueChange.
+ */
+export function OptionSelect({
+	value,
+	onValueChange,
+	options,
+	ariaLabel,
+	placeholder,
+	className,
+}: OptionSelectProps) {
+	return (
+		<Select value={value} onValueChange={onValueChange}>
+			<SelectTrigger className={cn("bg-card shadow-sm", className)} aria-label={ariaLabel}>
+				<SelectValue placeholder={placeholder} />
+			</SelectTrigger>
+			<SelectContent>
+				{options.map((option) => (
+					<SelectItem key={option.value} value={option.value}>
+						{option.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}

package/src/app/ui/pagination.tsx

@@ -0,0 +1,90 @@
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+interface PaginationProps {
+	/** Current page, 1-indexed. */
+	page: number;
+	/** Total number of pages. */
+	totalPages: number;
+	/** Called with the requested page when a control is clicked. */
+	onPageChange: (page: number) => void;
+	className?: string;
+}
+
+type PageItem = { type: "page"; value: number } | { type: "gap"; key: string };
+
+/**
+ * Windowed page list: always shows the first and last page plus the current
+ * page and its neighbors, eliding the rest with gaps. Keeps the control compact
+ * as the page count grows.
+ */
+function pageWindow(page: number, totalPages: number): PageItem[] {
+	const wanted = [1, totalPages, page, page - 1, page + 1];
+	const nums = [...new Set(wanted)].filter((p) => p >= 1 && p <= totalPages).sort((a, b) => a - b);
+
+	const items: PageItem[] = [];
+	let prev = 0;
+	let gapId = 0;
+	for (const value of nums) {
+		if (value - prev > 1) {
+			items.push({ type: "gap", key: `gap-${gapId++}` });
+		}
+		items.push({ type: "page", value });
+		prev = value;
+	}
+	return items;
+}
+
+/**
+ * Numbered pagination control. Renders nothing for a single page. Purely
+ * presentational: the caller owns the page state and slices its own data.
+ */
+export function Pagination({ page, totalPages, onPageChange, className }: PaginationProps) {
+	if (totalPages <= 1) return null;
+
+	return (
+		<nav
+			aria-label="Pagination"
+			className={cn("mt-8 flex flex-wrap items-center justify-center gap-1", className)}
+		>
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() => onPageChange(page - 1)}
+				disabled={page <= 1}
+				aria-label="Previous page"
+			>
+				Prev
+			</Button>
+
+			{pageWindow(page, totalPages).map((item) =>
+				item.type === "gap" ? (
+					<span key={item.key} className="px-2 text-muted-foreground" aria-hidden="true">
+						...
+					</span>
+				) : (
+					<Button
+						key={item.value}
+						variant={item.value === page ? "default" : "outline"}
+						size="sm"
+						onClick={() => onPageChange(item.value)}
+						aria-label={`Page ${item.value}`}
+						aria-current={item.value === page ? "page" : undefined}
+					>
+						{item.value}
+					</Button>
+				),
+			)}
+
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() => onPageChange(page + 1)}
+				disabled={page >= totalPages}
+				aria-label="Next page"
+			>
+				Next
+			</Button>
+		</nav>
+	);
+}

package/src/app/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 origin-(--radix-popover-content-transform-origin)",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/app/ui/progress.tsx

@@ -0,0 +1,25 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+		indicatorClassName?: string;
+	}
+>(({ className, value, indicatorClassName, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/app/ui/search-input.tsx

@@ -0,0 +1,63 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { ClearButton } from "./clear-button";
+import { Input } from "./input";
+
+export interface SearchInputProps extends Omit<React.ComponentProps<"input">, "type" | "onChange"> {
+	value: string;
+	onValueChange: (value: string) => void;
+	onClear?: () => void;
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+	(
+		{ className, value, onValueChange, onClear, onKeyDown, placeholder = "Search...", ...props },
+		ref,
+	) => {
+		const handleClear = React.useCallback(() => {
+			onValueChange("");
+			onClear?.();
+		}, [onValueChange, onClear]);
+
+		const handleKeyDown = React.useCallback(
+			(e: React.KeyboardEvent<HTMLInputElement>) => {
+				if (e.key === "Escape" && value) {
+					e.preventDefault();
+					handleClear();
+				}
+				onKeyDown?.(e);
+			},
+			[value, handleClear, onKeyDown],
+		);
+
+		return (
+			<div className="relative w-full">
+				<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+				<Input
+					ref={ref}
+					type="text"
+					value={value}
+					onChange={(e) => onValueChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder={placeholder}
+					// White surface + soft lift so the search bar stands off the warm
+					// paper background (--background) rather than blending into it.
+					className={cn("bg-card shadow-sm", "pl-10", value ? "pr-10" : "pr-3", className)}
+					aria-label="Search"
+					{...props}
+				/>
+				{value && (
+					<ClearButton
+						onClick={handleClear}
+						className="absolute right-3 top-1/2 -translate-y-1/2"
+						aria-label="Clear search"
+					/>
+				)}
+			</div>
+		);
+	},
+);
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };

package/src/app/ui/select.tsx

@@ -0,0 +1,151 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 origin-(--radix-select-content-transform-origin)",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/app/ui/separator.tsx

@@ -0,0 +1,24 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			"shrink-0 bg-border",
+			orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+			className,
+		)}
+		{...props}
+	/>
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/app/ui/sheet.tsx

@@ -0,0 +1,119 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
+);
+
+interface SheetContentProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+			{children}
+			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+		</SheetPrimitive.Content>
+	</SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+		{...props}
+	/>
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold text-foreground", className)}
+		{...props}
+	/>
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetOverlay,
+	SheetPortal,
+	SheetTitle,
+	SheetTrigger,
+};

package/src/app/ui/slider.tsx

@@ -0,0 +1,23 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn("relative flex w-full touch-none select-none items-center", className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/app/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/app/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+	({ className, ...props }, ref) => {
+		return (
+			<textarea
+				className={cn(
+					"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };