@react-md/core 6.2.1 → 6.3.0

package/dist/datetime/NativeDateField.d.ts

@@ -0,0 +1,24 @@
+import { type TextFieldProps } from "../form/TextField.js";
+import { type DateFieldOptions } from "./useDateField.js";
+/** @since 6.3.0 */
+export interface NativeDateFieldProps extends Omit<TextFieldProps, keyof DateFieldOptions | "value">, Omit<DateFieldOptions, "ref"> {
+}
+/**
+ * The `NativeDateField` is a simple wrapper around the `TextField` using the
+ * `useDateField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeDateField label="Delivery Date" name="delivery" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */
+export declare const NativeDateField: import("react").ForwardRefExoticComponent<NativeDateFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/datetime/NativeDateField.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextField } from "../form/TextField.js";
+import { useDateField } from "./useDateField.js";
+/**
+ * The `NativeDateField` is a simple wrapper around the `TextField` using the
+ * `useDateField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeDateField } from "@react-md/core/datetime/NativeDateField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeDateField label="Delivery Date" name="delivery" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */ export const NativeDateField = /*#__PURE__*/ forwardRef(function NativeDateField(props, ref) {
+    const { id, min, max, step, onBlur, onInvalid, onChange, helpText, required, validationType, disableMessage, errorIcon, isErrored, getErrorIcon, getErrorMessage, onErrorChange, disableReset, defaultValue, ...remaining } = props;
+    const { name, form } = props;
+    const { fieldProps } = useDateField({
+        id,
+        ref,
+        name,
+        form,
+        min,
+        max,
+        step,
+        onBlur,
+        onChange,
+        onInvalid,
+        helpText,
+        required,
+        validationType,
+        disableMessage: disableMessage ?? (!min && !max && !step && !required),
+        errorIcon,
+        isErrored,
+        getErrorIcon,
+        getErrorMessage,
+        onErrorChange,
+        disableReset,
+        defaultValue
+    });
+    let { messageProps } = remaining;
+    if (fieldProps.messageProps) {
+        messageProps = {
+            ...fieldProps.messageProps,
+            ...remaining.messageProps
+        };
+    }
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...remaining,
+        ...fieldProps,
+        messageProps: messageProps
+    });
+});
+
+//# sourceMappingURL=NativeDateField.js.map

package/dist/datetime/NativeDateField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/NativeDateField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type DateFieldOptions, useDateField } from \"./useDateField.js\";\n\n/** @since 6.3.0 */\nexport interface NativeDateFieldProps\n  extends Omit<TextFieldProps, keyof DateFieldOptions | \"value\">,\n    Omit<DateFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeDateField` is a simple wrapper around the `TextField` using the\n * `useDateField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeDateField } from \"@react-md/core/datetime/NativeDateField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeDateField label=\"Delivery Date\" name=\"delivery\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeDateField = forwardRef<\n  HTMLInputElement,\n  NativeDateFieldProps\n>(function NativeDateField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useDateField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useDateField","NativeDateField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AAOxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}

package/dist/datetime/NativeTimeField.d.ts

