@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/{dist → lib}/forms/text-area/TextArea.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-import './TextArea.scss';
+import React from "react";
+import type { ClassNameProps } from "../../helper/types";
+import "./TextArea.scss";
 export interface TextAreaProps extends ClassNameProps {
     disabled?: boolean;
     required?: boolean;
@@ -19,4 +19,5 @@ export interface TextAreaProps extends ClassNameProps {
     maxLength?: number;
     id?: string;
 }
-export declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
+declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
+export default TextArea;

package/lib/forms/text-area/TextArea.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import useId from "../../helper/useId.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function TextArea(_ref) {
+  let {
+    disabled,
+    onBlur,
+    onChange,
+    onFocus,
+    onInput,
+    readonly,
+    required,
+    label,
+    error,
+    hint,
+    value,
+    defaultValue,
+    name,
+    rows,
+    maxLength,
+    className,
+    id: idProps
+  } = _ref;
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+  const id = useId(idProps);
+  const hintClasses = classNames("fwe-input-text-info");
+  const shadowRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const [height, setHeight] = useState(undefined);
+  useEffect(() => {
+    if (controlled) {
+      setInnerValue(value);
+    }
+  }, [value, controlled]);
+  useEffect(() => {
+    const input = ref.current;
+    const shadow = shadowRef.current;
+    const minRows = 2;
+    if (shadow && input) {
+      shadow.value = input.value || "x";
+      shadow.style.width = `${input.clientWidth}`;
+      const newHeight = Math.max(minRows * 24, shadow.scrollHeight);
+      setHeight(newHeight + 4 + 4 + 1);
+    }
+  }, []);
+  function handleChange(event) {
+    if (!controlled) {
+      setInnerValue(event.target.value);
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames("fwe-input-text", className),
+    htmlFor: id,
+    children: [/*#__PURE__*/_jsx("textarea", {
+      style: {
+        ...(!rows && {
+          height,
+          overflow: "hidden"
+        })
+      },
+      ref: ref,
+      name: name,
+      className: classNames("fr-textarea", `fwe-row-${rows}`),
+      disabled: disabled,
+      readOnly: readonly,
+      required: required,
+      autoComplete: "off",
+      onChange: handleChange,
+      onFocus: onFocus,
+      onInput: onInput,
+      onBlur: onBlur,
+      maxLength: maxLength,
+      defaultValue: defaultValue,
+      value: value,
+      id: id
+    }), /*#__PURE__*/_jsx("textarea", {
+      style: {
+        visibility: "hidden",
+        position: "absolute",
+        overflow: "hidden",
+        height: 0,
+        top: 0,
+        left: 0,
+        transform: "translateZ(0)",
+        padding: "0"
+      },
+      ref: shadowRef,
+      readOnly: true
+    }), /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-label",
+      children: label
+    }), hint && /*#__PURE__*/_jsx("span", {
+      className: hintClasses,
+      children: hint
+    }), error !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-invalid",
+      children: error
+    }), !!maxLength && innerValue !== undefined && /*#__PURE__*/_jsxs("span", {
+      className: "fwe-input-text-count",
+      children: [innerValue.length, " /", maxLength]
+    })]
+  });
+}
+export default TextArea;

package/{dist → lib}/forms/text-input/TextInput.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import type React from "react";
 export interface TextInputProps {
     disabled?: boolean;
     required?: boolean;
@@ -21,4 +21,5 @@ export interface TextInputProps {
     icon?: React.ReactNode;
     autoFocus?: boolean;
 }
-export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
+declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default TextInput;

package/lib/forms/text-input/TextInput.js

@@ -0,0 +1,91 @@
+import { forwardRef, useEffect, useRef } from "react";
+import classNames from "classnames";
+import useId from "../../helper/useId.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    required,
+    readonly,
+    placeholder,
+    max,
+    min,
+    onBlur,
+    onFocus,
+    onInput,
+    step,
+    type,
+    value,
+    defaultValue,
+    name,
+    error,
+    hint,
+    label,
+    labelClassName,
+    icon,
+    id: idProps,
+    autoFocus,
+    ...props
+  } = _ref;
+  const id = useId(idProps);
+  const inputRef = useRef(null);
+
+  // Programmatically focus the input instead of using autoFocus attribute
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      // Short delay to ensure component is fully rendered
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [autoFocus]);
+  const supported = ["text", "number", "password", "datetime-local"];
+  const innerType = type && supported.includes(type) ? type : "text";
+  const labelClasses = classNames("fwe-input-text", {
+    "fwe-input-text-icon": icon
+  }, labelClassName);
+  const hintClasses = classNames("fwe-input-text-info");
+  function handleChange(e) {
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+  return /*#__PURE__*/_jsxs("label", {
+    className: labelClasses,
+    htmlFor: id,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("input", {
+      name: name,
+      disabled: disabled,
+      required: required,
+      readOnly: readonly,
+      placeholder: placeholder,
+      autoComplete: "off",
+      min: min,
+      max: max,
+      step: step,
+      onChange: handleChange,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onInput: onInput,
+      type: innerType,
+      value: value,
+      defaultValue: defaultValue,
+      id: id,
+      ref: inputRef,
+      ...props
+    }), icon, /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-label",
+      children: label
+    }), hint && /*#__PURE__*/_jsx("span", {
+      className: hintClasses,
+      children: hint
+    }), error && /*#__PURE__*/_jsx("span", {
+      className: "fwe-input-text-invalid",
+      children: error
+    })]
+  });
+});
+export default TextInput;

