@questpie/admin 0.0.1

package/dist/components/fields/select-field.mjs

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { SelectInput } from "../primitives/select-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/select-field.tsx
+function SelectField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, options, loadOptions, multiple, clearable, maxSelections, emptyMessage }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(SelectInput, {
+				id: name,
+				value: field.value ?? (multiple ? [] : null),
+				onChange: field.onChange,
+				options,
+				loadOptions,
+				multiple,
+				clearable,
+				maxSelections,
+				emptyMessage,
+				placeholder,
+				disabled,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { SelectField };

package/dist/components/fields/switch-field.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { ToggleInput } from "../primitives/toggle-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/switch-field.tsx
+function SwitchField({ name, label, description, required, disabled, localized, locale, control, className }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(ToggleInput, {
+				id: name,
+				value: !!field.value,
+				onChange: field.onChange,
+				disabled,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { SwitchField };

package/dist/components/fields/text-field.mjs

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { TextInput } from "../primitives/text-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/text-field.tsx
+function TextField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, type = "text", maxLength, autoComplete }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(TextInput, {
+				id: name,
+				value: field.value ?? "",
+				onChange: field.onChange,
+				type,
+				placeholder,
+				disabled,
+				maxLength,
+				autoComplete,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { TextField };

package/dist/components/fields/textarea-field.mjs

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { TextareaInput } from "../primitives/textarea-input";
+import { Controller } from "react-hook-form";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+
+//#region src/components/fields/textarea-field.tsx
+function TextareaField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, rows, maxLength, autoResize }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control: useResolvedControl(control),
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			required,
+			disabled,
+			localized,
+			locale,
+			error: fieldState.error?.message,
+			children: /* @__PURE__ */ jsx(TextareaInput, {
+				id: name,
+				value: field.value ?? "",
+				onChange: field.onChange,
+				placeholder,
+				disabled,
+				rows,
+				maxLength,
+				autoResize,
+				"aria-invalid": !!fieldState.error,
+				className
+			})
+		})
+	});
+}
+
+//#endregion
+export { TextareaField };

package/dist/components/index.mjs

@@ -0,0 +1,59 @@
+import { AdminApp } from "./admin-app";
+
+export * from "../views"
+
+export * from "./fields"
+
+export * from "./ui/accordion"
+
+export * from "./ui/avatar"
+
+export * from "./ui/badge"
+
+export * from "./ui/button"
+
+export * from "./ui/card"
+
+export * from "./ui/checkbox"
+
+export * from "./ui/combobox"
+
+export * from "./ui/dialog"
+
+export * from "./ui/dropdown-menu"
+
+export * from "./ui/field"
+
+export * from "./ui/input"
+
+export * from "./ui/input-group"
+
+export * from "./ui/label"
+
+export * from "./ui/popover"
+
+export * from "./ui/scroll-area"
+
+export * from "./ui/select"
+
+export * from "./ui/separator"
+
+export * from "./ui/sheet"
+
+export * from "./ui/sidebar"
+
+export * from "./ui/skeleton"
+
+export * from "./ui/spinner"
+
+export * from "./ui/switch"
+
+export * from "./ui/table"
+
+export * from "./ui/tabs"
+
+export * from "./ui/textarea"
+
+export * from "./ui/tooltip"
+
+export { AdminApp };

package/dist/components/primitives/checkbox-input.mjs

@@ -0,0 +1,127 @@
+"use client";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "../ui/checkbox";
+import { cn } from "../../lib/utils";
+
+//#region src/components/primitives/checkbox-input.tsx
+/**
+* Checkbox Input Primitive
+*
+* A single checkbox with value/onChange pattern.
+*
+* @example
+* ```tsx
+* <CheckboxInput
+*   value={isAccepted}
+*   onChange={setIsAccepted}
+* />
+* ```
+*/
+function CheckboxInput({ value, onChange, disabled, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		id,
+		checked: value,
+		onCheckedChange: (checked) => onChange(checked === true),
+		disabled,
+		"aria-invalid": ariaInvalid,
+		className: cn(className)
+	});
+}
+/**
+* Checkbox Group Primitive
+*
+* A group of checkboxes for multi-selection.
+* Returns an array of selected values.
+*
+* @example
+* ```tsx
+* <CheckboxGroup
+*   value={selectedCategories}
+*   onChange={setSelectedCategories}
+*   options={[
+*     { value: "news", label: "News" },
+*     { value: "blog", label: "Blog" },
+*     { value: "tutorial", label: "Tutorial" },
+*   ]}
+*   orientation="vertical"
+* />
+* ```
+*/
+function CheckboxGroup({ value, onChange, options, orientation = "vertical", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const handleChange = (optionValue, checked) => {
+		if (checked) onChange([...value, optionValue]);
+		else onChange(value.filter((v) => v !== optionValue));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		role: "group",
+		"aria-invalid": ariaInvalid,
+		className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap", className),
+		children: options.map((option) => {
+			const optionId = `${id}-${String(option.value)}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2", option.disabled || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+				children: [/* @__PURE__ */ jsx(CheckboxInput, {
+					id: optionId,
+					value: value.includes(option.value),
+					onChange: (checked) => handleChange(option.value, checked),
+					disabled: option.disabled || disabled
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: optionId,
+					className: "text-sm cursor-pointer",
+					children: option.label
+				})]
+			}, String(option.value));
+		})
+	});
+}
+/**
+* Radio Group Primitive
+*
+* A group of radio buttons for single selection.
+* Returns the selected value or null.
+*
+* @example
+* ```tsx
+* <RadioGroup
+*   value={selectedPriority}
+*   onChange={setSelectedPriority}
+*   options={[
+*     { value: "low", label: "Low" },
+*     { value: "medium", label: "Medium" },
+*     { value: "high", label: "High" },
+*   ]}
+* />
+* ```
+*/
+function RadioGroup({ value, onChange, options, orientation = "vertical", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		role: "radiogroup",
+		"aria-invalid": ariaInvalid,
+		className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap", className),
+		children: options.map((option) => {
+			const optionId = `${id}-${String(option.value)}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2", option.disabled || disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					id: optionId,
+					name: id,
+					checked: value === option.value,
+					onChange: () => onChange(option.value),
+					disabled: option.disabled || disabled,
+					className: cn("size-4 shrink-0 accent-primary", "disabled:cursor-not-allowed disabled:opacity-50")
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: optionId,
+					className: "text-sm cursor-pointer",
+					children: option.label
+				})]
+			}, String(option.value));
+		})
+	});
+}
+
+//#endregion
+export { CheckboxGroup, CheckboxInput, RadioGroup };