@@ -0,0 +1,26 @@
+import { type TextFieldProps } from "../form/TextField.js";
+import { type TimeFieldOptions } from "./useTimeField.js";
+/**
+ * @since 6.3.0
+ */
+export interface NativeTimeFieldProps extends Omit<TextFieldProps, keyof TimeFieldOptions | "value">, Omit<TimeFieldOptions, "ref"> {
+}
+/**
+ * The `NativeTimeField` is a simple wrapper around the `TextField` using the
+ * `useTimeField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeTimeField } from "@react-md/core/datetime/NativeTimeField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeTimeField label="Time" name="appt" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */
+export declare const NativeTimeField: import("react").ForwardRefExoticComponent<NativeTimeFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/datetime/NativeTimeField.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextField } from "../form/TextField.js";
+import { useTimeField } from "./useTimeField.js";
+/**
+ * The `NativeTimeField` is a simple wrapper around the `TextField` using the
+ * `useTimeField` hook.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { NativeTimeField } from "@react-md/core/datetime/NativeTimeField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return <NativeTimeField label="Time" name="appt" />;
+ * }
+ * ```
+ *
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/components/text-field | TextField Demos}
+ * @since 6.3.0
+ */ export const NativeTimeField = /*#__PURE__*/ forwardRef(function NativeTimeField(props, ref) {
+    const { id, min, max, step, onBlur, onInvalid, onChange, helpText, required, validationType, disableMessage, errorIcon, isErrored, getErrorIcon, getErrorMessage, onErrorChange, disableReset, defaultValue, ...remaining } = props;
+    const { name, form } = props;
+    const { fieldProps } = useTimeField({
+        id,
+        ref,
+        name,
+        form,
+        min,
+        max,
+        step,
+        onBlur,
+        onChange,
+        onInvalid,
+        helpText,
+        required,
+        validationType,
+        disableMessage: disableMessage ?? (!min && !max && !step && !required),
+        errorIcon,
+        isErrored,
+        getErrorIcon,
+        getErrorMessage,
+        onErrorChange,
+        disableReset,
+        defaultValue
+    });
+    let { messageProps } = remaining;
+    if (fieldProps.messageProps) {
+        messageProps = {
+            ...fieldProps.messageProps,
+            ...remaining.messageProps
+        };
+    }
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...remaining,
+        ...fieldProps,
+        messageProps: messageProps
+    });
+});
+
+//# sourceMappingURL=NativeTimeField.js.map

package/dist/datetime/NativeTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/NativeTimeField.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { TextField, type TextFieldProps } from \"../form/TextField.js\";\nimport { type TimeFieldOptions, useTimeField } from \"./useTimeField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface NativeTimeFieldProps\n  extends Omit<TextFieldProps, keyof TimeFieldOptions | \"value\">,\n    Omit<TimeFieldOptions, \"ref\"> {}\n\n/**\n * The `NativeTimeField` is a simple wrapper around the `TextField` using the\n * `useTimeField` hook.\n *\n * @example Simple Example\n * ```tsx\n * import { NativeTimeField } from \"@react-md/core/datetime/NativeTimeField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return <NativeTimeField label=\"Time\" name=\"appt\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @since 6.3.0\n */\nexport const NativeTimeField = forwardRef<\n  HTMLInputElement,\n  NativeTimeFieldProps\n>(function NativeTimeField(props, ref) {\n  const {\n    id,\n    min,\n    max,\n    step,\n    onBlur,\n    onInvalid,\n    onChange,\n    helpText,\n    required,\n    validationType,\n    disableMessage,\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n    ...remaining\n  } = props;\n  const { name, form } = props;\n  const { fieldProps } = useTimeField({\n    id,\n    ref,\n    name,\n    form,\n    min,\n    max,\n    step,\n    onBlur,\n    onChange,\n    onInvalid,\n    helpText,\n    required,\n    validationType,\n    disableMessage: disableMessage ?? (!min && !max && !step && !required),\n    errorIcon,\n    isErrored,\n    getErrorIcon,\n    getErrorMessage,\n    onErrorChange,\n    disableReset,\n    defaultValue,\n  });\n\n  let { messageProps } = remaining;\n  if (fieldProps.messageProps) {\n    messageProps = {\n      ...fieldProps.messageProps,\n      ...remaining.messageProps,\n    };\n  }\n\n  return (\n    <TextField {...remaining} {...fieldProps} messageProps={messageProps} />\n  );\n});\n"],"names":["forwardRef","TextField","useTimeField","NativeTimeField","props","ref","id","min","max","step","onBlur","onInvalid","onChange","helpText","required","validationType","disableMessage","errorIcon","isErrored","getErrorIcon","getErrorMessage","onErrorChange","disableReset","defaultValue","remaining","name","form","fieldProps","messageProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAA6B,uBAAuB;AACtE,SAAgCC,YAAY,QAAQ,oBAAoB;AASxE;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,gCAAkBH,WAG7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,EAAE,EACFC,GAAG,EACHC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZ,GAAGC,WACJ,GAAGpB;IACJ,MAAM,EAAEqB,IAAI,EAAEC,IAAI,EAAE,GAAGtB;IACvB,MAAM,EAAEuB,UAAU,EAAE,GAAGzB,aAAa;QAClCI;QACAD;QACAoB;QACAC;QACAnB;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAC;QACAC;QACAC,gBAAgBA,kBAAmB,CAAA,CAACT,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACK,QAAO;QACpEG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,EAAEK,YAAY,EAAE,GAAGJ;IACvB,IAAIG,WAAWC,YAAY,EAAE;QAC3BA,eAAe;YACb,GAAGD,WAAWC,YAAY;YAC1B,GAAGJ,UAAUI,YAAY;QAC3B;IACF;IAEA,qBACE,KAAC3B;QAAW,GAAGuB,SAAS;QAAG,GAAGG,UAAU;QAAEC,cAAcA;;AAE5D,GAAG"}