package/{dist → lib}/forms/time-picker/TimePicker.d.ts

@@ -1,8 +1,7 @@
-import './TimePicker.scss';
-import type React from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
+import type React from "react";
+import { type ComponentPropsWithoutRef } from "react";
 export interface TimePickerOptions {
-    timeFormat?: '12' | '24';
+    timeFormat?: "12" | "24";
     showSeconds?: boolean;
     minuteStepSize?: number;
     range?: {
@@ -10,7 +9,7 @@ export interface TimePickerOptions {
         maxValue: Date;
     };
 }
-export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'onChange'> {
+export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> {
     error?: string;
     hint?: string;
     required?: boolean;
@@ -21,4 +20,5 @@ export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'button'>
     formatDate?: (date: Date) => string;
     onChange?: (date: Date) => void;
 }
-export declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default TimePicker;

package/lib/forms/time-picker/TimePicker.js

@@ -0,0 +1,159 @@
+import cn from "classnames";
+import { forwardRef, useMemo, useRef, useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+import { IconTime } from "@festo-ui/react-icons";
+import useForkRef from "../../helper/useForkRef.js";
+import useId from "../../helper/useId.js";
+import TimePickerDropdown from "./time-picker-dropdown/TimePickerDropdown.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    error,
+    hint,
+    required,
+    disabled,
+    children,
+    value,
+    options,
+    defaultValue,
+    formatDate,
+    onChange,
+    id: idProps,
+    ...props
+  } = _ref;
+  const id = useId(idProps);
+  const innerFormatDate = formatDate ?? Intl.DateTimeFormat("default", {
+    hour: "numeric",
+    minute: "numeric",
+    ...(options?.showSeconds && {
+      second: "numeric"
+    })
+  }).format;
+  const timeFormat = options?.timeFormat ?? "24";
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const customModifier = useMemo(() => ({
+    name: "offset",
+    options: {
+      offset: _ref2 => {
+        let {
+          placement
+        } = _ref2;
+        if (placement === "bottom") {
+          return [0, -12];
+        }
+        return [0, 0];
+      }
+    }
+  }), []);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    modifiers: [customModifier]
+  });
+  const combinedRef = useForkRef(ref, r => setReferenceElement(r));
+  const labelRef = useRef(null);
+  const allRefs = useForkRef(combinedRef, labelRef);
+  const timePickerRef = useRef(null);
+  const combinedTimePickerRef = useForkRef(timePickerRef, r => setPopperElement(r));
+  const [open, setOpen] = useState(false);
+  const controlled = value !== undefined;
+  const initialValue = controlled ? value : defaultValue;
+  const [innerValue, setInnerValue] = useState(initialValue ?? new Date());
+  useEffect(() => {
+    if (value !== undefined) {
+      value.setMilliseconds(0);
+      setInnerValue(value);
+    }
+  }, [value]);
+  function toggle(e) {
+    e?.preventDefault();
+    if (!disabled) {
+      setOpen(prevOpen => !prevOpen);
+    }
+  }
+  function handleDateChange(newDate) {
+    if (!controlled) {
+      setInnerValue(newDate);
+    }
+    if (onChange) {
+      onChange(newDate);
+    }
+  }
+  function handleClose(newDate) {
+    if (newDate) {
+      handleDateChange(newDate);
+    }
+    setOpen(false);
+  }
+  const handleKeyDown = event => {
+    if (event.key === "Enter") {
+      toggle();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === " ") {
+      toggle();
+    }
+  };
+  const container = labelRef?.current?.ownerDocument || document;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      tabIndex: 0,
+      role: "button",
+      ref: allRefs,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onClick: toggle,
+      ...props,
+      children: /*#__PURE__*/_jsxs("label", {
+        htmlFor: id,
+        className: "fr-time-picker fwe-input-text fwe-input-text-icon",
+        children: [/*#__PURE__*/_jsx(IconTime, {
+          className: cn({
+            "fwe-color-hero": open && !disabled,
+            "fwe-color-control-disabled": disabled
+          })
+        }), /*#__PURE__*/_jsx("input", {
+          id: id,
+          "aria-label": "picked time",
+          type: "text",
+          readOnly: true,
+          required: required,
+          className: cn({
+            "fwe-border-hero": open
+          }),
+          value: innerFormatDate(innerValue),
+          disabled: disabled
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-input-text-label",
+          children: children
+        }), hint && /*#__PURE__*/_jsx("span", {
+          className: "fwe-input-text-info",
+          children: hint
+        }), error && /*#__PURE__*/_jsx("span", {
+          className: "fwe-input-text-invalid",
+          children: error
+        })]
+      })
+    }), open && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(TimePickerDropdown, {
+      labelRef: labelRef,
+      ref: combinedTimePickerRef,
+      onClose: handleClose,
+      onDateChange: handleDateChange,
+      timeFormat: timeFormat,
+      showSeconds: options?.showSeconds,
+      minuteStepSize: options?.minuteStepSize,
+      range: options?.range,
+      date: innerValue,
+      style: {
+        ...styles.popper,
+        minWidth: labelRef?.current?.scrollWidth
+      },
+      ...attributes.popper
+    }), container.body)]
+  });
+});
+export default TimePicker;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts

