@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/input.mjs

@@ -0,0 +1,879 @@
+// src/components/input/InputText.tsx
+import React6 from "react";
+
+// src/components/input/Input.tsx
+import * as React5 from "react";
+
+// src/components/input/InputField.tsx
+import * as React from "react";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/input/InputField.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var InputField = React.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    iconRight,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    onRightIconClick,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${React.useId()}`;
+    const containerClasses = [
+      "input-container",
+      fullWidth && "input-container--full-width",
+      className
+    ].filter(Boolean).join(" ");
+    const inputClasses = [
+      "input",
+      `input--${size}`,
+      error && "input--error",
+      disabled && "input--disabled",
+      icon && "input--has-icon-left",
+      iconRight && "input--has-icon-right"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: "input__label", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "input__wrapper", children: [
+        icon && /* @__PURE__ */ jsx2("span", { className: "input__icon input__icon--left", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Icon, { name: icon, size: 16 }) }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref,
+            type,
+            id: inputId,
+            className: inputClasses,
+            disabled,
+            ...props
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "input__icon input__icon--right",
+            onClick: onRightIconClick,
+            tabIndex: -1,
+            "aria-label": "Icon action",
+            children: /* @__PURE__ */ jsx2(Icon, { name: iconRight, size: 16 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx2("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx2("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+
+// src/components/popover/popover.tsx
+import * as React2 from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Popover = ({
+  trigger,
+  children,
+  isOpen,
+  onToggle,
+  placement = "bottom",
+  align = "start",
+  offset = 8,
+  flip = true,
+  closeOnEscape = true,
+  closeOnClickOutside = true
+}) => {
+  const [internalOpen, setInternalOpen] = React2.useState(false);
+  const triggerRef = React2.useRef(null);
+  const popoverRef = React2.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React2.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React2.useState(placement);
+  const isControlled = isOpen !== void 0;
+  const open = isControlled ? isOpen : internalOpen;
+  const toggle = React2.useCallback(() => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalOpen((prev) => !prev);
+    }
+  }, [isControlled, onToggle]);
+  React2.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (closeOnClickOutside && triggerRef.current && !triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, toggle, closeOnClickOutside]);
+  React2.useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (closeOnEscape && event.key === "Escape" && open) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [open, toggle, closeOnEscape]);
+  React2.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (flip) {
+        if (placement === "right" && spaceRight < popoverRect.width + offset) {
+          finalPlacement = spaceLeft >= popoverRect.width + offset ? "left" : "bottom";
+        } else if (placement === "left" && spaceLeft < popoverRect.width + offset) {
+          finalPlacement = spaceRight >= popoverRect.width + offset ? "right" : "bottom";
+        } else if (placement === "bottom" && spaceBottom < popoverRect.height + offset) {
+          finalPlacement = spaceTop >= popoverRect.height + offset ? "top" : "bottom";
+        } else if (placement === "top" && spaceTop < popoverRect.height + offset) {
+          finalPlacement = spaceBottom >= popoverRect.height + offset ? "bottom" : "top";
+        }
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: "var(--z-popover)",
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      const getAlignmentOffset = () => {
+        let alignmentOffset = 0;
+        if (finalPlacement === "left" || finalPlacement === "right") {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.height - popoverRect.height) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.height - popoverRect.height;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        } else {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.width - popoverRect.width) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.width - popoverRect.width;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        }
+        return alignmentOffset;
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.right + offset;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - popoverRect.height - offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+      }
+      if (typeof newStyle.left === "number") {
+        if (newStyle.left + popoverRect.width > viewportWidth - offset) {
+          newStyle.left = viewportWidth - popoverRect.width - offset;
+        }
+        if (newStyle.left < offset) {
+          newStyle.left = offset;
+        }
+      }
+      if (typeof newStyle.top === "number") {
+        if (newStyle.top + popoverRect.height > viewportHeight - offset) {
+          newStyle.top = viewportHeight - popoverRect.height - offset;
+        }
+        if (newStyle.top < offset) {
+          newStyle.top = offset;
+        }
+      }
+      setPopoverStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, placement, align, offset, flip]);
+  const handleTriggerClick = React2.useCallback(() => {
+    toggle();
+  }, [toggle]);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React2.isValidElement(trigger) ? React2.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: popoverRef,
+          className: `popover popover--${resolvedPlacement}`,
+          style: {
+            ...popoverStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: popoverStyle.top !== void 0 ? 1 : 0,
+            visibility: popoverStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          children: /* @__PURE__ */ jsx3("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/input/DatePicker.tsx
+import * as React3 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DatePicker = ({ value, onChange, disabled }) => {
+  const parseDate = (dateStr) => {
+    if (!dateStr) {
+      const today = /* @__PURE__ */ new Date();
+      return { year: today.getFullYear(), month: today.getMonth(), day: today.getDate() };
+    }
+    const [year, month, day] = dateStr.split("-").map(Number);
+    return { year, month: month - 1, day };
+  };
+  const { year: initialYear, month: initialMonth, day: selectedDay } = parseDate(value);
+  const [currentYear, setCurrentYear] = React3.useState(initialYear);
+  const [currentMonth, setCurrentMonth] = React3.useState(initialMonth);
+  const getDaysInMonth = (year, month) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+  const getFirstDayOfMonth = (year, month) => {
+    return new Date(year, month, 1).getDay();
+  };
+  const handleDateSelect = (day) => {
+    if (disabled) return;
+    const formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    onChange(formattedDate);
+  };
+  const handlePrevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+  const handleNextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
+  const days = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  return /* @__PURE__ */ jsxs3("div", { className: "date-picker", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "date-picker__header", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handlePrevMonth,
+          disabled,
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "date-picker__title", children: [
+        /* @__PURE__ */ jsx4(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentMonth,
+            onChange: (e) => setCurrentMonth(Number(e.target.value)),
+            disabled,
+            children: MONTHS.map((month, idx) => /* @__PURE__ */ jsx4("option", { value: idx, children: month }, month))
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentYear,
+            onChange: (e) => setCurrentYear(Number(e.target.value)),
+            disabled,
+            children: Array.from({ length: 100 }, (_, i) => currentYear - 50 + i).map((year) => /* @__PURE__ */ jsx4("option", { value: year, children: year }, year))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handleNextMonth,
+          disabled,
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "date-picker__weekdays", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx4("div", { className: "date-picker__weekday", children: day }, day)) }),
+    /* @__PURE__ */ jsx4("div", { className: "date-picker__days", children: days.map((day, idx) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: `date-picker__day ${day === selectedDay ? "date-picker__day--selected" : ""} ${!day ? "date-picker__day--empty" : ""}`,
+        onClick: () => day && handleDateSelect(day),
+        disabled: !day || disabled,
+        children: day || ""
+      },
+      idx
+    )) })
+  ] });
+};
+
+// src/components/input/TimePicker.tsx
+import * as React4 from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var parseTime = (timeStr) => {
+  if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
+  const parts = timeStr.split(":");
+  const hours = parseInt(parts[0] || "0", 10);
+  const minutes = parseInt(parts[1] || "0", 10);
+  const secondsParts = (parts[2] || "0").split(".");
+  const seconds = parseInt(secondsParts[0] || "0", 10);
+  const milliseconds = parseInt(secondsParts[1] || "0", 10);
+  return { hours, minutes, seconds, milliseconds };
+};
+var TimeColumn = ({
+  label,
+  value,
+  max,
+  field,
+  step,
+  disabled,
+  onChange
+}) => {
+  const items = Array.from({ length: Math.floor(max / step) + 1 }, (_, i) => i * step);
+  const columnRef = React4.useRef(null);
+  React4.useEffect(() => {
+    if (columnRef.current) {
+      const selected = columnRef.current.querySelector(".time-picker__item--selected");
+      if (selected) {
+        selected.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs4("div", { className: "time-picker__column", children: [
+    /* @__PURE__ */ jsx5("div", { className: "time-picker__label", children: label }),
+    /* @__PURE__ */ jsx5("div", { className: "time-picker__scroll scrollable", ref: columnRef, children: items.map((item) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: `time-picker__item ${item === value ? "time-picker__item--selected" : ""}`,
+        onClick: () => onChange(field, item),
+        disabled,
+        children: String(item).padStart(field === "milliseconds" ? 3 : 2, "0")
+      },
+      item
+    )) })
+  ] });
+};
+var TimePicker = ({
+  value,
+  onChange,
+  disabled,
+  showMilliseconds = false,
+  minuteStep = 1
+}) => {
+  const [internalTime, setInternalTime] = React4.useState(value);
+  React4.useEffect(() => {
+    setInternalTime(value);
+  }, [value]);
+  const { hours, minutes, seconds, milliseconds } = parseTime(internalTime);
+  const handleChange = (field, newValue) => {
+    if (disabled) return;
+    const currentParsed = parseTime(internalTime);
+    const updated = { ...currentParsed, [field]: newValue };
+    let formattedTime = `${String(updated.hours).padStart(2, "0")}:${String(updated.minutes).padStart(2, "0")}:${String(updated.seconds).padStart(2, "0")}`;
+    if (showMilliseconds && updated.milliseconds > 0) {
+      formattedTime += `.${String(updated.milliseconds).padStart(3, "0")}`;
+    }
+    setInternalTime(formattedTime);
+    onChange(formattedTime);
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "time-picker", children: [
+    /* @__PURE__ */ jsx5(
+      TimeColumn,
+      {
+        label: "Hours",
+        value: hours,
+        max: 23,
+        field: "hours",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      TimeColumn,
+      {
+        label: "Minutes",
+        value: minutes,
+        max: 59,
+        field: "minutes",
+        step: minuteStep,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      TimeColumn,
+      {
+        label: "Seconds",
+        value: seconds,
+        max: 59,
+        field: "seconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    showMilliseconds && /* @__PURE__ */ jsx5(
+      TimeColumn,
+      {
+        label: "ms",
+        value: milliseconds,
+        max: 999,
+        field: "milliseconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+// src/components/icons/iconConstants.ts
+var INPUT_TYPE_ICONS = {
+  // Standard HTML input types
+  email: "envelope-solid",
+  password: "lock-closed-solid",
+  search: "magnifying-glass-solid",
+  date: "calendar-days-solid",
+  time: "clock-solid",
+  "datetime-local": "calendar-days-solid",
+  tel: "phone-solid",
+  url: "link-solid",
+  number: "hashtag-solid",
+  // Additional semantic types
+  username: "user-solid",
+  name: "user-solid",
+  firstname: "user-solid",
+  lastname: "user-solid",
+  address: "map-pin-solid",
+  city: "building-solid",
+  state: "map-solid",
+  zip: "map-pin-solid",
+  "zip-code": "map-pin-solid",
+  country: "globe-americas-solid",
+  creditcard: "credit-card-solid",
+  card: "credit-card-solid",
+  cvv: "lock-closed-solid",
+  expiry: "calendar-days-solid",
+  "expiration-date": "calendar-days-solid",
+  // File and media types
+  file: "document-solid",
+  image: "photo-solid",
+  video: "video-camera-solid",
+  audio: "microphone-solid",
+  // Communication
+  message: "chat-bubble-left-solid",
+  comment: "chat-bubble-left-solid",
+  feedback: "chat-bubble-left-solid",
+  // Actions and states
+  submit: "paper-airplane-solid",
+  send: "paper-airplane-solid",
+  save: "floppy-disk-solid",
+  edit: "pencil-solid",
+  delete: "trash-solid",
+  remove: "x-mark-solid",
+  add: "plus-solid",
+  create: "plus-solid",
+  upload: "arrow-up-tray-solid",
+  download: "arrow-down-tray-solid",
+  refresh: "arrow-path-solid",
+  reload: "arrow-path-solid",
+  settings: "cog-solid",
+  config: "cog-solid",
+  filter: "funnel-solid",
+  sort: "bars-arrow-up-solid"
+};
+var ACTION_ICONS = {
+  close: "x-mark-solid",
+  back: "arrow-left-solid",
+  forward: "arrow-right-solid",
+  up: "arrow-up-solid",
+  down: "arrow-down-solid",
+  expand: "chevron-down-solid",
+  collapse: "chevron-up-solid",
+  menu: "bars-3-solid",
+  more: "ellipsis-horizontal-solid",
+  check: "check-solid",
+  cross: "x-mark-solid",
+  plus: "plus-solid",
+  minus: "minus-solid",
+  search: "magnifying-glass-solid",
+  clear: "x-mark-solid",
+  loading: "arrow-path-solid",
+  error: "exclamation-triangle-solid",
+  warning: "exclamation-triangle-solid",
+  info: "information-circle-solid",
+  success: "check-circle-solid"
+};
+
+// src/components/input/Input.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TYPE_ICON_MAP = INPUT_TYPE_ICONS;
+var formatDisplayValue = (val, inputType) => {
+  if (!val) return "";
+  if (inputType === "date") {
+    const [year, month, day] = val.split("-");
+    return `${day}/${month}/${year}`;
+  }
+  if (inputType === "time") {
+    return val;
+  }
+  if (inputType === "datetime-local") {
+    const [datePart, timePart] = val.split("T");
+    if (datePart && timePart) {
+      const [year, month, day] = datePart.split("-");
+      return `${day}/${month}/${year} ${timePart}`;
+    }
+    return val;
+  }
+  return val;
+};
+var Input = React5.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    showMilliseconds = false,
+    minuteStep = 1,
+    showClear = true,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = React5.useState(false);
+    const [showDateTimePicker, setShowDateTimePicker] = React5.useState(false);
+    const inputRef = React5.useRef(null);
+    const leftIcon = icon || TYPE_ICON_MAP[type];
+    const isPasswordType = type === "password";
+    const actualType = isPasswordType && showPassword ? "text" : type !== "date" && type !== "time" && type !== "datetime-local" ? type : "text";
+    const isDateTimeType = type === "date" || type === "time" || type === "datetime-local";
+    const isSearchType = type === "search";
+    const hasValue = props.value && String(props.value).length > 0;
+    const rightIconName = isPasswordType ? showPassword ? "heroicons:eye-slash-solid" : "heroicons:eye-solid" : isDateTimeType ? "heroicons:chevron-down-solid" : isSearchType && hasValue && showClear ? ACTION_ICONS.clear : void 0;
+    const handleRightIconClick = () => {
+      if (isPasswordType) {
+        setShowPassword(!showPassword);
+      } else if (isDateTimeType) {
+        setShowDateTimePicker(!showDateTimePicker);
+      } else if (isSearchType && hasValue && showClear) {
+        if (props.onChange) {
+          props.onChange({ target: { value: "" } });
+        }
+      }
+    };
+    const handleDateTimeChange = (newValue) => {
+      if (props.onChange) {
+        props.onChange({ target: { value: newValue } });
+      }
+    };
+    if (!isDateTimeType) {
+      return /* @__PURE__ */ jsx6(
+        InputField,
+        {
+          ref: ref || inputRef,
+          type: actualType,
+          label,
+          helperText,
+          error,
+          icon: leftIcon,
+          iconRight: rightIconName,
+          onRightIconClick: handleRightIconClick,
+          fullWidth,
+          size,
+          className,
+          disabled,
+          id,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs5("div", { className: `input-container ${fullWidth ? "input-container--full-width" : ""} ${className}`.trim(), children: [
+      label && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: "input__label", children: label }),
+      /* @__PURE__ */ jsx6(
+        Popover,
+        {
+          trigger: /* @__PURE__ */ jsx6(
+            InputField,
+            {
+              ref: ref || inputRef,
+              type: "text",
+              icon: leftIcon,
+              iconRight: rightIconName,
+              onRightIconClick: () => setShowDateTimePicker(!showDateTimePicker),
+              fullWidth,
+              size,
+              disabled,
+              id,
+              value: formatDisplayValue(String(props.value || ""), type),
+              placeholder: props.placeholder,
+              readOnly: true
+            }
+          ),
+          isOpen: showDateTimePicker,
+          onToggle: () => setShowDateTimePicker(!showDateTimePicker),
+          placement: "bottom",
+          children: /* @__PURE__ */ jsxs5("div", { style: { padding: "1rem" }, children: [
+            (type === "date" || type === "datetime-local") && /* @__PURE__ */ jsx6(
+              DatePicker,
+              {
+                value: String(props.value || "").split("T")[0],
+                onChange: (newDate) => {
+                  if (type === "datetime-local") {
+                    const time = String(props.value || "").split("T")[1] || "00:00:00";
+                    handleDateTimeChange(`${newDate}T${time}`);
+                  } else {
+                    handleDateTimeChange(newDate);
+                    setShowDateTimePicker(false);
+                  }
+                },
+                disabled
+              }
+            ),
+            (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsx6(
+              TimePicker,
+              {
+                value: String(props.value || "").split("T")[1] || "00:00:00",
+                onChange: (newTime) => {
+                  if (type === "datetime-local") {
+                    const date = String(props.value || "").split("T")[0] || (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+                    handleDateTimeChange(`${date}T${newTime}`);
+                  } else {
+                    handleDateTimeChange(newTime);
+                  }
+                },
+                disabled,
+                showMilliseconds,
+                minuteStep
+              }
+            )
+          ] })
+        }
+      ),
+      error && /* @__PURE__ */ jsx6("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx6("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input/InputText.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var InputText = React6.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx7(Input, { ref, ...props, type: "text" });
+});
+InputText.displayName = "InputText";
+
+// src/components/input/InputEmail.tsx
+import React7 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InputEmail = React7.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx8(Input, { ref, ...props, type: "email" });
+});
+InputEmail.displayName = "InputEmail";
+
+// src/components/input/InputPassword.tsx
+import React8 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var InputPassword = React8.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx9(Input, { ref, ...props, type: "password" });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/input/InputSearch.tsx
+import React9 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var InputSearch = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx10(Input, { ref, ...props, type: "search" });
+});
+InputSearch.displayName = "InputSearch";
+
+// src/components/input/InputTel.tsx
+import React10 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var InputTel = React10.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx11(Input, { ref, ...props, type: "tel" });
+});
+InputTel.displayName = "InputTel";
+
+// src/components/input/InputUrl.tsx
+import React11 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var InputUrl = React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx12(Input, { ref, ...props, type: "url" });
+});
+InputUrl.displayName = "InputUrl";
+
+// src/components/input/InputNumber.tsx
+import React12 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var InputNumber = React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx13(Input, { ref, ...props, type: "number" });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/input/InputDate.tsx
+import React13 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var InputDate = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx14(Input, { ref, ...props, type: "date" });
+});
+InputDate.displayName = "InputDate";
+
+// src/components/input/InputTime.tsx
+import React14 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var InputTime = React14.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx15(Input, { ref, ...props, type: "time" });
+});
+InputTime.displayName = "InputTime";
+
+// src/components/input/InputDateTime.tsx
+import React15 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var InputDateTime = React15.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx16(Input, { ref, ...props, type: "datetime-local" });
+});
+InputDateTime.displayName = "InputDateTime";
+export {
+  Input,
+  InputDate,
+  InputDateTime,
+  InputEmail,
+  InputNumber,
+  InputPassword,
+  InputSearch,
+  InputTel,
+  InputText,
+  InputTime,
+  InputUrl
+};