package/dist/datetime/useDateField.d.ts

@@ -0,0 +1,120 @@
+import { type InputHTMLAttributes } from "react";
+import { type ProvidedFormMessageProps, type ProvidedTextFieldProps, type TextFieldHookOptions, type TextFieldImplementation, type TextFieldWithMessageImplementation } from "../form/useTextField.js";
+/**
+ * @since 6.3.0
+ */
+export interface DateFieldConstraints {
+    /**
+     * This **must** be in the format `yyyy-mm-dd`
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}
+     */
+    min?: string;
+    /**
+     * This **must** be in the format `yyyy-mm-dd`
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}
+     */
+    max?: string;
+    /**
+     * For date inputs, the value of step is given in days; and is treated as a
+     * number of milliseconds equal to 86,400,000 times the step value (the
+     * underlying numeric value is in milliseconds). The default value of step is
+     * 1, indicating 1 day.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}
+     */
+    step?: number | "any";
+}
+/** @since 6.3.0 */
+export interface DateFieldOptions extends Omit<TextFieldHookOptions, "isNumber" | "counter" | "pattern" | "maxLength" | "minLength" | "disableMaxLength">, DateFieldConstraints {
+}
+/** @since 6.3.0 */
+export interface ProvidedDateFieldProps extends Omit<ProvidedTextFieldProps, "value">, Omit<DateFieldConstraints, "step"> {
+    type: "date";
+    step?: number | "any";
+    defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>["defaultValue"];
+}
+/** @since 6.3.0 */
+export interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {
+    /**
+     * These props will be defined as long as the `disableMessage` prop is not
+     * `true` from the `useTextField` hook.
+     */
+    messageProps: ProvidedFormMessageProps;
+}
+/** @since 6.3.0 */
+export interface DateFieldImplementation extends Omit<TextFieldImplementation, "fieldProps"> {
+    fieldProps: ProvidedDateFieldProps;
+}
+/** @since 6.3.0 */
+export interface DateFieldWithMessageImplementation extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+    fieldProps: ProvidedDateFieldMessageProps;
+}
+/** @since 6.3.0 */
+export interface ValidatedDateFieldImplementation extends DateFieldImplementation {
+    fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;
+}
+/**
+ * The `useDateField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="date" />`. It is used in the `NativeDateField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useDateField } from "@react-md/core/datetime/useDateField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps, error, errorMessage } = useDateField({
+ *     name: "delivery",
+ *     required: true,
+ *     min: "2025-01-01",
+ *     max: "2026-01-01",
+ *     disableMessage: true,
+ *   });
+ *
+ *   // value: `""` or `"yyyy-mm-dd"`
+ *
+ *   return <TextField label="Delivery Date" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}
+ */
+export declare function useDateField(options: DateFieldOptions & {
+    disableMessage: true;
+}): DateFieldImplementation;
+/**
+ * The `useDateField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="date" />`. It is used in the `NativeDateField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useDateField } from "@react-md/core/datetime/useDateField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps } = useDateField({
+ *     name: "delivery",
+ *     required: true,
+ *     min: "2025-01-01",
+ *     max: "2026-01-01",
+ *   });
+ *
+ *   // value: `""` or `"yyyy-mm-dd"`
+ *
+ *   return <TextField label="Delivery Date" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}
+ * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}
+ */
+export declare function useDateField(options: DateFieldOptions): DateFieldWithMessageImplementation;

package/dist/datetime/useDateField.js