@@ -0,0 +1,19 @@
+import "./TimePickerDropdown.scss";
+import type React from "react";
+import { type RefObject } from "react";
+interface TimePickerDropdownProps {
+    timeFormat: "12" | "24";
+    date: Date;
+    onDateChange: (date: Date) => void;
+    showSeconds?: boolean;
+    minuteStepSize?: number;
+    range?: {
+        minValue: Date;
+        maxValue: Date;
+    };
+    onClose: (date?: Date) => void;
+    style?: React.CSSProperties;
+    labelRef: RefObject<HTMLDivElement>;
+}
+declare const TimePickerDropdown: (props: TimePickerDropdownProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default TimePickerDropdown;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js

@@ -0,0 +1,212 @@
+import cn from "classnames";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { IconCollapse, IconExpand } from "@festo-ui/react-icons";
+import useForkRef from "../../../helper/useForkRef.js";
+import LinkButton from "../../../components/link-button/LinkButton.js";
+import TimePickerInput from "./TimePickerInput.js";
+import useOnClickOutside from "../../../helper/useOnClickOutside.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    timeFormat,
+    date,
+    onDateChange,
+    showSeconds,
+    minuteStepSize,
+    range,
+    onClose,
+    style,
+    labelRef
+  } = _ref;
+  const innerRef = useRef(null);
+  const combinedRef = useForkRef(ref, innerRef);
+  const hoursRef = useRef(null);
+  const [tmpHours, setTmpHours] = useState(null);
+  const [tmpMinutes, setTmpMinutes] = useState(null);
+  const [tmpSeconds, setTmpSeconds] = useState(null);
+  const [innerDate, setInnerDate] = useState(date);
+  useOnClickOutside(labelRef, () => onClose(innerDate), innerRef);
+  const min = 0;
+  const hourMax = timeFormat === "12" ? 12 : 23;
+  const minutesSecondsMax = 59;
+  let innerMinuteStepSize = 1;
+  if (minuteStepSize) {
+    if (minuteStepSize > 1 && minuteStepSize < 60) {
+      innerMinuteStepSize = Math.round(minuteStepSize);
+    }
+  }
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      hoursRef.current?.focus();
+    });
+  }, []);
+  function handleKeyPress(e) {
+    if (e.key === "Escape" || e.key === "Enter") {
+      onClose(e.key === "Enter" ? innerDate : undefined);
+    }
+  }
+  function limitRange(newDate) {
+    if (range) {
+      if (newDate > range.maxValue) {
+        return range.minValue;
+      }
+      if (newDate < range.minValue) {
+        return range.maxValue;
+      }
+    }
+    return newDate;
+  }
+  function handleHourIncrement(increment) {
+    let newDate = new Date(innerDate);
+    newDate.setHours(innerDate.getHours() + increment);
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpHours(null);
+  }
+  function handleHourChange(e) {
+    let newDate = new Date(innerDate);
+    const hour = +e.target.value;
+    newDate.setHours(Math.min(Math.max(hour, min), hourMax));
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    setTmpHours(newDate.getHours().toString());
+  }
+  function handleMinuteIncrement(increment) {
+    let newDate = new Date(innerDate);
+    newDate.setMinutes(innerDate.getMinutes() + increment);
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpMinutes(null);
+  }
+  function handleMinuteChange(e) {
+    let newDate = new Date(innerDate);
+    const minute = +e.target.value;
+    newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    setTmpMinutes(newDate.getMinutes().toString());
+  }
+  function handleSecondIncrement(increment) {
+    let newDate = new Date(innerDate);
+    newDate.setSeconds(innerDate.getSeconds() + increment);
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    onDateChange(newDate);
+    setTmpSeconds(null);
+  }
+  function handleSecondChange(e) {
+    let newDate = new Date(innerDate);
+    const seconds = +e.target.value;
+    newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
+    newDate = limitRange(newDate);
+    setInnerDate(newDate);
+    setTmpSeconds(newDate.getSeconds().toString());
+  }
+  const hours = timeFormat === "12" ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
+  function toggleAmPm() {
+    const newDate = new Date(innerDate);
+    // Get the current hour in 24-hour format
+    const currentHours = innerDate.getHours();
+    if (currentHours >= 0 && currentHours < 12) {
+      // Switching from AM to PM
+      newDate.setHours(currentHours + 12);
+    } else {
+      // Switching from PM to AM
+      newDate.setHours(currentHours - 12);
+    }
+    setInnerDate(newDate);
+    onDateChange(newDate);
+  }
+  const formatNumberWithLeadingZero = number => (number < 10 ? "0" : "") + number;
+  return (
+    /*#__PURE__*/
+    // should not be an issue with dialog
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsxs("div", {
+      role: "dialog",
+      style: style,
+      ref: combinedRef,
+      className: cn("fr-timepicker fwe-timepicker", {
+        "fwe-timepicker-am-pm": timeFormat === "12"
+      }),
+      onKeyDown: e => handleKeyPress(e),
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-timepicker-spinners",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "fwe-timepicker-spinners-hours",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "hour up",
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(1),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
+            "aria-label": "hours value",
+            min: min,
+            max: hourMax,
+            value: tmpHours ?? formatNumberWithLeadingZero(hours),
+            onInput: handleHourChange,
+            ref: hoursRef
+          }), /*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "hour down",
+            className: "fwe-dark",
+            onClick: () => handleHourIncrement(-1),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fwe-timepicker-spinners-minutes",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "minute up",
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(innerMinuteStepSize),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
+            "aria-label": "minutes value",
+            min: min,
+            max: minutesSecondsMax,
+            value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
+            onInput: handleMinuteChange
+          }), /*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "minute down",
+            className: "fwe-dark",
+            onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
+          })]
+        }), showSeconds && /*#__PURE__*/_jsxs("div", {
+          className: "fwe-timepicker-spinners-seconds",
+          children: [/*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "seconds up",
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(1),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconExpand, {})
+          }), /*#__PURE__*/_jsx(TimePickerInput, {
+            "aria-label": "seconds value",
+            min: min,
+            max: minutesSecondsMax,
+            value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
+            onInput: handleSecondChange
+          }), /*#__PURE__*/_jsx(LinkButton, {
+            "aria-label": "minute down",
+            className: "fwe-dark",
+            onClick: () => handleSecondIncrement(-1),
+            iconOnly: true,
+            icon: /*#__PURE__*/_jsx(IconCollapse, {})
+          })]
+        })]
+      }), timeFormat === "12" && /*#__PURE__*/_jsx("button", {
+        onClick: toggleAmPm,
+        type: "button",
+        className: "fwe-btn fwe-ml-m",
+        children: innerDate.getHours() >= 12 ? "PM" : "AM"
+      })]
+    })
+  );
+});
+export default TimePickerDropdown;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.d.ts

@@ -0,0 +1,9 @@
+interface TimePickerInputProps {
+    min: number;
+    value: string | number;
+    max: number;
+    onInput: React.FormEventHandler<HTMLInputElement>;
+    "aria-label": string;
+}
+declare const TimePickerInput: (props: TimePickerInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default TimePickerInput;

package/lib/forms/time-picker/time-picker-dropdown/TimePickerInput.js

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TimePickerInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    min,
+    max,
+    value,
+    onInput,
+    "aria-label": ariaLabel
+  } = _ref;
+  return /*#__PURE__*/_jsx("input", {
+    "aria-label": ariaLabel,
+    className: "fwe-timepicker-hide-spinners",
+    type: "number",
+    min: min,
+    step: 1,
+    value: value,
+    max: max,
+    onInput: onInput,
+    ref: ref
+  });
+});
+export default TimePickerInput;

package/{dist/utils → lib/helper}/index.d.ts

@@ -1 +1,2 @@
 export declare const provideDiv: () => HTMLDivElement;
+export default provideDiv;