@classytic/fluid 0.4.1 → 0.5.0

package/dist/compact.mjs

@@ -1,17 +1,16 @@
 "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 React, { createContext, memo, useContext, useId, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown, Minus, Plus, Wand2, X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 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";
+import { Textarea } from "@/components/ui/textarea";
 
 //#region src/components/compact/field.tsx
 const FieldContext = createContext(null);
@@ -222,193 +221,6 @@ function CompactInput({ control, name, description, required, label, placeholder
 	});
 }
 
-//#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
 /**
@@ -633,16 +445,206 @@ function CompactNumberInputInternal({ label, placeholder, min = 0, max, step = 1
 }
 
 //#endregion
-//#region src/components/compact/compact-tag-choice.tsx
+//#region src/components/compact/compact-select.tsx
+const CLEAR_VALUE = "__CLEAR__";
+/**
+* CompactSelect - Floating-label select dropdown
+*
+* @example
+* <CompactSelect
+*   label="Status"
+*   items={[
+*     { value: "active", label: "Active" },
+*     { value: "inactive", label: "Inactive" }
+*   ]}
+*   clearable
+* />
+*/
+function CompactSelect({ control, name, description, required, label, placeholder = "Select option", disabled, items = [], clearable, className, onValueChange, value, error, ref, ...props }) {
+	const displayItems = useMemo(() => {
+		if (clearable) return [{
+			value: CLEAR_VALUE,
+			label: placeholder
+		}, ...items];
+		return items;
+	}, [
+		items,
+		clearable,
+		placeholder
+	]);
+	const handleValueChange = (newValue, fieldOnChange) => {
+		const actualValue = newValue === CLEAR_VALUE ? "" : newValue;
+		if (fieldOnChange) fieldOnChange(actualValue);
+		onValueChange?.(actualValue);
+	};
+	const toSelectValue = (val) => {
+		if (val === "") return CLEAR_VALUE;
+		return val;
+	};
+	const renderSelect = (selectValue, onChange, isDisabled, isInvalid, fieldId) => /* @__PURE__ */ jsxs(Select, {
+		value: toSelectValue(selectValue),
+		onValueChange: (val) => handleValueChange(val, onChange),
+		disabled: isDisabled,
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			ref,
+			id: fieldId,
+			className: cn("w-full data-[size=default]:h-11 text-sm dark:bg-transparent", COMPACT_SELECT_FOCUS, isInvalid && COMPACT_SELECT_FOCUS_ERROR, className),
+			"aria-invalid": isInvalid || void 0,
+			"aria-describedby": [description ? `${fieldId ?? name}-description` : void 0, isInvalid ? `${fieldId ?? name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "" })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: displayItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "py-6 text-center text-sm text-muted-foreground",
+			children: "No options available"
+		}) : displayItems.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			value: item.value,
+			disabled: item.disabled,
+			children: item.label
+		}, item.value)) })]
+	});
+	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 }), renderSelect(field.value, field.onChange, disabled, !!fieldState?.error, name)]
+				}),
+				fieldState?.error && /* @__PURE__ */ jsx(Field.Error, { children: fieldState.error.message }),
+				description && /* @__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 }), renderSelect(value, () => {}, disabled, !!error)]
+			}),
+			error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+			description && /* @__PURE__ */ jsx(Field.Description, { children: description })
+		]
+	});
+}
+
+//#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, "");
+}
 /**
-* CompactTagChoice - A compact tag selection input
+* CompactSlugField - Compact slug input with auto-generation
 *
 * Features:
-* - Multi-select tag interface
-* - Maximum selection limit
-* - Popover for selecting options
+* - Compact design with floating label
+* - Auto-generate slug from source field
+* - Manual editing support
+* - InputGroup with generate button
 * - Form integration via control prop
-* - Direct usage without form
+*/
+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$1, { 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
+//#region src/components/compact/compact-tag-choice.tsx
+/**
+* CompactTagChoice - A compact tag selection input with floating label
+*
+* Uses a trigger button that shows selected count or placeholder,
+* with a popover dropdown listing available choices.
+* Selected items display as inline badges below the trigger.
 */
 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, {
@@ -687,17 +689,20 @@ function CompactTagChoice({ control, name, label, description, placeholder = "Se
 }
 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 hasValue = value.length > 0;
+	const canAdd = !maxSelections || value.length < maxSelections;
+	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);
+		onChange?.([...value, choiceValue]);
 	};
 	const removeChoice = (choiceValue) => {
-		const updated = value.filter((v) => v !== choiceValue);
-		onChange?.(updated);
+		onChange?.(value.filter((v) => v !== choiceValue));
+	};
+	const toggleChoice = (choiceValue) => {
+		if (value.includes(choiceValue)) removeChoice(choiceValue);
+		else addChoice(choiceValue);
 	};
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		className: containerClassName,
@@ -705,143 +710,152 @@ function CompactTagChoiceInternal({ label, placeholder, disabled, value = [], on
 		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", {
+			"data-floated": hasValue || open || void 0,
+			ref,
+			children: [
+				label && /* @__PURE__ */ jsx(Field.Label, {
+					className: labelClassName,
+					children: label
+				}),
+				/* @__PURE__ */ jsxs(Popover, {
+					open,
+					onOpenChange: disabled ? void 0 : setOpen,
+					children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+						render: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled,
+							className: cn("flex h-11 w-full items-center justify-between rounded-md border border-input bg-card px-3 text-sm", "transition-all duration-200 hover:border-ring/50", COMPACT_FOCUS, error && "border-destructive focus-visible:border-destructive focus-visible:outline-destructive", disabled && "opacity-50 cursor-not-allowed", inputClassName)
+						}),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("truncate", !hasValue && "text-transparent"),
+							children: hasValue ? `${value.length} selected` : label || placeholder
+						}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 shrink-0 opacity-50" })]
+					}), /* @__PURE__ */ jsx(PopoverContent, {
+						className: "w-[var(--popover-trigger-width)] p-1",
+						align: "start",
+						children: choices.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "px-2 py-3 text-sm text-muted-foreground text-center",
+							children: "No options available"
+						}) : /* @__PURE__ */ jsxs("div", {
+							className: "space-y-0.5",
+							children: [choices.map((choice) => {
+								const isSelected = value.includes(choice.value);
+								const isDisabledChoice = !isSelected && !canAdd;
+								return /* @__PURE__ */ jsxs("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: isDisabledChoice,
+									onClick: () => toggleChoice(choice.value),
+									className: cn("flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-left", "hover:bg-accent hover:text-accent-foreground cursor-pointer", "focus-visible:outline-none focus-visible:bg-accent", isSelected && "bg-accent/50", isDisabledChoice && "opacity-40 cursor-not-allowed"),
+									children: [/* @__PURE__ */ jsx("div", {
+										className: cn("flex size-4 shrink-0 items-center justify-center rounded-sm border", isSelected ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/30"),
+										children: isSelected && /* @__PURE__ */ jsx(Check, { className: "size-3" })
+									}), /* @__PURE__ */ jsx("span", {
+										className: "flex-1",
+										children: choice.label
+									})]
+								}, choice.value);
+							}), maxSelections && /* @__PURE__ */ jsxs("div", {
+								className: "px-2 pt-1 pb-0.5 text-[11px] text-muted-foreground border-t mt-1",
+								children: [
+									value.length,
+									"/",
+									maxSelections,
+									" selected"
+								]
+							})]
 						})
-					}),
-					!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"
-						]
+					})]
+				}),
+				hasValue && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1 mt-1.5 px-0.5",
+					children: value.map((val) => {
+						const choice = choices.find((c) => c.value === val);
+						return /* @__PURE__ */ jsxs(Badge, {
+							variant: "secondary",
+							className: "gap-1 px-2 py-0.5 text-xs",
+							children: [choice?.label ?? val, !disabled && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "text-muted-foreground hover:text-foreground -mr-0.5",
+								onClick: () => removeChoice(val),
+								"aria-label": `Remove ${choice?.label ?? val}`,
+								children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+							})]
+						}, val);
 					})
-				]
-			})]
+				})
+			]
 		}), 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, "");
-}
+//#region src/components/compact/compact-textarea.tsx
 /**
-* CompactSlugField - Compact slug input with auto-generation
+* CompactTextarea - Enhanced textarea with InputGroup support
 *
 * Features:
-* - Compact design with floating label
-* - Auto-generate slug from source field
-* - Manual editing support
-* - InputGroup with generate button
-* - Form integration via control prop
+* - Floating label design
+* - InputGroup support with addons
+* - Character counter with maxLength
+* - Controller integration for react-hook-form
+* - Direct usage without form
 */
-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 = {
+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,
-			type: "text",
+			name,
 			disabled: isDisabled,
 			placeholder: label ? void 0 : placeholder,
+			rows,
 			value: fieldValue || "",
 			onChange: (e) => {
 				const newValue = e.target.value;
-				fieldOnChange(newValue);
+				fieldOnChange?.(newValue);
 				onValueChange?.(newValue);
 			},
-			className: cn("h-11 text-sm dark:bg-transparent", COMPACT_FOCUS, fieldState?.error && COMPACT_FOCUS_ERROR, inputClassName),
+			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
 		};
-		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 (hasInputGroup) return /* @__PURE__ */ jsxs(Fragment$1, { 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$1, { 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, {
@@ -856,9 +870,9 @@ function CompactSlugField({ control, name, description, required, label, placeho
 					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,
+						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
-					}), renderInput(field.value, field.onChange, disabled, fieldState)]
+					}), 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 })
@@ -878,9 +892,9 @@ function CompactSlugField({ control, name, description, required, label, placeho
 				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,
+					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
-				}), renderInput(value, handleDirectChange, disabled, { error: error ? { message: error } : void 0 })]
+				}), renderTextarea(value, handleDirectChange, disabled, error)]
 			}),
 			error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
 			/* @__PURE__ */ jsx(Field.Description, { children: description })