@questpie/admin 0.0.1 → 1.0.0

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

@@ -1,401 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
-import { CalendarBlank, X } from "@phosphor-icons/react";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "../ui/popover";
-import { cn } from "../../lib/utils";
-import type {
-	DateInputProps,
-	DateTimeInputProps,
-	DateRangeInputProps,
-} from "./types";
-
-/**
- * Date Input Primitive
- *
- * A date picker with popover calendar.
- * Uses react-day-picker under the hood.
- *
- * @example
- * ```tsx
- * <DateInput
- *   value={selectedDate}
- *   onChange={setSelectedDate}
- *   placeholder="Select date"
- * />
- * ```
- */
-export function DateInput({
-	value,
-	onChange,
-	minDate,
-	maxDate,
-	format: dateFormat = "PP",
-	placeholder = "Select date",
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: DateInputProps) {
-	const [open, setOpen] = useState(false);
-
-	const handleSelect = (date: Date | undefined) => {
-		onChange(date ?? null);
-		setOpen(false);
-	};
-
-	const handleClear = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		onChange(null);
-	};
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger
-				id={id}
-				disabled={disabled}
-				aria-invalid={ariaInvalid}
-				className={cn(
-					"flex h-9 w-full items-center justify-start gap-2 border border-input bg-background px-3 py-2 text-sm",
-					"hover:bg-accent hover:text-accent-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",
-					!value && "text-muted-foreground",
-					className,
-				)}
-			>
-				<CalendarBlank className="size-4" />
-				<span className="flex-1 text-left">
-					{value ? format(value, dateFormat) : placeholder}
-				</span>
-				{value && !disabled && (
-					<X
-						className="size-4 opacity-50 hover:opacity-100"
-						onClick={handleClear}
-					/>
-				)}
-			</PopoverTrigger>
-			<PopoverContent className="w-auto p-0" align="start">
-				<DayPicker
-					mode="single"
-					selected={value ?? undefined}
-					onSelect={handleSelect}
-					disabled={(date) => {
-						if (minDate && date < minDate) return true;
-						if (maxDate && date > maxDate) return true;
-						return false;
-					}}
-					className="p-3"
-					classNames={{
-						months: "flex flex-col sm:flex-row gap-2",
-						month: "flex flex-col gap-4",
-						month_caption:
-							"flex justify-center pt-1 relative items-center w-full",
-						caption_label: "text-sm font-medium",
-						nav: "flex items-center gap-1",
-						button_previous:
-							"absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						button_next:
-							"absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						month_grid: "w-full border-collapse",
-						weekdays: "flex",
-						weekday: "text-muted-foreground w-8 font-normal text-[0.8rem]",
-						week: "flex w-full mt-2",
-						day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
-						day_button: cn(
-							"size-8 p-0 font-normal",
-							"hover:bg-accent hover:text-accent-foreground",
-							"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						),
-						selected:
-							"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-						today: "bg-accent text-accent-foreground",
-						outside: "text-muted-foreground opacity-50",
-						disabled: "text-muted-foreground opacity-50",
-						hidden: "invisible",
-					}}
-				/>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-/**
- * DateTime Input Primitive
- *
- * A date and time picker.
- *
- * @example
- * ```tsx
- * <DateTimeInput
- *   value={scheduledAt}
- *   onChange={setScheduledAt}
- *   precision="minute"
- * />
- * ```
- */
-export function DateTimeInput({
-	value,
-	onChange,
-	minDate,
-	maxDate,
-	format: dateFormat = "PPp",
-	precision = "minute",
-	placeholder = "Select date and time",
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: DateTimeInputProps) {
-	const [open, setOpen] = useState(false);
-	const [timeValue, setTimeValue] = useState(() => {
-		if (!value) return "";
-		return precision === "second"
-			? format(value, "HH:mm:ss")
-			: format(value, "HH:mm");
-	});
-
-	const handleDateSelect = (date: Date | undefined) => {
-		if (!date) {
-			onChange(null);
-			return;
-		}
-
-		// Preserve existing time if available
-		if (timeValue) {
-			const [hours, minutes, seconds] = timeValue.split(":").map(Number);
-			date.setHours(hours || 0, minutes || 0, seconds || 0);
-		}
-		onChange(date);
-	};
-
-	const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const time = e.target.value;
-		setTimeValue(time);
-
-		if (value && time) {
-			const [hours, minutes, seconds] = time.split(":").map(Number);
-			const newDate = new Date(value);
-			newDate.setHours(hours || 0, minutes || 0, seconds || 0);
-			onChange(newDate);
-		}
-	};
-
-	const handleClear = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		onChange(null);
-		setTimeValue("");
-	};
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger
-				id={id}
-				disabled={disabled}
-				aria-invalid={ariaInvalid}
-				className={cn(
-					"flex h-9 w-full items-center justify-start gap-2 border border-input bg-background px-3 py-2 text-sm",
-					"hover:bg-accent hover:text-accent-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",
-					!value && "text-muted-foreground",
-					className,
-				)}
-			>
-				<CalendarBlank className="size-4" />
-				<span className="flex-1 text-left">
-					{value ? format(value, dateFormat) : placeholder}
-				</span>
-				{value && !disabled && (
-					<X
-						className="size-4 opacity-50 hover:opacity-100"
-						onClick={handleClear}
-					/>
-				)}
-			</PopoverTrigger>
-			<PopoverContent className="w-auto p-0" align="start">
-				<DayPicker
-					mode="single"
-					selected={value ?? undefined}
-					onSelect={handleDateSelect}
-					disabled={(date) => {
-						if (minDate && date < minDate) return true;
-						if (maxDate && date > maxDate) return true;
-						return false;
-					}}
-					className="p-3"
-					classNames={{
-						months: "flex flex-col sm:flex-row gap-2",
-						month: "flex flex-col gap-4",
-						month_caption:
-							"flex justify-center pt-1 relative items-center w-full",
-						caption_label: "text-sm font-medium",
-						nav: "flex items-center gap-1",
-						button_previous:
-							"absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						button_next:
-							"absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						month_grid: "w-full border-collapse",
-						weekdays: "flex",
-						weekday: "text-muted-foreground w-8 font-normal text-[0.8rem]",
-						week: "flex w-full mt-2",
-						day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
-						day_button: cn(
-							"size-8 p-0 font-normal",
-							"hover:bg-accent hover:text-accent-foreground",
-							"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						),
-						selected:
-							"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-						today: "bg-accent text-accent-foreground",
-						outside: "text-muted-foreground opacity-50",
-						disabled: "text-muted-foreground opacity-50",
-						hidden: "invisible",
-					}}
-				/>
-				<div className="border-t border-border p-3">
-					<input
-						type="time"
-						step={precision === "second" ? 1 : 60}
-						value={timeValue}
-						onChange={handleTimeChange}
-						className={cn(
-							"flex h-9 w-full border border-input bg-background px-3 py-2 text-sm",
-							"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						)}
-					/>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-/**
- * Date Range Input Primitive
- *
- * A date range picker for selecting start and end dates.
- *
- * @example
- * ```tsx
- * <DateRangeInput
- *   value={{ start: startDate, end: endDate }}
- *   onChange={setDateRange}
- * />
- * ```
- */
-export function DateRangeInput({
-	value,
-	onChange,
-	minDate,
-	maxDate,
-	placeholder = "Select date range",
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: DateRangeInputProps) {
-	const [open, setOpen] = useState(false);
-
-	const handleSelect = (range: { from?: Date; to?: Date } | undefined) => {
-		onChange({
-			start: range?.from ?? null,
-			end: range?.to ?? null,
-		});
-	};
-
-	const handleClear = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		onChange({ start: null, end: null });
-	};
-
-	const displayValue = () => {
-		if (!value.start && !value.end) return placeholder;
-		if (value.start && value.end) {
-			return `${format(value.start, "PP")} - ${format(value.end, "PP")}`;
-		}
-		if (value.start) return `${format(value.start, "PP")} - ...`;
-		return placeholder;
-	};
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger
-				id={id}
-				disabled={disabled}
-				aria-invalid={ariaInvalid}
-				className={cn(
-					"flex h-9 w-full items-center justify-start gap-2 border border-input bg-background px-3 py-2 text-sm",
-					"hover:bg-accent hover:text-accent-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",
-					!value.start && !value.end && "text-muted-foreground",
-					className,
-				)}
-			>
-				<CalendarBlank className="size-4" />
-				<span className="flex-1 text-left">{displayValue()}</span>
-				{(value.start || value.end) && !disabled && (
-					<X
-						className="size-4 opacity-50 hover:opacity-100"
-						onClick={handleClear}
-					/>
-				)}
-			</PopoverTrigger>
-			<PopoverContent className="w-auto p-0" align="start">
-				<DayPicker
-					mode="range"
-					selected={
-						value.start || value.end
-							? { from: value.start ?? undefined, to: value.end ?? undefined }
-							: undefined
-					}
-					onSelect={handleSelect}
-					numberOfMonths={2}
-					disabled={(date) => {
-						if (minDate && date < minDate) return true;
-						if (maxDate && date > maxDate) return true;
-						return false;
-					}}
-					className="p-3"
-					classNames={{
-						months: "flex flex-col sm:flex-row gap-2",
-						month: "flex flex-col gap-4",
-						month_caption:
-							"flex justify-center pt-1 relative items-center w-full",
-						caption_label: "text-sm font-medium",
-						nav: "flex items-center gap-1",
-						button_previous:
-							"absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						button_next:
-							"absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-						month_grid: "w-full border-collapse",
-						weekdays: "flex",
-						weekday: "text-muted-foreground w-8 font-normal text-[0.8rem]",
-						week: "flex w-full mt-2",
-						day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
-						day_button: cn(
-							"size-8 p-0 font-normal",
-							"hover:bg-accent hover:text-accent-foreground",
-							"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						),
-						selected:
-							"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-						range_start: "rounded-l-md",
-						range_end: "rounded-r-md",
-						range_middle: "bg-accent",
-						today: "bg-accent text-accent-foreground",
-						outside: "text-muted-foreground opacity-50",
-						disabled: "text-muted-foreground opacity-50",
-						hidden: "invisible",
-					}}
-				/>
-			</PopoverContent>
-		</Popover>
-	);
-}

package/src/components/primitives/index.ts

@@ -1,24 +0,0 @@
-// =============================================================================
-// Primitives - Generic UI components with value/onChange pattern
-// =============================================================================
-
-// Types
-export * from "./types";
-
-// Text inputs
-export { TextInput } from "./text-input";
-export { NumberInput } from "./number-input";
-export { TextareaInput } from "./textarea-input";
-
-// Select inputs
-export { SelectInput } from "./select-input";
-
-// Boolean inputs
-export { ToggleInput } from "./toggle-input";
-export { CheckboxInput, CheckboxGroup, RadioGroup } from "./checkbox-input";
-
-// Date inputs
-export { DateInput, DateTimeInput, DateRangeInput } from "./date-input";
-
-// Special inputs
-export { TagInput } from "./tag-input";

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

@@ -1,132 +0,0 @@
-import { Minus, Plus } from "@phosphor-icons/react";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
-import { cn } from "../../lib/utils";
-import type { NumberInputProps } from "./types";
-
-/**
- * Number Input Primitive
- *
- * A number input with optional increment/decrement buttons.
- *
- * @example
- * ```tsx
- * <NumberInput
- *   value={count}
- *   onChange={setCount}
- *   min={0}
- *   max={100}
- *   step={1}
- *   showButtons
- * />
- * ```
- */
-export function NumberInput({
-	value,
-	onChange,
-	min,
-	max,
-	step = 1,
-	showButtons = false,
-	placeholder,
-	disabled,
-	readOnly,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: NumberInputProps) {
-	const handleChange = (newValue: number | null) => {
-		if (newValue === null) {
-			onChange(null);
-			return;
-		}
-
-		let clampedValue = newValue;
-		if (min !== undefined && clampedValue < min) clampedValue = min;
-		if (max !== undefined && clampedValue > max) clampedValue = max;
-
-		onChange(clampedValue);
-	};
-
-	const increment = () => {
-		const current = value ?? 0;
-		handleChange(current + step);
-	};
-
-	const decrement = () => {
-		const current = value ?? 0;
-		handleChange(current - step);
-	};
-
-	if (showButtons) {
-		return (
-			<div className={cn("flex items-center gap-1", className)}>
-				<Button
-					type="button"
-					variant="outline"
-					size="icon-sm"
-					onClick={decrement}
-					disabled={disabled || (min !== undefined && (value ?? 0) <= min)}
-					tabIndex={-1}
-				>
-					<Minus className="size-3" />
-				</Button>
-				<Input
-					id={id}
-					type="number"
-					value={value ?? ""}
-					onChange={(e) => {
-						const val = e.target.value;
-						if (val === "") {
-							handleChange(null);
-						} else {
-							handleChange(Number(val));
-						}
-					}}
-					placeholder={placeholder}
-					disabled={disabled}
-					readOnly={readOnly}
-					min={min}
-					max={max}
-					step={step}
-					aria-invalid={ariaInvalid}
-					className="text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-				/>
-				<Button
-					type="button"
-					variant="outline"
-					size="icon-sm"
-					onClick={increment}
-					disabled={disabled || (max !== undefined && (value ?? 0) >= max)}
-					tabIndex={-1}
-				>
-					<Plus className="size-3" />
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<Input
-			id={id}
-			type="number"
-			value={value ?? ""}
-			onChange={(e) => {
-				const val = e.target.value;
-				if (val === "") {
-					handleChange(null);
-				} else {
-					handleChange(Number(val));
-				}
-			}}
-			placeholder={placeholder}
-			disabled={disabled}
-			readOnly={readOnly}
-			min={min}
-			max={max}
-			step={step}
-			aria-invalid={ariaInvalid}
-			className={cn(className)}
-		/>
-	);
-}