package/dist/components/primitives/date-input.mjs

@@ -0,0 +1,303 @@
+"use client";
+
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { cn } from "../../lib/utils";
+import { DayPicker } from "react-day-picker";
+import { format } from "date-fns";
+import { CalendarBlank, X } from "@phosphor-icons/react";
+
+//#region src/components/primitives/date-input.tsx
+/**
+* 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"
+* />
+* ```
+*/
+function DateInput({ value, onChange, minDate, maxDate, format: dateFormat = "PP", placeholder = "Select date", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const [open, setOpen] = useState(false);
+	const handleSelect = (date) => {
+		onChange(date ?? null);
+		setOpen(false);
+	};
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onChange(null);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			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),
+			children: [
+				/* @__PURE__ */ jsx(CalendarBlank, { className: "size-4" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: value ? format(value, dateFormat) : placeholder
+				}),
+				value && !disabled && /* @__PURE__ */ jsx(X, {
+					className: "size-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DayPicker, {
+				mode: "single",
+				selected: value ?? void 0,
+				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"
+				}
+			})
+		})]
+	});
+}
+/**
+* DateTime Input Primitive
+*
+* A date and time picker.
+*
+* @example
+* ```tsx
+* <DateTimeInput
+*   value={scheduledAt}
+*   onChange={setScheduledAt}
+*   precision="minute"
+* />
+* ```
+*/
+function DateTimeInput({ value, onChange, minDate, maxDate, format: dateFormat = "PPp", precision = "minute", placeholder = "Select date and time", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	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) => {
+		if (!date) {
+			onChange(null);
+			return;
+		}
+		if (timeValue) {
+			const [hours, minutes, seconds] = timeValue.split(":").map(Number);
+			date.setHours(hours || 0, minutes || 0, seconds || 0);
+		}
+		onChange(date);
+	};
+	const handleTimeChange = (e) => {
+		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) => {
+		e.stopPropagation();
+		onChange(null);
+		setTimeValue("");
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			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),
+			children: [
+				/* @__PURE__ */ jsx(CalendarBlank, { className: "size-4" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: value ? format(value, dateFormat) : placeholder
+				}),
+				value && !disabled && /* @__PURE__ */ jsx(X, {
+					className: "size-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsx(DayPicker, {
+				mode: "single",
+				selected: value ?? void 0,
+				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"
+				}
+			}), /* @__PURE__ */ jsx("div", {
+				className: "border-t border-border p-3",
+				children: /* @__PURE__ */ jsx("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")
+				})
+			})]
+		})]
+	});
+}
+/**
+* Date Range Input Primitive
+*
+* A date range picker for selecting start and end dates.
+*
+* @example
+* ```tsx
+* <DateRangeInput
+*   value={{ start: startDate, end: endDate }}
+*   onChange={setDateRange}
+* />
+* ```
+*/
+function DateRangeInput({ value, onChange, minDate, maxDate, placeholder = "Select date range", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const [open, setOpen] = useState(false);
+	const handleSelect = (range) => {
+		onChange({
+			start: range?.from ?? null,
+			end: range?.to ?? null
+		});
+	};
+	const handleClear = (e) => {
+		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 /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			id,
+			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),
+			children: [
+				/* @__PURE__ */ jsx(CalendarBlank, { className: "size-4" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: displayValue()
+				}),
+				(value.start || value.end) && !disabled && /* @__PURE__ */ jsx(X, {
+					className: "size-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DayPicker, {
+				mode: "range",
+				selected: value.start || value.end ? {
+					from: value.start ?? void 0,
+					to: value.end ?? void 0
+				} : void 0,
+				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"
+				}
+			})
+		})]
+	});
+}
+
+//#endregion
+export { DateInput, DateRangeInput, DateTimeInput };

package/dist/components/primitives/index.mjs

@@ -0,0 +1,12 @@
+import { TextInput } from "./text-input";
+import { NumberInput } from "./number-input";
+import { TextareaInput } from "./textarea-input";
+import { SelectInput } from "./select-input";
+import { ToggleInput } from "./toggle-input";
+import { CheckboxGroup, CheckboxInput, RadioGroup } from "./checkbox-input";
+import { DateInput, DateRangeInput, DateTimeInput } from "./date-input";
+import { TagInput } from "./tag-input";
+
+export * from "./types"
+
+export { CheckboxGroup, CheckboxInput, DateInput, DateRangeInput, DateTimeInput, NumberInput, RadioGroup, SelectInput, TagInput, TextInput, TextareaInput, ToggleInput };