@classytic/fluid 0.2.4 → 0.3.2

package/dist/compact.mjs

@@ -0,0 +1,892 @@
+"use client";
+
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, memo, useContext, useId, useMemo, useRef, useState } from "react";
+import { Check, Minus, Plus, Wand2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from "@/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Controller } from "react-hook-form";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+//#region src/components/compact/field.tsx
+const FieldContext = createContext(null);
+/**
+* Field wrapper — provides context (id, disabled, invalid) and
+* top padding so the floating label has room above the border.
+*
+* Emits `data-slot="field"`, `data-disabled`, `data-invalid` to match
+* the shadcn/ui Field primitive so consuming apps can target via CSS.
+*/
+const Root = memo(function FieldRoot({ children, className, disabled = false, invalid = false }) {
+	const id = useId();
+	const value = useMemo(() => ({
+		id,
+		disabled,
+		invalid
+	}), [
+		id,
+		disabled,
+		invalid
+	]);
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			"data-disabled": disabled || void 0,
+			"data-invalid": invalid || void 0,
+			className: cn("w-full pt-3", className),
+			children
+		})
+	});
+});
+/**
+* Animated floating label — rests inside the input when empty,
+* floats up to the border on focus or when the field has a value.
+*
+* The parent `div.group` must set `data-floated` when the field
+* has a value so the label stays floated after blur.
+*
+* Emits `data-slot="field-label"` to match shadcn/ui FieldLabel.
+*/
+const Label = memo(function FieldLabel({ children, className }) {
+	const ctx = useContext(FieldContext);
+	return /* @__PURE__ */ jsx("label", {
+		htmlFor: ctx?.id,
+		"data-slot": "field-label",
+		className: cn("absolute left-3 z-10", "pointer-events-none select-none whitespace-nowrap", "origin-[0] transition-all duration-200 ease-out", "top-1/2 -translate-y-1/2", "text-sm text-muted-foreground", "group-focus-within:top-0 group-focus-within:-translate-y-1/2", "group-focus-within:text-xs group-focus-within:font-medium", "group-focus-within:bg-[var(--compact-field-bg,var(--color-card))] group-focus-within:px-1.5", "group-focus-within:text-primary", "group-data-[floated]:top-0 group-data-[floated]:-translate-y-1/2", "group-data-[floated]:text-xs group-data-[floated]:font-medium", "group-data-[floated]:bg-[var(--compact-field-bg,var(--color-card))] group-data-[floated]:px-1.5", ctx?.disabled && "opacity-60", ctx?.invalid && "text-destructive group-focus-within:text-destructive", className),
+		children
+	});
+});
+const Error = memo(function FieldError({ children, className }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-[11px] text-destructive mt-1.5 pl-3", className),
+		children
+	});
+});
+/**
+* Helper / description text below the input control.
+*
+* Emits `data-slot="field-description"` to match shadcn/ui FieldDescription.
+*/
+const Description = memo(function FieldDescription({ children, className }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-[11px] text-muted-foreground mt-1.5 pl-3", className),
+		children
+	});
+});
+const Icon = memo(function FieldIcon({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10", "text-muted-foreground", className),
+		children
+	});
+});
+const Field = {
+	Root,
+	Label,
+	Error,
+	Description,
+	Icon
+};
+/**
+* Material-style focus: clean border + outline using the `ring` token
+* to stay consistent with the base Input primitive.
+*
+* Use on standalone `<Input>` / `<Textarea>` inside compact fields.
+*/
+const COMPACT_FOCUS = "focus-visible:ring-0 focus-visible:border-ring focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring";
+/**
+* Same focus style but scoped to InputGroup container.
+* Targets the inner `[data-slot=input-group-control]` to override
+* InputGroup's default `ring-3` glow with a clean outline.
+*/
+const INPUT_GROUP_FOCUS = "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-0 has-[[data-slot=input-group-control]:focus-visible]:outline has-[[data-slot=input-group-control]:focus-visible]:outline-1 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1 has-[[data-slot=input-group-control]:focus-visible]:outline-ring";
+/**
+* Error variant of COMPACT_FOCUS — used when field has validation error.
+*/
+const COMPACT_FOCUS_ERROR = "border-destructive focus-visible:border-destructive focus-visible:outline-destructive";
+/**
+* Same as COMPACT_FOCUS but using `focus:` instead of `focus-visible:`.
+* SelectTrigger is a button — buttons use `focus:` in shadcn/ui.
+*/
+const COMPACT_SELECT_FOCUS = "focus:ring-0 focus:border-ring focus:outline focus:outline-1 focus:-outline-offset-1 focus:outline-ring";
+const COMPACT_SELECT_FOCUS_ERROR = "border-destructive focus:border-destructive focus:outline-destructive";
+
+//#endregion
+//#region src/components/compact/compact-input.tsx
+/**
+* CompactInput - Enhanced form input with InputGroup support
+*
+* Features:
+* - Floating label design
+* - InputGroup support with icons, buttons, and text addons
+* - Controller integration for react-hook-form
+* - Direct usage without form
+*/
+function CompactInput({ control, name, description, required, label, placeholder, disabled, type = "text", addonLeft, addonRight, className, inputClassName, onValueChange, value, onChange, error, autoComplete, autoFocus, maxLength, minLength, max, min, pattern, readOnly, step, inputMode, enterKeyHint, ref, ...props }) {
+	const hasInputGroup = addonLeft || addonRight;
+	const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldError) => {
+		const inputProps = {
+			ref,
+			id: name,
+			name,
+			type,
+			disabled: isDisabled,
+			placeholder: label ? void 0 : placeholder,
+			value: fieldValue || "",
+			onChange: (e) => {
+				const newValue = e.target.value;
+				fieldOnChange?.(newValue);
+				onValueChange?.(newValue);
+			},
+			className: cn("h-11 text-sm dark:bg-transparent", COMPACT_FOCUS, fieldError && COMPACT_FOCUS_ERROR, inputClassName),
+			autoComplete,
+			autoFocus,
+			maxLength,
+			minLength,
+			max,
+			min,
+			pattern,
+			readOnly,
+			step,
+			inputMode,
+			enterKeyHint,
+			...props
+		};
+		if (hasInputGroup) return /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn("h-11", INPUT_GROUP_FOCUS),
+			children: [
+				addonLeft && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-start",
+					children: addonLeft
+				}),
+				/* @__PURE__ */ jsx(InputGroupInput, { ...inputProps }),
+				addonRight && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: addonRight
+				})
+			]
+		});
+		return /* @__PURE__ */ jsx(Input, { ...inputProps });
+	};
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			disabled,
+			invalid: !!fieldState?.error,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative group",
+					"data-floated": !!field.value || void 0,
+					children: [label && /* @__PURE__ */ jsx(Field.Label, {
+						className: addonLeft ? "left-9 group-focus-within:left-3 group-data-[floated]:left-3" : void 0,
+						children: label
+					}), renderInput(field.value, field.onChange, disabled, fieldState?.error?.message)]
+				}),
+				fieldState?.error && /* @__PURE__ */ jsx(Field.Error, { children: fieldState.error.message }),
+				/* @__PURE__ */ jsx(Field.Description, { children: description })
+			]
+		})
+	});
+	const handleDirectChange = (newValue) => {
+		onChange?.({ target: { value: newValue } });
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		disabled,
+		invalid: !!error,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative group",
+				"data-floated": !!value || void 0,
+				children: [label && /* @__PURE__ */ jsx(Field.Label, {
+					className: addonLeft ? "left-9 group-focus-within:left-3 group-data-[floated]:left-3" : void 0,
+					children: label
+				}), renderInput(value, handleDirectChange, disabled, error)]
+			}),
+			error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+			/* @__PURE__ */ jsx(Field.Description, { children: description })
+		]
+	});
+}
+
+//#endregion
+//#region src/components/compact/compact-textarea.tsx
+/**
+* CompactTextarea - Enhanced textarea with InputGroup support
+*
+* Features:
+* - Floating label design
+* - InputGroup support with addons
+* - Character counter with maxLength
+* - Controller integration for react-hook-form
+* - Direct usage without form
+*/
+function CompactTextarea({ control, name, description, required, label, placeholder, disabled, rows = 3, addonLeft, addonRight, className, inputClassName, onValueChange, value, onChange, error, cols, wrap, autoComplete, autoFocus, maxLength, minLength, readOnly, spellCheck, ref, ...props }) {
+	const hasInputGroup = addonLeft || addonRight;
+	const renderTextarea = (fieldValue, fieldOnChange, isDisabled, fieldError) => {
+		const currentCharCount = fieldValue?.length || 0;
+		const textareaProps = {
+			ref,
+			id: name,
+			name,
+			disabled: isDisabled,
+			placeholder: label ? void 0 : placeholder,
+			rows,
+			value: fieldValue || "",
+			onChange: (e) => {
+				const newValue = e.target.value;
+				fieldOnChange?.(newValue);
+				onValueChange?.(newValue);
+			},
+			className: cn("resize-none pt-3 text-sm dark:bg-transparent", COMPACT_FOCUS, fieldError && COMPACT_FOCUS_ERROR, inputClassName),
+			cols,
+			wrap,
+			autoComplete,
+			autoFocus,
+			maxLength,
+			minLength,
+			readOnly,
+			spellCheck,
+			...props
+		};
+		if (hasInputGroup) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+			className: INPUT_GROUP_FOCUS,
+			children: [
+				addonLeft && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "block-start",
+					children: addonLeft
+				}),
+				/* @__PURE__ */ jsx(InputGroupTextarea, { ...textareaProps }),
+				addonRight && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "block-end",
+					children: addonRight
+				})
+			]
+		}), maxLength && currentCharCount > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "text-xs text-muted-foreground mt-1.5 text-right",
+			children: [
+				currentCharCount,
+				"/",
+				maxLength
+			]
+		})] });
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Textarea, { ...textareaProps }), maxLength && currentCharCount > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "text-xs text-muted-foreground mt-1.5 text-right",
+			children: [
+				currentCharCount,
+				"/",
+				maxLength
+			]
+		})] });
+	};
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			disabled,
+			invalid: !!fieldState?.error,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative group",
+					"data-floated": !!field.value || void 0,
+					children: [label && /* @__PURE__ */ jsx(Field.Label, {
+						className: "top-3 translate-y-0 group-focus-within:top-0 group-focus-within:-translate-y-1/2 group-data-[floated]:top-0 group-data-[floated]:-translate-y-1/2",
+						children: label
+					}), renderTextarea(field.value, field.onChange, disabled, fieldState?.error?.message)]
+				}),
+				fieldState?.error && /* @__PURE__ */ jsx(Field.Error, { children: fieldState.error.message }),
+				/* @__PURE__ */ jsx(Field.Description, { children: description })
+			]
+		})
+	});
+	const handleDirectChange = (newValue) => {
+		onChange?.({ target: { value: newValue } });
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		disabled,
+		invalid: !!error,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative group",
+				"data-floated": !!value || void 0,
+				children: [label && /* @__PURE__ */ jsx(Field.Label, {
+					className: "top-3 translate-y-0 group-focus-within:top-0 group-focus-within:-translate-y-1/2 group-data-[floated]:top-0 group-data-[floated]:-translate-y-1/2",
+					children: label
+				}), renderTextarea(value, handleDirectChange, disabled, error)]
+			}),
+			error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+			/* @__PURE__ */ jsx(Field.Description, { children: description })
+		]
+	});
+}
+
+//#endregion
+//#region src/components/compact/compact-select.tsx
+/**
+* CompactSelect - Simple, clean select dropdown
+*
+* @example
+* <CompactSelect
+*   label="Status"
+*   items={[
+*     { value: "active", label: "Active" },
+*     { value: "inactive", label: "Inactive" }
+*   ]}
+* />
+*/
+function CompactSelect({ control, name, description, required, label, placeholder = "Select option", disabled, items = [], className, onValueChange, value, error, ref, ...props }) {
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field.Root, {
+			disabled,
+			invalid: !!fieldState?.error,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative group",
+					"data-floated": !!field.value || void 0,
+					children: [label && /* @__PURE__ */ jsx(Field.Label, { children: label }), /* @__PURE__ */ jsxs(Select, {
+						value: field.value,
+						onValueChange: (val) => {
+							field.onChange(val);
+							onValueChange?.(val);
+						},
+						disabled,
+						...props,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							ref,
+							id: name,
+							className: cn("w-full data-[size=default]:h-11 text-sm dark:bg-transparent", COMPACT_SELECT_FOCUS, fieldState?.error && COMPACT_SELECT_FOCUS_ERROR, className),
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "" })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+							value: item.value,
+							children: item.label
+						}, item.value)) })]
+					})]
+				}),
+				fieldState?.error && /* @__PURE__ */ jsx(Field.Error, { children: fieldState.error.message }),
+				/* @__PURE__ */ jsx(Field.Description, { children: description })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		disabled,
+		invalid: !!error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative group",
+			"data-floated": !!value || void 0,
+			children: [label && /* @__PURE__ */ jsx(Field.Label, { children: label }), /* @__PURE__ */ jsxs(Select, {
+				value,
+				onValueChange,
+				disabled,
+				...props,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					ref,
+					className: cn("w-full data-[size=default]:h-11 text-sm dark:bg-transparent", COMPACT_SELECT_FOCUS, error && COMPACT_SELECT_FOCUS_ERROR, className),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "" })
+				}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+					value: item.value,
+					children: item.label
+				}, item.value)) })]
+			})]
+		}), error && /* @__PURE__ */ jsx(Field.Error, { children: error })]
+	});
+}
+
+//#endregion
+//#region src/components/compact/compact-number-input.tsx
+/**
+* CompactNumberInput - A space-efficient number input with optional increment/decrement buttons
+*
+* Features:
+* - Floating label design
+* - Optional increment/decrement buttons
+* - Support for min/max/step values
+* - Prefix/suffix support
+* - Form integration via control prop
+* - Direct usage without form
+*/
+function CompactNumberInput({ control, name, description, required, label, placeholder, disabled, min = 0, max, step = 1, prefix, suffix, showButtons = false, buttonVariant = "ghost", className, inputClassName, labelClassName, containerClassName, onValueChange, value, defaultValue, onChange, error, ref, ...props }) {
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(CompactNumberInputInternal, {
+			ref,
+			label,
+			placeholder,
+			disabled,
+			min,
+			max,
+			step,
+			prefix,
+			suffix,
+			showButtons,
+			buttonVariant,
+			className,
+			inputClassName,
+			labelClassName,
+			containerClassName,
+			error: fieldState?.error?.message,
+			value: field.value ?? "",
+			onChange: (val) => {
+				field.onChange(val);
+				onValueChange?.(val);
+			},
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(CompactNumberInputInternal, {
+		ref,
+		label,
+		placeholder,
+		disabled,
+		min,
+		max,
+		step,
+		prefix,
+		suffix,
+		showButtons,
+		buttonVariant,
+		className,
+		inputClassName,
+		labelClassName,
+		containerClassName,
+		error,
+		value: value ?? "",
+		defaultValue,
+		onChange,
+		onValueChange,
+		...props
+	});
+}
+function CompactNumberInputInternal({ label, placeholder, min = 0, max, step = 1, prefix, suffix, showButtons, buttonVariant, error, className, inputClassName, labelClassName, containerClassName, disabled, value, defaultValue, onChange, onValueChange, ref, ...props }) {
+	const handleIncrement = () => {
+		const newValue = (Number(value) || 0) + step;
+		if (max === void 0 || newValue <= max) {
+			const finalValue = Number(newValue.toFixed(10));
+			onChange?.(finalValue);
+			onValueChange?.(finalValue);
+		}
+	};
+	const handleDecrement = () => {
+		const newValue = (Number(value) || 0) - step;
+		if (newValue >= min) {
+			const finalValue = Number(newValue.toFixed(10));
+			onChange?.(finalValue);
+			onValueChange?.(finalValue);
+		}
+	};
+	const handleInputChange = (e) => {
+		const val = e.target.value;
+		if (val === "") {
+			onChange?.("");
+			onValueChange?.("");
+			return;
+		}
+		const numVal = Number(val);
+		if (!isNaN(numVal)) {
+			if (min !== void 0 && numVal < min || max !== void 0 && numVal > max) return;
+			onChange?.(numVal);
+			onValueChange?.(numVal);
+		}
+	};
+	const hasValue = value !== "" && value != null;
+	if (showButtons) return /* @__PURE__ */ jsxs(Field.Root, {
+		className: containerClassName,
+		disabled,
+		invalid: !!error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative group",
+			"data-floated": hasValue || void 0,
+			children: [label && /* @__PURE__ */ jsx(Field.Label, {
+				className: cn("left-12 group-focus-within:left-3 group-data-[floated]:left-3", labelClassName),
+				children: label
+			}), /* @__PURE__ */ jsxs(InputGroup, {
+				className: cn("h-11", INPUT_GROUP_FOCUS),
+				children: [
+					/* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-start",
+						children: /* @__PURE__ */ jsx(InputGroupButton, {
+							type: "button",
+							variant: buttonVariant,
+							size: "icon-sm",
+							onClick: handleDecrement,
+							disabled: disabled || Number(value) <= min,
+							children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" })
+						})
+					}),
+					/* @__PURE__ */ jsx(InputGroupInput, {
+						ref,
+						type: "number",
+						value,
+						defaultValue,
+						onChange: handleInputChange,
+						min,
+						max,
+						step,
+						disabled,
+						placeholder: label ? void 0 : placeholder,
+						className: cn("text-center text-sm", inputClassName, className),
+						...props
+					}),
+					/* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-end",
+						children: /* @__PURE__ */ jsx(InputGroupButton, {
+							type: "button",
+							variant: buttonVariant,
+							size: "icon-sm",
+							onClick: handleIncrement,
+							disabled: disabled || max !== void 0 && Number(value) >= max,
+							children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+						})
+					})
+				]
+			})]
+		}), error && /* @__PURE__ */ jsx(Field.Error, { children: error })]
+	});
+	if (prefix || suffix) return /* @__PURE__ */ jsxs(Field.Root, {
+		className: containerClassName,
+		disabled,
+		invalid: !!error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative group",
+			"data-floated": hasValue || void 0,
+			children: [label && /* @__PURE__ */ jsx(Field.Label, {
+				className: cn(prefix && "left-9 group-focus-within:left-3 group-data-[floated]:left-3", labelClassName),
+				children: label
+			}), /* @__PURE__ */ jsxs(InputGroup, {
+				className: cn("h-11", INPUT_GROUP_FOCUS),
+				children: [
+					prefix && /* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-start",
+						children: typeof prefix === "string" ? /* @__PURE__ */ jsx("span", {
+							className: "text-xs",
+							children: prefix
+						}) : prefix
+					}),
+					/* @__PURE__ */ jsx(InputGroupInput, {
+						ref,
+						type: "number",
+						value,
+						defaultValue,
+						onChange: handleInputChange,
+						min,
+						max,
+						step,
+						disabled,
+						placeholder: label ? void 0 : placeholder,
+						className: cn("text-sm", inputClassName, className),
+						...props
+					}),
+					suffix && /* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-end",
+						children: typeof suffix === "string" ? /* @__PURE__ */ jsx("span", {
+							className: "text-xs",
+							children: suffix
+						}) : suffix
+					})
+				]
+			})]
+		}), error && /* @__PURE__ */ jsx(Field.Error, { children: error })]
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: containerClassName,
+		disabled,
+		invalid: !!error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative group",
+			children: [label && /* @__PURE__ */ jsx(Field.Label, {
+				className: labelClassName,
+				children: label
+			}), /* @__PURE__ */ jsx(Input, {
+				ref,
+				type: "number",
+				value,
+				defaultValue,
+				onChange: handleInputChange,
+				min,
+				max,
+				step,
+				disabled,
+				placeholder,
+				className: cn("h-11 text-sm dark:bg-transparent", COMPACT_FOCUS, error && COMPACT_FOCUS_ERROR, inputClassName, className),
+				...props
+			})]
+		}), error && /* @__PURE__ */ jsx(Field.Error, { children: error })]
+	});
+}
+
+//#endregion
+//#region src/components/compact/compact-tag-choice.tsx
+/**
+* CompactTagChoice - A compact tag selection input
+*
+* Features:
+* - Multi-select tag interface
+* - Maximum selection limit
+* - Popover for selecting options
+* - Form integration via control prop
+* - Direct usage without form
+*/
+function CompactTagChoice({ control, name, label, description, placeholder = "Select options...", required, disabled, choices = [], maxSelections, className, containerClassName, labelClassName, inputClassName, value: propValue = [], onChange: propOnChange, onValueChange, error, ref }) {
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(CompactTagChoiceInternal, {
+			ref,
+			label,
+			placeholder,
+			disabled,
+			error: fieldState?.error?.message,
+			value: field.value || [],
+			onChange: (vals) => {
+				field.onChange(vals);
+				onValueChange?.(vals);
+			},
+			choices,
+			maxSelections,
+			containerClassName: cn(className, containerClassName),
+			labelClassName,
+			inputClassName
+		})
+	});
+	return /* @__PURE__ */ jsx(CompactTagChoiceInternal, {
+		ref,
+		label,
+		placeholder,
+		disabled,
+		value: propValue,
+		onChange: (vals) => {
+			propOnChange?.(vals);
+			onValueChange?.(vals);
+		},
+		choices,
+		maxSelections,
+		containerClassName,
+		labelClassName,
+		inputClassName,
+		className,
+		error
+	});
+}
+function CompactTagChoiceInternal({ label, placeholder, disabled, value = [], onChange, choices = [], maxSelections, error, className, containerClassName, labelClassName, inputClassName, ref }) {
+	const [open, setOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const availableChoices = choices.filter((c) => !value.includes(c.value));
+	const addChoice = (choiceValue) => {
+		if (value.includes(choiceValue)) return;
+		if (maxSelections && value.length >= maxSelections) return;
+		const updated = [...value, choiceValue];
+		onChange?.(updated);
+	};
+	const removeChoice = (choiceValue) => {
+		const updated = value.filter((v) => v !== choiceValue);
+		onChange?.(updated);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: containerClassName,
+		disabled,
+		invalid: !!error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative group",
+			"data-floated": value.length > 0 || void 0,
+			children: [label && /* @__PURE__ */ jsx(Field.Label, {
+				className: labelClassName,
+				children: label
+			}), /* @__PURE__ */ jsxs("div", {
+				tabIndex: disabled ? void 0 : 0,
+				className: cn("min-h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm", "focus-within:border-ring focus-within:outline focus-within:outline-1 focus-within:-outline-offset-1 focus-within:outline-ring", "focus:outline-none", "hover:border-ring/50 transition-all duration-200", error && "border-destructive focus-within:border-destructive focus-within:outline-destructive", disabled && "opacity-50 cursor-not-allowed", inputClassName),
+				ref,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn("flex flex-wrap gap-1", value.length > 0 && "mb-2"),
+						children: value.map((val) => {
+							return /* @__PURE__ */ jsxs(Badge, {
+								variant: "secondary",
+								className: "flex items-center gap-1 px-2 py-0.5 text-xs",
+								children: [/* @__PURE__ */ jsx("span", { children: choices.find((c) => c.value === val)?.label ?? val }), !disabled && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "text-muted-foreground hover:text-foreground ml-0.5",
+									onClick: (e) => {
+										e.preventDefault();
+										e.stopPropagation();
+										removeChoice(val);
+									},
+									children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+								})]
+							}, val);
+						})
+					}),
+					!disabled && availableChoices.length > 0 && (!maxSelections || value.length < maxSelections) && /* @__PURE__ */ jsxs(Popover, {
+						open,
+						onOpenChange: setOpen,
+						children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+							ref: triggerRef,
+							type: "button",
+							variant: "ghost",
+							className: cn("inline-flex items-center justify-center h-auto p-1 rounded-md text-xs font-medium transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								setOpen(true);
+							},
+							children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }), value.length === 0 && !label ? placeholder : "Add..."]
+						}) }), /* @__PURE__ */ jsx(PopoverContent, {
+							className: "w-[220px] p-0",
+							align: "start",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "p-1",
+								children: availableChoices.length === 0 ? /* @__PURE__ */ jsx("div", {
+									className: "px-2 py-3 text-sm text-muted-foreground text-center",
+									children: "No options available"
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "space-y-0.5",
+									children: availableChoices.map((choice) => /* @__PURE__ */ jsxs("div", {
+										onClick: (e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											addChoice(choice.value);
+										},
+										className: "flex items-center justify-between px-2 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground cursor-pointer",
+										children: [/* @__PURE__ */ jsx("span", { children: choice.label }), value.includes(choice.value) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })]
+									}, choice.value))
+								})
+							})
+						})]
+					}),
+					maxSelections && /* @__PURE__ */ jsxs("div", {
+						className: "text-[11px] text-muted-foreground mt-1",
+						children: [
+							value.length,
+							"/",
+							maxSelections,
+							" selected"
+						]
+					})
+				]
+			})]
+		}), error && /* @__PURE__ */ jsx(Field.Error, { children: error })]
+	});
+}
+
+//#endregion
+//#region src/components/compact/compact-slug-field.tsx
+/**
+* Generates a URL-friendly slug from a string
+*/
+function generateSlug(text) {
+	if (!text) return "";
+	return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+/**
+* CompactSlugField - Compact slug input with auto-generation
+*
+* Features:
+* - Compact design with floating label
+* - Auto-generate slug from source field
+* - Manual editing support
+* - InputGroup with generate button
+* - Form integration via control prop
+*/
+function CompactSlugField({ control, name, description, required, label, placeholder = "my-page-slug", disabled, icon, sourceValue, onGenerate, className, inputClassName, onValueChange, value, onChange, error, ref, ...props }) {
+	const handleGenerate = (currentValue, fieldOnChange) => {
+		const newSlug = onGenerate ? onGenerate(sourceValue || "") : generateSlug(sourceValue || "");
+		fieldOnChange(newSlug);
+		onValueChange?.(newSlug);
+	};
+	const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldState) => {
+		const inputProps = {
+			ref,
+			id: name,
+			type: "text",
+			disabled: isDisabled,
+			placeholder: label ? void 0 : placeholder,
+			value: fieldValue || "",
+			onChange: (e) => {
+				const newValue = e.target.value;
+				fieldOnChange(newValue);
+				onValueChange?.(newValue);
+			},
+			className: cn("h-11 text-sm dark:bg-transparent", COMPACT_FOCUS, fieldState?.error && COMPACT_FOCUS_ERROR, inputClassName),
+			...props
+		};
+		return /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx(Field.Icon, { children: icon }), /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn("h-11", INPUT_GROUP_FOCUS),
+			children: [/* @__PURE__ */ jsx(InputGroupInput, {
+				...inputProps,
+				className: cn(inputProps.className, icon && "pl-9")
+			}), /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsxs(InputGroupButton, {
+					type: "button",
+					size: "sm",
+					onClick: () => handleGenerate(fieldValue, fieldOnChange),
+					disabled: isDisabled || !sourceValue,
+					title: "Generate slug from name",
+					children: [/* @__PURE__ */ jsx(Wand2, { className: "h-4 w-4" }), "Generate"]
+				})
+			})]
+		})] });
+	};
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			disabled,
+			invalid: !!fieldState?.error,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative group",
+					"data-floated": !!field.value || void 0,
+					children: [label && /* @__PURE__ */ jsx(Field.Label, {
+						className: icon ? "left-9 group-focus-within:left-3 group-data-[floated]:left-3" : void 0,
+						children: label
+					}), renderInput(field.value, field.onChange, disabled, fieldState)]
+				}),
+				fieldState?.error && /* @__PURE__ */ jsx(Field.Error, { children: fieldState.error.message }),
+				/* @__PURE__ */ jsx(Field.Description, { children: description })
+			]
+		})
+	});
+	const handleDirectChange = (newValue) => {
+		onChange?.({ target: { value: newValue } });
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className,
+		disabled,
+		invalid: !!error,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative group",
+				"data-floated": !!value || void 0,
+				children: [label && /* @__PURE__ */ jsx(Field.Label, {
+					className: icon ? "left-9 group-focus-within:left-3 group-data-[floated]:left-3" : void 0,
+					children: label
+				}), renderInput(value, handleDirectChange, disabled, { error: error ? { message: error } : void 0 })]
+			}),
+			error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+			/* @__PURE__ */ jsx(Field.Description, { children: description })
+		]
+	});
+}
+
+//#endregion
+export { CompactInput, CompactNumberInput, CompactSelect, CompactSlugField, CompactTagChoice, CompactTextarea, generateSlug };