@algodomain/smart-forms 0.1.0

package/dist/fields.js

@@ -0,0 +1,1384 @@
+import { Button, Popover, PopoverTrigger, PopoverContent } from './chunk-6WAEAWTD.js';
+export { SmartCheckbox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags } from './chunk-6WAEAWTD.js';
+import { useFormField, useFieldDetection, Label, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, useSmartForm, cn, Input } from './chunk-IG4XDQMV.js';
+export { SmartFormProvider, SmartInput, useFormField, useSmartForm } from './chunk-IG4XDQMV.js';
+import * as React from 'react';
+import React__default, { createContext, useRef, useEffect, useMemo, useState, useCallback, useContext } from 'react';
+import { InfoIcon, PlusIcon, CheckIcon, Bold, Italic, Underline, List, ListOrdered, ChevronsUpDown, Check, Plus, XIcon, SearchIcon } from 'lucide-react';
+import { Command as Command$1 } from 'cmdk';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function Combobox({
+  options,
+  value = "",
+  onChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  noResultsText = "No results found.",
+  width = "100%",
+  isDisabled = false,
+  allowCustom = false
+}) {
+  const [open, setOpen] = React__default.useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const containerStyles = {
+    width
+  };
+  const combinedOptions = allowCustom ? [
+    ...options,
+    ...searchValue && !options.some(
+      (opt) => opt.label.toLowerCase() === searchValue.toLowerCase()
+    ) ? [
+      {
+        value: searchValue.toLowerCase().replace(/\s+/g, "-"),
+        label: searchValue
+      }
+    ] : []
+  ] : options;
+  const filteredOptions = combinedOptions.filter(
+    (option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
+  );
+  return /* @__PURE__ */ jsx("div", { style: containerStyles, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        style: containerStyles,
+        className: `flex items-center justify-between relative ${isDisabled ? "cursor-not-allowed opacity-50" : ""}`,
+        disabled: isDisabled,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 text-left", children: /* @__PURE__ */ jsx("div", { className: "truncate", children: value ? combinedOptions.find((option) => option.value === value)?.label || value : placeholder }) }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 flex-shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ jsxs(Command, { className: "w-full", children: [
+      /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          value: searchValue,
+          onValueChange: setSearchValue,
+          placeholder: searchPlaceholder,
+          className: "h-9"
+        }
+      ),
+      /* @__PURE__ */ jsx(CommandList, { children: filteredOptions.length > 0 ? /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[200px] overflow-y-auto", children: filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          value: option.value,
+          onSelect: (currentValue) => {
+            onChange(currentValue === value ? "" : currentValue);
+            setOpen(false);
+            setSearchValue("");
+          },
+          className: "flex items-center",
+          style: { width: "100%" },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  className: `mr-2 h-4 w-4 flex-shrink-0 ${value === option.value ? "opacity-100" : "opacity-0"}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option.label })
+            ] }),
+            option.badge && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "ml-2 text-[10px] px-2 py-0 h-5 font-normal",
+                children: option.badge
+              }
+            )
+          ]
+        },
+        option.value
+      )) }) : /* @__PURE__ */ jsxs(CommandEmpty, { children: [
+        allowCustom && searchValue && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            className: "w-full justify-start",
+            onClick: () => {
+              const newOption = {
+                value: searchValue.toLowerCase().replace(/\s+/g, "-")};
+              onChange(newOption.value);
+              setOpen(false);
+              setSearchValue("");
+            },
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+              'Add "',
+              searchValue,
+              '" as a new option'
+            ]
+          }
+        ),
+        !searchValue && noResultsText
+      ] }) })
+    ] }) })
+  ] }) });
+}
+var SmartCombobox = ({
+  field,
+  label,
+  options,
+  className = "",
+  placeholder,
+  allowCustom = false,
+  validation,
+  required = false,
+  defaultValue,
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: fieldRef, "data-field": field, children: /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        options: (options || []).map((o) => ({ value: o.value, label: o.label })),
+        value: value || "",
+        onChange: (newValue) => onChange(newValue),
+        placeholder: placeholder || (label ? `Select ${label.toLowerCase()}` : `Select ${field}`),
+        allowCustom
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+var SmartFileUpload = ({
+  field,
+  label,
+  className = "",
+  validation,
+  required = false,
+  multiple = false,
+  accept,
+  maxFiles,
+  maxSizeBytes,
+  uploadApi,
+  uploadOnSelect = false,
+  onSuccess,
+  onError,
+  defaultValue,
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const { registerSubmitHook, unregisterSubmitHook } = useSmartForm();
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  const normalizedFiles = useMemo(() => {
+    const filesAny = Array.isArray(value) ? value : value ? [value] : [];
+    return filesAny.filter((f) => f instanceof File);
+  }, [value]);
+  const [previewUrls, setPreviewUrls] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const newUrls = /* @__PURE__ */ new Map();
+    normalizedFiles.forEach((file) => {
+      if (file.type.startsWith("image/")) {
+        const key = `${file.name}-${file.size}-${file.lastModified}`;
+        if (!previewUrls.has(key)) {
+          newUrls.set(key, URL.createObjectURL(file));
+        } else {
+          newUrls.set(key, previewUrls.get(key));
+        }
+      }
+    });
+    previewUrls.forEach((url, key) => {
+      if (!newUrls.has(key)) {
+        URL.revokeObjectURL(url);
+      }
+    });
+    setPreviewUrls(newUrls);
+  }, [normalizedFiles]);
+  useEffect(() => {
+    return () => {
+      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, []);
+  const removeFileAt = (index) => {
+    if (!multiple) {
+      onChange(null);
+      if (inputRef.current) inputRef.current.value = "";
+      return;
+    }
+    const next = normalizedFiles.filter((_, i) => i !== index);
+    onChange(next);
+    if (next.length === 0 && inputRef.current) inputRef.current.value = "";
+  };
+  const handleFiles = (filesList) => {
+    if (!filesList) return;
+    let files = Array.from(filesList);
+    if (maxFiles && files.length > maxFiles) {
+      files = files.slice(0, maxFiles);
+    }
+    if (maxSizeBytes) {
+      files = files.filter((f) => f.size <= maxSizeBytes);
+    }
+    if (multiple) {
+      onChange(files);
+    } else {
+      onChange(files[0] || null);
+    }
+  };
+  const onInputChange = (e) => {
+    handleFiles(e.target.files);
+  };
+  const clearSelection = () => {
+    onChange(multiple ? [] : null);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+  const performUpload = async () => {
+    if (!uploadApi) return;
+    const filesAny = Array.isArray(value) ? value : value ? [value] : [];
+    const files = filesAny.filter((f) => f instanceof File);
+    if (files.length === 0) return;
+    const fd = new FormData();
+    if (multiple) {
+      for (const f of files) fd.append(`${field}[]`, f);
+    } else if (files[0]) {
+      fd.append(field, files[0]);
+    }
+    try {
+      const response = await fetch(uploadApi, {
+        method: "POST",
+        body: fd
+      });
+      const maybeJson = (() => {
+        try {
+          return response.headers.get("content-type")?.includes("application/json") ? true : false;
+        } catch {
+          return false;
+        }
+      })();
+      const result = maybeJson ? await response.json() : await response.text();
+      if (!response.ok) {
+        if (onError) onError(result);
+        return;
+      }
+      if (onSuccess) onSuccess(result);
+    } catch (err) {
+      if (onError) onError(err);
+    }
+  };
+  useEffect(() => {
+    if (!uploadOnSelect || !uploadApi) return;
+    const filesAny = Array.isArray(value) ? value : value ? [value] : [];
+    const files = filesAny.filter((f) => f instanceof File);
+    if (files.length > 0) {
+      void performUpload();
+    }
+  }, [value, uploadOnSelect, uploadApi]);
+  useEffect(() => {
+    const key = `smart-file-upload:${field}`;
+    if (uploadApi && !uploadOnSelect) {
+      registerSubmitHook(key, performUpload);
+      return () => unregisterSubmitHook(key);
+    }
+    return () => unregisterSubmitHook(key);
+  }, [field, uploadApi, uploadOnSelect, registerSubmitHook, unregisterSubmitHook, value, multiple]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", className), children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", error && "text-destructive"), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: (el) => {
+            inputRef.current = el;
+            if (typeof fieldRef === "function") fieldRef(el);
+          },
+          type: "file",
+          accept,
+          multiple,
+          onChange: onInputChange,
+          className: cn(error && "border-destructive"),
+          "data-field": field
+        }
+      ),
+      (Array.isArray(value) ? value.length > 0 : !!value) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: clearSelection, children: "Clear" })
+    ] }),
+    normalizedFiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "No file selected" }) : /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-1", children: normalizedFiles.map((f, idx) => {
+      const isImage = f.type.startsWith("image/");
+      const key = `${f.name}-${f.size}-${f.lastModified}`;
+      const previewUrl = isImage ? previewUrls.get(key) : null;
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded border px-2 py-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center min-w-0 mr-2", children: [
+          isImage && previewUrl ? /* @__PURE__ */ jsx("div", { className: "relative group mr-2", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewUrl,
+              alt: `Preview of ${f.name}`,
+              className: "w-8 h-8 object-cover rounded border"
+            }
+          ) }) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 mr-2 flex items-center justify-center bg-gray-100 rounded border", children: "\u{1F4C4}" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: f.name }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              (f.size / 1024).toFixed(1),
+              " KB"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => removeFileAt(idx),
+            "aria-label": `Remove ${f.name}`,
+            children: "\u2715"
+          }
+        )
+      ] }, `${f.name}-${idx}`);
+    }) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+var SmartSlider = ({
+  field,
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  className = "",
+  validation,
+  required = false,
+  showValue = true,
+  valueFormatter = (value) => value.toString(),
+  defaultValue,
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  const handleValueChange = (values) => {
+    const newValue = values[0];
+    onChange(newValue);
+  };
+  const currentValue = value !== void 0 ? value : min;
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
+          showValue && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground", children: [
+            "(",
+            valueFormatter(currentValue),
+            ")"
+          ] })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          ref: fieldRef,
+          value: [currentValue],
+          onValueChange: handleValueChange,
+          min,
+          max,
+          step,
+          className: `w-full ${error ? "border-destructive" : ""}`,
+          "data-field": field
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: valueFormatter(min) }),
+        /* @__PURE__ */ jsx("span", { children: valueFormatter(max) })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+var SmartDualRangeSlider = ({
+  minField,
+  maxField,
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  className = "",
+  minValidation,
+  maxValidation,
+  required = false,
+  showValues = true,
+  valueFormatter = (value) => value.toString(),
+  minLabel = "Min",
+  maxLabel = "Max",
+  defaultMinValue,
+  defaultMaxValue,
+  info,
+  subLabel
+}) => {
+  const minFormField = useFormField(minField);
+  const maxFormField = useFormField(maxField);
+  const fieldDetection = useFieldDetection();
+  const hasRegisteredMin = useRef(false);
+  const hasRegisteredMax = useRef(false);
+  const hasSetDefaultMin = useRef(false);
+  const hasSetDefaultMax = useRef(false);
+  useEffect(() => {
+    if (minValidation && !hasRegisteredMin.current) {
+      hasRegisteredMin.current = true;
+      minFormField.registerValidation(minField, minValidation);
+    }
+  }, [minValidation, minField, minFormField]);
+  useEffect(() => {
+    if (maxValidation && !hasRegisteredMax.current) {
+      hasRegisteredMax.current = true;
+      maxFormField.registerValidation(maxField, maxValidation);
+    }
+  }, [maxValidation, maxField, maxFormField]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(minField);
+      fieldDetection.registerField(maxField);
+    }
+  }, [minField, maxField, fieldDetection]);
+  useEffect(() => {
+    if (defaultMinValue !== void 0 && !hasSetDefaultMin.current && (minFormField.value === void 0 || minFormField.value === null || minFormField.value === "")) {
+      minFormField.onChange(defaultMinValue);
+      hasSetDefaultMin.current = true;
+    }
+  }, [defaultMinValue, minFormField.value]);
+  useEffect(() => {
+    if (defaultMaxValue !== void 0 && !hasSetDefaultMax.current && (maxFormField.value === void 0 || maxFormField.value === null || maxFormField.value === "")) {
+      maxFormField.onChange(defaultMaxValue);
+      hasSetDefaultMax.current = true;
+    }
+  }, [defaultMaxValue, maxFormField.value]);
+  const handleValueChange = (values) => {
+    const [minValue, maxValue] = values;
+    minFormField.onChange(minValue);
+    maxFormField.onChange(maxValue);
+  };
+  const currentMin = minFormField.value !== void 0 ? minFormField.value : min;
+  const currentMax = maxFormField.value !== void 0 ? maxFormField.value : max;
+  const combinedError = minFormField.error || maxFormField.error;
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          ref: minFormField.fieldRef,
+          value: [currentMin, currentMax],
+          onValueChange: handleValueChange,
+          min,
+          max,
+          step,
+          className: `w-full ${combinedError ? "border-destructive" : ""}`,
+          "data-min-field": minField,
+          "data-max-field": maxField
+        }
+      ),
+      showValues && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          minLabel,
+          ": ",
+          valueFormatter(currentMin)
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          maxLabel,
+          ": ",
+          valueFormatter(currentMax)
+        ] }) })
+      ] })
+    ] }),
+    combinedError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: combinedError })
+  ] });
+};
+var TagsContext = createContext({
+  value: void 0,
+  setValue: void 0,
+  open: false,
+  onOpenChange: () => {
+  },
+  width: void 0,
+  setWidth: void 0
+});
+var useTagsContext = () => {
+  const context = useContext(TagsContext);
+  if (!context) {
+    throw new Error("useTagsContext must be used within a TagsProvider");
+  }
+  return context;
+};
+var Tags = ({
+  value,
+  setValue,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  children,
+  className
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const [width, setWidth] = useState();
+  const ref = useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen;
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      setWidth(entries[0].contentRect.width);
+    });
+    resizeObserver.observe(ref.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TagsContext.Provider,
+    {
+      value: { value, setValue, open, onOpenChange, width, setWidth },
+      children: /* @__PURE__ */ jsx(Popover, { onOpenChange, open, children: /* @__PURE__ */ jsx("div", { className: cn("relative w-full", className), ref, children }) })
+    }
+  );
+};
+var TagsTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: cn("h-auto w-full justify-between p-2", className),
+    role: "combobox",
+    variant: "outline",
+    ...props,
+    children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+      children,
+      /* @__PURE__ */ jsx("span", { className: "px-2 py-px text-muted-foreground" })
+    ] })
+  }
+) });
+var TagsValue = ({
+  className,
+  children,
+  onRemove,
+  ...props
+}) => {
+  const handleRemove = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove?.();
+  };
+  return /* @__PURE__ */ jsxs(Badge, { className: cn("flex items-center gap-2", className), ...props, children: [
+    children,
+    onRemove && // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable badge"
+    // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable badge"
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "size-auto cursor-pointer hover:text-muted-foreground",
+        onClick: handleRemove,
+        children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+      }
+    )
+  ] });
+};
+var TagsContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { width } = useTagsContext();
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      className: cn("p-0", className),
+      style: { width },
+      ...props,
+      children: /* @__PURE__ */ jsx(Command, { children })
+    }
+  );
+};
+var TagsInput = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-9", className), ...props });
+var TagsList = ({ className, ...props }) => /* @__PURE__ */ jsx(CommandList, { className: cn("max-h-[200px]", className), ...props });
+var TagsEmpty = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { ...props, children: children ?? "No tags found." });
+var TagsGroup = CommandGroup;
+var TagsItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CommandItem,
+  {
+    className: cn("cursor-pointer items-center justify-between", className),
+    ...props
+  }
+);
+var SmartAutoSuggestTags = ({
+  field,
+  label,
+  options: initialOptions,
+  className = "",
+  placeholder = "Select tags...",
+  validation,
+  required = false,
+  allowCreate = true,
+  maxTags,
+  defaultValue,
+  onTagCreate,
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const [tags, setTags] = useState(initialOptions);
+  const [newTag, setNewTag] = useState("");
+  const selected = Array.isArray(value) ? value : [];
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (!value || Array.isArray(value) && value.length === 0)) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  useEffect(() => {
+    setTags(initialOptions);
+  }, [initialOptions]);
+  const handleRemove = (tagId) => {
+    if (!selected.includes(tagId)) {
+      return;
+    }
+    const newSelected = selected.filter((v) => v !== tagId);
+    onChange(newSelected);
+  };
+  const handleSelect = (tagId) => {
+    if (selected.includes(tagId)) {
+      handleRemove(tagId);
+      return;
+    }
+    if (maxTags && selected.length >= maxTags) {
+      return;
+    }
+    const newSelected = [...selected, tagId];
+    onChange(newSelected);
+  };
+  const handleCreateTag = () => {
+    if (!newTag.trim()) return;
+    if (!allowCreate) return;
+    const tagId = newTag.toLowerCase().replace(/\s+/g, "-");
+    const newTagOption = {
+      id: tagId,
+      label: newTag
+    };
+    setTags((prev) => [...prev, newTagOption]);
+    const newSelected = [...selected, tagId];
+    onChange(newSelected);
+    if (onTagCreate) {
+      onTagCreate(newTagOption);
+    }
+    setNewTag("");
+  };
+  const filteredTags = tags.filter(
+    (tag) => tag.label.toLowerCase().includes(newTag.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
+          maxTags && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+            "(",
+            selected.length,
+            "/",
+            maxTags,
+            ")"
+          ] })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: fieldRef, "data-field": field, children: /* @__PURE__ */ jsx("div", { className: cn(
+      "w-full rounded-md border border-input bg-background text-sm ring-offset-background",
+      "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      error && "border-destructive focus-within:ring-destructive"
+    ), children: /* @__PURE__ */ jsxs(Tags, { className: "w-full", children: [
+      /* @__PURE__ */ jsxs(TagsTrigger, { className: "w-full px-3 py-2 border-0 bg-transparent", children: [
+        selected.length === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }),
+        selected.map((tagId) => {
+          const tag = tags.find((t) => t.id === tagId);
+          return tag ? /* @__PURE__ */ jsx(
+            TagsValue,
+            {
+              onRemove: () => handleRemove(tagId),
+              className: "px-2 py-1 text-sm gap-1",
+              children: tag.label
+            },
+            tagId
+          ) : null;
+        })
+      ] }),
+      /* @__PURE__ */ jsxs(TagsContent, { children: [
+        /* @__PURE__ */ jsx(
+          TagsInput,
+          {
+            onValueChange: setNewTag,
+            placeholder: `Search ${placeholder.toLowerCase()}...`,
+            value: newTag
+          }
+        ),
+        /* @__PURE__ */ jsxs(TagsList, { children: [
+          filteredTags.length === 0 && allowCreate && newTag.trim() && /* @__PURE__ */ jsx(TagsEmpty, { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "mx-auto flex cursor-pointer items-center gap-2 text-sm",
+              onClick: handleCreateTag,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "text-muted-foreground", size: 14 }),
+                "Create new tag: ",
+                newTag
+              ]
+            }
+          ) }),
+          filteredTags.length === 0 && (!allowCreate || !newTag.trim()) && /* @__PURE__ */ jsx(TagsEmpty, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "No tags found" }) }),
+          /* @__PURE__ */ jsx(TagsGroup, { children: filteredTags.map((tag) => /* @__PURE__ */ jsxs(
+            TagsItem,
+            {
+              onSelect: handleSelect,
+              value: tag.id,
+              disabled: maxTags ? selected.length >= maxTags && !selected.includes(tag.id) : false,
+              children: [
+                tag.label,
+                selected.includes(tag.id) && /* @__PURE__ */ jsx(CheckIcon, { className: "text-muted-foreground", size: 14 })
+              ]
+            },
+            tag.id
+          )) })
+        ] })
+      ] })
+    ] }) }) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+var sanitizeHtml = (html) => {
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = html;
+  const allowedTags = ["P", "STRONG", "B", "EM", "I", "U", "UL", "OL", "LI", "BR", "DIV"];
+  const cleanNode = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.cloneNode(false);
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      const tagName = element.tagName.toUpperCase();
+      if (tagName === "DIV") {
+        const p = document.createElement("p");
+        Array.from(element.childNodes).forEach((child) => {
+          const cleanedChild = cleanNode(child);
+          if (cleanedChild) p.appendChild(cleanedChild);
+        });
+        return p;
+      }
+      if (!allowedTags.includes(tagName)) {
+        const fragment = document.createDocumentFragment();
+        Array.from(element.childNodes).forEach((child) => {
+          const cleanedChild = cleanNode(child);
+          if (cleanedChild) fragment.appendChild(cleanedChild);
+        });
+        return fragment;
+      }
+      const cleanElement = document.createElement(tagName.toLowerCase());
+      Array.from(element.childNodes).forEach((child) => {
+        const cleanedChild = cleanNode(child);
+        if (cleanedChild) cleanElement.appendChild(cleanedChild);
+      });
+      return cleanElement;
+    }
+    return null;
+  };
+  const cleanedDiv = document.createElement("div");
+  Array.from(tempDiv.childNodes).forEach((child) => {
+    const cleanedChild = cleanNode(child);
+    if (cleanedChild) cleanedDiv.appendChild(cleanedChild);
+  });
+  return cleanedDiv.innerHTML;
+};
+var SmartBasicRichTextbox = ({
+  field,
+  label,
+  placeholder = "Enter text...",
+  validation,
+  className = "",
+  required = false,
+  defaultValue,
+  minHeight = "150px",
+  maxHeight = "400px",
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const editorRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  useEffect(() => {
+    if (editorRef.current && value !== void 0) {
+      const sanitized = sanitizeHtml(value || "");
+      if (editorRef.current.innerHTML !== sanitized) {
+        editorRef.current.innerHTML = sanitized;
+      }
+    }
+  }, [value]);
+  const handleInput = useCallback(() => {
+    if (editorRef.current) {
+      const html = editorRef.current.innerHTML;
+      const sanitized = sanitizeHtml(html);
+      onChange(sanitized);
+    }
+  }, [onChange]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      document.execCommand("insertParagraph", false);
+      return;
+    }
+  }, []);
+  const execCommand = useCallback((command, value2) => {
+    document.execCommand(command, false, value2);
+    editorRef.current?.focus();
+    handleInput();
+  }, [handleInput]);
+  const toggleBold = () => execCommand("bold");
+  const toggleItalic = () => execCommand("italic");
+  const toggleUnderline = () => execCommand("underline");
+  const toggleBulletList = () => execCommand("insertUnorderedList");
+  const toggleNumberedList = () => execCommand("insertOrderedList");
+  const isFormatActive = useCallback((format) => {
+    return document.queryCommandState(format);
+  }, []);
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    bulletList: false,
+    numberedList: false
+  });
+  const updateActiveFormats = useCallback(() => {
+    if (isFocused) {
+      setActiveFormats({
+        bold: isFormatActive("bold"),
+        italic: isFormatActive("italic"),
+        underline: isFormatActive("underline"),
+        bulletList: isFormatActive("insertUnorderedList"),
+        numberedList: isFormatActive("insertOrderedList")
+      });
+    }
+  }, [isFocused, isFormatActive]);
+  useEffect(() => {
+    if (isFocused) {
+      document.addEventListener("selectionchange", updateActiveFormats);
+      return () => document.removeEventListener("selectionchange", updateActiveFormats);
+    }
+  }, [isFocused, updateActiveFormats]);
+  const handleFocus = () => {
+    setIsFocused(true);
+    updateActiveFormats();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", className), children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: fieldRef,
+        "data-field": field,
+        className: cn(
+          "w-full rounded-md border border-input bg-background",
+          "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          error && "border-destructive focus-within:ring-destructive"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 p-1.5 border-b border-border bg-muted/30", children: [
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 w-8 p-0 hover:bg-accent hover:text-accent-foreground",
+                    activeFormats.bold && "bg-primary text-primary-foreground hover:bg-primary/90"
+                  ),
+                  onClick: toggleBold,
+                  children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Bold (Ctrl+B)" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 w-8 p-0 hover:bg-accent hover:text-accent-foreground",
+                    activeFormats.italic && "bg-primary text-primary-foreground hover:bg-primary/90"
+                  ),
+                  onClick: toggleItalic,
+                  children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Italic (Ctrl+I)" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 w-8 p-0 hover:bg-accent hover:text-accent-foreground",
+                    activeFormats.underline && "bg-primary text-primary-foreground hover:bg-primary/90"
+                  ),
+                  onClick: toggleUnderline,
+                  children: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Underline (Ctrl+U)" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-border mx-1" }),
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 w-8 p-0 hover:bg-accent hover:text-accent-foreground",
+                    activeFormats.bulletList && "bg-primary text-primary-foreground hover:bg-primary/90"
+                  ),
+                  onClick: toggleBulletList,
+                  children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Bullet List" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    "h-8 w-8 p-0 hover:bg-accent hover:text-accent-foreground",
+                    activeFormats.numberedList && "bg-primary text-primary-foreground hover:bg-primary/90"
+                  ),
+                  onClick: toggleNumberedList,
+                  children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Numbered List" }) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: editorRef,
+              contentEditable: true,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              className: cn(
+                "w-full px-3 py-2 text-sm text-foreground",
+                "bg-background",
+                "focus:outline-none",
+                "overflow-y-auto",
+                "[&>p]:my-2 [&>p]:leading-relaxed",
+                "[&>ul]:my-2 [&>ul]:ml-6 [&>ul]:list-disc [&>ul]:list-inside",
+                "[&_ul]:my-2 [&_ul]:ml-6 [&_ul]:list-disc [&_ul]:list-inside",
+                "[&>ol]:my-2 [&>ol]:ml-6 [&>ol]:list-decimal [&>ol]:list-inside",
+                "[&_ol]:my-2 [&_ol]:ml-6 [&_ol]:list-decimal [&_ol]:list-inside",
+                "[&>li]:my-1 [&_li]:my-1",
+                "[&_strong]:font-semibold [&_b]:font-semibold",
+                "[&_em]:italic [&_i]:italic",
+                "[&_u]:underline",
+                !value && "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none"
+              ),
+              style: {
+                minHeight,
+                maxHeight
+              },
+              "data-placeholder": placeholder
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+
+export { SmartAutoSuggestTags, SmartBasicRichTextbox, SmartCombobox, SmartDualRangeSlider, SmartFileUpload, SmartSlider };
+//# sourceMappingURL=fields.js.map
+//# sourceMappingURL=fields.js.map