@questpie/admin 0.0.1

package/src/components/primitives/select-input.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { Check, CircleNotch } from "@phosphor-icons/react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../ui/select";
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxContent,
+	ComboboxList,
+	ComboboxItem,
+	ComboboxEmpty,
+	ComboboxChips,
+	ComboboxChip,
+	ComboboxChipsInput,
+	useComboboxAnchor,
+} from "../ui/combobox";
+import { cn } from "../../lib/utils";
+import type { SelectInputProps, SelectOption } from "./types";
+import { flattenOptions } from "./types";
+
+/**
+ * Select Input Primitive
+ *
+ * A unified select component that supports:
+ * - Single select (dropdown)
+ * - Multi-select (chips)
+ * - Static options
+ * - Dynamic loading via loadOptions
+ * - Search/filtering
+ *
+ * @example
+ * ```tsx
+ * // Single select with static options
+ * <SelectInput
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={[
+ *     { value: "active", label: "Active" },
+ *     { value: "inactive", label: "Inactive" },
+ *   ]}
+ * />
+ *
+ * // Multi-select with dynamic loading
+ * <SelectInput
+ *   value={selectedTags}
+ *   onChange={setSelectedTags}
+ *   multiple
+ *   loadOptions={async (search) => {
+ *     const res = await fetch(`/api/tags?search=${search}`)
+ *     return res.json()
+ *   }}
+ * />
+ * ```
+ */
+export function SelectInput<TValue extends string = string>({
+	value,
+	onChange,
+	options: staticOptions = [],
+	loadOptions,
+	multiple = false,
+	clearable = true,
+	maxSelections,
+	debounceMs = 300,
+	loading: externalLoading = false,
+	emptyMessage = "No options found",
+	placeholder = "Select...",
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: SelectInputProps<TValue>) {
+	const [search, setSearch] = useState("");
+	const [dynamicOptions, setDynamicOptions] = useState<SelectOption<TValue>[]>(
+		[],
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
+	const anchorRef = useComboboxAnchor();
+
+	// Flatten static options
+	const flatStaticOptions = useMemo(
+		() => flattenOptions(staticOptions),
+		[staticOptions],
+	);
+
+	// Merge static and dynamic options
+	const allOptions = useMemo(() => {
+		if (loadOptions) {
+			return dynamicOptions;
+		}
+		return flatStaticOptions;
+	}, [loadOptions, dynamicOptions, flatStaticOptions]);
+
+	// Filter options by search (for static options)
+	const filteredOptions = useMemo(() => {
+		if (loadOptions) {
+			return allOptions; // Dynamic options are already filtered by server
+		}
+		if (!search) {
+			return allOptions;
+		}
+		return allOptions.filter((opt) =>
+			opt.label.toLowerCase().includes(search.toLowerCase()),
+		);
+	}, [allOptions, search, loadOptions]);
+
+	// Load dynamic options
+	useEffect(() => {
+		if (!loadOptions) return;
+
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+		}
+
+		debounceRef.current = setTimeout(async () => {
+			setIsLoading(true);
+			try {
+				const results = await loadOptions(search);
+				setDynamicOptions(results);
+			} catch (error) {
+				console.error("Failed to load options:", error);
+				setDynamicOptions([]);
+			} finally {
+				setIsLoading(false);
+			}
+		}, debounceMs);
+
+		return () => {
+			if (debounceRef.current) {
+				clearTimeout(debounceRef.current);
+			}
+		};
+	}, [search, loadOptions, debounceMs]);
+
+	// Get label for a value
+	const getLabel = useCallback(
+		(val: TValue): string => {
+			const option = allOptions.find((opt) => opt.value === val);
+			return option?.label ?? String(val);
+		},
+		[allOptions],
+	);
+
+	// Normalize value to array for internal handling
+	const selectedValues = useMemo((): TValue[] => {
+		if (value === null || value === undefined) return [];
+		return Array.isArray(value) ? value : [value];
+	}, [value]);
+
+	// Handle selection for multi-select
+	const handleMultiSelect = useCallback(
+		(selectedValue: TValue) => {
+			const currentValues = selectedValues;
+			const isSelected = currentValues.includes(selectedValue);
+
+			if (isSelected) {
+				// Remove
+				const newValues = currentValues.filter((v) => v !== selectedValue);
+				onChange(newValues as TValue & (TValue | TValue[] | null));
+			} else {
+				// Add (check max)
+				if (maxSelections && currentValues.length >= maxSelections) return;
+				const newValues = [...currentValues, selectedValue];
+				onChange(newValues as TValue & (TValue | TValue[] | null));
+			}
+		},
+		[selectedValues, onChange, maxSelections],
+	);
+
+	// Handle removal (for multi-select chips)
+	const handleRemove = useCallback(
+		(removedValue: TValue) => {
+			const newValues = selectedValues.filter((v) => v !== removedValue);
+			onChange(newValues as TValue & (TValue | TValue[] | null));
+		},
+		[selectedValues, onChange],
+	);
+
+	const showLoading = isLoading || externalLoading;
+
+	// ==========================================================================
+	// Single Select (using shadcn Select) - only for static options
+	// ==========================================================================
+	if (!multiple && !loadOptions) {
+		return (
+			<Select
+				value={selectedValues[0] ?? ""}
+				onValueChange={(val) =>
+					onChange(val as TValue & (TValue | TValue[] | null))
+				}
+				disabled={disabled}
+			>
+				<SelectTrigger
+					id={id}
+					className={cn("w-full", className)}
+					aria-invalid={ariaInvalid}
+				>
+					<SelectValue>
+						{selectedValues[0] ? getLabel(selectedValues[0]) : placeholder}
+					</SelectValue>
+				</SelectTrigger>
+				<SelectContent>
+					{filteredOptions.map((option) => (
+						<SelectItem
+							key={String(option.value)}
+							value={String(option.value)}
+							disabled={option.disabled}
+						>
+							{option.icon}
+							{option.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		);
+	}
+
+	// ==========================================================================
+	// Multi-Select or Dynamic Loading (using Combobox)
+	// ==========================================================================
+	return (
+		<Combobox
+			value={multiple ? undefined : (selectedValues[0] ?? null)}
+			onValueChange={(val) => {
+				if (val !== null && val !== undefined) {
+					if (multiple) {
+						handleMultiSelect(val as TValue);
+					} else {
+						onChange(val as TValue & (TValue | TValue[] | null));
+					}
+				}
+			}}
+			disabled={disabled}
+		>
+			{multiple ? (
+				// Multi-select with chips
+				<ComboboxChips
+					ref={anchorRef}
+					className={cn(className)}
+					aria-invalid={ariaInvalid}
+				>
+					{selectedValues.map((val) => (
+						<ComboboxChip key={String(val)}>{getLabel(val)}</ComboboxChip>
+					))}
+					<ComboboxChipsInput
+						placeholder={selectedValues.length === 0 ? placeholder : undefined}
+						value={search}
+						onChange={(e) => setSearch(e.target.value)}
+					/>
+				</ComboboxChips>
+			) : (
+				// Single select with search
+				<ComboboxInput
+					id={id}
+					placeholder={placeholder}
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					className={cn(className)}
+					aria-invalid={ariaInvalid}
+					showClear={clearable && selectedValues.length > 0}
+				/>
+			)}
+
+			<ComboboxContent anchor={multiple ? anchorRef : undefined}>
+				{showLoading && (
+					<div className="flex items-center justify-center py-4">
+						<CircleNotch className="size-4 animate-spin text-muted-foreground" />
+					</div>
+				)}
+				<ComboboxList>
+					{filteredOptions.map((option) => (
+						<ComboboxItem
+							key={String(option.value)}
+							value={option.value}
+							disabled={option.disabled}
+						>
+							{option.icon}
+							{option.label}
+							{multiple && selectedValues.includes(option.value) && (
+								<Check className="ml-auto size-3.5" />
+							)}
+						</ComboboxItem>
+					))}
+				</ComboboxList>
+				<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
+			</ComboboxContent>
+		</Combobox>
+	);
+}

package/src/components/primitives/tag-input.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useState, useCallback, KeyboardEvent } from "react";
+import { X } from "@phosphor-icons/react";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/utils";
+import type { TagInputProps } from "./types";
+
+/**
+ * Tag Input Primitive
+ *
+ * An input for creating and managing tags/chips.
+ * Supports validation patterns, max tags, and autocomplete suggestions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TagInput
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Add tags..."
+ * />
+ *
+ * // With suggestions and validation
+ * <TagInput
+ *   value={emails}
+ *   onChange={setEmails}
+ *   suggestions={["user@example.com", "admin@example.com"]}
+ *   pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
+ *   maxTags={5}
+ * />
+ * ```
+ */
+export function TagInput({
+	value,
+	onChange,
+	suggestions = [],
+	maxTags,
+	allowDuplicates = false,
+	pattern,
+	placeholder = "Type and press Enter...",
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: TagInputProps) {
+	const [inputValue, setInputValue] = useState("");
+	const [showSuggestions, setShowSuggestions] = useState(false);
+
+	const addTag = useCallback(
+		(tag: string) => {
+			const trimmed = tag.trim();
+			if (!trimmed) return;
+
+			// Check max tags
+			if (maxTags && value.length >= maxTags) return;
+
+			// Check duplicates
+			if (!allowDuplicates && value.includes(trimmed)) return;
+
+			// Check pattern
+			if (pattern && !pattern.test(trimmed)) return;
+
+			onChange([...value, trimmed]);
+			setInputValue("");
+			setShowSuggestions(false);
+		},
+		[value, onChange, maxTags, allowDuplicates, pattern],
+	);
+
+	const removeTag = useCallback(
+		(index: number) => {
+			if (disabled) return;
+			const newTags = value.filter((_, i) => i !== index);
+			onChange(newTags);
+		},
+		[value, onChange, disabled],
+	);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				addTag(inputValue);
+			} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+				removeTag(value.length - 1);
+			} else if (e.key === "Escape") {
+				setShowSuggestions(false);
+			}
+		},
+		[inputValue, value, addTag, removeTag],
+	);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newValue = e.target.value;
+			setInputValue(newValue);
+			setShowSuggestions(newValue.length > 0 && suggestions.length > 0);
+		},
+		[suggestions],
+	);
+
+	const filteredSuggestions = suggestions.filter(
+		(suggestion) =>
+			suggestion.toLowerCase().includes(inputValue.toLowerCase()) &&
+			(allowDuplicates || !value.includes(suggestion)),
+	);
+
+	const canAddMore = !maxTags || value.length < maxTags;
+
+	return (
+		<div className={cn("relative", className)}>
+			<div
+				className={cn(
+					"flex flex-wrap gap-1.5 min-h-9 w-full border border-input bg-background px-3 py-2",
+					"focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+					ariaInvalid && "border-destructive ring-destructive/20",
+					disabled && "cursor-not-allowed opacity-50",
+				)}
+			>
+				{value.map((tag, index) => (
+					<Badge
+						key={`${tag}-${index}`}
+						variant="secondary"
+						className="gap-1 pr-1"
+					>
+						{tag}
+						{!disabled && (
+							<button
+								type="button"
+								onClick={() => removeTag(index)}
+								className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
+								aria-label={`Remove ${tag}`}
+							>
+								<X className="size-3" />
+							</button>
+						)}
+					</Badge>
+				))}
+				{canAddMore && (
+					<input
+						id={id}
+						type="text"
+						value={inputValue}
+						onChange={handleInputChange}
+						onKeyDown={handleKeyDown}
+						onFocus={() =>
+							setShowSuggestions(
+								inputValue.length > 0 && suggestions.length > 0,
+							)
+						}
+						onBlur={() => {
+							// Delay to allow click on suggestion
+							setTimeout(() => setShowSuggestions(false), 150);
+						}}
+						placeholder={value.length === 0 ? placeholder : undefined}
+						disabled={disabled}
+						aria-invalid={ariaInvalid}
+						className={cn(
+							"flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+							"disabled:cursor-not-allowed",
+						)}
+					/>
+				)}
+			</div>
+
+			{/* Suggestions dropdown */}
+			{showSuggestions && filteredSuggestions.length > 0 && (
+				<div
+					className={cn(
+						"absolute z-50 mt-1 w-full border border-input bg-popover shadow-md",
+						"max-h-[200px] overflow-auto",
+					)}
+				>
+					{filteredSuggestions.map((suggestion, index) => (
+						<button
+							key={suggestion}
+							type="button"
+							onClick={() => addTag(suggestion)}
+							className={cn(
+								"w-full px-3 py-2 text-left text-sm",
+								"hover:bg-accent hover:text-accent-foreground",
+								"focus:bg-accent focus:text-accent-foreground focus:outline-none",
+							)}
+						>
+							{suggestion}
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Helper text for max tags */}
+			{maxTags && (
+				<p className="mt-1 text-xs text-muted-foreground">
+					{value.length} / {maxTags} tags
+				</p>
+			)}
+		</div>
+	);
+}

package/src/components/primitives/text-input.tsx

@@ -0,0 +1,49 @@
+import { Input } from "../ui/input";
+import { cn } from "../../lib/utils";
+import type { TextInputProps } from "./types";
+
+/**
+ * Text Input Primitive
+ *
+ * A basic text input with value/onChange pattern.
+ * Supports different input types: text, email, password, url, tel, search.
+ *
+ * @example
+ * ```tsx
+ * <TextInput
+ *   value={email}
+ *   onChange={setEmail}
+ *   type="email"
+ *   placeholder="Enter email"
+ * />
+ * ```
+ */
+export function TextInput({
+	value,
+	onChange,
+	type = "text",
+	placeholder,
+	disabled,
+	readOnly,
+	maxLength,
+	autoComplete,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: TextInputProps) {
+	return (
+		<Input
+			id={id}
+			type={type}
+			value={value}
+			onChange={(e) => onChange(e.target.value)}
+			placeholder={placeholder}
+			disabled={disabled}
+			readOnly={readOnly}
+			maxLength={maxLength}
+			autoComplete={autoComplete}
+			aria-invalid={ariaInvalid}
+			className={cn(className)}
+		/>
+	);
+}

package/src/components/primitives/textarea-input.tsx

@@ -0,0 +1,46 @@
+import { Textarea } from "../ui/textarea";
+import { cn } from "../../lib/utils";
+import type { TextareaInputProps } from "./types";
+
+/**
+ * Textarea Input Primitive
+ *
+ * A multi-line text input.
+ *
+ * @example
+ * ```tsx
+ * <TextareaInput
+ *   value={description}
+ *   onChange={setDescription}
+ *   rows={4}
+ *   placeholder="Enter description..."
+ * />
+ * ```
+ */
+export function TextareaInput({
+	value,
+	onChange,
+	rows = 3,
+	maxLength,
+	placeholder,
+	disabled,
+	readOnly,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: TextareaInputProps) {
+	return (
+		<Textarea
+			id={id}
+			value={value}
+			onChange={(e) => onChange(e.target.value)}
+			rows={rows}
+			maxLength={maxLength}
+			placeholder={placeholder}
+			disabled={disabled}
+			readOnly={readOnly}
+			aria-invalid={ariaInvalid}
+			className={cn(className)}
+		/>
+	);
+}

package/src/components/primitives/toggle-input.tsx

@@ -0,0 +1,36 @@
+import { Switch } from "../ui/switch";
+import { cn } from "../../lib/utils";
+import type { ToggleInputProps } from "./types";
+
+/**
+ * Toggle Input Primitive
+ *
+ * A switch/toggle for boolean values.
+ *
+ * @example
+ * ```tsx
+ * <ToggleInput
+ *   value={isActive}
+ *   onChange={setIsActive}
+ * />
+ * ```
+ */
+export function ToggleInput({
+	value,
+	onChange,
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: ToggleInputProps) {
+	return (
+		<Switch
+			id={id}
+			checked={value}
+			onCheckedChange={onChange}
+			disabled={disabled}
+			aria-invalid={ariaInvalid}
+			className={cn(className)}
+		/>
+	);
+}