@classytic/fluid 0.1.1 → 0.2.0

package/dist/compact.js

@@ -0,0 +1,986 @@
+import { cn } from './chunk-GUHK2DTW.js';
+import { Controller } from 'react-hook-form';
+import { Input } from '@/components/ui/input';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from '@/components/ui/input-group';
+import { createContext, memo, useId, useMemo, useContext, useState, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Minus, Plus, X, Check, Wand2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+var FieldContext = createContext(null);
+var 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", { className: cn("w-full pt-3", className), children }) });
+});
+var Label = memo(function FieldLabel({
+  children,
+  className
+}) {
+  const ctx = useContext(FieldContext);
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor: ctx?.id,
+      className: cn(
+        "absolute top-0 -translate-y-1/2 left-3 z-10",
+        "bg-card px-1.5",
+        "text-[11px] font-medium leading-tight text-muted-foreground",
+        "pointer-events-none select-none whitespace-nowrap",
+        "transition-colors",
+        "group-focus-within:text-primary",
+        ctx?.disabled && "opacity-60",
+        ctx?.invalid && "text-destructive group-focus-within:text-destructive",
+        className
+      ),
+      children
+    }
+  );
+});
+var Error = memo(function FieldError({
+  children,
+  className
+}) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("text-[11px] text-destructive mt-1.5 pl-3", className), children });
+});
+var Description = memo(function FieldDescription({
+  children,
+  className
+}) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("text-[11px] text-muted-foreground mt-1.5 pl-3", className), children });
+});
+var 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
+    }
+  );
+});
+var Field = {
+  Root,
+  Label,
+  Error,
+  Description,
+  Icon
+};
+function CompactInput({
+  // Form integration
+  control,
+  name,
+  description,
+  required,
+  // Basic props
+  label,
+  placeholder,
+  disabled,
+  type = "text",
+  // InputGroup addons
+  addonLeft,
+  addonRight,
+  // Styling
+  className,
+  inputClassName,
+  // Events
+  onValueChange,
+  // Direct usage
+  value,
+  onChange,
+  error,
+  // Valid HTML input attributes
+  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,
+      value: fieldValue || "",
+      onChange: (e) => {
+        const newValue = e.target.value;
+        fieldOnChange?.(newValue);
+        onValueChange?.(newValue);
+      },
+      className: cn(
+        "h-11 text-sm",
+        fieldError && "border-destructive focus-visible:ring-destructive/20",
+        inputClassName
+      ),
+      autoComplete,
+      autoFocus,
+      maxLength,
+      minLength,
+      max,
+      min,
+      pattern,
+      readOnly,
+      step,
+      inputMode,
+      enterKeyHint,
+      ...props
+    };
+    if (hasInputGroup) {
+      return /* @__PURE__ */ jsxs(InputGroup, { className: "h-11", 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", children: [
+            label && /* @__PURE__ */ jsx(Field.Label, { 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", children: [
+      label && /* @__PURE__ */ jsx(Field.Label, { children: label }),
+      renderInput(value, handleDirectChange, disabled, error)
+    ] }),
+    error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+    /* @__PURE__ */ jsx(Field.Description, { children: description })
+  ] });
+}
+function CompactTextarea({
+  // Form integration
+  control,
+  name,
+  description,
+  required,
+  // Basic props
+  label,
+  placeholder,
+  disabled,
+  rows = 3,
+  // InputGroup addons
+  addonLeft,
+  addonRight,
+  // Styling
+  className,
+  inputClassName,
+  // Events
+  onValueChange,
+  // Direct usage
+  value,
+  onChange,
+  error,
+  // Valid HTML textarea attributes
+  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,
+      rows,
+      value: fieldValue || "",
+      onChange: (e) => {
+        const newValue = e.target.value;
+        fieldOnChange?.(newValue);
+        onValueChange?.(newValue);
+      },
+      className: cn(
+        "resize-none pt-3 text-sm",
+        fieldError && "border-destructive focus-visible:ring-destructive/20",
+        inputClassName
+      ),
+      cols,
+      wrap,
+      autoComplete,
+      autoFocus,
+      maxLength,
+      minLength,
+      readOnly,
+      spellCheck,
+      ...props
+    };
+    if (hasInputGroup) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(InputGroup, { 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", children: [
+            label && /* @__PURE__ */ jsx(Field.Label, { 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", children: [
+      label && /* @__PURE__ */ jsx(Field.Label, { children: label }),
+      renderTextarea(value, handleDirectChange, disabled, error)
+    ] }),
+    error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+    /* @__PURE__ */ jsx(Field.Description, { children: description })
+  ] });
+}
+function CompactSelect({
+  // Form integration
+  control,
+  name,
+  description,
+  required,
+  // Basic props
+  label,
+  placeholder = "Select option",
+  disabled,
+  items = [],
+  // Styling
+  className,
+  // Events
+  onValueChange,
+  // Direct usage
+  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", 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",
+                        fieldState?.error && "border-destructive focus:ring-destructive/20",
+                        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", 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",
+                  error && "border-destructive focus:ring-destructive/20",
+                  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 })
+  ] });
+}
+function CompactNumberInput({
+  // Form integration
+  control,
+  name,
+  description,
+  required,
+  // Basic props
+  label,
+  placeholder,
+  disabled,
+  // Number configuration
+  min = 0,
+  max,
+  step = 1,
+  // Display options
+  prefix,
+  suffix,
+  showButtons = false,
+  buttonVariant = "ghost",
+  // Styling
+  className,
+  inputClassName,
+  labelClassName,
+  containerClassName,
+  // Events
+  onValueChange,
+  // Direct usage
+  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 currentValue = Number(value) || 0;
+    const newValue = currentValue + step;
+    if (max === void 0 || newValue <= max) {
+      const finalValue = Number(newValue.toFixed(10));
+      onChange?.(finalValue);
+      onValueChange?.(finalValue);
+    }
+  };
+  const handleDecrement = () => {
+    const currentValue = Number(value) || 0;
+    const newValue = currentValue - 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);
+    }
+  };
+  if (showButtons) {
+    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__ */ jsxs(InputGroup, { className: "h-11", 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,
+              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", children: [
+        label && /* @__PURE__ */ jsx(Field.Label, { className: labelClassName, children: label }),
+        /* @__PURE__ */ jsxs(InputGroup, { className: "h-11", 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,
+              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",
+            error && "border-destructive focus-visible:ring-destructive/20",
+            inputClassName,
+            className
+          ),
+          ...props
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx(Field.Error, { children: error })
+  ] });
+}
+function CompactTagChoice({
+  // Form integration
+  control,
+  name,
+  // Display
+  label,
+  description,
+  placeholder = "Select options...",
+  required,
+  disabled,
+  // Data
+  choices = [],
+  maxSelections,
+  // Styling
+  className,
+  containerClassName,
+  labelClassName,
+  inputClassName,
+  // Direct usage
+  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", children: [
+      label && /* @__PURE__ */ jsx(Field.Label, { className: labelClassName, children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "min-h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+            "ring-offset-background focus-within:ring-1 focus-within:ring-primary/20",
+            "hover:border-primary/50 transition-all duration-200",
+            error && "border-destructive focus-within:ring-destructive/20",
+            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) => {
+              const choice = choices.find((c) => c.value === 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: choice?.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 ? placeholder : "Add more..."
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__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 })
+  ] });
+}
+function generateSlug(text) {
+  if (!text) return "";
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+function CompactSlugField({
+  // Form integration
+  control,
+  name,
+  description,
+  required,
+  // Basic props
+  label,
+  placeholder = "my-page-slug",
+  disabled,
+  // Icon support
+  icon,
+  // Slug generation
+  sourceValue,
+  onGenerate,
+  // Styling
+  className,
+  inputClassName,
+  // Events
+  onValueChange,
+  // Direct usage
+  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,
+      value: fieldValue || "",
+      onChange: (e) => {
+        const newValue = e.target.value;
+        fieldOnChange(newValue);
+        onValueChange?.(newValue);
+      },
+      className: cn(
+        "h-11 text-sm",
+        fieldState?.error && "border-destructive focus-visible:ring-destructive/20",
+        inputClassName
+      ),
+      ...props
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx(Field.Icon, { children: icon }),
+      /* @__PURE__ */ jsxs(InputGroup, { className: "h-11", 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", children: [
+            label && /* @__PURE__ */ jsx(Field.Label, { 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", children: [
+      label && /* @__PURE__ */ jsx(Field.Label, { 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 })
+  ] });
+}
+
+export { CompactInput, CompactNumberInput, CompactSelect, CompactSlugField, CompactTagChoice, CompactTextarea, generateSlug };
+//# sourceMappingURL=compact.js.map
+//# sourceMappingURL=compact.js.map