@questpie/admin 0.0.1 → 1.0.1

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

@@ -1,41 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,127 +0,0 @@
-"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

@@ -1,303 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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 };