@@ -0,0 +1,35 @@
+"use client";
+import { useRef } from "react";
+import { useTextField } from "../form/useTextField.js";
+/**
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-date-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/hooks/use-date-field | useTimeField Demos}
+ */ export function useDateField(options) {
+    const { min, max, step, ...fieldOptions } = options;
+    const { fieldProps, ...impl } = useTextField(fieldOptions);
+    // NOTE: Unlike the other text field components, the `value` should **not**
+    // be provided since the time input behaves a bit weirdly with the `onChange`
+    // event and it is better to rely on default browser behavior instead of
+    // controlling the value. The flow is:
+    // - user types `12:30`
+    //   - `onChange` is fired with `12:30`
+    // - user selects `30` and hits backspace
+    //   - `onChange` is fired with `""`
+    // If the `value` is set, the other time values would be lost
+    const { value, ...allowedFieldProps } = fieldProps;
+    const initial = useRef(value);
+    return {
+        ...impl,
+        fieldProps: {
+            ...allowedFieldProps,
+            defaultValue: initial.current,
+            min,
+            max,
+            step,
+            type: "date"
+        }
+    };
+}
+
+//# sourceMappingURL=useDateField.js.map

package/dist/datetime/useDateField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/useDateField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\n\n/**\n * @since 6.3.0\n */\nexport interface DateFieldConstraints {\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#min | min attribute}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `yyyy-mm-dd`\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#max | max attribute}\n   */\n  max?: string;\n\n  /**\n   * For date inputs, the value of step is given in days; and is treated as a\n   * number of milliseconds equal to 86,400,000 times the step value (the\n   * underlying numeric value is in milliseconds). The default value of step is\n   * 1, indicating 1 day.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date#step | step attribute}\n   */\n  step?: number | \"any\";\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldOptions\n  extends Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    DateFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldProps\n  extends Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<DateFieldConstraints, \"step\"> {\n  type: \"date\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldImplementation\n  extends Omit<TextFieldImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedDateFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface DateFieldWithMessageImplementation\n  extends Omit<TextFieldWithMessageImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedDateFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedDateFieldImplementation\n  extends DateFieldImplementation {\n  fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;\n}\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions & { disableMessage: true }\n): DateFieldImplementation;\n\n/**\n * The `useDateField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"date\" />`. It is used in the `NativeDateField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useDateField } from \"@react-md/core/datetime/useDateField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useDateField({\n *     name: \"delivery\",\n *     required: true,\n *     min: \"2025-01-01\",\n *     max: \"2026-01-01\",\n *   });\n *\n *   // value: `\"\"` or `\"yyyy-mm-dd\"`\n *\n *   return <TextField label=\"Delivery Date\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeDateField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useDateField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): DateFieldWithMessageImplementation;\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-date-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-date-field | useTimeField Demos}\n */\nexport function useDateField(\n  options: DateFieldOptions\n): ValidatedDateFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  const { fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step,\n      type: \"date\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","useDateField","options","min","max","step","fieldOptions","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AAmJjC;;;;CAIC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,MAAM,EAAEK,UAAU,EAAE,GAAGC,MAAM,GAAGR,aAAaM;IAE7C,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEG,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUZ,OAAOU;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPD,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7BV;YACAC;YACAC;YACAS,MAAM;QACR;IACF;AACF"}

package/dist/datetime/useTimeField.d.ts

@@ -0,0 +1,124 @@
+import { type InputHTMLAttributes } from "react";
+import { type ProvidedFormMessageProps, type ProvidedTextFieldProps, type TextFieldHookOptions, type TextFieldImplementation, type TextFieldWithMessageImplementation } from "../form/useTextField.js";
+import { type TimeFieldStepOptions } from "./utils.js";
+/** @since 6.3.0 */
+export interface TimeFieldConstraints {
+    /**
+     * This **must** be in the format `HH:mm`:
+     * - `00:30` (12:30 AM)
+     * - `15:15` (03:15 PM)
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}
+     */
+    min?: string;
+    /**
+     * This **must** be in the format `HH:mm`:
+     * - `00:30` (12:30 AM)
+     * - `15:15` (03:15 PM)
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}
+     */
+    max?: string;
+    /**
+     * For time inputs, the value of step is given in seconds, with a scaling
+     * factor of 1000 (since the underlying numeric value is in milliseconds).
+     * The default value of step is 60, indicating 60 seconds (or 1 minute, or
+     * 60,000 milliseconds).
+     *
+     * When any is set as the value for step, the default 60 seconds is used, and
+     * the seconds value is not displayed in the UI.
+     *
+     * Here are a few examples:
+     *
+     * - `15`   -> 15 seconds
+     * - `60`   -> 1 minute
+     * - `900`  -> 15 minutes
+     * - `3600` -> 1 hour
+     *
+     * Since this might be a bit confusing, the values can be provided in an
+     * object instead:
+     *
+     * ```ts
+     * { seconds: 30 }
+     * { minutes: 1 }
+     * { minutes: 15 }
+     * { hours: 1 }
+     * { seconds: 15, minutes: 30, hours: 1 }
+     * ```
+     *
+     * NOTE: The `min` and `max` props **must** be provided as well for the
+     * `step` to work.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}
+     */
+    step?: number | "any" | TimeFieldStepOptions;
+}
+/** @since 6.3.0 */
+export interface TimeFieldOptions extends Omit<TextFieldHookOptions, "isNumber" | "counter" | "pattern" | "maxLength" | "minLength" | "disableMaxLength">, TimeFieldConstraints {
+}
+/** @since 6.3.0 */
+export interface ProvidedTimeFieldProps extends Omit<ProvidedTextFieldProps, "value">, Omit<TimeFieldConstraints, "step"> {
+    type: "time";
+    step?: number | "any";
+    defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>["defaultValue"];
+}
+/** @since 6.3.0 */
+export interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {
+    /**
+     * These props will be defined as long as the `disableMessage` prop is not
+     * `true` from the `useTextField` hook.
+     */
+    messageProps: ProvidedFormMessageProps;
+}
+/** @since 6.3.0 */
+export interface TimeFieldImplementation extends Omit<TextFieldImplementation, "fieldProps"> {
+    fieldProps: ProvidedTimeFieldProps;
+}
+/** @since 6.3.0 */
+export interface TimeFieldWithMessageImplementation extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+    fieldProps: ProvidedTimeFieldMessageProps;
+}
+/** @since 6.3.0 */
+export interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {
+    fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;
+}
+/**
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
+ */
+export declare function useTimeField(options: TimeFieldOptions & {
+    disableMessage: true;
+}): TimeFieldImplementation;
+/**
+ * The `useTimeField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="time" />`. It is used in the `NativeTimeField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useTimeField } from "@react-md/core/datetime/useTimeField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps, error, errorMessage } = useTimeField({
+ *     name: "appt",
+ *     required: true,
+ *     min: "08:00",
+ *     max: "17:00",
+ *     step: { minute: 15 },
+ *     disableMessage: true,
+ *   });
+ *
+ *   // value: `""` or `"HH:mm"`
+ *
+ *   return <TextField label="Appointment" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
+ */
+export declare function useTimeField(options: TimeFieldOptions): TimeFieldWithMessageImplementation;

