@questpie/admin 0.0.1

package/src/components/fields/select-field.tsx

@@ -0,0 +1,61 @@
+import { Controller } from "react-hook-form";
+import { SelectInput } from "../primitives/select-input";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import type { SelectFieldProps } from "./field-types";
+
+export function SelectField<TValue extends string = string>({
+	name,
+	label,
+	description,
+	placeholder,
+	required,
+	disabled,
+	localized,
+	locale,
+	control,
+	className,
+	options,
+	loadOptions,
+	multiple,
+	clearable,
+	maxSelections,
+	emptyMessage,
+}: SelectFieldProps<TValue>) {
+	const resolvedControl = useResolvedControl(control);
+
+	return (
+		<Controller
+			name={name}
+			control={resolvedControl}
+			render={({ field, fieldState }) => (
+				<FieldWrapper
+					name={name}
+					label={label}
+					description={description}
+					required={required}
+					disabled={disabled}
+					localized={localized}
+					locale={locale}
+					error={fieldState.error?.message}
+				>
+					<SelectInput<TValue>
+						id={name}
+						value={field.value ?? (multiple ? [] : null)}
+						onChange={field.onChange}
+						options={options}
+						loadOptions={loadOptions}
+						multiple={multiple}
+						clearable={clearable}
+						maxSelections={maxSelections}
+						emptyMessage={emptyMessage}
+						placeholder={placeholder}
+						disabled={disabled}
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}

package/src/components/fields/switch-field.tsx

@@ -0,0 +1,47 @@
+import { Controller } from "react-hook-form";
+import { ToggleInput } from "../primitives/toggle-input";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import type { BooleanFieldProps } from "./field-types";
+
+export function SwitchField({
+	name,
+	label,
+	description,
+	required,
+	disabled,
+	localized,
+	locale,
+	control,
+	className,
+}: BooleanFieldProps) {
+	const resolvedControl = useResolvedControl(control);
+
+	return (
+		<Controller
+			name={name}
+			control={resolvedControl}
+			render={({ field, fieldState }) => (
+				<FieldWrapper
+					name={name}
+					label={label}
+					description={description}
+					required={required}
+					disabled={disabled}
+					localized={localized}
+					locale={locale}
+					error={fieldState.error?.message}
+				>
+					<ToggleInput
+						id={name}
+						value={!!field.value}
+						onChange={field.onChange}
+						disabled={disabled}
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}

package/src/components/fields/text-field.tsx

@@ -0,0 +1,55 @@
+import { Controller } from "react-hook-form";
+import { TextInput } from "../primitives/text-input";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import type { TextFieldProps } from "./field-types";
+
+export function TextField({
+	name,
+	label,
+	description,
+	placeholder,
+	required,
+	disabled,
+	localized,
+	locale,
+	control,
+	className,
+	type = "text",
+	maxLength,
+	autoComplete,
+}: TextFieldProps) {
+	const resolvedControl = useResolvedControl(control);
+
+	return (
+		<Controller
+			name={name}
+			control={resolvedControl}
+			render={({ field, fieldState }) => (
+				<FieldWrapper
+					name={name}
+					label={label}
+					description={description}
+					required={required}
+					disabled={disabled}
+					localized={localized}
+					locale={locale}
+					error={fieldState.error?.message}
+				>
+					<TextInput
+						id={name}
+						value={field.value ?? ""}
+						onChange={field.onChange}
+						type={type}
+						placeholder={placeholder}
+						disabled={disabled}
+						maxLength={maxLength}
+						autoComplete={autoComplete}
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}

package/src/components/fields/textarea-field.tsx

@@ -0,0 +1,55 @@
+import { Controller } from "react-hook-form";
+import { TextareaInput } from "../primitives/textarea-input";
+import { FieldWrapper } from "./field-wrapper";
+import { useResolvedControl } from "./field-utils";
+import type { TextareaFieldProps } from "./field-types";
+
+export function TextareaField({
+	name,
+	label,
+	description,
+	placeholder,
+	required,
+	disabled,
+	localized,
+	locale,
+	control,
+	className,
+	rows,
+	maxLength,
+	autoResize,
+}: TextareaFieldProps) {
+	const resolvedControl = useResolvedControl(control);
+
+	return (
+		<Controller
+			name={name}
+			control={resolvedControl}
+			render={({ field, fieldState }) => (
+				<FieldWrapper
+					name={name}
+					label={label}
+					description={description}
+					required={required}
+					disabled={disabled}
+					localized={localized}
+					locale={locale}
+					error={fieldState.error?.message}
+				>
+					<TextareaInput
+						id={name}
+						value={field.value ?? ""}
+						onChange={field.onChange}
+						placeholder={placeholder}
+						disabled={disabled}
+						rows={rows}
+						maxLength={maxLength}
+						autoResize={autoResize}
+						aria-invalid={!!fieldState.error}
+						className={className}
+					/>
+				</FieldWrapper>
+			)}
+		/>
+	);
+}

package/src/components/index.ts

@@ -0,0 +1,40 @@
+// Re-export all shadcn UI components
+
+// MAIN ENTRY POINT
+export { AdminApp } from "./admin-app";
+export type { AdminAppProps } from "./admin-app";
+
+// View components - re-export from new views directory
+// @deprecated Import from '@questpie/admin/views' instead
+export * from "../views";
+
+// Field components (RelationSelect, RelationPicker, etc.)
+export * from "./fields";
+
+// UI components (only export existing ones)
+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";

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

@@ -0,0 +1,193 @@
+"use client";
+
+import { Checkbox } from "../ui/checkbox";
+import { cn } from "../../lib/utils";
+import type {
+	CheckboxInputProps,
+	CheckboxGroupProps,
+	RadioGroupProps,
+} from "./types";
+
+/**
+ * Checkbox Input Primitive
+ *
+ * A single checkbox with value/onChange pattern.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxInput
+ *   value={isAccepted}
+ *   onChange={setIsAccepted}
+ * />
+ * ```
+ */
+export function CheckboxInput({
+	value,
+	onChange,
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: CheckboxInputProps) {
+	return (
+		<Checkbox
+			id={id}
+			checked={value}
+			onCheckedChange={(checked) => onChange(checked === true)}
+			disabled={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"
+ * />
+ * ```
+ */
+export function CheckboxGroup<TValue extends string = string>({
+	value,
+	onChange,
+	options,
+	orientation = "vertical",
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: CheckboxGroupProps<TValue>) {
+	const handleChange = (optionValue: TValue, checked: boolean) => {
+		if (checked) {
+			onChange([...value, optionValue]);
+		} else {
+			onChange(value.filter((v) => v !== optionValue));
+		}
+	};
+
+	return (
+		<div
+			id={id}
+			role="group"
+			aria-invalid={ariaInvalid}
+			className={cn(
+				"flex gap-3",
+				orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+				className,
+			)}
+		>
+			{options.map((option) => {
+				const optionId = `${id}-${String(option.value)}`;
+				return (
+					<div
+						key={String(option.value)}
+						className={cn(
+							"flex items-center gap-2",
+							option.disabled || disabled
+								? "opacity-50 cursor-not-allowed"
+								: "cursor-pointer",
+						)}
+					>
+						<CheckboxInput
+							id={optionId}
+							value={value.includes(option.value)}
+							onChange={(checked) => handleChange(option.value, checked)}
+							disabled={option.disabled || disabled}
+						/>
+						<label htmlFor={optionId} className="text-sm cursor-pointer">
+							{option.label}
+						</label>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+/**
+ * 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" },
+ *   ]}
+ * />
+ * ```
+ */
+export function RadioGroup<TValue extends string = string>({
+	value,
+	onChange,
+	options,
+	orientation = "vertical",
+	disabled,
+	className,
+	id,
+	"aria-invalid": ariaInvalid,
+}: RadioGroupProps<TValue>) {
+	return (
+		<div
+			id={id}
+			role="radiogroup"
+			aria-invalid={ariaInvalid}
+			className={cn(
+				"flex gap-3",
+				orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+				className,
+			)}
+		>
+			{options.map((option) => {
+				const optionId = `${id}-${String(option.value)}`;
+				return (
+					<div
+						key={String(option.value)}
+						className={cn(
+							"flex items-center gap-2",
+							option.disabled || disabled
+								? "opacity-50 cursor-not-allowed"
+								: "cursor-pointer",
+						)}
+					>
+						<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",
+							)}
+						/>
+						<label htmlFor={optionId} className="text-sm cursor-pointer">
+							{option.label}
+						</label>
+					</div>
+				);
+			})}
+		</div>
+	);
+}