@page-speed/forms 0.2.3 → 0.3.0

package/dist/inputs.js

@@ -1,4 +1,4 @@
-import * as React6 from 'react';
+import * as React7 from 'react';
 
 // src/inputs/TextInput.tsx
 function TextInput({
@@ -23,7 +23,7 @@ function TextInput({
   const baseClassName = "text-input";
   const errorClassName = error ? "text-input--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "input",
     {
       type,
@@ -69,7 +69,7 @@ function TextArea({
   const baseClassName = "textarea";
   const errorClassName = error ? "textarea--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "textarea",
     {
       name,
@@ -106,8 +106,8 @@ function Checkbox({
   label,
   ...props
 }) {
-  const inputRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const inputRef = React7.useRef(null);
+  React7.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -121,7 +121,7 @@ function Checkbox({
   const baseClassName = "checkbox";
   const errorClassName = error ? "checkbox--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  const checkbox = /* @__PURE__ */ React6.createElement(
+  const checkbox = /* @__PURE__ */ React7.createElement(
     "input",
     {
       ref: inputRef,
@@ -140,7 +140,7 @@ function Checkbox({
     }
   );
   if (label) {
-    return /* @__PURE__ */ React6.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React6.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React7.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label-text" }, label));
   }
   return checkbox;
 }
@@ -196,7 +196,7 @@ function CheckboxGroup({
   const layoutClassName = `checkbox-group--${layout}`;
   const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
   const maxReached = Boolean(maxSelections && value.length >= maxSelections);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: combinedClassName,
@@ -209,9 +209,9 @@ function CheckboxGroup({
         gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
       } : void 0
     },
-    label && /* @__PURE__ */ React6.createElement("div", { className: "checkbox-group-label" }, label),
-    description && /* @__PURE__ */ React6.createElement("div", { className: "checkbox-group-description" }, description),
-    /* @__PURE__ */ React6.createElement("div", { className: "checkbox-options" }, showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React6.createElement("label", { className: "checkbox-option checkbox-option--select-all" }, /* @__PURE__ */ React6.createElement(
+    label && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-label" }, label),
+    description && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-description" }, description),
+    /* @__PURE__ */ React7.createElement("div", { className: "checkbox-options" }, showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement("label", { className: "checkbox-option checkbox-option--select-all" }, /* @__PURE__ */ React7.createElement(
       "input",
       {
         type: "checkbox",
@@ -227,18 +227,18 @@ function CheckboxGroup({
         className: "checkbox-input",
         "aria-label": selectAllLabel
       }
-    ), /* @__PURE__ */ React6.createElement("div", { className: "checkbox-content" }, /* @__PURE__ */ React6.createElement("span", { className: "checkbox-label" }, selectAllLabel))), options.map((option) => {
+    ), /* @__PURE__ */ React7.createElement("div", { className: "checkbox-content" }, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, selectAllLabel))), options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
       const checkboxId = `${name}-${option.value}`;
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React7.createElement(
         "label",
         {
           key: option.value,
           className: `checkbox-option ${isDisabled ? "checkbox-option--disabled" : ""}`,
           htmlFor: checkboxId
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React7.createElement(
           "input",
           {
             type: "checkbox",
@@ -254,7 +254,7 @@ function CheckboxGroup({
             "aria-describedby": option.description ? `${checkboxId}-description` : props["aria-describedby"]
           }
         ),
-        /* @__PURE__ */ React6.createElement("div", { className: "checkbox-content" }, renderOption ? renderOption(option) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("span", { className: "checkbox-label" }, option.label), option.description && /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React7.createElement("div", { className: "checkbox-content" }, renderOption ? renderOption(option) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
           "span",
           {
             className: "checkbox-description",
@@ -264,7 +264,7 @@ function CheckboxGroup({
         )))
       );
     })),
-    (minSelections || maxSelections) && /* @__PURE__ */ React6.createElement("div", { className: "checkbox-group-feedback", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React6.createElement("span", { className: "checkbox-group-feedback-min" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React6.createElement("span", { className: "checkbox-group-feedback-max" }, value.length, "/", maxSelections, " selected"))
+    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-feedback", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React7.createElement("span", { className: "checkbox-group-feedback-min" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React7.createElement("span", { className: "checkbox-group-feedback-max" }, value.length, "/", maxSelections, " selected"))
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
@@ -317,7 +317,7 @@ function Radio({
   const errorClassName = error ? "radio-group--error" : "";
   const layoutClassName = `radio-group--${layout}`;
   const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: combinedClassName,
@@ -327,19 +327,19 @@ function Radio({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label && /* @__PURE__ */ React6.createElement("div", { className: "radio-group-label" }, label),
-    /* @__PURE__ */ React6.createElement("div", { className: "radio-options" }, options.map((option, index) => {
+    label && /* @__PURE__ */ React7.createElement("div", { className: "radio-group-label" }, label),
+    /* @__PURE__ */ React7.createElement("div", { className: "radio-options" }, options.map((option, index) => {
       const isChecked = value === option.value;
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React7.createElement(
         "label",
         {
           key: option.value,
           className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
           htmlFor: radioId
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React7.createElement(
           "input",
           {
             type: "radio",
@@ -356,7 +356,7 @@ function Radio({
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
         ),
-        /* @__PURE__ */ React6.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React6.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React7.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React7.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
           "span",
           {
             className: "radio-description",
@@ -388,19 +388,19 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [searchQuery, setSearchQuery] = React6.useState("");
-  const [focusedIndex, setFocusedIndex] = React6.useState(-1);
-  const selectRef = React6.useRef(null);
-  const searchInputRef = React6.useRef(null);
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [searchQuery, setSearchQuery] = React7.useState("");
+  const [focusedIndex, setFocusedIndex] = React7.useState(-1);
+  const selectRef = React7.useRef(null);
+  const searchInputRef = React7.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React6.useMemo(() => {
+  const allOptions = React7.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React6.useMemo(() => {
+  const filteredOptions = React7.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -410,7 +410,7 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React6.useMemo(() => {
+  const selectedOption = React7.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
   const handleSelect = (optionValue) => {
@@ -514,7 +514,7 @@ function Select({
   const handleBlur = () => {
     onBlur?.();
   };
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -535,7 +535,7 @@ function Select({
   const disabledClassName = disabled ? "select--disabled" : "";
   const openClassName = isOpen ? "select--open" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     {
       ref: selectRef,
@@ -543,7 +543,7 @@ function Select({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "select",
       {
         name,
@@ -556,10 +556,10 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React6.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React6.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React7.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React7.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "div",
       {
         className: "select-trigger",
@@ -573,8 +573,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React6.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React6.createElement("span", { className: "select-placeholder" }, placeholder)),
-      /* @__PURE__ */ React6.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React6.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7.createElement("span", { className: "select-placeholder" }, placeholder)),
+      /* @__PURE__ */ React7.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React7.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React7.createElement(
         "button",
         {
           type: "button",
@@ -584,9 +584,9 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React6.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React7.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React6.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React6.createElement("div", { className: "select-search" }, /* @__PURE__ */ React6.createElement(
+    isOpen && /* @__PURE__ */ React7.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React7.createElement("div", { className: "select-search" }, /* @__PURE__ */ React7.createElement(
       "input",
       {
         ref: searchInputRef,
@@ -598,19 +598,19 @@ function Select({
         onClick: (e) => e.stopPropagation(),
         "aria-label": "Search options"
       }
-    )), /* @__PURE__ */ React6.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React6.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
+    )), /* @__PURE__ */ React7.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React7.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
       // Render grouped options
       optionGroups.map((group, groupIndex) => {
         const groupOptions = group.options.filter(
           (opt) => filteredOptions.includes(opt)
         );
         if (groupOptions.length === 0) return null;
-        return /* @__PURE__ */ React6.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React6.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
+        return /* @__PURE__ */ React7.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React7.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
           const globalIndex = filteredOptions.indexOf(option);
           const isSelected = value === option.value;
           const isFocused = globalIndex === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React6.createElement(
+          return /* @__PURE__ */ React7.createElement(
             "div",
             {
               key: option.value,
@@ -630,7 +630,7 @@ function Select({
         const isSelected = value === option.value;
         const isFocused = index === focusedIndex;
         const isDisabled = option.disabled;
-        return /* @__PURE__ */ React6.createElement(
+        return /* @__PURE__ */ React7.createElement(
           "div",
           {
             key: option.value,
@@ -663,13 +663,23 @@ function FileInput({
   maxFiles = 1,
   multiple = false,
   showPreview = true,
+  showProgress = true,
+  uploadProgress = {},
+  enableCropping = false,
+  cropAspectRatio,
+  onCropComplete,
   onValidationError,
   onFileRemove,
   ...props
 }) {
-  const inputRef = React6.useRef(null);
-  const [dragActive, setDragActive] = React6.useState(false);
-  const validateFile = React6.useCallback(
+  const inputRef = React7.useRef(null);
+  const [dragActive, setDragActive] = React7.useState(false);
+  const [cropperOpen, setCropperOpen] = React7.useState(false);
+  const [imageToCrop, setImageToCrop] = React7.useState(null);
+  const [crop, setCrop] = React7.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React7.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React7.useState(null);
+  const validateFile = React7.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -704,7 +714,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React6.useCallback(
+  const handleFiles = React7.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -731,14 +741,110 @@ function FileInput({
         onValidationError(validationErrors);
       }
       if (validFiles.length > 0 && totalFiles <= maxFiles) {
-        const updatedFiles = multiple ? [...value, ...validFiles] : validFiles;
-        onChange(updatedFiles.slice(0, maxFiles));
+        const firstImage = validFiles.find((f) => f.type.startsWith("image/"));
+        if (enableCropping && firstImage && !multiple) {
+          const previewUrl = URL.createObjectURL(firstImage);
+          setImageToCrop({ file: firstImage, url: previewUrl });
+          setCropperOpen(true);
+        } else {
+          const updatedFiles = multiple ? [...value, ...validFiles] : validFiles;
+          onChange(updatedFiles.slice(0, maxFiles));
+        }
       }
       if (inputRef.current) {
         inputRef.current.value = "";
       }
     },
-    [value, onChange, validateFile, maxFiles, multiple, onValidationError]
+    [value, onChange, validateFile, maxFiles, multiple, enableCropping, onValidationError]
+  );
+  const createCroppedImage = React7.useCallback(
+    async (imageUrl, cropArea) => {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          canvas.width = cropArea.width;
+          canvas.height = cropArea.height;
+          ctx.drawImage(
+            image,
+            cropArea.x,
+            cropArea.y,
+            cropArea.width,
+            cropArea.height,
+            0,
+            0,
+            cropArea.width,
+            cropArea.height
+          );
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob from canvas"));
+            }
+          }, "image/jpeg", 0.95);
+        };
+        image.onerror = () => {
+          reject(new Error("Failed to load image"));
+        };
+        image.src = imageUrl;
+      });
+    },
+    []
+  );
+  const handleCropSave = React7.useCallback(async () => {
+    if (!imageToCrop || !croppedAreaPixels) return;
+    try {
+      const croppedBlob = await createCroppedImage(
+        imageToCrop.url,
+        croppedAreaPixels
+      );
+      if (onCropComplete) {
+        onCropComplete(croppedBlob, imageToCrop.file);
+      }
+      const croppedFile = new File(
+        [croppedBlob],
+        imageToCrop.file.name,
+        { type: "image/jpeg" }
+      );
+      const updatedFiles = multiple ? [...value, croppedFile] : [croppedFile];
+      onChange(updatedFiles);
+      setCropperOpen(false);
+      URL.revokeObjectURL(imageToCrop.url);
+      setImageToCrop(null);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setCroppedAreaPixels(null);
+    } catch (error2) {
+      console.error("Failed to crop image:", error2);
+    }
+  }, [imageToCrop, croppedAreaPixels, createCroppedImage, onCropComplete, value, onChange, multiple]);
+  const handleCropCancel = React7.useCallback(() => {
+    if (imageToCrop) {
+      URL.revokeObjectURL(imageToCrop.url);
+    }
+    setCropperOpen(false);
+    setImageToCrop(null);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+  }, [imageToCrop]);
+  const onCropChange = React7.useCallback((crop2) => {
+    setCrop(crop2);
+  }, []);
+  const onZoomChange = React7.useCallback((zoom2) => {
+    setZoom(zoom2);
+  }, []);
+  const onCropCompleteInternal = React7.useCallback(
+    (_, croppedAreaPixels2) => {
+      setCroppedAreaPixels(croppedAreaPixels2);
+    },
+    []
   );
   const handleChange = (e) => {
     handleFiles(e.target.files);
@@ -751,6 +857,12 @@ function FileInput({
       onFileRemove(fileToRemove, index);
     }
   };
+  const handleCrop = (file) => {
+    if (!file.type.startsWith("image/")) return;
+    const previewUrl = URL.createObjectURL(file);
+    setImageToCrop({ file, url: previewUrl });
+    setCropperOpen(true);
+  };
   const handleDrag = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -789,7 +901,7 @@ function FileInput({
     }
     return null;
   };
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -797,14 +909,17 @@ function FileInput({
           URL.revokeObjectURL(previewUrl);
         }
       });
+      if (imageToCrop) {
+        URL.revokeObjectURL(imageToCrop.url);
+      }
     };
-  }, [value]);
+  }, [value, imageToCrop]);
   const baseClassName = "file-input";
   const errorClassName = error ? "file-input--error" : "";
   const dragClassName = dragActive ? "file-input--drag-active" : "";
   const disabledClassName = disabled ? "file-input--disabled" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${dragClassName} ${disabledClassName} ${className}`.trim();
-  return /* @__PURE__ */ React6.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement(
     "input",
     {
       ref: inputRef,
@@ -822,7 +937,7 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: "file-input__dropzone",
@@ -837,7 +952,7 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "file-input__dropzone-content" }, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement("div", { className: "file-input__dropzone-content" }, /* @__PURE__ */ React7.createElement(
       "svg",
       {
         className: "file-input__icon",
@@ -851,13 +966,13 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React6.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React6.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React6.createElement("p", { className: "file-input__placeholder" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React6.createElement("p", { className: "file-input__hint" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React6.createElement("p", { className: "file-input__hint" }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React6.createElement("ul", { className: "file-input__list", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React7.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React7.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React7.createElement("p", { className: "file-input__placeholder" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React7.createElement("p", { className: "file-input__hint" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7.createElement("p", { className: "file-input__hint" }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React7.createElement("ul", { className: "file-input__list", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React6.createElement("li", { key: `${file.name}-${index}`, className: "file-input__item" }, previewUrl && /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement("li", { key: `${file.name}-${index}`, className: "file-input__item" }, previewUrl && /* @__PURE__ */ React7.createElement(
       "img",
       {
         src: previewUrl,
@@ -866,7 +981,46 @@ function FileInput({
         width: "48",
         height: "48"
       }
-    ), /* @__PURE__ */ React6.createElement("div", { className: "file-input__details" }, /* @__PURE__ */ React6.createElement("span", { className: "file-input__filename" }, file.name), /* @__PURE__ */ React6.createElement("span", { className: "file-input__filesize" }, formatFileSize(file.size))), /* @__PURE__ */ React6.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: "file-input__details" }, /* @__PURE__ */ React7.createElement("span", { className: "file-input__filename" }, file.name), /* @__PURE__ */ React7.createElement("span", { className: "file-input__filesize" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React7.createElement("div", { className: "file-input__progress" }, /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: "file-input__progress-bar",
+        style: { width: `${uploadProgress[file.name]}%` },
+        role: "progressbar",
+        "aria-valuenow": uploadProgress[file.name],
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
+      }
+    ), /* @__PURE__ */ React7.createElement("span", { className: "file-input__progress-text" }, uploadProgress[file.name], "%"))), enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleCrop(file);
+        },
+        disabled,
+        className: "file-input__crop",
+        "aria-label": `Crop ${file.name}`
+      },
+      /* @__PURE__ */ React7.createElement(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React7.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+        /* @__PURE__ */ React7.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+      )
+    ), /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
@@ -878,7 +1032,7 @@ function FileInput({
         className: "file-input__remove",
         "aria-label": `Remove ${file.name}`
       },
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement(
         "svg",
         {
           width: "20",
@@ -891,14 +1045,1067 @@ function FileInput({
           strokeLinejoin: "round",
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React6.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ React6.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ React7.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ React7.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       )
     ));
-  })));
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-modal" }, /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: "file-input-cropper-overlay",
+      onClick: handleCropCancel,
+      "aria-label": "Close cropper"
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-container" }, /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-header" }, /* @__PURE__ */ React7.createElement("h3", { className: "file-input-cropper-title" }, "Crop Image"), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "file-input-cropper-close",
+      onClick: handleCropCancel,
+      "aria-label": "Close"
+    },
+    "\u2715"
+  )), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-content" }, /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: "file-input-cropper-image-container",
+      onMouseDown: (e) => {
+        e.preventDefault();
+        const startX = e.clientX - crop.x;
+        const startY = e.clientY - crop.y;
+        const handleMouseMove = (moveEvent) => {
+          onCropChange({
+            x: moveEvent.clientX - startX,
+            y: moveEvent.clientY - startY
+          });
+        };
+        const handleMouseUp = () => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      }
+    },
+    /* @__PURE__ */ React7.createElement(
+      "img",
+      {
+        src: imageToCrop.url,
+        alt: "Crop preview",
+        className: "file-input-cropper-image",
+        style: {
+          transform: `translate(${crop.x}px, ${crop.y}px) scale(${zoom})`
+        },
+        draggable: false,
+        onLoad: (e) => {
+          const img = e.currentTarget;
+          const containerWidth = 600;
+          const containerHeight = 400;
+          const cropWidth = cropAspectRatio ? Math.min(containerWidth * 0.8, containerHeight * 0.8 * cropAspectRatio) : containerWidth * 0.8;
+          const cropHeight = cropAspectRatio ? cropWidth / cropAspectRatio : containerHeight * 0.8;
+          const scale = zoom;
+          const imgWidth = img.naturalWidth;
+          const imgHeight = img.naturalHeight;
+          const centerX = containerWidth / 2;
+          const centerY = containerHeight / 2;
+          const cropX = (centerX - crop.x - cropWidth / 2) / scale;
+          const cropY = (centerY - crop.y - cropHeight / 2) / scale;
+          onCropCompleteInternal(null, {
+            x: Math.max(0, cropX),
+            y: Math.max(0, cropY),
+            width: Math.min(cropWidth / scale, imgWidth),
+            height: Math.min(cropHeight / scale, imgHeight)
+          });
+        }
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: "file-input-cropper-overlay-box",
+        style: {
+          width: cropAspectRatio ? `${Math.min(80, 80 * cropAspectRatio)}%` : "80%",
+          aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
+        }
+      },
+      /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid" }, /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid-line" }), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid-line" }))
+    )
+  ), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-controls" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "zoom-slider", className: "file-input-cropper-label" }, "Zoom: ", zoom.toFixed(1), "x"), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "zoom-slider",
+      type: "range",
+      min: "1",
+      max: "3",
+      step: "0.1",
+      value: zoom,
+      onChange: (e) => onZoomChange(parseFloat(e.target.value)),
+      className: "file-input-cropper-slider",
+      "aria-label": "Zoom level"
+    }
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-footer" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "file-input-cropper-button file-input-cropper-button--cancel",
+      onClick: handleCropCancel
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "file-input-cropper-button file-input-cropper-button--save",
+      onClick: handleCropSave
+    },
+    "Save"
+  )))));
 }
 FileInput.displayName = "FileInput";
+function formatDate(date, format) {
+  if (!date) return "";
+  const d = new Date(date);
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const year = d.getFullYear();
+  return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
+}
+function parseDate(dateString, format) {
+  if (!dateString) return null;
+  try {
+    if (format === "MM/dd/yyyy" || format === "MM-dd-yyyy") {
+      const parts = dateString.split(/[/-]/);
+      if (parts.length === 3) {
+        const month = parseInt(parts[0], 10) - 1;
+        const day = parseInt(parts[1], 10);
+        const year = parseInt(parts[2], 10);
+        const date2 = new Date(year, month, day);
+        if (!isNaN(date2.getTime())) {
+          return date2;
+        }
+      }
+    }
+    const date = new Date(dateString);
+    return isNaN(date.getTime()) ? null : date;
+  } catch {
+    return null;
+  }
+}
+function isDateInArray(date, dates) {
+  const dateStr = date.toDateString();
+  return dates.some((d) => d.toDateString() === dateStr);
+}
+function DatePicker({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select date...",
+  format = "MM/dd/yyyy",
+  minDate,
+  maxDate,
+  disabledDates = [],
+  isDateDisabled,
+  clearable = true,
+  showIcon = true,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [inputValue, setInputValue] = React7.useState("");
+  const [selectedMonth, setSelectedMonth] = React7.useState(value || /* @__PURE__ */ new Date());
+  const containerRef = React7.useRef(null);
+  const inputRef = React7.useRef(null);
+  React7.useEffect(() => {
+    setInputValue(formatDate(value, format));
+    if (value) {
+      setSelectedMonth(value);
+    }
+  }, [value, format]);
+  const handleDateSelect = (date) => {
+    onChange(date);
+    setIsOpen(false);
+    onBlur?.();
+  };
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    const parsedDate = parseDate(newValue, format);
+    if (parsedDate && !isNaN(parsedDate.getTime())) {
+      onChange(parsedDate);
+    } else if (newValue === "") {
+      onChange(null);
+    }
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange(null);
+    setInputValue("");
+    inputRef.current?.focus();
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    if (isDateInArray(date, disabledDates)) return true;
+    if (isDateDisabled && isDateDisabled(date)) return true;
+    return false;
+  };
+  React7.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onBlur?.();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen, onBlur]);
+  const renderCalendar = () => {
+    const year = selectedMonth.getFullYear();
+    const month = selectedMonth.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const days = [];
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      days.push(null);
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push(new Date(year, month, day));
+    }
+    const monthNames = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+    const handlePrevMonth = () => {
+      setSelectedMonth(new Date(year, month - 1, 1));
+    };
+    const handleNextMonth = () => {
+      setSelectedMonth(new Date(year, month + 1, 1));
+    };
+    return /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar", role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-header" }, /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "datepicker-calendar-nav",
+        onClick: handlePrevMonth,
+        "aria-label": "Previous month"
+      },
+      "\u2190"
+    ), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-month" }, monthNames[month], " ", year), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "datepicker-calendar-nav",
+        onClick: handleNextMonth,
+        "aria-label": "Next month"
+      },
+      "\u2192"
+    )), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "datepicker-calendar-weekday" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-days" }, days.map((date, index) => {
+      if (!date) {
+        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}`, className: "datepicker-calendar-day datepicker-calendar-day--empty" });
+      }
+      const isSelected = value && date.toDateString() === value.toDateString();
+      const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+      const disabled2 = isDisabled(date);
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: date.toISOString(),
+          type: "button",
+          className: `datepicker-calendar-day ${isSelected ? "datepicker-calendar-day--selected" : ""} ${isToday ? "datepicker-calendar-day--today" : ""} ${disabled2 ? "datepicker-calendar-day--disabled" : ""}`,
+          onClick: () => !disabled2 && handleDateSelect(date),
+          disabled: disabled2,
+          "aria-label": formatDate(date, format)
+        },
+        date.getDate()
+      );
+    })));
+  };
+  const baseClassName = "datepicker";
+  const errorClassName = error ? "datepicker--error" : "";
+  const disabledClassName = disabled ? "datepicker--disabled" : "";
+  const openClassName = isOpen ? "datepicker--open" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "hidden",
+      name,
+      value: value ? value.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "datepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2"
+    },
+    /* @__PURE__ */ React7.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+  )), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: "datepicker-input",
+      value: inputValue,
+      onChange: handleInputChange,
+      onClick: handleToggle,
+      onBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      readOnly: true
+    }
+  ), clearable && value && !disabled && /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "datepicker-clear",
+      onClick: handleClear,
+      "aria-label": "Clear date",
+      tabIndex: -1
+    },
+    "\u2715"
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "datepicker-dropdown" }, renderCalendar()));
+}
+DatePicker.displayName = "DatePicker";
+function parseTimeString(timeStr, use24Hour) {
+  if (!timeStr) return null;
+  try {
+    if (use24Hour) {
+      const [hourStr, minuteStr] = timeStr.split(":");
+      const hour24 = parseInt(hourStr, 10);
+      const minute = parseInt(minuteStr, 10);
+      if (isNaN(hour24) || isNaN(minute)) return null;
+      if (hour24 < 0 || hour24 > 23) return null;
+      if (minute < 0 || minute > 59) return null;
+      const period = hour24 >= 12 ? "PM" : "AM";
+      const hour = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
+      return { hour, minute, period };
+    } else {
+      const match = timeStr.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      if (!match) return null;
+      const hour = parseInt(match[1], 10);
+      const minute = parseInt(match[2], 10);
+      const period = match[3].toUpperCase();
+      if (hour < 1 || hour > 12) return null;
+      if (minute < 0 || minute > 59) return null;
+      return { hour, minute, period };
+    }
+  } catch {
+    return null;
+  }
+}
+function formatTimeValue(time, use24Hour) {
+  if (!time) return "";
+  if (use24Hour) {
+    let hour24 = time.hour;
+    if (time.period === "PM" && time.hour !== 12) {
+      hour24 = time.hour + 12;
+    } else if (time.period === "AM" && time.hour === 12) {
+      hour24 = 0;
+    }
+    return `${String(hour24).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
+  } else {
+    return `${time.hour}:${String(time.minute).padStart(2, "0")} ${time.period}`;
+  }
+}
+function TimePicker({
+  name,
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select time...",
+  use24Hour = false,
+  minuteStep = 1,
+  clearable = true,
+  showIcon = true,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [timeValue, setTimeValue] = React7.useState(null);
+  const containerRef = React7.useRef(null);
+  const inputRef = React7.useRef(null);
+  React7.useEffect(() => {
+    const parsed = parseTimeString(value, use24Hour);
+    setTimeValue(parsed);
+  }, [value, use24Hour]);
+  const handleHourChange = (hour) => {
+    const newTime = {
+      hour,
+      minute: timeValue?.minute || 0,
+      period: timeValue?.period || "AM"
+    };
+    setTimeValue(newTime);
+    onChange(formatTimeValue(newTime, use24Hour));
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = {
+      hour: timeValue?.hour || 12,
+      minute,
+      period: timeValue?.period || "AM"
+    };
+    setTimeValue(newTime);
+    onChange(formatTimeValue(newTime, use24Hour));
+  };
+  const handlePeriodChange = (period) => {
+    const newTime = {
+      hour: timeValue?.hour || 12,
+      minute: timeValue?.minute || 0,
+      period
+    };
+    setTimeValue(newTime);
+    onChange(formatTimeValue(newTime, use24Hour));
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange("");
+    setTimeValue(null);
+    inputRef.current?.focus();
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+  React7.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onBlur?.();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen, onBlur]);
+  const hours = React7.useMemo(() => {
+    if (use24Hour) {
+      return Array.from({ length: 24 }, (_, i) => i);
+    } else {
+      return Array.from({ length: 12 }, (_, i) => i + 1);
+    }
+  }, [use24Hour]);
+  const minutes = React7.useMemo(() => {
+    const mins = [];
+    for (let i = 0; i < 60; i += minuteStep) {
+      mins.push(i);
+    }
+    return mins;
+  }, [minuteStep]);
+  const baseClassName = "timepicker";
+  const errorClassName = error ? "timepicker--error" : "";
+  const disabledClassName = disabled ? "timepicker--disabled" : "";
+  const openClassName = isOpen ? "timepicker--open" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const displayValue = formatTimeValue(timeValue, use24Hour);
+  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "hidden",
+      name,
+      value
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "timepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2"
+    },
+    /* @__PURE__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React7.createElement("path", { d: "M12 6v6l4 2" })
+  )), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: "timepicker-input",
+      value: displayValue,
+      onClick: handleToggle,
+      onBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      readOnly: true
+    }
+  ), clearable && value && !disabled && /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "timepicker-clear",
+      onClick: handleClear,
+      "aria-label": "Clear time",
+      tabIndex: -1
+    },
+    "\u2715"
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "timepicker-dropdown" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-selectors" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, use24Hour ? "Hour" : "Hour"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, hours.map((hour) => {
+    const displayHour = use24Hour ? hour : hour;
+    const isSelected = use24Hour ? timeValue?.hour === (hour === 0 ? 12 : hour > 12 ? hour - 12 : hour) && timeValue?.period === (hour >= 12 ? "PM" : "AM") : timeValue?.hour === hour;
+    return /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        key: hour,
+        type: "button",
+        className: `timepicker-option ${isSelected ? "timepicker-option--selected" : ""}`,
+        onClick: () => {
+          if (use24Hour) {
+            const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+            const period = hour >= 12 ? "PM" : "AM";
+            const newTime = {
+              hour: hour12,
+              minute: timeValue?.minute || 0,
+              period
+            };
+            setTimeValue(newTime);
+            onChange(formatTimeValue(newTime, use24Hour));
+          } else {
+            handleHourChange(hour);
+          }
+        },
+        "aria-label": `${String(displayHour).padStart(2, "0")} hours`
+      },
+      String(displayHour).padStart(2, "0")
+    );
+  }))), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, "Minute"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, minutes.map((minute) => {
+    const isSelected = timeValue?.minute === minute;
+    return /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        key: minute,
+        type: "button",
+        className: `timepicker-option ${isSelected ? "timepicker-option--selected" : ""}`,
+        onClick: () => handleMinuteChange(minute),
+        "aria-label": `${String(minute).padStart(2, "0")} minutes`
+      },
+      String(minute).padStart(2, "0")
+    );
+  }))), !use24Hour && /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column timepicker-column--period" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, "Period"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: `timepicker-option ${timeValue?.period === "AM" ? "timepicker-option--selected" : ""}`,
+      onClick: () => handlePeriodChange("AM")
+    },
+    "AM"
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: `timepicker-option ${timeValue?.period === "PM" ? "timepicker-option--selected" : ""}`,
+      onClick: () => handlePeriodChange("PM")
+    },
+    "PM"
+  ))))));
+}
+TimePicker.displayName = "TimePicker";
+function formatDate2(date, format) {
+  if (!date) return "";
+  const d = new Date(date);
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const year = d.getFullYear();
+  return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
+}
+function isDateInArray2(date, dates) {
+  const dateStr = date.toDateString();
+  return dates.some((d) => d.toDateString() === dateStr);
+}
+function isDateInRange(date, start, end) {
+  if (!start || !end) return false;
+  const time = date.getTime();
+  return time >= start.getTime() && time <= end.getTime();
+}
+function DateRangePicker({
+  name,
+  value = { start: null, end: null },
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select date range...",
+  format = "MM/dd/yyyy",
+  minDate,
+  maxDate,
+  disabledDates = [],
+  isDateDisabled,
+  clearable = true,
+  showIcon = true,
+  separator = " - ",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [selectedMonth, setSelectedMonth] = React7.useState(value.start || /* @__PURE__ */ new Date());
+  const [rangeStart, setRangeStart] = React7.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React7.useState(value.end);
+  const [hoverDate, setHoverDate] = React7.useState(null);
+  const containerRef = React7.useRef(null);
+  React7.useEffect(() => {
+    setRangeStart(value.start);
+    setRangeEnd(value.end);
+    if (value.start) {
+      setSelectedMonth(value.start);
+    }
+  }, [value]);
+  const handleDateSelect = (date) => {
+    if (!rangeStart || rangeStart && rangeEnd) {
+      setRangeStart(date);
+      setRangeEnd(null);
+      onChange({ start: date, end: null });
+    } else {
+      if (date < rangeStart) {
+        setRangeStart(date);
+        setRangeEnd(rangeStart);
+        onChange({ start: date, end: rangeStart });
+        setIsOpen(false);
+      } else {
+        setRangeEnd(date);
+        onChange({ start: rangeStart, end: date });
+        setIsOpen(false);
+      }
+    }
+    onBlur?.();
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange({ start: null, end: null });
+    setRangeStart(null);
+    setRangeEnd(null);
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    if (isDateInArray2(date, disabledDates)) return true;
+    if (isDateDisabled && isDateDisabled(date)) return true;
+    return false;
+  };
+  React7.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onBlur?.();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen, onBlur]);
+  const renderCalendar = () => {
+    const year = selectedMonth.getFullYear();
+    const month = selectedMonth.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const days = [];
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      days.push(null);
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push(new Date(year, month, day));
+    }
+    const monthNames = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+    const handlePrevMonth = () => {
+      setSelectedMonth(new Date(year, month - 1, 1));
+    };
+    const handleNextMonth = () => {
+      setSelectedMonth(new Date(year, month + 1, 1));
+    };
+    return /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar", role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-header" }, /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "daterangepicker-calendar-nav",
+        onClick: handlePrevMonth,
+        "aria-label": "Previous month"
+      },
+      "\u2190"
+    ), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-month" }, monthNames[month], " ", year), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "daterangepicker-calendar-nav",
+        onClick: handleNextMonth,
+        "aria-label": "Next month"
+      },
+      "\u2192"
+    )), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "daterangepicker-calendar-weekday" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-days" }, days.map((date, index) => {
+      if (!date) {
+        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}`, className: "daterangepicker-calendar-day daterangepicker-calendar-day--empty" });
+      }
+      const isStart = rangeStart && date.toDateString() === rangeStart.toDateString();
+      const isEnd = rangeEnd && date.toDateString() === rangeEnd.toDateString();
+      const isInRange = rangeStart && rangeEnd && isDateInRange(date, rangeStart, rangeEnd);
+      const isInHoverRange = rangeStart && !rangeEnd && hoverDate && (date >= rangeStart && date <= hoverDate || date <= rangeStart && date >= hoverDate);
+      const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+      const disabled2 = isDisabled(date);
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: date.toISOString(),
+          type: "button",
+          className: `daterangepicker-calendar-day ${isStart || isEnd ? "daterangepicker-calendar-day--selected" : ""} ${isInRange || isInHoverRange ? "daterangepicker-calendar-day--in-range" : ""} ${isToday ? "daterangepicker-calendar-day--today" : ""} ${disabled2 ? "daterangepicker-calendar-day--disabled" : ""}`,
+          onClick: () => !disabled2 && handleDateSelect(date),
+          onMouseEnter: () => setHoverDate(date),
+          onMouseLeave: () => setHoverDate(null),
+          disabled: disabled2,
+          "aria-label": formatDate2(date, format)
+        },
+        date.getDate()
+      );
+    })));
+  };
+  const baseClassName = "daterangepicker";
+  const errorClassName = error ? "daterangepicker--error" : "";
+  const disabledClassName = disabled ? "daterangepicker--disabled" : "";
+  const openClassName = isOpen ? "daterangepicker--open" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
+  return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "hidden",
+      name: `${name}[start]`,
+      value: rangeStart ? rangeStart.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "hidden",
+      name: `${name}[end]`,
+      value: rangeEnd ? rangeEnd.toISOString() : ""
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "daterangepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2"
+    },
+    /* @__PURE__ */ React7.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+  )), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "text",
+      className: "daterangepicker-input",
+      value: displayValue,
+      onClick: handleToggle,
+      onBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      readOnly: true
+    }
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "daterangepicker-clear",
+      onClick: handleClear,
+      "aria-label": "Clear date range",
+      tabIndex: -1
+    },
+    "\u2715"
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-dropdown" }, renderCalendar(), rangeStart && !rangeEnd && /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-hint" }, "Select end date")));
+}
+DateRangePicker.displayName = "DateRangePicker";
+function htmlToMarkdown(html) {
+  let markdown = html;
+  markdown = markdown.replace(/<strong>(.*?)<\/strong>/g, "**$1**");
+  markdown = markdown.replace(/<b>(.*?)<\/b>/g, "**$1**");
+  markdown = markdown.replace(/<em>(.*?)<\/em>/g, "*$1*");
+  markdown = markdown.replace(/<i>(.*?)<\/i>/g, "*$1*");
+  markdown = markdown.replace(/<u>(.*?)<\/u>/g, "<u>$1</u>");
+  markdown = markdown.replace(/<h1>(.*?)<\/h1>/g, "# $1\n");
+  markdown = markdown.replace(/<h2>(.*?)<\/h2>/g, "## $1\n");
+  markdown = markdown.replace(/<h3>(.*?)<\/h3>/g, "### $1\n");
+  markdown = markdown.replace(/<a href="(.*?)">(.*?)<\/a>/g, "[$2]($1)");
+  markdown = markdown.replace(/<ul>(.*?)<\/ul>/gs, (_match, content) => {
+    return content.replace(/<li>(.*?)<\/li>/g, "- $1\n");
+  });
+  markdown = markdown.replace(/<ol>(.*?)<\/ol>/gs, (_match, content) => {
+    let counter = 1;
+    return content.replace(/<li>(.*?)<\/li>/g, () => {
+      return `${counter++}. $1
+`;
+    });
+  });
+  markdown = markdown.replace(/<p>(.*?)<\/p>/g, "$1\n\n");
+  markdown = markdown.replace(/<br\s*\/?>/g, "\n");
+  markdown = markdown.replace(/\n{3,}/g, "\n\n").trim();
+  return markdown;
+}
+function markdownToHtml(markdown) {
+  let html = markdown;
+  html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  html = html.replace(/^### (.*?)$/gm, "<h3>$1</h3>");
+  html = html.replace(/^## (.*?)$/gm, "<h2>$1</h2>");
+  html = html.replace(/^# (.*?)$/gm, "<h1>$1</h1>");
+  html = html.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.*?)\*/g, "<em>$1</em>");
+  html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
+  html = html.replace(/^- (.*?)$/gm, "<li>$1</li>");
+  html = html.replace(/(<li>.*?<\/li>\n?)+/gs, "<ul>$&</ul>");
+  html = html.replace(/^\d+\. (.*?)$/gm, "<li>$1</li>");
+  html = html.replace(/^(?!<[h|ul|ol|li])(.+)$/gm, "<p>$1</p>");
+  html = html.replace(/\n/g, "<br>");
+  return html;
+}
+function RichTextEditor({
+  name,
+  value = "",
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  mode = "wysiwyg",
+  allowModeSwitch = false,
+  placeholder = "Start typing...",
+  minHeight = "200px",
+  maxHeight,
+  showToolbar = true,
+  toolbarButtons = ["bold", "italic", "underline", "heading", "bulletList", "orderedList", "link"],
+  ...props
+}) {
+  const [currentMode, setCurrentMode] = React7.useState(mode);
+  const [content, setContent] = React7.useState(value);
+  const editorRef = React7.useRef(null);
+  const textareaRef = React7.useRef(null);
+  React7.useEffect(() => {
+    setContent(value);
+    if (currentMode === "wysiwyg" && editorRef.current) {
+      editorRef.current.innerHTML = value;
+    }
+  }, [value, currentMode]);
+  const handleWysiwygChange = () => {
+    if (editorRef.current) {
+      const newContent = editorRef.current.innerHTML;
+      setContent(newContent);
+      onChange(newContent);
+    }
+  };
+  const handleMarkdownChange = (e) => {
+    const newContent = e.target.value;
+    setContent(newContent);
+    onChange(newContent);
+  };
+  const execCommand = (command, value2) => {
+    document.execCommand(command, false, value2);
+    editorRef.current?.focus();
+    handleWysiwygChange();
+  };
+  const handleModeToggle = () => {
+    const newMode = currentMode === "wysiwyg" ? "markdown" : "wysiwyg";
+    if (newMode === "markdown") {
+      const markdown = htmlToMarkdown(content);
+      setContent(markdown);
+      onChange(markdown);
+    } else {
+      const html = markdownToHtml(content);
+      setContent(html);
+      onChange(html);
+      if (editorRef.current) {
+        editorRef.current.innerHTML = html;
+      }
+    }
+    setCurrentMode(newMode);
+  };
+  const toolbarConfig = {
+    bold: {
+      command: "bold",
+      icon: "B",
+      title: "Bold",
+      action: () => execCommand("bold")
+    },
+    italic: {
+      command: "italic",
+      icon: "I",
+      title: "Italic",
+      action: () => execCommand("italic")
+    },
+    underline: {
+      command: "underline",
+      icon: "U",
+      title: "Underline",
+      action: () => execCommand("underline")
+    },
+    heading: {
+      command: "heading",
+      icon: "H",
+      title: "Heading",
+      action: () => execCommand("formatBlock", "<h2>")
+    },
+    bulletList: {
+      command: "bulletList",
+      icon: "\u2022",
+      title: "Bullet List",
+      action: () => execCommand("insertUnorderedList")
+    },
+    orderedList: {
+      command: "orderedList",
+      icon: "1.",
+      title: "Numbered List",
+      action: () => execCommand("insertOrderedList")
+    },
+    link: {
+      command: "link",
+      icon: "\u{1F517}",
+      title: "Insert Link",
+      action: () => {
+        const url = window.prompt("Enter URL:");
+        if (url) {
+          execCommand("createLink", url);
+        }
+      }
+    }
+  };
+  const baseClassName = "richtexteditor";
+  const errorClassName = error ? "richtexteditor--error" : "";
+  const disabledClassName = disabled ? "richtexteditor--disabled" : "";
+  const modeClassName = `richtexteditor--${currentMode}`;
+  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${modeClassName} ${className}`.trim();
+  const editorStyle = {
+    minHeight,
+    maxHeight,
+    overflowY: maxHeight ? "auto" : void 0
+  };
+  return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-toolbar" }, /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-toolbar-buttons" }, toolbarButtons.map((buttonName) => {
+    const button = toolbarConfig[buttonName];
+    if (!button) return null;
+    return /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        key: buttonName,
+        type: "button",
+        className: "richtexteditor-toolbar-button",
+        onClick: () => editorRef.current && button.action(editorRef.current),
+        title: button.title,
+        disabled: disabled || currentMode === "markdown",
+        "aria-label": button.title
+      },
+      button.icon
+    );
+  })), allowModeSwitch && /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "richtexteditor-mode-toggle",
+      onClick: handleModeToggle,
+      disabled,
+      title: `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`,
+      "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
+    },
+    currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
+  )), /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-editor", style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      ref: editorRef,
+      className: "richtexteditor-content",
+      role: "textbox",
+      contentEditable: !disabled,
+      onInput: handleWysiwygChange,
+      onBlur,
+      "data-placeholder": placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      suppressContentEditableWarning: true
+    }
+  ) : /* @__PURE__ */ React7.createElement(
+    "textarea",
+    {
+      ref: textareaRef,
+      className: "richtexteditor-markdown",
+      value: content,
+      onChange: handleMarkdownChange,
+      onBlur,
+      disabled,
+      required,
+      placeholder,
+      "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"]
+    }
+  )));
+}
+RichTextEditor.displayName = "RichTextEditor";
 
-export { Checkbox, CheckboxGroup, FileInput, Radio, Select, TextArea, TextInput };
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, Radio, RichTextEditor, Select, TextArea, TextInput, TimePicker };
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map