package/dist/datetime/useTimeField.js

@@ -0,0 +1,65 @@
+"use client";
+import { useRef } from "react";
+import { useTextField } from "../form/useTextField.js";
+import { getTimeStep } from "./utils.js";
+/**
+ * The `useTimeField` is a small wrapper around the {@link useTextField} to be used
+ * with `<input type="time" />`. It is used in the `NativeTimeField` if an example
+ * implementation would like to be seen.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useTimeField } from "@react-md/core/datetime/useTimeField";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { value, fieldProps } = useTimeField({
+ *     name: "appt",
+ *     required: true,
+ *     min: "08:00",
+ *     max: "17:00",
+ *     step: { minute: 15 },
+ *   });
+ *
+ *   // value: `""` or `"HH:mm"`
+ *
+ *   return <TextField label="Appointment" {...fieldProps} />
+ * }
+ * ```
+ *
+ * @since 6.3.0
+ * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}
+ * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}
+ */ export function useTimeField(options) {
+    const { min, max, step, ...fieldOptions } = options;
+    if (process.env.NODE_ENV !== "production" && typeof step !== "undefined" && (!min || !max)) {
+        throw new Error("A `step` was provided to a time field without the `min` or `max` props.");
+    }
+    const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);
+    // NOTE: Unlike the other text field components, the `value` should **not**
+    // be provided since the time input behaves a bit weirdly with the `onChange`
+    // event and it is better to rely on default browser behavior instead of
+    // controlling the value. The flow is:
+    // - user types `12:30`
+    //   - `onChange` is fired with `12:30`
+    // - user selects `30` and hits backspace
+    //   - `onChange` is fired with `""`
+    // If the `value` is set, the other time values would be lost
+    const { value, ...allowedFieldProps } = fieldProps;
+    const initial = useRef(value);
+    return {
+        ...impl,
+        errorMessage,
+        fieldProps: {
+            ...allowedFieldProps,
+            defaultValue: initial.current,
+            min,
+            max,
+            step: getTimeStep(step),
+            type: "time"
+        }
+    };
+}
+
+//# sourceMappingURL=useTimeField.js.map

