performa 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1623 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+// src/core/types.ts
+var mimeTypes = {
+  JPG: "image/jpeg",
+  JPEG: "image/jpeg",
+  PNG: "image/png",
+  GIF: "image/gif",
+  WEBP: "image/webp",
+  SVG: "image/svg+xml",
+  BMP: "image/bmp",
+  TIFF: "image/tiff",
+  ICO: "image/x-icon",
+  PDF: "application/pdf",
+  DOC: "application/msword",
+  DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  XLS: "application/vnd.ms-excel",
+  XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  PPT: "application/vnd.ms-powerpoint",
+  PPTX: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  ZIP: "application/zip",
+  RAR: "application/x-rar-compressed",
+  "7Z": "application/x-7z-compressed",
+  TAR: "application/x-tar",
+  GZ: "application/x-gzip",
+  BZ2: "application/x-bzip2",
+  ISO: "application/x-iso9660-image",
+  SWF: "application/x-shockwave-flash",
+  TTF: "application/x-font-ttf",
+  MP4: "video/mp4",
+  MP3: "audio/mpeg",
+  MOV: "video/quicktime",
+  AVI: "video/x-msvideo",
+  WMV: "video/x-ms-wmv",
+  MPEG: "video/mpeg",
+  TXT: "text/plain",
+  CSV: "text/csv"
+};
+var FormContext = react.createContext(null);
+function useFormContext() {
+  const context = react.useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a Form component");
+  }
+  return context;
+}
+function useFormState() {
+  const { state } = useFormContext();
+  return state;
+}
+function useFormConfig() {
+  const { config } = useFormContext();
+  return config;
+}
+function useFieldError(fieldName) {
+  const { state } = useFormContext();
+  return state.errors?.[fieldName];
+}
+
+// src/core/utils.ts
+function bytesToHumanReadable(bytes) {
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) return "0 Bytes";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + " " + sizes[i];
+}
+function isImage(filename) {
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".webp",
+    ".svg",
+    ".bmp",
+    ".tiff",
+    ".ico"
+  ];
+  const ext = filename.toLowerCase().slice(filename.lastIndexOf("."));
+  return imageExtensions.includes(ext);
+}
+var widthClasses = {
+  1: "col-span-12 @lg:col-span-1",
+  2: "col-span-4 @lg:col-span-2",
+  3: "col-span-6 @lg:col-span-3",
+  4: "col-span-8 @lg:col-span-4",
+  5: "col-span-12 @lg:col-span-5",
+  6: "col-span-12 @lg:col-span-6",
+  7: "col-span-12 @lg:col-span-7",
+  8: "col-span-12 @lg:col-span-8",
+  9: "col-span-12 @lg:col-span-9",
+  10: "col-span-12 @lg:col-span-10",
+  11: "col-span-12 @lg:col-span-11",
+  12: "col-span-12"
+};
+var defaultTheme = {
+  darkMode: true,
+  formGroup: "form-group",
+  form: "w-full",
+  fieldset: "@container grid grid-cols-12 gap-4",
+  label: {
+    base: "block text-sm font-medium text-gray-700 dark:text-gray-300",
+    required: "text-red-500 ml-1"
+  },
+  input: {
+    base: "block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary",
+    error: "border-red-500 dark:border-red-400",
+    disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    focus: "focus:outline-none focus:ring focus:ring-primary focus:border-primary"
+  },
+  select: {
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    error: "border-red-500 dark:border-red-400",
+    disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    option: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+  },
+  textarea: {
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
+    error: "border-red-500 dark:border-red-400",
+    disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
+  },
+  checkbox: {
+    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded disabled:cursor-not-allowed",
+    error: "border-red-500 dark:border-red-400",
+    label: "ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
+  },
+  toggle: {
+    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 dark:bg-gray-600 peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-2 dark:peer-focus:ring-offset-gray-800",
+    trackActive: "peer-checked:bg-primary peer-checked:dark:bg-primary-light",
+    thumb: "absolute left-1 top-1 w-4 h-4 bg-white dark:bg-gray-200 rounded-full transition-transform duration-200 peer-checked:translate-x-5",
+    label: "block text-sm font-medium text-gray-700 dark:text-gray-300"
+  },
+  radio: {
+    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-800 disabled:cursor-not-allowed",
+    label: "ml-2 text-sm text-gray-700 dark:text-gray-300",
+    group: "mt-1"
+  },
+  file: {
+    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 dark:border-gray-600 hover:border-primary dark:hover:border-primary transition-colors duration-200",
+    dropzoneActive: "border-primary bg-primary-50 dark:bg-primary-900/20",
+    dropzoneError: "border-red-500 dark:border-red-400 hover:border-red-500 dark:hover:border-red-400",
+    icon: "w-8 h-8 text-gray-400 dark:text-gray-500",
+    text: "mt-2 text-sm text-gray-500 dark:text-gray-400",
+    hint: "mt-1 text-xs text-gray-500 dark:text-gray-400"
+  },
+  submit: {
+    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark dark:bg-primary-light dark:hover:bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-primary transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+    loading: "opacity-75",
+    spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
+  },
+  error: "mt-1 text-sm text-red-600 dark:text-red-400",
+  alert: {
+    base: "p-4 mb-4 border rounded-md",
+    error: "bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 border-red-200 dark:border-red-800",
+    success: "bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800",
+    warning: "bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200 border-yellow-200 dark:border-yellow-800",
+    info: "bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800"
+  },
+  datetime: {
+    input: "block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed cursor-pointer",
+    dropdown: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
+    picker: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
+    calendar: "grid grid-cols-7 gap-1 mb-4",
+    day: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700 dark:text-gray-300",
+    daySelected: "bg-primary text-white",
+    dayButton: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700 dark:text-gray-300",
+    dayButtonSelected: "bg-primary text-white",
+    timeInput: "w-14 px-2 py-1 text-center border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100",
+    timeLabel: "text-xs font-medium text-gray-700 dark:text-gray-300",
+    periodButton: "px-3 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300",
+    periodButtonActive: "bg-primary text-white",
+    iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+    navButton: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-white",
+    monthYear: "text-sm font-medium text-gray-900 dark:text-gray-100",
+    weekday: "text-center text-xs font-medium text-gray-500 dark:text-gray-400 p-2",
+    formatButton: "px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
+  },
+  button: {
+    primary: "flex-1 px-3 py-2 text-sm bg-primary text-white rounded hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+    secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+  },
+  readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100",
+  none: {
+    container: "form-group",
+    label: "block text-sm font-medium text-gray-700 dark:text-gray-300",
+    value: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+  }
+};
+var lightOnlyTheme = {
+  darkMode: false,
+  formGroup: "form-group",
+  form: "w-full",
+  fieldset: "@container grid grid-cols-12 gap-4",
+  label: {
+    base: "block text-sm font-medium text-gray-700",
+    required: "text-red-500 ml-1"
+  },
+  input: {
+    base: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary",
+    error: "border-red-500",
+    disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
+    focus: "focus:outline-none focus:ring focus:ring-primary focus:border-primary"
+  },
+  select: {
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed",
+    error: "border-red-500",
+    disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
+    option: "bg-white text-gray-900"
+  },
+  textarea: {
+    base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed",
+    error: "border-red-500",
+    disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed"
+  },
+  checkbox: {
+    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded disabled:cursor-not-allowed",
+    error: "border-red-500",
+    label: "ml-2 block text-sm font-medium text-gray-700"
+  },
+  toggle: {
+    track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-2",
+    trackActive: "peer-checked:bg-primary",
+    thumb: "absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 peer-checked:translate-x-5",
+    label: "block text-sm font-medium text-gray-700"
+  },
+  radio: {
+    base: "h-4 w-4 text-primary focus:ring-primary border-gray-300 disabled:cursor-not-allowed",
+    label: "ml-2 text-sm text-gray-700",
+    group: "mt-1"
+  },
+  file: {
+    dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 hover:border-primary transition-colors duration-200",
+    dropzoneActive: "border-primary bg-primary-50",
+    dropzoneError: "border-red-500 hover:border-red-500",
+    icon: "w-8 h-8 text-gray-400",
+    text: "mt-2 text-sm text-gray-500",
+    hint: "mt-1 text-xs text-gray-500"
+  },
+  submit: {
+    base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+    loading: "opacity-75",
+    spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
+  },
+  error: "mt-1 text-sm text-red-600",
+  alert: {
+    base: "p-4 mb-4 border rounded-md",
+    error: "bg-red-50 text-red-800 border-red-200",
+    success: "bg-green-50 text-green-800 border-green-200",
+    warning: "bg-yellow-50 text-yellow-800 border-yellow-200",
+    info: "bg-blue-50 text-blue-800 border-blue-200"
+  },
+  datetime: {
+    input: "block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-primary focus:border-primary disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer",
+    dropdown: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
+    picker: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
+    calendar: "grid grid-cols-7 gap-1 mb-4",
+    day: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700",
+    daySelected: "bg-primary text-white",
+    dayButton: "p-2 text-sm rounded hover:bg-primary hover:text-white transition-colors text-gray-700",
+    dayButtonSelected: "bg-primary text-white",
+    timeInput: "w-14 px-2 py-1 text-center border border-gray-300 rounded bg-white text-gray-900",
+    timeLabel: "text-xs font-medium text-gray-700",
+    periodButton: "px-3 py-1 text-xs rounded bg-gray-100 text-gray-700",
+    periodButtonActive: "bg-primary text-white",
+    iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500",
+    navButton: "p-1 hover:bg-gray-100 rounded text-gray-700",
+    monthYear: "text-sm font-medium text-gray-900",
+    weekday: "text-center text-xs font-medium text-gray-500 p-2",
+    formatButton: "px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
+  },
+  button: {
+    primary: "flex-1 px-3 py-2 text-sm bg-primary text-white rounded hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+    secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 text-gray-700"
+  },
+  readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 text-gray-900",
+  none: {
+    container: "form-group",
+    label: "block text-sm font-medium text-gray-700",
+    value: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 text-gray-900"
+  }
+};
+var defaultLabels = {
+  required: "*",
+  loading: "Loading...",
+  fileUpload: {
+    clickToUpload: "Click to upload",
+    dragAndDrop: "or drag and drop",
+    allowedTypes: "Allowed types:",
+    maxSize: "Max size:"
+  },
+  datetime: {
+    clear: "Clear",
+    done: "Done",
+    timeFormat: "Time Format"
+  },
+  select: {
+    loading: "Loading options...",
+    noOptions: "No options available"
+  }
+};
+var ThemeContext = react.createContext({
+  theme: defaultTheme,
+  labels: defaultLabels
+});
+function useFormTheme() {
+  const { theme } = react.useContext(ThemeContext);
+  return theme;
+}
+function useFormLabels() {
+  const { labels } = react.useContext(ThemeContext);
+  return labels;
+}
+function useFormThemeConfig() {
+  return react.useContext(ThemeContext);
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    if (source[key] !== void 0) {
+      if (typeof source[key] === "object" && source[key] !== null && !Array.isArray(source[key]) && typeof target[key] === "object" && target[key] !== null) {
+        result[key] = deepMerge(
+          target[key],
+          source[key]
+        );
+      } else {
+        result[key] = source[key];
+      }
+    }
+  }
+  return result;
+}
+function FormThemeProvider({
+  children,
+  theme,
+  labels,
+  lightOnly = false
+}) {
+  const baseTheme = lightOnly ? lightOnlyTheme : defaultTheme;
+  const mergedTheme = react.useMemo(
+    () => theme ? deepMerge(baseTheme, theme) : baseTheme,
+    [theme, baseTheme]
+  );
+  const mergedLabels = react.useMemo(
+    () => labels ? deepMerge(defaultLabels, labels) : defaultLabels,
+    [labels]
+  );
+  const contextValue = react.useMemo(
+    () => ({ theme: mergedTheme, labels: mergedLabels }),
+    [mergedTheme, mergedLabels]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function createTheme(customTheme, basedOn = "default") {
+  const baseTheme = basedOn === "lightOnly" ? lightOnlyTheme : defaultTheme;
+  return deepMerge(baseTheme, customTheme);
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function Alert({ type, message, className = "" }) {
+  const theme = useFormTheme();
+  const alertClass = theme.alert?.[type] ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(theme.alert?.base, alertClass, className),
+      role: "alert",
+      children: message
+    }
+  );
+}
+var Alert_default = react.memo(Alert);
+function DateTimeInput({
+  label,
+  name,
+  placeholder,
+  defaultValue,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const [selectedDate, setSelectedDate] = react.useState(null);
+  const [displayValue, setDisplayValue] = react.useState("");
+  const [showPicker, setShowPicker] = react.useState(false);
+  const [currentMonth, setCurrentMonth] = react.useState(/* @__PURE__ */ new Date());
+  const [hours, setHours] = react.useState("12");
+  const [minutes, setMinutes] = react.useState("00");
+  const [period, setPeriod] = react.useState("PM");
+  const [use24Hour, setUse24Hour] = react.useState(true);
+  const pickerRef = react.useRef(null);
+  const theme = useFormTheme();
+  const labels = useFormLabels();
+  react.useEffect(() => {
+    if (defaultValue) {
+      const date = new Date(defaultValue.toString());
+      if (!isNaN(date.getTime())) {
+        setSelectedDate(date);
+        setCurrentMonth(date);
+        updateDisplayValue(date);
+        const h24 = date.getHours();
+        const m = date.getMinutes();
+        const p = h24 >= 12 ? "PM" : "AM";
+        const h12 = h24 % 12 || 12;
+        if (use24Hour) {
+          setHours(String(h24).padStart(2, "0"));
+        } else {
+          setHours(String(h12).padStart(2, "0"));
+        }
+        setMinutes(String(m).padStart(2, "0"));
+        setPeriod(p);
+      }
+    }
+  }, [defaultValue, use24Hour]);
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+        setShowPicker(false);
+      }
+    };
+    if (showPicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showPicker]);
+  const updateDisplayValue = (date) => {
+    setDisplayValue(date.toLocaleString());
+  };
+  const getDaysInMonth = (date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay();
+    return { daysInMonth, startingDayOfWeek };
+  };
+  const handleDateSelect = (day) => {
+    let hour24 = parseInt(hours, 10);
+    if (!use24Hour) {
+      if (period === "PM" && hour24 !== 12) hour24 += 12;
+      if (period === "AM" && hour24 === 12) hour24 = 0;
+    }
+    const newDate = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      day,
+      hour24,
+      parseInt(minutes, 10)
+    );
+    setSelectedDate(newDate);
+    updateDisplayValue(newDate);
+  };
+  const handleTimeChange = () => {
+    if (selectedDate) {
+      const newDate = new Date(selectedDate);
+      let h = parseInt(hours, 10);
+      if (!use24Hour) {
+        if (period === "PM" && h !== 12) h += 12;
+        if (period === "AM" && h === 12) h = 0;
+      }
+      newDate.setHours(h, parseInt(minutes, 10));
+      setSelectedDate(newDate);
+      updateDisplayValue(newDate);
+    }
+  };
+  const changeMonth = (offset) => {
+    setCurrentMonth(
+      (prev) => new Date(prev.getFullYear(), prev.getMonth() + offset, 1)
+    );
+  };
+  const renderCalendar = () => {
+    const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentMonth);
+    const days = [];
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      days.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2" }, `empty-${i}`));
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const isSelected = selectedDate && selectedDate.getDate() === day && selectedDate.getMonth() === currentMonth.getMonth() && selectedDate.getFullYear() === currentMonth.getFullYear();
+      days.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleDateSelect(day),
+            className: cx(
+              theme.datetime?.day,
+              isSelected && theme.datetime?.daySelected
+            ),
+            children: day
+          },
+          day
+        )
+      );
+    }
+    return days;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), ref: pickerRef, children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.label?.base, children: [
+      label,
+      " ",
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: displayValue,
+          placeholder,
+          readOnly: true,
+          onFocus: () => !disabled && setShowPicker(true),
+          onClick: () => !disabled && setShowPicker(true),
+          className: cx(
+            theme.datetime?.input,
+            error && theme.input?.error
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => !disabled && setShowPicker(true),
+          disabled,
+          className: theme.datetime?.iconButton,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "hidden",
+          name,
+          id: name,
+          value: selectedDate ? selectedDate.toISOString() : "",
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${name}-error` : void 0
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.datetime?.dropdown, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => changeMonth(-1),
+              className: theme.datetime?.navButton,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.datetime?.monthYear, children: currentMonth.toLocaleDateString("en-GB", {
+            month: "long",
+            year: "numeric"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => changeMonth(1),
+              className: theme.datetime?.navButton,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: (labels.datetime?.weekdays ?? [
+          "Su",
+          "Mo",
+          "Tu",
+          "We",
+          "Th",
+          "Fr",
+          "Sa"
+        ]).map((day) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: theme.datetime?.weekday,
+            children: day
+          },
+          day
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-4", children: renderCalendar() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.datetime?.timeLabel, children: labels.datetime?.timeFormat }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  const newFormat = !use24Hour;
+                  setUse24Hour(newFormat);
+                  if (selectedDate) {
+                    const h24 = selectedDate.getHours();
+                    if (newFormat) {
+                      setHours(
+                        String(h24).padStart(2, "0")
+                      );
+                    } else {
+                      const h12 = h24 % 12 || 12;
+                      setHours(
+                        String(h12).padStart(2, "0")
+                      );
+                      setPeriod(
+                        h24 >= 12 ? "PM" : "AM"
+                      );
+                    }
+                  }
+                },
+                className: theme.datetime?.formatButton,
+                children: use24Hour ? "24hr" : "12hr"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                min: use24Hour ? "0" : "1",
+                max: use24Hour ? "23" : "12",
+                value: hours,
+                onChange: (e) => {
+                  const val = parseInt(e.target.value, 10);
+                  const max = use24Hour ? 23 : 12;
+                  const min = use24Hour ? 0 : 1;
+                  if (val >= min && val <= max) {
+                    setHours(
+                      e.target.value.padStart(2, "0")
+                    );
+                    handleTimeChange();
+                  }
+                },
+                className: theme.datetime?.timeInput
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 dark:text-gray-100", children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                min: "0",
+                max: "59",
+                value: minutes,
+                onChange: (e) => {
+                  const val = parseInt(e.target.value, 10);
+                  if (val >= 0 && val <= 59) {
+                    setMinutes(
+                      e.target.value.padStart(2, "0")
+                    );
+                    handleTimeChange();
+                  }
+                },
+                className: theme.datetime?.timeInput
+              }
+            ),
+            !use24Hour && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setPeriod("AM");
+                    handleTimeChange();
+                  },
+                  className: cx(
+                    theme.datetime?.periodButton,
+                    period === "AM" && theme.datetime?.periodButtonActive
+                  ),
+                  children: "AM"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setPeriod("PM");
+                    handleTimeChange();
+                  },
+                  className: cx(
+                    theme.datetime?.periodButton,
+                    period === "PM" && theme.datetime?.periodButtonActive
+                  ),
+                  children: "PM"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSelectedDate(null);
+                setDisplayValue("");
+                setShowPicker(false);
+              },
+              className: theme.button?.secondary,
+              children: labels.datetime?.clear
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowPicker(false),
+              className: theme.button?.primary,
+              children: labels.datetime?.done
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var DateTimeInput_default = react.memo(DateTimeInput);
+function TextInput({
+  label,
+  placeholder,
+  name,
+  defaultValue,
+  className,
+  disabled,
+  error,
+  rules,
+  type = "text",
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const [passwordVisible, setPasswordVisible] = react.useState(false);
+  const theme = useFormTheme();
+  const onTogglePassword = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.label?.base, children: [
+      label,
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: type === "password" ? passwordVisible ? "text" : "password" : type,
+          name,
+          id: name,
+          placeholder,
+          defaultValue: defaultValue?.toString(),
+          disabled,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${name}-error` : void 0,
+          className: cx(
+            theme.input?.base,
+            error && theme.input?.error,
+            theme.input?.disabled
+          )
+        }
+      ),
+      type === "password" && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onTogglePassword,
+          className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 z-10",
+          "aria-label": passwordVisible ? "Hide password" : "Show password",
+          children: [
+            passwordVisible ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-5 w-5 opacity-50" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: passwordVisible ? "Hide password" : "Show password" })
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var TextInput_default = react.memo(TextInput);
+function SelectInput({
+  label,
+  name,
+  options,
+  defaultValue,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const theme = useFormTheme();
+  const labels = useFormLabels();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.label?.base, children: [
+      label,
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        name,
+        id: name,
+        defaultValue: defaultValue?.toString(),
+        disabled,
+        "aria-invalid": !!error,
+        "aria-describedby": error ? `${name}-error` : void 0,
+        className: cx(
+          theme.select?.base,
+          error && theme.select?.error
+        ),
+        children: !options || options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, className: theme.select?.option, children: !options ? labels.select?.loading : labels.select?.noOptions }) : options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          "option",
+          {
+            value: option.value,
+            className: theme.select?.option,
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var SelectInput_default = react.memo(SelectInput);
+function TextAreaInput({
+  label,
+  name,
+  placeholder,
+  defaultValue,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const theme = useFormTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.label?.base, children: [
+      label,
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        name,
+        id: name,
+        placeholder,
+        defaultValue: defaultValue?.toString(),
+        disabled,
+        "aria-invalid": !!error,
+        "aria-describedby": error ? `${name}-error` : void 0,
+        className: cx(
+          theme.textarea?.base,
+          error && theme.textarea?.error
+        ),
+        rows: 4
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var TextAreaInput_default = react.memo(TextAreaInput);
+function CheckboxInput({
+  label,
+  name,
+  defaultChecked,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const theme = useFormTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          name,
+          id: name,
+          defaultChecked,
+          disabled,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${name}-error` : void 0,
+          className: cx(
+            theme.checkbox?.base,
+            error && theme.checkbox?.error
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.checkbox?.label, children: [
+        label,
+        rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var CheckboxInput_default = react.memo(CheckboxInput);
+function ToggleInput({
+  label,
+  name,
+  defaultChecked,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const theme = useFormTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: theme.toggle?.label, children: [
+        label,
+        rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: name,
+          className: "relative inline-block w-11 h-6 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                name,
+                id: name,
+                defaultChecked,
+                disabled,
+                "aria-invalid": !!error,
+                "aria-describedby": error ? `${name}-error` : void 0,
+                className: "sr-only peer"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cx(
+                  theme.toggle?.track,
+                  !disabled && theme.toggle?.trackActive,
+                  disabled && "cursor-not-allowed"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.toggle?.thumb })
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var ToggleInput_default = react.memo(ToggleInput);
+function RadioInput({
+  label,
+  name,
+  options,
+  defaultValue,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName
+}) {
+  const theme = useFormTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `${name}-group`, className: theme.label?.base, children: [
+      label,
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: theme.radio?.group,
+        role: "radiogroup",
+        "aria-labelledby": `${name}-group`,
+        children: options?.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              id: `${name}-${option.value}`,
+              value: option.value,
+              defaultChecked: defaultValue === option.value,
+              disabled,
+              "aria-invalid": !!error,
+              className: theme.radio?.base
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: `${name}-${option.value}`,
+              className: theme.radio?.label,
+              children: option.label
+            }
+          )
+        ] }, option.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var RadioInput_default = react.memo(RadioInput);
+function FileInput({
+  label,
+  name,
+  className,
+  disabled,
+  error,
+  rules,
+  before,
+  beforeClassName,
+  after,
+  afterClassName,
+  defaultValue,
+  metaData,
+  uploadDir,
+  baseUrl
+}) {
+  const [fileName, setFileName] = react.useState(null);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const theme = useFormTheme();
+  const labels = useFormLabels();
+  const handleChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setFileName(e.target.files[0].name);
+    } else {
+      setFileName(null);
+    }
+  };
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (disabled) return;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      if (inputRef.current) {
+        inputRef.current.files = e.dataTransfer.files;
+        setFileName(e.dataTransfer.files[0].name);
+        const event = new Event("change", { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+      }
+    }
+  };
+  const getFileUrl = () => {
+    if (!defaultValue) return null;
+    if (baseUrl && uploadDir) {
+      return `${baseUrl}/${uploadDir}/${defaultValue}`;
+    }
+    if (baseUrl) {
+      return `${baseUrl}/${defaultValue}`;
+    }
+    return null;
+  };
+  const fileUrl = getFileUrl();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    before && /* @__PURE__ */ jsxRuntime.jsx("p", { className: beforeClassName ?? "", children: before }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.label?.base, "mb-1"), children: [
+      label,
+      rules?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          name,
+          id: name,
+          disabled,
+          onChange: handleChange,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${name}-error` : void 0,
+          className: "sr-only",
+          accept: rules?.mimeTypes ? rules.mimeTypes.map((type) => mimeTypes[type]).join(",") : "*"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: name,
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          className: cx(
+            theme.file?.dropzone,
+            disabled && "cursor-not-allowed",
+            isDragging && theme.file?.dropzoneActive,
+            error && theme.file?.dropzoneError
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: theme.file?.icon,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: theme.file?.text, children: fileName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-primary", children: fileName }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: labels.fileUpload?.clickToUpload }),
+              " ",
+              labels.fileUpload?.dragAndDrop
+            ] }) }),
+            rules?.mimeTypes && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: theme.file?.hint, children: [
+              labels.fileUpload?.allowedTypes,
+              " ",
+              Object.values(rules.mimeTypes).join(", ")
+            ] }),
+            rules?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: theme.file?.hint, children: [
+              labels.fileUpload?.maxSize,
+              " ",
+              Math.round(
+                rules.maxFileSize / 1024 / 1024 * 10
+              ) / 10,
+              " ",
+              "MB"
+            ] })
+          ] })
+        }
+      ),
+      fileUrl && defaultValue && isImage(defaultValue.toString()) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: fileUrl,
+            alt: "",
+            className: "mt-2 max-h-40 object-contain rounded-md border border-gray-300 dark:border-gray-600"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: fileUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "mt-2 inline-flex items-center text-xs text-primary hover:underline dark:text-gray-50",
+            children: [
+              "View Current ",
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "ml-1 h-4 w-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${name}-error`, className: theme.error, children: error }),
+    after && /* @__PURE__ */ jsxRuntime.jsx("p", { className: afterClassName ?? "", children: after })
+  ] });
+}
+var FileInput_default = react.memo(FileInput);
+function HiddenInput({
+  name,
+  defaultValue,
+  className,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "hidden",
+      name,
+      defaultValue: defaultValue?.toString(),
+      disabled,
+      className
+    }
+  );
+}
+function SubmitInput({
+  label,
+  name,
+  className,
+  disabled,
+  loading,
+  defaultValue,
+  hideSpinner
+}) {
+  const theme = useFormTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "submit",
+      name,
+      disabled: disabled || loading,
+      value: defaultValue?.toString() ?? "",
+      className: cx(
+        theme.submit?.base,
+        loading && theme.submit?.loading,
+        className
+      ),
+      children: [
+        loading && hideSpinner !== true && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: theme.submit?.spinner,
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function NoneInput({ label, value, className }) {
+  const theme = useFormTheme();
+  const isJsonString = (str) => {
+    try {
+      JSON.parse(str);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(theme.formGroup, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.label?.base, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.readonly, children: isJsonString(value) ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside space-y-1", children: Object.entries(JSON.parse(value)).map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+        key,
+        ":"
+      ] }),
+      " ",
+      String(val)
+    ] }, key)) }) : value })
+  ] });
+}
+var NoneInput_default = react.memo(NoneInput);
+function Form({
+  config,
+  className,
+  errors,
+  isSubmitting = false,
+  formElement: FormElement,
+  formProps = {},
+  fileBaseUrl
+}) {
+  const theme = useFormTheme();
+  const {
+    method = "post",
+    encType = config.encType || "application/x-www-form-urlencoded",
+    action = "",
+    fields
+  } = config;
+  const state = {
+    errors,
+    isSubmitting
+  };
+  const contextValue = {
+    state,
+    config
+  };
+  const FormTag = FormElement || "form";
+  const formContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    errors && "__server" in errors && errors.__server ? /* @__PURE__ */ jsxRuntime.jsx(Alert_default, { type: "error", message: errors.__server }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "fieldset",
+      {
+        className: theme.fieldset,
+        disabled: isSubmitting,
+        children: Object.entries(fields).map(([key, field]) => {
+          const fieldError = errors?.[key];
+          switch (field.type) {
+            case "text":
+            case "email":
+            case "password":
+            case "number":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TextInput_default,
+                {
+                  label: field.label,
+                  placeholder: field.placeholder,
+                  name: key,
+                  defaultValue: field.defaultValue,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  type: field.type,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "datetime":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                DateTimeInput_default,
+                {
+                  label: field.label,
+                  placeholder: field.placeholder,
+                  name: key,
+                  defaultValue: field.defaultValue,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "select":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                SelectInput_default,
+                {
+                  label: field.label,
+                  name: key,
+                  options: field.options,
+                  defaultValue: field.defaultValue,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "textarea":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TextAreaInput_default,
+                {
+                  label: field.label,
+                  placeholder: field.placeholder,
+                  name: key,
+                  defaultValue: field.defaultValue,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "checkbox":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                CheckboxInput_default,
+                {
+                  label: field.label,
+                  name: key,
+                  defaultChecked: field.defaultChecked,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "toggle":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ToggleInput_default,
+                {
+                  label: field.label,
+                  name: key,
+                  defaultChecked: field.defaultChecked,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "radio":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                RadioInput_default,
+                {
+                  label: field.label,
+                  name: key,
+                  options: field.options,
+                  defaultValue: field.defaultValue,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName
+                },
+                key
+              );
+            case "file":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                FileInput_default,
+                {
+                  label: field.label,
+                  name: key,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  defaultValue: field.defaultValue,
+                  error: fieldError,
+                  rules: field.rules,
+                  before: field.before,
+                  beforeClassName: field.beforeClassName,
+                  after: field.after,
+                  afterClassName: field.afterClassName,
+                  metaData: field.metaData,
+                  uploadDir: field.uploadDir,
+                  baseUrl: fileBaseUrl
+                },
+                key
+              );
+            case "hidden":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                HiddenInput,
+                {
+                  name: key,
+                  defaultValue: field.defaultValue,
+                  disabled: field.disabled
+                },
+                key
+              );
+            case "submit":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                SubmitInput,
+                {
+                  label: field.label,
+                  name: key,
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  disabled: field.disabled,
+                  rules: field.rules,
+                  loading: isSubmitting,
+                  defaultValue: field.defaultValue,
+                  hideSpinner: field.hideSpinner
+                },
+                key
+              );
+            case "none":
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                NoneInput_default,
+                {
+                  className: `${widthClasses[field.width || 12]} ${field.className || ""}`,
+                  value: field.defaultValue?.toString() ?? "",
+                  label: field.label
+                },
+                key
+              );
+            default:
+              return null;
+          }
+        })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FormTag,
+    {
+      method,
+      encType,
+      action,
+      className: cx(theme.form, className),
+      noValidate: true,
+      ...formProps,
+      children: formContent
+    }
+  ) });
+}
+
+exports.Alert = Alert_default;
+exports.CheckboxInput = CheckboxInput_default;
+exports.DateTimeInput = DateTimeInput_default;
+exports.FileInput = FileInput_default;
+exports.Form = Form;
+exports.FormContext = FormContext;
+exports.FormThemeProvider = FormThemeProvider;
+exports.HiddenInput = HiddenInput;
+exports.NoneInput = NoneInput_default;
+exports.RadioInput = RadioInput_default;
+exports.SelectInput = SelectInput_default;
+exports.SubmitInput = SubmitInput;
+exports.TextAreaInput = TextAreaInput_default;
+exports.TextInput = TextInput_default;
+exports.ToggleInput = ToggleInput_default;
+exports.bytesToHumanReadable = bytesToHumanReadable;
+exports.createTheme = createTheme;
+exports.cx = cx;
+exports.defaultLabels = defaultLabels;
+exports.defaultTheme = defaultTheme;
+exports.isImage = isImage;
+exports.lightOnlyTheme = lightOnlyTheme;
+exports.mimeTypes = mimeTypes;
+exports.useFieldError = useFieldError;
+exports.useFormConfig = useFormConfig;
+exports.useFormContext = useFormContext;
+exports.useFormLabels = useFormLabels;
+exports.useFormState = useFormState;
+exports.useFormTheme = useFormTheme;
+exports.useFormThemeConfig = useFormThemeConfig;
+exports.widthClasses = widthClasses;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map