@react-md/core 6.2.1 → 6.3.1

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"}

package/dist/dialog/styles.d.ts

@@ -1,7 +1,5 @@
 declare module "react" {
     interface CSSProperties {
-        "--rmd-dialog-background-color"?: string;
-        "--rmd-dialog-color"?: string;
         "--rmd-dialog-min-width"?: string | number;
         "--rmd-dialog-horizontal-margin"?: string | number;
         "--rmd-dialog-vertical-margin"?: string | number;
@@ -10,6 +8,11 @@ declare module "react" {
         "--rmd-dialog-header-padding-bottom"?: string | number;
         "--rmd-dialog-content-padding"?: string | number;
         "--rmd-dialog-footer-padding"?: string | number;
+        "--rmd-dialog-width"?: string | number;
+        "--rmd-dialog-small-width"?: string | number;
+        "--rmd-dialog-medium-width"?: string | number;
+        "--rmd-dialog-large-width"?: string | number;
+        "--rmd-dialog-extra-large-width"?: string | number;
     }
 }
 export type DialogType = "full-page" | "centered" | "custom";

package/dist/dialog/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/**\n * NOTE: The default `DialogHeader` component uses the `Box` component so the\n * `box` class name utility function or `Box` component will probably be\n * required if using this util\n *\n * @since 6.0.0\n */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_TIMEOUT","enter","exit","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enterActive","exitActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAiBlE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA6B5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA;;;;;;CAMC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,yBAAyB;IACpCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC,iBAAiB,GACjB,OAAO,MAAMC,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;AACd,EAA6C"}
+{"version":3,"sources":["../../src/dialog/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n    \"--rmd-dialog-width\"?: string | number;\n    \"--rmd-dialog-small-width\"?: string | number;\n    \"--rmd-dialog-medium-width\"?: string | number;\n    \"--rmd-dialog-large-width\"?: string | number;\n    \"--rmd-dialog-extra-large-width\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-dialog\");\nconst containerStyles = bem(\"rmd-dialog-container\");\n\nexport type DialogType = \"full-page\" | \"centered\" | \"custom\";\n\n/**\n * This can be used to enforce a specific width for dialogs instead of relying\n * on the size of the content to determine the width. The width will also ensure\n * that it does not overflow based on the viewport width and margins applied.\n *\n * For example: if the `width=\"extra-large\"` and the total viewport size is\n * `600px`, the dialog width would be `420px` since there is a default `80px`\n * margin to the left and right of the dialog. If the user expands the browser,\n * the dialog width will continue to grow until it reaches the `extra-large`\n * width and stop growing from that point.\n *\n * @since 6.0.0\n */\nexport type DialogWidth = \"auto\" | \"small\" | \"medium\" | \"large\" | \"extra-large\";\n\n/**\n * @since 6.0.0\n */\nexport interface DialogContainerClassNameOptions {\n  className?: string;\n\n  centered?: boolean;\n  displayNone?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function dialogContainer(\n  options: DialogContainerClassNameOptions = {}\n): string {\n  const { className, centered, displayNone } = options;\n\n  return cnb(\n    containerStyles({ centered }),\n    displayNone && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * @defaultValue `type === \"full-page\"`\n   */\n  outline?: boolean;\n\n  /**\n   * This is mostly used for handling nested dialogs and removes any box shadow\n   * on a dialog that has a child visible.\n   *\n   * @defaultValue `false`\n   */\n  disableBoxShadow?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialog(options: DialogClassNameOptions = {}): string {\n  const {\n    type = \"centered\",\n    width,\n    fixed = false,\n    outline = type === \"full-page\",\n    disableBoxShadow,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      fixed,\n      outline,\n      centered: type === \"centered\",\n      \"full-page\": type === \"full-page\",\n      \"no-box-shadow\": type === \"centered\" && disableBoxShadow,\n      \"s-width\": width === \"small\",\n      \"m-width\": width === \"medium\",\n      \"l-width\": width === \"large\",\n      \"xl-width\": width === \"extra-large\",\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface DialogHeaderClassNameOptions {\n  className?: string;\n}\n\n/**\n * NOTE: The default `DialogHeader` component uses the `Box` component so the\n * `box` class name utility function or `Box` component will probably be\n * required if using this util\n *\n * @since 6.0.0\n */\nexport function dialogHeader(\n  options: DialogHeaderClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"header\"), className);\n}\n\n/** @since 6.0.0 */\nexport interface DialogContentClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disablePadding?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function dialogContent(\n  options: DialogContentClassNameOptions = {}\n): string {\n  const { className, disablePadding = false } = options;\n\n  return cnb(styles(\"content\", { padded: !disablePadding }), className);\n}\n\n/**\n * An optional alignment for the content within the footer. Since the majority\n * of dialog footers are used to contain action buttons, the default alignment\n * is near the end.\n *\n * @since 3.1.0\n */\nexport type DialogFooterAlignment =\n  | \"none\"\n  | \"start\"\n  | \"end\"\n  | \"between\"\n  | \"stacked-start\"\n  | \"stacked-end\";\n\n/** @since 6.0.0 */\nexport interface DialogFooterClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"end\"` */\n  align?: DialogFooterAlignment;\n}\n\n/** @since 6.0.0 */\nexport function dialogFooter(\n  options: DialogFooterClassNameOptions = {}\n): string {\n  const { align = \"end\", className } = options;\n\n  return cnb(\n    styles(\"footer\", {\n      flex: align !== \"none\",\n      \"flex-v\": align === \"stacked-start\" || align === \"stacked-end\",\n      start: align === \"start\" || align === \"stacked-start\",\n      between: align === \"between\",\n      end: align === \"end\" || align === \"stacked-end\",\n    }),\n    className\n  );\n}\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\n\n/** @since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","containerStyles","dialogContainer","options","className","centered","displayNone","dialog","type","width","fixed","outline","disableBoxShadow","dialogHeader","dialogContent","disablePadding","padded","dialogFooter","align","flex","start","between","end","DEFAULT_DIALOG_TIMEOUT","enter","exit","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enterActive","exitActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAMhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAoBlE,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA6B5B;;CAEC,GACD,OAAO,SAASI,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGH;IAE7C,OAAON,IACLI,gBAAgB;QAAEI;IAAS,IAC3BC,eAAeP,oBACfK;AAEJ;AAmCA,iBAAiB,GACjB,OAAO,SAASG,OAAOJ,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJK,OAAO,UAAU,EACjBC,KAAK,EACLC,QAAQ,KAAK,EACbC,UAAUH,SAAS,WAAW,EAC9BI,gBAAgB,EAChBR,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLG,OAAO;QACLU;QACAC;QACAN,UAAUG,SAAS;QACnB,aAAaA,SAAS;QACtB,iBAAiBA,SAAS,cAAcI;QACxC,WAAWH,UAAU;QACrB,WAAWA,UAAU;QACrB,WAAWA,UAAU;QACrB,YAAYA,UAAU;IACxB,IACAL;AAEJ;AAOA;;;;;;CAMC,GACD,OAAO,SAASS,aACdV,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAIG,OAAO,WAAWI;AAC/B;AAUA,iBAAiB,GACjB,OAAO,SAASU,cACdX,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,SAAS,EAAEW,iBAAiB,KAAK,EAAE,GAAGZ;IAE9C,OAAON,IAAIG,OAAO,WAAW;QAAEgB,QAAQ,CAACD;IAAe,IAAIX;AAC7D;AAyBA,iBAAiB,GACjB,OAAO,SAASa,aACdd,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEe,QAAQ,KAAK,EAAEd,SAAS,EAAE,GAAGD;IAErC,OAAON,IACLG,OAAO,UAAU;QACfmB,MAAMD,UAAU;QAChB,UAAUA,UAAU,mBAAmBA,UAAU;QACjDE,OAAOF,UAAU,WAAWA,UAAU;QACtCG,SAASH,UAAU;QACnBI,KAAKJ,UAAU,SAASA,UAAU;IACpC,IACAd;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAMmB,yBAAyB;IACpCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC,iBAAiB,GACjB,OAAO,MAAMC,4BAA4B;IACvCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;AACd,EAA6C"}

package/dist/divider/styles.d.ts

@@ -1,7 +1,7 @@
 declare module "react" {
     interface CSSProperties {
         "--rmd-divider-size"?: string | number;
-        "--rmd-divider-vertical-size"?: string | number;
+        "--rmd-divider-border-size"?: string | number;
         "--rmd-divider-color"?: string;
         "--rmd-divider-spacing"?: string | number;
         "--rmd-divider-vertical-spacing"?: string | number;

package/dist/divider/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-vertical-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-divider\");\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AActC,MAAMC,SAASD,IAAI;AAgCnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}
+{"version":3,"sources":["../../src/divider/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-divider-size\"?: string | number;\n    \"--rmd-divider-border-size\"?: string | number;\n    \"--rmd-divider-color\"?: string;\n    \"--rmd-divider-spacing\"?: string | number;\n    \"--rmd-divider-vertical-spacing\"?: string | number;\n    \"--rmd-divider-inset\"?: string | number;\n    \"--rmd-divider-max-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-divider\");\n\n/** @since 6.0.0 */\nexport interface DividerClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the divider should appear inset instead of full width. This\n   * really just applied a margin-left (or margin-right when dir=\"rtl\").\n   *\n   * If you want to create a divider that is centered, you most likely want to\n   * use the `rmd-divider-theme-update-var` mixin instead to update the\n   * `max-size` of the divider.\n   *\n   * @defaultValue `false`\n   */\n  inset?: boolean;\n\n  /**\n   * Boolean if the divider should be vertical instead of horizontal. This will\n   * change the divider to be rendered as a `<div>` instead of an `<hr>`.\n   *\n   * Note: If your parent element of the divider does not have a static height\n   * set, you **must** manually set the height of the divider to a static\n   * non-percentage number OR use the `VerticalDivider` component instead to\n   * automagically create a valid percentage height.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function divider(options: DividerClassNameOptions = {}): string {\n  const { inset = false, vertical = false, className } = options;\n\n  return cnb(\n    styles({\n      inset: inset && !vertical,\n      vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","divider","options","inset","vertical","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AActC,MAAMC,SAASD,IAAI;AAgCnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEvD,OAAOJ,IACLE,OAAO;QACLG,OAAOA,SAAS,CAACC;QACjBA;IACF,IACAC;AAEJ"}

package/dist/draggable/utils.d.ts

@@ -1,4 +1,5 @@
 import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+import { type MinMaxRange } from "../types.js";
 import { type ClientPositionEvent, type ClientPositionOptions } from "../utils/getClientPosition.js";
 /**
  * @internal
@@ -23,9 +24,7 @@ export declare const getDragPosition: (options: DragPositionOptions) => number;
 /**
  * @internal
  */
-interface RelativeDragPositionOptions extends DragPositionOptions {
-    min: number;
-    max: number;
+interface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {
     step: number;
     rangeMin: number;
     rangeMax: number;
@@ -62,9 +61,7 @@ export declare const updateDragPosition: (options: UpdateDragPositionOptions) =>
  * @internal
  * @since 6.0.0
  */
-export interface DeserializeDraggableValueOptions {
-    min: number;
-    max: number;
+export interface DeserializeDraggableValueOptions extends MinMaxRange {
     item: string;
 }
 /**

package/dist/draggable/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions {\n  min: number;\n  max: number;\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions\n  extends Omit<RelativeDragPositionOptions, \"container\"> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions {\n  min: number;\n  max: number;\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}
+{"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\n\nimport { type MinMaxRange } from \"../types.js\";\nimport {\n  type ClientPositionEvent,\n  type ClientPositionOptions,\n  getClientPosition,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/**\n * @internal\n */\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n  event.button === 0 &&\n  !event.altKey &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey;\n\n/**\n * @internal\n */\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n  event.changedTouches.length === 1;\n\n/**\n * @internal\n */\ninterface DragPositionOptions extends ClientPositionOptions {\n  isRTL: boolean;\n  reversed: boolean;\n  container: Element;\n}\n\n/**\n * @internal\n */\nexport const getDragPosition = (options: DragPositionOptions): number => {\n  const { isRTL, reversed, vertical, container } = options;\n\n  const clientPosition = getClientPosition(options);\n  const { left, right, top } = container.getBoundingClientRect();\n  if (vertical) {\n    if (reversed) {\n      return window.innerHeight - clientPosition;\n    }\n\n    // added `Math.max` since the `top` will be a negative number if rendered\n    // within a portal element like a dialog/sheet\n    return clientPosition - Math.max(0, top);\n  }\n\n  if (reversed ? !isRTL : isRTL) {\n    return right - clientPosition;\n  }\n\n  return clientPosition - left;\n};\n\n/**\n * @internal\n */\ninterface RelativeDragPositionOptions extends DragPositionOptions, MinMaxRange {\n  step: number;\n  rangeMin: number;\n  rangeMax: number;\n}\n\n/**\n * @internal\n */\ninterface RelativeDragPosition {\n  value: number;\n  dragPercentage: number;\n}\n\n/**\n * @internal\n */\nexport const getRelativeDragPosition = (\n  options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n  const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n    options;\n\n  const { height, width, left, top } = container.getBoundingClientRect();\n  const containerSize = vertical ? height : width;\n  const containerPosition = vertical ? top + height : left;\n  const clientPosition = getClientPosition(options);\n\n  const position = vertical\n    ? containerPosition - clientPosition\n    : clientPosition - containerPosition;\n  const distanceDragged = Math.min(Math.max(0, position), containerSize);\n  let dragPercentage = distanceDragged / containerSize;\n  if (isRTL && !vertical) {\n    dragPercentage = 1 - dragPercentage;\n  }\n\n  const range = rangeMax - rangeMin;\n  const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n  const value = dragPercentage * range + rangeMin;\n  const nextValue = nearest({\n    min,\n    max,\n    steps,\n    range,\n    value,\n  });\n\n  return {\n    value: nextValue,\n    dragPercentage,\n  };\n};\n\n/**\n * @internal\n */\ninterface UpdateDragPositionOptions\n  extends Omit<RelativeDragPositionOptions, \"container\"> {\n  event: ClientPositionEvent;\n  nodeRef: RefObject<HTMLElement>;\n  focus?: boolean;\n  isDragStart: boolean;\n  setValue: (value: number) => void;\n  setDragging: (dragging: boolean) => void;\n  setDragPercentage: (value: number) => void;\n  withinOffsetParent: boolean;\n}\n\n/**\n * @internal\n */\nexport const updateDragPosition = (\n  options: UpdateDragPositionOptions\n): void => {\n  const {\n    event,\n    nodeRef,\n    min,\n    max,\n    step,\n    rangeMin,\n    rangeMax,\n    isRTL,\n    reversed,\n    vertical,\n    isDragStart,\n    setValue,\n    setDragging,\n    setDragPercentage,\n    withinOffsetParent,\n  } = options;\n\n  const element = nodeRef.current;\n  if (!element) {\n    return;\n  }\n\n  if (isDragStart) {\n    // need to focus so that Chromium based browsers allow drag events. this\n    // really appeared while trying to create a DnD tree\n    element.focus({ preventScroll: true });\n\n    if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n      return;\n    }\n\n    // unlike the other flow, start dragging immediately so that you can trigger\n    // a mousedown or touchstart event on the container element and drag until\n    // the user lets go\n    setDragging(true);\n  }\n\n  // firefox defaults to `document.body` while chrome will return `null`\n  const container = element.offsetParent || document.body;\n  if (!withinOffsetParent) {\n    const dragPosition = getDragPosition({\n      event,\n      isRTL,\n      reversed,\n      vertical,\n      container,\n    });\n    const nextValue = withinRange({\n      min,\n      max,\n      value: dragPosition,\n    });\n    setValue(nextValue);\n\n    return;\n  }\n\n  const { value, dragPercentage } = getRelativeDragPosition({\n    min,\n    max,\n    rangeMin,\n    rangeMax,\n    step,\n    event,\n    isRTL,\n    reversed,\n    vertical,\n    container,\n  });\n\n  setValue(value);\n  setDragPercentage(dragPercentage);\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface DeserializeDraggableValueOptions extends MinMaxRange {\n  item: string;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function deserializeDraggableValue(\n  options: DeserializeDraggableValueOptions\n): number {\n  const { item, min, max } = options;\n\n  const value = parseFloat(item);\n  if (Number.isNaN(item)) {\n    return min;\n  }\n\n  return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}

package/dist/error-boundary/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/error-boundary/ErrorBoundary.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Component,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Provider } from \"./context.js\";\nimport { type ErrorBoundaryContext, type ErrorBoundaryState } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ErrorBoundaryProps {\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a minimal fork of the `react-error-boundary` package from\n * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}\n * that only includes things I consider useful. Use the `react-error-boundary`\n * if more complex behavior is required.\n *\n * @example Main Use Case\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { ErrorBoundary } from \"@react-md/core/error-boundary/ErrorBoundary\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <ErrorBoundary\n *       fallback={<SomeFallbackComponent />}\n *     >\n *       <SomeComponentThatMightError />\n *     </ErrorBoundary>\n *   );\n * }\n *\n * \"use client\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n\n    this.state = { error: null, errored: false };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error, errored: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  reset = (): void => {\n    this.setState({ error: null, errored: false });\n  };\n\n  render(): ReactElement {\n    const { fallback } = this.props;\n    const { error, errored } = this.state;\n\n    let { children } = this.props;\n    if (errored) {\n      children = fallback;\n    }\n\n    return (\n      <Provider\n        // should always match\n        value={{ error, errored, reset: this.reset } as ErrorBoundaryContext}\n      >\n        {children}\n      </Provider>\n    );\n  }\n}\n"],"names":["Component","Provider","ErrorBoundary","getDerivedStateFromError","error","errored","componentDidCatch","errorInfo","props","onError","render","fallback","state","children","value","reset","constructor","setState"],"mappings":"AAAA;;;;;;;;;;;;;;;AAEA,SACEA,SAAS,QAIJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,eAAe;AAYxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAsBF;IAUjC,OAAOG,yBAAyBC,KAAY,EAAsB;QAChE,OAAO;YAAEA;YAAOC,SAAS;QAAK;IAChC;IAEAC,kBAAkBF,KAAY,EAAEG,SAAoB,EAAQ;QAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGL,OAAOG;IAC9B;IAMAG,SAAuB;QACrB,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACH,KAAK;QAC/B,MAAM,EAAEJ,KAAK,EAAEC,OAAO,EAAE,GAAG,IAAI,CAACO,KAAK;QAErC,IAAI,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACL,KAAK;QAC7B,IAAIH,SAAS;YACXQ,WAAWF;QACb;QAEA,qBACE,KAACV;YACC,sBAAsB;YACtBa,OAAO;gBAAEV;gBAAOC;gBAASU,OAAO,IAAI,CAACA,KAAK;YAAC;sBAE1CF;;IAGP;IAnCAG,YAAYR,KAAyB,CAAE;QACrC,KAAK,CAACA,QAaRO,uBAAAA,SAAQ;YACN,IAAI,CAACE,QAAQ,CAAC;gBAAEb,OAAO;gBAAMC,SAAS;YAAM;QAC9C;QAbE,IAAI,CAACO,KAAK,GAAG;YAAER,OAAO;YAAMC,SAAS;QAAM;IAC7C;AAgCF"}
+{"version":3,"sources":["../../src/error-boundary/ErrorBoundary.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Component,\n  type ErrorInfo,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Provider } from \"./context.js\";\nimport { type ErrorBoundaryContext, type ErrorBoundaryState } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ErrorBoundaryProps {\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  fallback: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a minimal fork of the `react-error-boundary` package from\n * {@link https://github.com/bvaughn/react-error-boundary/tree/5.0.0}\n * that only includes things I consider useful. Use the `react-error-boundary`\n * if more complex behavior is required.\n *\n * @example Main Use Case\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { ErrorBoundary } from \"@react-md/core/error-boundary/ErrorBoundary\";\n * import { useErrorBoundary } from \"@react-md/core/error-boundary/useErrorBoundary\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n *\n * function Example() {\n *   return (\n *     <ErrorBoundary\n *       fallback={<SomeFallbackComponent />}\n *     >\n *       <SomeComponentThatMightError />\n *     </ErrorBoundary>\n *   );\n * }\n *\n * \"use client\";\n *\n * function SomeFallbackComponent() {\n *   const { error, errored, reset } = useErrorBoundary();\n *\n *   return (\n *     <>\n *       <Typography>Uh oh, something broke!</Typography>\n *       <Button onClick={reset}>Try Again?</Button>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n\n    this.state = { error: null, errored: false };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error, errored: true };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n  }\n\n  reset = (): void => {\n    this.setState({ error: null, errored: false });\n  };\n\n  render(): ReactElement {\n    const { fallback } = this.props;\n    const { error, errored } = this.state;\n\n    let { children } = this.props;\n    if (errored) {\n      children = fallback;\n    }\n\n    return (\n      <Provider\n        // should always match\n        value={{ error, errored, reset: this.reset } as ErrorBoundaryContext}\n      >\n        {children}\n      </Provider>\n    );\n  }\n}\n"],"names":["Component","Provider","ErrorBoundary","getDerivedStateFromError","error","errored","componentDidCatch","errorInfo","props","onError","render","fallback","state","children","value","reset","setState"],"mappings":"AAAA;;;;;;;;;;;;;;;AAEA,SACEA,SAAS,QAIJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,eAAe;AAYxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAsBF;IAUjC,OAAOG,yBAAyBC,KAAY,EAAsB;QAChE,OAAO;YAAEA;YAAOC,SAAS;QAAK;IAChC;IAEAC,kBAAkBF,KAAY,EAAEG,SAAoB,EAAQ;QAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGL,OAAOG;IAC9B;IAMAG,SAAuB;QACrB,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACH,KAAK;QAC/B,MAAM,EAAEJ,KAAK,EAAEC,OAAO,EAAE,GAAG,IAAI,CAACO,KAAK;QAErC,IAAI,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAACL,KAAK;QAC7B,IAAIH,SAAS;YACXQ,WAAWF;QACb;QAEA,qBACE,KAACV;YACC,sBAAsB;YACtBa,OAAO;gBAAEV;gBAAOC;gBAASU,OAAO,IAAI,CAACA,KAAK;YAAC;sBAE1CF;;IAGP;IAnCA,YAAYL,KAAyB,CAAE;QACrC,KAAK,CAACA,QAaRO,uBAAAA,SAAQ;YACN,IAAI,CAACC,QAAQ,CAAC;gBAAEZ,OAAO;gBAAMC,SAAS;YAAM;QAC9C;QAbE,IAAI,CAACO,KAAK,GAAG;YAAER,OAAO;YAAMC,SAAS;QAAM;IAC7C;AAgCF"}

package/dist/expansion-panel/ExpansionList.js

@@ -17,6 +17,7 @@ import { useExpansionList } from "./useExpansionList.js";
  */ export const ExpansionList = /*#__PURE__*/ forwardRef(function ExpansionList(props, ref) {
     const { onClick, onFocus, onKeyDown, children, ...remaining } = props;
     const { movementContext, movementProps } = useExpansionList({
+        ref,
         onClick,
         onFocus,
         onKeyDown
@@ -26,7 +27,6 @@ import { useExpansionList } from "./useExpansionList.js";
         children: /*#__PURE__*/ _jsx("div", {
             ...remaining,
             ...movementProps,
-            ref: ref,
             children: children
         })
     });

package/dist/expansion-panel/ExpansionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDown` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps} ref={ref}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DI;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;YAAEP,KAAKA;sBACzCI;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/expansion-panel/ExpansionList.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useExpansionList } from \"./useExpansionList.js\";\n\n/**\n * @since 6.0.0 No longer requires the `onKeyDown` prop.\n */\nexport interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is only used to implement the keyboard movement behavior for\n * the `ExpansionPanel` components.\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @see {@link useExpansionList} for a custom implementation example if you do\n * not want to use a `<div>` for this wrapper component.\n * @since 6.0.0 Uses the new keyboard movement API and does not\n * require the `onKeyDown` prop to be provided.\n */\nexport const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(\n  function ExpansionList(props, ref) {\n    const { onClick, onFocus, onKeyDown, children, ...remaining } = props;\n\n    const { movementContext, movementProps } = useExpansionList({\n      ref,\n      onClick,\n      onFocus,\n      onKeyDown,\n    });\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div {...remaining} {...movementProps}>\n          {children}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","KeyboardMovementProvider","useExpansionList","ExpansionList","props","ref","onClick","onFocus","onKeyDown","children","remaining","movementContext","movementProps","value","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,gBAAgB,QAAQ,wBAAwB;AASzD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,8BAAgBH,WAC3B,SAASG,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEhE,MAAM,EAAEO,eAAe,EAAEC,aAAa,EAAE,GAAGV,iBAAiB;QAC1DG;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACP;QAAyBY,OAAOF;kBAC/B,cAAA,KAACG;YAAK,GAAGJ,SAAS;YAAG,GAAGE,aAAa;sBAClCH;;;AAIT,GACA"}

package/dist/expansion-panel/useExpansionList.d.ts

@@ -1,11 +1,6 @@
-import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
-import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
+import { type KeyboardMovementProviderImplementation, type SimpleKeyboardMovementWrapperOptions } from "../movement/types.js";
 /** @since 6.0.0 */
-export interface ExpansionListHookOptions<E extends HTMLElement> {
-    onClick?: MouseEventHandler<E>;
-    onFocus?: FocusEventHandler<E>;
-    onKeyDown?: KeyboardEventHandler<E>;
-}
+export type ExpansionListHookOptions<E extends HTMLElement> = SimpleKeyboardMovementWrapperOptions<E>;
 /** @since 6.0.0 */
 export type ExpansionListImplementation<E extends HTMLElement> = KeyboardMovementProviderImplementation<E>;
 /**

package/dist/expansion-panel/useExpansionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\n\nimport type { KeyboardMovementProviderImplementation } from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport interface ExpansionListHookOptions<E extends HTMLElement> {\n  onClick?: MouseEventHandler<E>;\n  onFocus?: FocusEventHandler<E>;\n  onKeyDown?: KeyboardEventHandler<E>;\n}\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionList } from \"@react-md/core/expansion-panel/useExpansionList\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { KeyboardMovementProvider } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AASA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}
+{"version":3,"sources":["../../src/expansion-panel/useExpansionList.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type KeyboardMovementProviderImplementation,\n  type SimpleKeyboardMovementWrapperOptions,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>(\".rmd-expansion-panel__button\"),\n];\n\n/** @since 6.0.0 */\nexport type ExpansionListHookOptions<E extends HTMLElement> =\n  SimpleKeyboardMovementWrapperOptions<E>;\n\n/** @since 6.0.0 */\nexport type ExpansionListImplementation<E extends HTMLElement> =\n  KeyboardMovementProviderImplementation<E>;\n\n/**\n * @example Custom Implementation\n * ```tsx\n * import { ExpansionPanel } from \"@react-md/core/expansion-panel/ExpansionPanel\";\n * import { useExpansionList } from \"@react-md/core/expansion-panel/useExpansionList\";\n * import { useExpansionPanels } from \"@react-md/core/expansion-panel/useExpansionPanels\";\n * import { KeyboardMovementProvider } from \"@react-md/core/movement/useKeyboardMovementProvider\";\n * import { Form } from \"@react-md/core/form/Form\";\n * import { type ReactElement } from \"react\";\n *\n * import { BillingAddress } from \"./BillingAddress\";\n * import { BillingInformation } from \"./BillingInformation\";\n * import { PersonalInformation } from \"./PersonalInformation\";\n *\n * function Example(): ReactElement {\n *   const { movementContext, movementProps } = useExpansionList();\n *   const { getPanelProps } = useExpansionPanels();\n *\n *   return (\n *     <KeyboardMovementProvider value={movementContext}>\n *       <Form {...movementProps}>\n *         <ExpansionPanel {...getPanelProps(\"personal-information-panel\")}>\n *           <PersonalInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-information-panel\")}>\n *           <BillingInformation />\n *         </ExpansionPanel>\n *         <ExpansionPanel {...getPanelProps(\"billing-address-panel\")}>\n *           <BillingAddress />\n *         </ExpansionPanel>\n *       </Form>\n *     </KeyboardMovementProvider>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/expansion-panel | ExpansionPanel Demos}\n * @since 6.0.0\n */\nexport function useExpansionList<E extends HTMLElement>(\n  options: ExpansionListHookOptions<E> = {}\n): ExpansionListImplementation<E> {\n  return useKeyboardMovementProvider({\n    ...options,\n    loopable: true,\n    includeDisabled: true,\n    getFocusableElements: getPanelsOnly,\n  });\n}\n"],"names":["useKeyboardMovementProvider","getPanelsOnly","container","querySelectorAll","useExpansionList","options","loopable","includeDisabled","getFocusableElements"],"mappings":"AAAA;AAMA,SAASA,2BAA2B,QAAQ,6CAA6C;AAEzF;;;CAGC,GACD,MAAMC,gBAAgB,CAACC,YAAmD;WACrEA,UAAUC,gBAAgB,CAAc;KAC5C;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,SAASC,iBACdC,UAAuC,CAAC,CAAC;IAEzC,OAAOL,4BAA4B;QACjC,GAAGK,OAAO;QACVC,UAAU;QACVC,iBAAiB;QACjBC,sBAAsBP;IACxB;AACF"}