package/dist/datetime/useTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/useTimeField.ts"],"sourcesContent":["\"use client\";\n\nimport { type InputHTMLAttributes, useRef } from \"react\";\n\nimport {\n  type ProvidedFormMessageProps,\n  type ProvidedTextFieldProps,\n  type TextFieldHookOptions,\n  type TextFieldImplementation,\n  type TextFieldWithMessageImplementation,\n  useTextField,\n} from \"../form/useTextField.js\";\nimport { type TimeFieldStepOptions, getTimeStep } from \"./utils.js\";\n\n/** @since 6.3.0 */\nexport interface TimeFieldConstraints {\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  min?: string;\n\n  /**\n   * This **must** be in the format `HH:mm`:\n   * - `00:30` (12:30 AM)\n   * - `15:15` (03:15 PM)\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#time_value_format | Time value format}\n   */\n  max?: string;\n\n  /**\n   * For time inputs, the value of step is given in seconds, with a scaling\n   * factor of 1000 (since the underlying numeric value is in milliseconds).\n   * The default value of step is 60, indicating 60 seconds (or 1 minute, or\n   * 60,000 milliseconds).\n   *\n   * When any is set as the value for step, the default 60 seconds is used, and\n   * the seconds value is not displayed in the UI.\n   *\n   * Here are a few examples:\n   *\n   * - `15`   -&gt; 15 seconds\n   * - `60`   -&gt; 1 minute\n   * - `900`  -&gt; 15 minutes\n   * - `3600` -&gt; 1 hour\n   *\n   * Since this might be a bit confusing, the values can be provided in an\n   * object instead:\n   *\n   * ```ts\n   * { seconds: 30 }\n   * { minutes: 1 }\n   * { minutes: 15 }\n   * { hours: 1 }\n   * { seconds: 15, minutes: 30, hours: 1 }\n   * ```\n   *\n   * NOTE: The `min` and `max` props **must** be provided as well for the\n   * `step` to work.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time#step | step attribute}\n   */\n  step?: number | \"any\" | TimeFieldStepOptions;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldOptions\n  extends Omit<\n      TextFieldHookOptions,\n      | \"isNumber\"\n      | \"counter\"\n      | \"pattern\"\n      | \"maxLength\"\n      | \"minLength\"\n      | \"disableMaxLength\"\n    >,\n    TimeFieldConstraints {}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldProps\n  extends Omit<ProvidedTextFieldProps, \"value\">,\n    Omit<TimeFieldConstraints, \"step\"> {\n  type: \"time\";\n  step?: number | \"any\";\n  defaultValue: Required<InputHTMLAttributes<HTMLInputElement>>[\"defaultValue\"];\n}\n\n/** @since 6.3.0 */\nexport interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldImplementation\n  extends Omit<TextFieldImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedTimeFieldProps;\n}\n\n/** @since 6.3.0 */\nexport interface TimeFieldWithMessageImplementation\n  extends Omit<TextFieldWithMessageImplementation, \"fieldProps\"> {\n  fieldProps: ProvidedTimeFieldMessageProps;\n}\n\n/** @since 6.3.0 */\nexport interface ValidatedTimeFieldImplementation\n  extends TimeFieldImplementation {\n  fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;\n}\n\n/**\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions & { disableMessage: true }\n): TimeFieldImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps, error, errorMessage } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *     disableMessage: true,\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): TimeFieldWithMessageImplementation;\n\n/**\n * The `useTimeField` is a small wrapper around the {@link useTextField} to be used\n * with `<input type=\"time\" />`. It is used in the `NativeTimeField` if an example\n * implementation would like to be seen.\n *\n * @example Simple Example\n * ```tsx\n * import { useTimeField } from \"@react-md/core/datetime/useTimeField\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { value, fieldProps } = useTimeField({\n *     name: \"appt\",\n *     required: true,\n *     min: \"08:00\",\n *     max: \"17:00\",\n *     step: { minute: 15 },\n *   });\n *\n *   // value: `\"\"` or `\"HH:mm\"`\n *\n *   return <TextField label=\"Appointment\" {...fieldProps} />\n * }\n * ```\n *\n * @since 6.3.0\n * @see {@link https://react-md.dev/components/native-time-field | NativeTimeField Demos}\n * @see {@link https://react-md.dev/hooks/use-time-field | useTimeField Demos}\n */\nexport function useTimeField(\n  options: TimeFieldOptions\n): ValidatedTimeFieldImplementation {\n  const { min, max, step, ...fieldOptions } = options;\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    typeof step !== \"undefined\" &&\n    (!min || !max)\n  ) {\n    throw new Error(\n      \"A `step` was provided to a time field without the `min` or `max` props.\"\n    );\n  }\n\n  const { errorMessage, fieldProps, ...impl } = useTextField(fieldOptions);\n\n  // NOTE: Unlike the other text field components, the `value` should **not**\n  // be provided since the time input behaves a bit weirdly with the `onChange`\n  // event and it is better to rely on default browser behavior instead of\n  // controlling the value. The flow is:\n  // - user types `12:30`\n  //   - `onChange` is fired with `12:30`\n  // - user selects `30` and hits backspace\n  //   - `onChange` is fired with `\"\"`\n  // If the `value` is set, the other time values would be lost\n  const { value, ...allowedFieldProps } = fieldProps;\n  const initial = useRef(value);\n\n  return {\n    ...impl,\n    errorMessage,\n    fieldProps: {\n      ...allowedFieldProps,\n      defaultValue: initial.current,\n      min,\n      max,\n      step: getTimeStep(step),\n      type: \"time\",\n    },\n  };\n}\n"],"names":["useRef","useTextField","getTimeStep","useTimeField","options","min","max","step","fieldOptions","process","env","NODE_ENV","Error","errorMessage","fieldProps","impl","value","allowedFieldProps","initial","defaultValue","current","type"],"mappings":"AAAA;AAEA,SAAmCA,MAAM,QAAQ,QAAQ;AAEzD,SAMEC,YAAY,QACP,0BAA0B;AACjC,SAAoCC,WAAW,QAAQ,aAAa;AAsJpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,aACdC,OAAyB;IAEzB,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,cAAc,GAAGJ;IAC5C,IACEK,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzB,OAAOJ,SAAS,eACf,CAAA,CAACF,OAAO,CAACC,GAAE,GACZ;QACA,MAAM,IAAIM,MACR;IAEJ;IAEA,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGd,aAAaO;IAE3D,2EAA2E;IAC3E,6EAA6E;IAC7E,wEAAwE;IACxE,sCAAsC;IACtC,uBAAuB;IACvB,uCAAuC;IACvC,yCAAyC;IACzC,oCAAoC;IACpC,6DAA6D;IAC7D,MAAM,EAAEQ,KAAK,EAAE,GAAGC,mBAAmB,GAAGH;IACxC,MAAMI,UAAUlB,OAAOgB;IAEvB,OAAO;QACL,GAAGD,IAAI;QACPF;QACAC,YAAY;YACV,GAAGG,iBAAiB;YACpBE,cAAcD,QAAQE,OAAO;YAC7Bf;YACAC;YACAC,MAAML,YAAYK;YAClBc,MAAM;QACR;IACF;AACF"}

package/dist/datetime/utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Since time input steps are based on seconds, this is a simple helper to
+ * create the step in a human-readable form.
+ *
+ * @since 6.3.0
+ */
+export interface TimeFieldStepOptions {
+    /**
+     * @defaultValue `0`
+     */
+    seconds?: number;
+    /**
+     * @defaultValue `0`
+     */
+    minutes?: number;
+    /**
+     * @defaultValue `0`
+     */
+    hours?: number;
+}
+/**
+ * Since time input steps are based on seconds, this is a simple helper to
+ * create the step in a human-readable form.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const step1 = getTimeStep({ minutes: 15 });
+ * const step2 = getTimeStep({ hours: 1 });
+ * const step3 = getTimeStep({ seconds: 15, minutes: 30, hours: 2 });
+ * ```
+ *
+ * @since 6.3.0
+ */
+export declare function getTimeStep(step: TimeFieldStepOptions | "any" | number | undefined): number | "any" | undefined;

package/dist/datetime/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Since time input steps are based on seconds, this is a simple helper to
+ * create the step in a human-readable form.
+ *
+ * @since 6.3.0
+ */ /**
+ * Since time input steps are based on seconds, this is a simple helper to
+ * create the step in a human-readable form.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const step1 = getTimeStep({ minutes: 15 });
+ * const step2 = getTimeStep({ hours: 1 });
+ * const step3 = getTimeStep({ seconds: 15, minutes: 30, hours: 2 });
+ * ```
+ *
+ * @since 6.3.0
+ */ export function getTimeStep(step) {
+    if (!step || typeof step === "string" || typeof step === "number") {
+        return step;
+    }
+    const { hours = 0, minutes = 0, seconds = 0 } = step;
+    const total = Math.abs(Math.round(seconds + minutes * 60 + hours * 60 * 60));
+    return total === 0 ? undefined : total;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/datetime/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/datetime/utils.ts"],"sourcesContent":["/**\n * Since time input steps are based on seconds, this is a simple helper to\n * create the step in a human-readable form.\n *\n * @since 6.3.0\n */\nexport interface TimeFieldStepOptions {\n  /**\n   * @defaultValue `0`\n   */\n  seconds?: number;\n\n  /**\n   * @defaultValue `0`\n   */\n  minutes?: number;\n\n  /**\n   * @defaultValue `0`\n   */\n  hours?: number;\n}\n\n/**\n * Since time input steps are based on seconds, this is a simple helper to\n * create the step in a human-readable form.\n *\n * @example Simple Example\n * ```tsx\n * const step1 = getTimeStep({ minutes: 15 });\n * const step2 = getTimeStep({ hours: 1 });\n * const step3 = getTimeStep({ seconds: 15, minutes: 30, hours: 2 });\n * ```\n *\n * @since 6.3.0\n */\nexport function getTimeStep(\n  step: TimeFieldStepOptions | \"any\" | number | undefined\n): number | \"any\" | undefined {\n  if (!step || typeof step === \"string\" || typeof step === \"number\") {\n    return step;\n  }\n\n  const { hours = 0, minutes = 0, seconds = 0 } = step;\n\n  const total = Math.abs(Math.round(seconds + minutes * 60 + hours * 60 * 60));\n  return total === 0 ? undefined : total;\n}\n"],"names":["getTimeStep","step","hours","minutes","seconds","total","Math","abs","round","undefined"],"mappings":"AAAA;;;;;CAKC,GAkBD;;;;;;;;;;;;CAYC,GACD,OAAO,SAASA,YACdC,IAAuD;IAEvD,IAAI,CAACA,QAAQ,OAAOA,SAAS,YAAY,OAAOA,SAAS,UAAU;QACjE,OAAOA;IACT;IAEA,MAAM,EAAEC,QAAQ,CAAC,EAAEC,UAAU,CAAC,EAAEC,UAAU,CAAC,EAAE,GAAGH;IAEhD,MAAMI,QAAQC,KAAKC,GAAG,CAACD,KAAKE,KAAK,CAACJ,UAAUD,UAAU,KAAKD,QAAQ,KAAK;IACxE,OAAOG,UAAU,IAAII,YAAYJ;AACnC"}