@yamada-ui/react 2.2.3-dev-20260622141401 → 2.2.3-dev-20260624122859

package/dist/esm/components/date-picker/use-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-date-picker.js","names":[],"sources":["../../../../src/components/date-picker/use-date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type {\n  CalendarFormat,\n  MaybeDateValue,\n  UseCalendarProps,\n} from \"../calendar\"\nimport type { FieldProps } from \"../field\"\nimport dayjs from \"dayjs\"\nimport {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  cast,\n  contains,\n  dataAttr,\n  focusTransfer,\n  handlerAll,\n  isActiveElement,\n  isArray,\n  isComposing,\n  isDate,\n  isNumber,\n  isObject,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n  useUpdateEffect,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport {\n  DEFAULT_MAX_DATE,\n  DEFAULT_MIN_DATE,\n  getAdjustedMonth,\n  isAfterDate,\n  isBeforeDate,\n  isIncludeDates,\n  updateMaybeDateValue,\n  useCalendarProps,\n} from \"../calendar\"\nimport { useFieldProps } from \"../field\"\nimport { useDateTimeFormat } from \"../format\"\n\nexport interface DatePickerFormat extends CalendarFormat {\n  input?: Intl.DateTimeFormatOptions | null\n}\n\ntype InputAlign = \"end\" | \"start\"\ntype MaybeInputValue<Range extends boolean = false> = Range extends true\n  ? { end?: string; start?: string }\n  : string | undefined\n\ninterface DatePickerRenderProps {\n  count: number\n  date: Date\n  focused: boolean\n  index: number\n  separator: string\n  value: string\n  onClear: () => void\n  max?: number\n}\n\nexport interface DatePickerRender {\n  (props: DatePickerRenderProps): ReactNode\n}\n\nconst defaultRender: DatePickerRender = ({\n  count,\n  focused,\n  index,\n  max,\n  separator,\n  value,\n}) => {\n  const last = count - 1 === index\n\n  return (\n    <span style={{ marginInlineEnd: \"var(--gap)\" }}>\n      {value}\n      {((!isNumber(max) || count < max) && focused) || !last ? separator : null}\n    </span>\n  )\n}\n\nexport interface UseDatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<UseCalendarProps<Multiple, Range>, \"format\" | \"ref\">,\n    Omit<\n      UseComboboxProps,\n      \"defaultValue\" | \"initialFocusValue\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.\n   *\n   * @default true\n   */\n  allowInputBeyond?: boolean\n  /**\n   * If `true`, the date picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the input.\n   */\n  defaultInputValue?: MaybeInputValue<Range>\n  /**\n   * If `true`, the input will be focused when the clear icon is clicked.\n   *\n   * @default true\n   */\n  focusOnClear?: boolean\n  /**\n   * The format used for conversion.\n   * Check the docs to see the format of possible modifiers you can pass.\n   *\n   * @see https://day.js.org/docs/en/display/format#list-of-localized-formats\n   */\n  format?: DatePickerFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The value of the input.\n   */\n  inputValue?: MaybeInputValue<Range>\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the date picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the date picker will be opened when the input is focused.\n   *\n   * @default true\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for date picker.\n   */\n  placeholder?: string\n  /**\n   * The visual separator between each value.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (value: MaybeInputValue<Range>) => void\n  /**\n   * Function that converts the input value to Date type.\n   */\n  parseDate?: (value: string) => Date | undefined\n  /**\n   * The function to render the selected date.\n   */\n  render?: (props: DatePickerRenderProps) => ReactNode\n}\n\nexport const useDatePicker = <\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>({\n  maxDate = DEFAULT_MAX_DATE,\n  minDate = DEFAULT_MIN_DATE,\n  ...props\n}: UseDatePickerProps<Multiple, Range> = {}) => {\n  if (dayjs(minDate).isAfter(dayjs(maxDate))) maxDate = minDate\n\n  const { getDocument } = useEnvironment()\n  const { locale: defaultLocale, t } = useI18n(\"datePicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      allowInput = true,\n      allowInputBeyond = false,\n      closeOnChange = false,\n      multiple = false,\n      closeOnSelect = !multiple,\n      defaultInputValue,\n      defaultMonth = new Date(),\n      range = false,\n      defaultValue = (range\n        ? { end: undefined, start: undefined }\n        : multiple\n          ? []\n          : undefined) as MaybeDateValue<Multiple, Range>,\n      disabled,\n      focusOnClear = true,\n      format,\n      inputValue: inputValueProp,\n      locale = defaultLocale,\n      max,\n      month: monthProp,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      parseDate,\n      pattern,\n      placeholder: placeholderProp,\n      placement = \"end-start\",\n      readOnly,\n      render = defaultRender,\n      required,\n      separator = range ? \"-\" : \",\",\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeMonth: onChangeMonthProp,\n      onInputChange: onInputChangeProp,\n      ...computedProps\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const dateTimeFormat = useDateTimeFormat({ locale })\n  const { calendarFormat, inputFormat } = useMemo(() => {\n    const { input: inputFormat, ...calendarFormat } = format ?? {}\n    const defaultInputFormat: Intl.DateTimeFormatOptions = {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    }\n\n    return {\n      calendarFormat,\n      inputFormat:\n        inputFormat !== null ? (inputFormat ?? defaultInputFormat) : undefined,\n    }\n  }, [format])\n  const [calendarProps, rest] = useCalendarProps<Multiple, Range>(computedProps)\n  const { excludeDate } = calendarProps\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const startInputRef = useRef<HTMLInputElement>(null)\n  const endInputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [focused, setFocused] = useState(false)\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue as MaybeDateValue<Multiple, Range>,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [month, setMonth] = useControllableState({\n    defaultValue: () => {\n      let value = defaultMonth\n\n      if (dayjs(minDate).isAfter(dayjs(defaultMonth)))\n        value = dayjs(minDate).set(\"date\", 1).toDate()\n\n      if (valueProp) {\n        value = getAdjustedMonth(valueProp, value)\n      } else if (defaultValue) {\n        value = getAdjustedMonth(defaultValue, value)\n      }\n\n      return value\n    },\n    value: monthProp,\n    onChange: onChangeMonthProp,\n  })\n  const stringToDate = useCallback(\n    (value: string, start: Date = minDate, end: Date = maxDate) => {\n      let date = parseDate?.(value)\n\n      if (!date && dayjs(value).isValid())\n        date = dayjs(value).locale(locale).toDate()\n\n      if (date == null) return undefined\n      if (excludeDate?.(date)) return undefined\n\n      if (!allowInputBeyond) {\n        if (isBeforeDate(date, start)) date = start\n        if (isAfterDate(date, end)) date = end\n      }\n\n      return date\n    },\n    [allowInputBeyond, excludeDate, locale, maxDate, minDate, parseDate],\n  )\n  const dateToString = useCallback(\n    (date?: Date) => {\n      if (date == null) return \"\"\n\n      return dateTimeFormat(date, inputFormat)\n    },\n    [dateTimeFormat, inputFormat],\n  )\n  const [inputValue, setInputValue] = useControllableState({\n    defaultValue: () => {\n      if (defaultInputValue) {\n        if (isObject(defaultInputValue)) {\n          if (dayjs(defaultInputValue.start).isValid())\n            defaultInputValue.start = dateTimeFormat(\n              dayjs(defaultInputValue.start).toDate(),\n              inputFormat,\n            )\n\n          if (dayjs(defaultInputValue.end).isValid())\n            defaultInputValue.end = dateTimeFormat(\n              dayjs(defaultInputValue.end).toDate(),\n              inputFormat,\n            )\n\n          return defaultInputValue\n        } else {\n          if (dayjs(defaultInputValue).isValid()) {\n            return dateTimeFormat(\n              dayjs(defaultInputValue).toDate(),\n              inputFormat,\n            ) as MaybeInputValue<Range>\n          } else {\n            return defaultInputValue as MaybeInputValue<Range>\n          }\n        }\n      } else if (isDate(value)) {\n        return dateToString(value) as MaybeInputValue<Range>\n      } else if (isObject(value) && !isArray(value)) {\n        return {\n          end: dateToString(value.end),\n          start: dateToString(value.start),\n        } as MaybeInputValue<Range>\n      } else {\n        return \"\" as MaybeInputValue<Range>\n      }\n    },\n    value: inputValueProp,\n    onChange: onInputChangeProp,\n  })\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const children = useMemo<ReactNode>(() => {\n    if (!isArray(value)) return null\n\n    const count = value.length\n\n    return value.map((date, index) => {\n      const value = dateToString(date)\n\n      const onClear = (ev?: MouseEvent<HTMLElement>) => {\n        ev?.preventDefault()\n        ev?.stopPropagation()\n\n        setValue(\n          (prev) =>\n            updateMaybeDateValue(date, max)(prev) as MaybeDateValue<\n              Multiple,\n              Range\n            >,\n        )\n      }\n\n      const component = render({\n        count,\n        date,\n        focused,\n        index,\n        max,\n        separator,\n        value,\n        onClear,\n      })\n\n      if (isValidElement<Dict>(component)) {\n        return cloneElement(component, { ...component.props, key: index })\n      } else {\n        return component\n      }\n    })\n  }, [dateToString, focused, max, render, separator, setValue, value])\n  const { endPlaceholder, startPlaceholder } = useMemo(() => {\n    if (range) {\n      const startPlaceholder =\n        placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n      const endPlaceholder =\n        placeholderProp ??\n        dateTimeFormat(dayjs().add(1, \"day\").toDate(), inputFormat)\n\n      return { endPlaceholder, startPlaceholder }\n    } else {\n      const placeholder =\n        placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n\n      return { endPlaceholder: placeholder, startPlaceholder: placeholder }\n    }\n  }, [dateTimeFormat, inputFormat, placeholderProp, range])\n\n  const onChange = useCallback(\n    (value: MaybeDateValue<Multiple, Range>) => {\n      setValue(value)\n\n      if (isArray(value)) {\n        setInputValue(\"\" as MaybeInputValue<Range>)\n      } else if (isObject(value) && !isDate(value)) {\n        setInputValue({\n          end: dateToString(value.end),\n          start: dateToString(value.start),\n        } as MaybeInputValue<Range>)\n      } else {\n        setInputValue(dateToString(value) as MaybeInputValue<Range>)\n      }\n\n      if (!closeOnSelect) return\n\n      if (isObject(value) && !isArray(value) && !isDate(value)) {\n        if (value.end && value.start) onClose()\n      } else {\n        onClose()\n      }\n    },\n    [setValue, closeOnSelect, setInputValue, dateToString, onClose],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n      if (isArray(value) && value.length === max) return\n\n      if (runIfFn(closeOnChange, ev)) {\n        onClose()\n      } else if (runIfFn(openOnChange, ev)) {\n        onOpen()\n      }\n\n      let inputValue = ev.target.value\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      if (isArray(value)) {\n        const date = stringToDate(inputValue)\n\n        setInputValue(inputValue as MaybeInputValue<Range>)\n\n        if (date) setMonth(dayjs(date).set(\"date\", 1).toDate())\n      } else if (isObject(value) && !isDate(value)) {\n        const align = contains(endInputRef.current, ev.target) ? \"end\" : \"start\"\n        const minDate =\n          value.start && align === \"end\"\n            ? dayjs(value.start).add(1, \"day\").toDate()\n            : undefined\n        const maxDate =\n          value.end && align === \"start\"\n            ? dayjs(value.end).subtract(1, \"day\").toDate()\n            : undefined\n        const date = stringToDate(inputValue, minDate, maxDate)\n\n        setInputValue((prev) =>\n          isObject(prev)\n            ? Object.assign({}, prev, { [align]: inputValue })\n            : prev,\n        )\n        setValue((prev) =>\n          isObject(prev) && !isDate(prev) ? { ...prev, [align]: date } : prev,\n        )\n      } else {\n        const date = stringToDate(inputValue)\n\n        setInputValue(inputValue as MaybeInputValue<Range>)\n        setValue(date as MaybeDateValue<Multiple, Range>)\n      }\n    },\n    [\n      allowInput,\n      closeOnChange,\n      max,\n      onClose,\n      onOpen,\n      openOnChange,\n      pattern,\n      setInputValue,\n      setMonth,\n      setValue,\n      stringToDate,\n      value,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      const inputValue = cast<HTMLInputElement>(ev.target).value\n\n      runKeyAction(\n        ev,\n        {\n          Backspace: (ev) => {\n            if (isArray(value)) {\n              if (inputValue.length) return\n\n              ev.preventDefault()\n\n              setValue((prev) =>\n                isArray(prev)\n                  ? (prev.slice(0, -1) as MaybeDateValue<Multiple, Range>)\n                  : prev,\n              )\n            } else if (isObject(value) && !isDate(value)) {\n              if (inputValue.length) return\n              if (!contains(endInputRef.current, ev.target)) return\n\n              ev.preventDefault()\n\n              setInputValue({ end: \"\", start: \"\" } as MaybeInputValue<Range>)\n              setValue({ end: undefined, start: undefined } as MaybeDateValue<\n                Multiple,\n                Range\n              >)\n\n              startInputRef.current?.focus()\n            }\n          },\n          Enter: (ev) => {\n            if (!open || !inputValue.length) return\n\n            if (isObject(value) && !isArray(value) && !isDate(value)) {\n              const align = contains(endInputRef.current, ev.target)\n                ? \"end\"\n                : \"start\"\n              const minDate =\n                value.start && align === \"end\"\n                  ? dayjs(value.start).add(1, \"day\").toDate()\n                  : undefined\n              const maxDate =\n                value.end && align === \"start\"\n                  ? dayjs(value.end).subtract(1, \"day\").toDate()\n                  : undefined\n              const date = stringToDate(inputValue, minDate, maxDate)\n\n              if (!date) return\n\n              ev.preventDefault()\n\n              setInputValue((prev) =>\n                isObject(prev)\n                  ? Object.assign({}, prev, { [align]: dateToString(date) })\n                  : prev,\n              )\n              setValue((prev) =>\n                isObject(prev) && !isDate(prev)\n                  ? { ...prev, [align]: date }\n                  : prev,\n              )\n\n              if (align === \"start\") endInputRef.current?.focus()\n            } else {\n              const date = stringToDate(inputValue)\n\n              if (!date) return\n\n              ev.preventDefault()\n\n              if (isArray(value)) {\n                setInputValue(\"\" as MaybeInputValue<Range>)\n\n                setValue((prev) =>\n                  isArray(prev) &&\n                  !isIncludeDates(date, prev) &&\n                  (!isNumber(max) || prev.length < max)\n                    ? ([...prev, date] as MaybeDateValue<Multiple, Range>)\n                    : prev,\n                )\n              } else {\n                setInputValue(dateToString(date) as MaybeInputValue<Range>)\n                setValue(date as MaybeDateValue<Multiple, Range>)\n              }\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      dateToString,\n      disabled,\n      max,\n      open,\n      setInputValue,\n      setValue,\n      stringToDate,\n      value,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (!interactive) return\n\n      focusByClickRef.current = true\n\n      if (allowInput) {\n        if (isObject(value) && !isArray(value) && !isDate(value)) {\n          if (\n            startInputRef.current &&\n            contains(startInputRef.current, ev.target)\n          ) {\n            if (!isActiveElement(startInputRef.current, getDocument()!))\n              ev.defaultPrevented = true\n\n            startInputRef.current.focus()\n          } else if (\n            endInputRef.current &&\n            contains(endInputRef.current, ev.target)\n          ) {\n            if (!isActiveElement(endInputRef.current, getDocument()!))\n              ev.defaultPrevented = true\n\n            endInputRef.current.focus()\n          } else {\n            startInputRef.current?.focus()\n          }\n        } else {\n          startInputRef.current?.focus()\n        }\n      }\n\n      if (openOnClick) onOpen()\n    },\n    [allowInput, interactive, onOpen, openOnClick, value, getDocument],\n  )\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      setFocused(true)\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      setFocused(false)\n\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      ) {\n        ev.preventDefault()\n      } else {\n        if (isArray(value)) {\n          setInputValue(\"\" as MaybeInputValue<Range>)\n        } else if (isObject(value) && !isDate(value)) {\n          setInputValue((prev) =>\n            isObject(prev)\n              ? ({\n                  end: dateToString(value.end),\n                  start: dateToString(value.start),\n                } as MaybeInputValue<Range>)\n              : prev,\n          )\n        } else {\n          setInputValue(dateToString(value) as MaybeInputValue<Range>)\n        }\n      }\n    },\n    [dateToString, setInputValue, value],\n  )\n\n  const onClear = useCallback(() => {\n    if (!interactive) return\n\n    setValue((prev) => {\n      if (isDate(prev)) {\n        return undefined as MaybeDateValue<Multiple, Range>\n      } else if (isArray(prev)) {\n        return [] as unknown as MaybeDateValue<Multiple, Range>\n      } else if (isObject(prev)) {\n        return { end: undefined, start: undefined } as MaybeDateValue<\n          Multiple,\n          Range\n        >\n      } else {\n        return prev\n      }\n    })\n\n    setInputValue(\n      (range ? { end: \"\", start: \"\" } : \"\") as MaybeInputValue<Range>,\n    )\n\n    if (focusOnClear) {\n      if (allowInput) {\n        startInputRef.current?.focus()\n      } else {\n        fieldRef.current?.focus()\n      }\n    }\n  }, [allowInput, focusOnClear, interactive, range, setInputValue, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? startInputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  useUpdateEffect(() => {\n    setMonth((prev) => getAdjustedMonth(value, prev))\n  }, [value, range])\n\n  useUpdateEffect(() => {\n    if (isArray(valueProp)) return\n\n    if (isObject(valueProp) && !isDate(valueProp)) {\n      setInputValue({\n        end: dateToString(valueProp.end),\n        start: dateToString(valueProp.start),\n      } as MaybeInputValue<Range>)\n    } else {\n      setInputValue(dateToString(valueProp) as MaybeInputValue<Range>)\n    }\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-range\": dataAttr(range),\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps, range],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\", { align?: InputAlign }> =\n    useCallback(\n      ({ align = \"start\", ...props } = {}) => {\n        const inputProps: HTMLProps<\"input\"> = {\n          style: {\n            ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n            ...props.style,\n          },\n          autoComplete: \"off\",\n          disabled,\n          readOnly,\n          required,\n          tabIndex: allowInput ? 0 : -1,\n          ...dataProps,\n          ...props,\n          onBlur: handlerAll(props.onBlur, onBlur),\n          onChange: handlerAll(props.onChange, onInputChange),\n          onFocus: handlerAll(props.onFocus, onInputFocus),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n          onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n        }\n\n        if (isObject(inputValue)) {\n          if (align === \"start\") {\n            inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n            inputProps.value = inputValue.start\n            inputProps.placeholder = startPlaceholder\n          } else {\n            inputProps.ref = mergeRefs(props.ref, ref, endInputRef)\n            inputProps.value = inputValue.end\n            inputProps.placeholder = endPlaceholder\n          }\n\n          if (!inputValue.start && align === \"start\") {\n            inputProps.id = id\n            inputProps.name = name\n          }\n\n          if (!!inputValue.start && align === \"end\") {\n            inputProps.id = id\n            inputProps.name = name\n          }\n        } else {\n          inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n          inputProps.value = inputValue\n          inputProps.id = id\n          inputProps.name = name\n\n          if (isArray(value)) {\n            inputProps.style = {\n              ...(!focused && !!value.length\n                ? visuallyHiddenAttributes.style\n                : {}),\n              ...inputProps.style,\n            }\n            inputProps.placeholder = !value.length\n              ? startPlaceholder\n              : undefined\n            inputProps[\"data-max\"] = dataAttr(\n              isNumber(max) && value.length >= max,\n            )\n          } else {\n            inputProps.placeholder = startPlaceholder\n          }\n        }\n\n        return inputProps\n      },\n      [\n        allowInput,\n        dataProps,\n        disabled,\n        endPlaceholder,\n        focused,\n        id,\n        inputValue,\n        max,\n        name,\n        onBlur,\n        onInputFocus,\n        onInputChange,\n        onKeyDown,\n        onMouseDown,\n        readOnly,\n        ref,\n        required,\n        startPlaceholder,\n        value,\n      ],\n    )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getCalendarProps: PropGetter<UseCalendarProps<Multiple, Range>> =\n    useCallback(\n      (props) =>\n        ({\n          disabled: !interactive,\n          format: calendarFormat,\n          locale,\n          max,\n          maxDate,\n          minDate,\n          month,\n          multiple,\n          range,\n          value,\n          onChange,\n          onChangeMonth: setMonth,\n          ...calendarProps,\n          ...props,\n        }) as UseCalendarProps<Multiple, Range>,\n      [\n        interactive,\n        calendarFormat,\n        locale,\n        max,\n        maxDate,\n        minDate,\n        month,\n        multiple,\n        range,\n        value,\n        onChange,\n        setMonth,\n        calendarProps,\n      ],\n    )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getClearIconProps: PropGetter = useCallback(\n    (props = {}) =>\n      getIconProps({\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-label\": t(\"Clear value\"),\n        role: \"button\",\n        tabIndex: interactive ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClear),\n        onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n          runKeyAction(ev, { Enter: onClear, Space: onClear }),\n        ),\n      }),\n    [getIconProps, interactive, onClear, t],\n  )\n\n  return {\n    children,\n    dateToString,\n    inputValue,\n    interactive,\n    month,\n    open,\n    range,\n    separator,\n    setInputValue,\n    setMonth,\n    setValue,\n    stringToDate,\n    value,\n    getCalendarProps,\n    getClearIconProps,\n    getContentProps,\n    getFieldProps,\n    getIconProps,\n    getInputProps,\n    getRootProps,\n    popoverProps,\n    onChange,\n    onClose,\n    onInputChange,\n    onOpen,\n  }\n}\n\nexport type UseDatePickerReturn = ReturnType<typeof useDatePicker>\n"],"mappings":"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"}
+{"version":3,"file":"use-date-picker.js","names":[],"sources":["../../../../src/components/date-picker/use-date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type {\n  CalendarFormat,\n  MaybeDateValue,\n  UseCalendarProps,\n} from \"../calendar\"\nimport type { FieldProps } from \"../field\"\nimport dayjs from \"dayjs\"\nimport {\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  cast,\n  contains,\n  dataAttr,\n  focusTransfer,\n  handlerAll,\n  isActiveElement,\n  isArray,\n  isComposing,\n  isDate,\n  isNumber,\n  isObject,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n  useUpdateEffect,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport {\n  DEFAULT_MAX_DATE,\n  DEFAULT_MIN_DATE,\n  getAdjustedMonth,\n  isAfterDate,\n  isBeforeDate,\n  isIncludeDates,\n  updateMaybeDateValue,\n  useCalendarProps,\n} from \"../calendar\"\nimport { useFieldProps } from \"../field\"\nimport { useDateTimeFormat } from \"../format\"\n\nexport interface DatePickerFormat extends CalendarFormat {\n  input?: Intl.DateTimeFormatOptions | null\n}\n\ntype InputAlign = \"end\" | \"start\"\ntype MaybeInputValue<Range extends boolean = false> = Range extends true\n  ? { end?: string; start?: string }\n  : string | undefined\n\ninterface DatePickerRenderProps {\n  count: number\n  date: Date\n  focused: boolean\n  index: number\n  separator: string\n  value: string\n  onClear: () => void\n  max?: number\n}\n\nexport interface DatePickerRender {\n  (props: DatePickerRenderProps): ReactNode\n}\n\nconst defaultRender: DatePickerRender = ({\n  count,\n  focused,\n  index,\n  max,\n  separator,\n  value,\n}) => {\n  const last = count - 1 === index\n\n  return (\n    <span style={{ marginInlineEnd: \"var(--gap)\" }}>\n      {value}\n      {((!isNumber(max) || count < max) && focused) || !last ? separator : null}\n    </span>\n  )\n}\n\nexport interface UseDatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<UseCalendarProps<Multiple, Range>, \"format\" | \"ref\">,\n    Omit<\n      UseComboboxProps,\n      \"defaultValue\" | \"initialFocusValue\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.\n   *\n   * @default true\n   */\n  allowInputBeyond?: boolean\n  /**\n   * If `true`, the date picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the input.\n   */\n  defaultInputValue?: MaybeInputValue<Range>\n  /**\n   * If `true`, the input will be focused when the clear icon is clicked.\n   *\n   * @default true\n   */\n  focusOnClear?: boolean\n  /**\n   * The format used for conversion.\n   * Check the docs to see the format of possible modifiers you can pass.\n   *\n   * @see https://day.js.org/docs/en/display/format#list-of-localized-formats\n   */\n  format?: DatePickerFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The value of the input.\n   */\n  inputValue?: MaybeInputValue<Range>\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the date picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the date picker will be opened when the input is focused.\n   *\n   * @default true\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for date picker.\n   */\n  placeholder?: string\n  /**\n   * The visual separator between each value.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (value: MaybeInputValue<Range>) => void\n  /**\n   * Function that converts the input value to Date type.\n   */\n  parseDate?: (value: string) => Date | undefined\n  /**\n   * The function to render the selected date.\n   */\n  render?: (props: DatePickerRenderProps) => ReactNode\n}\n\nexport const useDatePicker = <\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>({\n  maxDate = DEFAULT_MAX_DATE,\n  minDate = DEFAULT_MIN_DATE,\n  ...props\n}: UseDatePickerProps<Multiple, Range> = {}) => {\n  if (dayjs(minDate).isAfter(dayjs(maxDate))) maxDate = minDate\n\n  const { getDocument } = useEnvironment()\n  const { locale: defaultLocale, t } = useI18n(\"datePicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      allowInput = true,\n      allowInputBeyond = false,\n      closeOnChange = false,\n      multiple = false,\n      closeOnSelect = !multiple,\n      defaultInputValue,\n      defaultMonth = new Date(),\n      range = false,\n      defaultValue = (range\n        ? { end: undefined, start: undefined }\n        : multiple\n          ? []\n          : undefined) as MaybeDateValue<Multiple, Range>,\n      disabled,\n      focusOnClear = true,\n      format,\n      inputValue: inputValueProp,\n      locale = defaultLocale,\n      max,\n      month: monthProp,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      parseDate,\n      pattern,\n      placeholder: placeholderProp,\n      placement = \"end-start\",\n      readOnly,\n      render = defaultRender,\n      required,\n      separator = range ? \"-\" : \",\",\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeMonth: onChangeMonthProp,\n      onInputChange: onInputChangeProp,\n      ...computedProps\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const dateTimeFormat = useDateTimeFormat({ locale })\n  const { calendarFormat, inputFormat } = useMemo(() => {\n    const { input: inputFormat, ...calendarFormat } = format ?? {}\n    const defaultInputFormat: Intl.DateTimeFormatOptions = {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    }\n\n    return {\n      calendarFormat,\n      inputFormat:\n        inputFormat !== null ? (inputFormat ?? defaultInputFormat) : undefined,\n    }\n  }, [format])\n  const [calendarProps, rest] = useCalendarProps<Multiple, Range>(computedProps)\n  const { excludeDate } = calendarProps\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const startInputRef = useRef<HTMLInputElement>(null)\n  const endInputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [focused, setFocused] = useState(false)\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue as MaybeDateValue<Multiple, Range>,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [month, setMonth] = useControllableState({\n    defaultValue: () => {\n      let value = defaultMonth\n\n      if (dayjs(minDate).isAfter(dayjs(defaultMonth)))\n        value = dayjs(minDate).set(\"date\", 1).toDate()\n\n      if (valueProp) value = getAdjustedMonth(valueProp, value)\n      else if (defaultValue) value = getAdjustedMonth(defaultValue, value)\n\n      return value\n    },\n    value: monthProp,\n    onChange: onChangeMonthProp,\n  })\n  const stringToDate = useCallback(\n    (value: string, start: Date = minDate, end: Date = maxDate) => {\n      let date = parseDate?.(value)\n\n      if (!date && dayjs(value).isValid())\n        date = dayjs(value).locale(locale).toDate()\n\n      if (date == null) return undefined\n      if (excludeDate?.(date)) return undefined\n\n      if (!allowInputBeyond) {\n        if (isBeforeDate(date, start)) date = start\n        if (isAfterDate(date, end)) date = end\n      }\n\n      return date\n    },\n    [allowInputBeyond, excludeDate, locale, maxDate, minDate, parseDate],\n  )\n  const dateToString = useCallback(\n    (date?: Date) => {\n      if (date == null) return \"\"\n\n      return dateTimeFormat(date, inputFormat)\n    },\n    [dateTimeFormat, inputFormat],\n  )\n  const [inputValue, setInputValue] = useControllableState({\n    defaultValue: () => {\n      if (defaultInputValue)\n        if (isObject(defaultInputValue)) {\n          if (dayjs(defaultInputValue.start).isValid())\n            defaultInputValue.start = dateTimeFormat(\n              dayjs(defaultInputValue.start).toDate(),\n              inputFormat,\n            )\n\n          if (dayjs(defaultInputValue.end).isValid())\n            defaultInputValue.end = dateTimeFormat(\n              dayjs(defaultInputValue.end).toDate(),\n              inputFormat,\n            )\n\n          return defaultInputValue\n        } else {\n          if (dayjs(defaultInputValue).isValid())\n            return dateTimeFormat(\n              dayjs(defaultInputValue).toDate(),\n              inputFormat,\n            ) as MaybeInputValue<Range>\n          else return defaultInputValue as MaybeInputValue<Range>\n        }\n      else if (isDate(value))\n        return dateToString(value) as MaybeInputValue<Range>\n      else if (isObject(value) && !isArray(value))\n        return {\n          end: dateToString(value.end),\n          start: dateToString(value.start),\n        } as MaybeInputValue<Range>\n      else return \"\" as MaybeInputValue<Range>\n    },\n    value: inputValueProp,\n    onChange: onInputChangeProp,\n  })\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const children = useMemo<ReactNode>(() => {\n    if (!isArray(value)) return null\n\n    const count = value.length\n\n    return value.map((date, index) => {\n      const value = dateToString(date)\n\n      const onClear = (ev?: MouseEvent<HTMLElement>) => {\n        ev?.preventDefault()\n        ev?.stopPropagation()\n\n        setValue(\n          (prev) =>\n            updateMaybeDateValue(date, max)(prev) as MaybeDateValue<\n              Multiple,\n              Range\n            >,\n        )\n      }\n\n      const component = render({\n        count,\n        date,\n        focused,\n        index,\n        max,\n        separator,\n        value,\n        onClear,\n      })\n\n      if (isValidElement<Dict>(component))\n        return cloneElement(component, { ...component.props, key: index })\n      else return component\n    })\n  }, [dateToString, focused, max, render, separator, setValue, value])\n  const { endPlaceholder, startPlaceholder } = useMemo(() => {\n    if (range) {\n      const startPlaceholder =\n        placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n      const endPlaceholder =\n        placeholderProp ??\n        dateTimeFormat(dayjs().add(1, \"day\").toDate(), inputFormat)\n\n      return { endPlaceholder, startPlaceholder }\n    } else {\n      const placeholder =\n        placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n\n      return { endPlaceholder: placeholder, startPlaceholder: placeholder }\n    }\n  }, [dateTimeFormat, inputFormat, placeholderProp, range])\n\n  const onChange = useCallback(\n    (value: MaybeDateValue<Multiple, Range>) => {\n      setValue(value)\n\n      if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n      else if (isObject(value) && !isDate(value))\n        setInputValue({\n          end: dateToString(value.end),\n          start: dateToString(value.start),\n        } as MaybeInputValue<Range>)\n      else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n\n      if (!closeOnSelect) return\n\n      if (isObject(value) && !isArray(value) && !isDate(value)) {\n        if (value.end && value.start) onClose()\n      } else {\n        onClose()\n      }\n    },\n    [setValue, closeOnSelect, setInputValue, dateToString, onClose],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n      if (isArray(value) && value.length === max) return\n\n      if (runIfFn(closeOnChange, ev)) onClose()\n      else if (runIfFn(openOnChange, ev)) onOpen()\n\n      let inputValue = ev.target.value\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      if (isArray(value)) {\n        const date = stringToDate(inputValue)\n\n        setInputValue(inputValue as MaybeInputValue<Range>)\n\n        if (date) setMonth(dayjs(date).set(\"date\", 1).toDate())\n      } else if (isObject(value) && !isDate(value)) {\n        const align = contains(endInputRef.current, ev.target) ? \"end\" : \"start\"\n        const minDate =\n          value.start && align === \"end\"\n            ? dayjs(value.start).add(1, \"day\").toDate()\n            : undefined\n        const maxDate =\n          value.end && align === \"start\"\n            ? dayjs(value.end).subtract(1, \"day\").toDate()\n            : undefined\n        const date = stringToDate(inputValue, minDate, maxDate)\n\n        setInputValue((prev) =>\n          isObject(prev)\n            ? Object.assign({}, prev, { [align]: inputValue })\n            : prev,\n        )\n        setValue((prev) =>\n          isObject(prev) && !isDate(prev) ? { ...prev, [align]: date } : prev,\n        )\n      } else {\n        const date = stringToDate(inputValue)\n\n        setInputValue(inputValue as MaybeInputValue<Range>)\n        setValue(date as MaybeDateValue<Multiple, Range>)\n      }\n    },\n    [\n      allowInput,\n      closeOnChange,\n      max,\n      onClose,\n      onOpen,\n      openOnChange,\n      pattern,\n      setInputValue,\n      setMonth,\n      setValue,\n      stringToDate,\n      value,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      const inputValue = cast<HTMLInputElement>(ev.target).value\n\n      runKeyAction(\n        ev,\n        {\n          Backspace: (ev) => {\n            if (isArray(value)) {\n              if (inputValue.length) return\n\n              ev.preventDefault()\n\n              setValue((prev) =>\n                isArray(prev)\n                  ? (prev.slice(0, -1) as MaybeDateValue<Multiple, Range>)\n                  : prev,\n              )\n            } else if (isObject(value) && !isDate(value)) {\n              if (inputValue.length) return\n              if (!contains(endInputRef.current, ev.target)) return\n\n              ev.preventDefault()\n\n              setInputValue({ end: \"\", start: \"\" } as MaybeInputValue<Range>)\n              setValue({ end: undefined, start: undefined } as MaybeDateValue<\n                Multiple,\n                Range\n              >)\n\n              startInputRef.current?.focus()\n            }\n          },\n          Enter: (ev) => {\n            if (!open || !inputValue.length) return\n\n            if (isObject(value) && !isArray(value) && !isDate(value)) {\n              const align = contains(endInputRef.current, ev.target)\n                ? \"end\"\n                : \"start\"\n              const minDate =\n                value.start && align === \"end\"\n                  ? dayjs(value.start).add(1, \"day\").toDate()\n                  : undefined\n              const maxDate =\n                value.end && align === \"start\"\n                  ? dayjs(value.end).subtract(1, \"day\").toDate()\n                  : undefined\n              const date = stringToDate(inputValue, minDate, maxDate)\n\n              if (!date) return\n\n              ev.preventDefault()\n\n              setInputValue((prev) =>\n                isObject(prev)\n                  ? Object.assign({}, prev, { [align]: dateToString(date) })\n                  : prev,\n              )\n              setValue((prev) =>\n                isObject(prev) && !isDate(prev)\n                  ? { ...prev, [align]: date }\n                  : prev,\n              )\n\n              if (align === \"start\") endInputRef.current?.focus()\n            } else {\n              const date = stringToDate(inputValue)\n\n              if (!date) return\n\n              ev.preventDefault()\n\n              if (isArray(value)) {\n                setInputValue(\"\" as MaybeInputValue<Range>)\n\n                setValue((prev) =>\n                  isArray(prev) &&\n                  !isIncludeDates(date, prev) &&\n                  (!isNumber(max) || prev.length < max)\n                    ? ([...prev, date] as MaybeDateValue<Multiple, Range>)\n                    : prev,\n                )\n              } else {\n                setInputValue(dateToString(date) as MaybeInputValue<Range>)\n                setValue(date as MaybeDateValue<Multiple, Range>)\n              }\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      dateToString,\n      disabled,\n      max,\n      open,\n      setInputValue,\n      setValue,\n      stringToDate,\n      value,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (!interactive) return\n\n      focusByClickRef.current = true\n\n      if (allowInput)\n        if (isObject(value) && !isArray(value) && !isDate(value))\n          if (\n            startInputRef.current &&\n            contains(startInputRef.current, ev.target)\n          ) {\n            if (!isActiveElement(startInputRef.current, getDocument()!))\n              ev.defaultPrevented = true\n\n            startInputRef.current.focus()\n          } else if (\n            endInputRef.current &&\n            contains(endInputRef.current, ev.target)\n          ) {\n            if (!isActiveElement(endInputRef.current, getDocument()!))\n              ev.defaultPrevented = true\n\n            endInputRef.current.focus()\n          } else {\n            startInputRef.current?.focus()\n          }\n        else startInputRef.current?.focus()\n\n      if (openOnClick) onOpen()\n    },\n    [allowInput, interactive, onOpen, openOnClick, value, getDocument],\n  )\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      setFocused(true)\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      setFocused(false)\n\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      )\n        ev.preventDefault()\n      else if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n      else if (isObject(value) && !isDate(value))\n        setInputValue((prev) =>\n          isObject(prev)\n            ? ({\n                end: dateToString(value.end),\n                start: dateToString(value.start),\n              } as MaybeInputValue<Range>)\n            : prev,\n        )\n      else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n    },\n    [dateToString, setInputValue, value],\n  )\n\n  const onClear = useCallback(() => {\n    if (!interactive) return\n\n    setValue((prev) => {\n      if (isDate(prev)) return undefined as MaybeDateValue<Multiple, Range>\n      else if (isArray(prev))\n        return [] as unknown as MaybeDateValue<Multiple, Range>\n      else if (isObject(prev))\n        return { end: undefined, start: undefined } as MaybeDateValue<\n          Multiple,\n          Range\n        >\n      else return prev\n    })\n\n    setInputValue(\n      (range ? { end: \"\", start: \"\" } : \"\") as MaybeInputValue<Range>,\n    )\n\n    if (focusOnClear)\n      if (allowInput) startInputRef.current?.focus()\n      else fieldRef.current?.focus()\n  }, [allowInput, focusOnClear, interactive, range, setInputValue, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? startInputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  useUpdateEffect(() => {\n    setMonth((prev) => getAdjustedMonth(value, prev))\n  }, [value, range])\n\n  useUpdateEffect(() => {\n    if (isArray(valueProp)) return\n\n    if (isObject(valueProp) && !isDate(valueProp))\n      setInputValue({\n        end: dateToString(valueProp.end),\n        start: dateToString(valueProp.start),\n      } as MaybeInputValue<Range>)\n    else setInputValue(dateToString(valueProp) as MaybeInputValue<Range>)\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-range\": dataAttr(range),\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps, range],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\", { align?: InputAlign }> =\n    useCallback(\n      ({ align = \"start\", ...props } = {}) => {\n        const inputProps: HTMLProps<\"input\"> = {\n          style: {\n            ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n            ...props.style,\n          },\n          autoComplete: \"off\",\n          disabled,\n          readOnly,\n          required,\n          tabIndex: allowInput ? 0 : -1,\n          ...dataProps,\n          ...props,\n          onBlur: handlerAll(props.onBlur, onBlur),\n          onChange: handlerAll(props.onChange, onInputChange),\n          onFocus: handlerAll(props.onFocus, onInputFocus),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n          onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n        }\n\n        if (isObject(inputValue)) {\n          if (align === \"start\") {\n            inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n            inputProps.value = inputValue.start\n            inputProps.placeholder = startPlaceholder\n          } else {\n            inputProps.ref = mergeRefs(props.ref, ref, endInputRef)\n            inputProps.value = inputValue.end\n            inputProps.placeholder = endPlaceholder\n          }\n\n          if (!inputValue.start && align === \"start\") {\n            inputProps.id = id\n            inputProps.name = name\n          }\n\n          if (!!inputValue.start && align === \"end\") {\n            inputProps.id = id\n            inputProps.name = name\n          }\n        } else {\n          inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n          inputProps.value = inputValue\n          inputProps.id = id\n          inputProps.name = name\n\n          if (isArray(value)) {\n            inputProps.style = {\n              ...(!focused && !!value.length\n                ? visuallyHiddenAttributes.style\n                : {}),\n              ...inputProps.style,\n            }\n            inputProps.placeholder = !value.length\n              ? startPlaceholder\n              : undefined\n            inputProps[\"data-max\"] = dataAttr(\n              isNumber(max) && value.length >= max,\n            )\n          } else {\n            inputProps.placeholder = startPlaceholder\n          }\n        }\n\n        return inputProps\n      },\n      [\n        allowInput,\n        dataProps,\n        disabled,\n        endPlaceholder,\n        focused,\n        id,\n        inputValue,\n        max,\n        name,\n        onBlur,\n        onInputFocus,\n        onInputChange,\n        onKeyDown,\n        onMouseDown,\n        readOnly,\n        ref,\n        required,\n        startPlaceholder,\n        value,\n      ],\n    )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getCalendarProps: PropGetter<UseCalendarProps<Multiple, Range>> =\n    useCallback(\n      (props) =>\n        ({\n          disabled: !interactive,\n          format: calendarFormat,\n          locale,\n          max,\n          maxDate,\n          minDate,\n          month,\n          multiple,\n          range,\n          value,\n          onChange,\n          onChangeMonth: setMonth,\n          ...calendarProps,\n          ...props,\n        }) as UseCalendarProps<Multiple, Range>,\n      [\n        interactive,\n        calendarFormat,\n        locale,\n        max,\n        maxDate,\n        minDate,\n        month,\n        multiple,\n        range,\n        value,\n        onChange,\n        setMonth,\n        calendarProps,\n      ],\n    )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getClearIconProps: PropGetter = useCallback(\n    (props = {}) =>\n      getIconProps({\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-label\": t(\"Clear value\"),\n        role: \"button\",\n        tabIndex: interactive ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClear),\n        onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n          runKeyAction(ev, { Enter: onClear, Space: onClear }),\n        ),\n      }),\n    [getIconProps, interactive, onClear, t],\n  )\n\n  return {\n    children,\n    dateToString,\n    inputValue,\n    interactive,\n    month,\n    open,\n    range,\n    separator,\n    setInputValue,\n    setMonth,\n    setValue,\n    stringToDate,\n    value,\n    getCalendarProps,\n    getClearIconProps,\n    getContentProps,\n    getFieldProps,\n    getIconProps,\n    getInputProps,\n    getRootProps,\n    popoverProps,\n    onChange,\n    onClose,\n    onInputChange,\n    onOpen,\n  }\n}\n\nexport type UseDatePickerReturn = ReturnType<typeof useDatePicker>\n"],"mappings":"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"}

package/dist/esm/components/editable/use-editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const ownerDocument = ev.currentTarget.ownerDocument\n      const relatedTarget = (ev.relatedTarget ??\n        ownerDocument.activeElement) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) {\n        onSubmit()\n      } else {\n        onCancel()\n      }\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing) return\n\n    const el = inputRef.current\n    const activeEl = el?.ownerDocument.activeElement\n\n    if (activeEl === el) el?.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
+{"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const ownerDocument = ev.currentTarget.ownerDocument\n      const relatedTarget = (ev.relatedTarget ??\n        ownerDocument.activeElement) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) onSubmit()\n      else onCancel()\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing) return\n\n    const el = inputRef.current\n    const activeEl = el?.ownerDocument.activeElement\n\n    if (activeEl === el) el?.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}

package/dist/esm/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["createContext"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  isObject,\n  useSplitChildren,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n  extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n  errorMessageId: string\n  focused: boolean\n  helperMessageId: string\n  id: string\n  labelId: string\n  onBlur: () => void\n  onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n  name: \"FieldContext\",\n  strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n  /**\n   * If `true`, the field will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the field will be invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * If `true`, the field will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n}\n\nexport interface FieldRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<FieldStyle>,\n    Pick<FieldLabelProps, \"optionalIndicator\" | \"requiredIndicator\">,\n    FieldProps {\n  /**\n   * The field error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The field helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The field label to use.\n   */\n  label?: ReactNode\n  /**\n   * The name of the field.\n   */\n  name?: string\n  /**\n   * If `true`, switch between helper message and error message using invalid.\n   *\n   * @default true\n   */\n  replace?: boolean\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: FieldErrorMessageProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: FieldHelperMessageProps\n  /**\n   * Props the label component.\n   */\n  labelProps?: FieldLabelProps\n}\n\nconst {\n  PropsContext: FieldPropsContext,\n  usePropsContext: useFieldPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/**\n * `Field` is a component used to group form elements with label, helper message, error message, etc.\n *\n * @see https://yamada-ui.com/docs/components/field\n */\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n  ({\n    id,\n    name,\n    children,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    label,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    errorMessageProps,\n    helperMessageProps,\n    labelProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const labelId = useId()\n    const helperMessageId = useId()\n    const errorMessageId = useId()\n    const formContext = useFormContext()\n    const fieldsetContext = useFieldsetContext()\n    const [focused, setFocused] = useState<boolean>(false)\n    const [\n      omittedChildren,\n      customLabel,\n      customHelperMessage,\n      customErrorMessage,\n    ] = useSplitChildren(\n      children,\n      FieldLabel,\n      FieldHelperMessage,\n      FieldErrorMessage,\n    )\n\n    id ??= uuid\n    optionalIndicator ??= formContext?.optionalIndicator\n    requiredIndicator ??= formContext?.requiredIndicator\n\n    disabled ??= fieldsetContext?.disabled\n    invalid ??= fieldsetContext?.invalid\n    readOnly ??= fieldsetContext?.readOnly\n    required ??= fieldsetContext?.required\n\n    if (name) {\n      disabled ??= isObject(formContext?.disabled)\n        ? formContext.disabled[name]\n        : formContext?.disabled\n      invalid ??= isObject(formContext?.invalid)\n        ? formContext.invalid[name]\n        : formContext?.invalid\n      readOnly ??= isObject(formContext?.readOnly)\n        ? formContext.readOnly[name]\n        : formContext?.readOnly\n      required ??= isObject(formContext?.required)\n        ? formContext.required[name]\n        : formContext?.required\n      replace ??= isObject(formContext?.replace)\n        ? (formContext.replace[name] ?? true)\n        : (formContext?.replace ?? true)\n      errorMessage ??= formContext?.errorMessage?.[name]\n      helperMessage ??= formContext?.helperMessage?.[name]\n    }\n\n    const context = useMemo(\n      () => ({\n        id,\n        disabled,\n        errorMessageId,\n        focused,\n        helperMessageId,\n        invalid,\n        labelId,\n        readOnly,\n        replace,\n        required,\n        onBlur: () => setFocused(false),\n        onFocus: () => setFocused(true),\n      }),\n      [\n        id,\n        disabled,\n        labelId,\n        focused,\n        invalid,\n        helperMessageId,\n        errorMessageId,\n        readOnly,\n        replace,\n        required,\n      ],\n    )\n\n    return (\n      <FieldContext value={context}>\n        <styled.div\n          data-disabled={dataAttr(disabled)}\n          data-focus={dataAttr(focused)}\n          data-invalid={dataAttr(invalid)}\n          data-readonly={dataAttr(readOnly)}\n          role=\"group\"\n          {...rest}\n        >\n          {customLabel ||\n            (label ? (\n              <FieldLabel\n                optionalIndicator={optionalIndicator}\n                requiredIndicator={requiredIndicator}\n                {...labelProps}\n              >\n                {label}\n              </FieldLabel>\n            ) : null)}\n\n          {omittedChildren}\n\n          {customHelperMessage ||\n            (helperMessage ? (\n              <FieldHelperMessage {...helperMessageProps}>\n                {helperMessage}\n              </FieldHelperMessage>\n            ) : null)}\n\n          {customErrorMessage ||\n            (errorMessage ? (\n              <FieldErrorMessage {...errorMessageProps}>\n                {errorMessage}\n              </FieldErrorMessage>\n            ) : null)}\n        </styled.div>\n      </FieldContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n  /**\n   * The optional indicator to use.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n  /**\n   * The required indicator to use.\n   */\n  requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n  ({\n    id,\n    htmlFor,\n    children,\n    optionalIndicator = null,\n    required,\n    requiredIndicator = null,\n    ...rest\n  }) => {\n    const fieldContext = useFieldContext()\n\n    id ??= fieldContext?.labelId\n    htmlFor ??= fieldContext?.id\n    required ??= fieldContext?.required\n\n    return (\n      <styled.label\n        id={id}\n        htmlFor={htmlFor}\n        data-disabled={dataAttr(fieldContext?.disabled)}\n        data-focus={dataAttr(fieldContext?.focused)}\n        data-invalid={dataAttr(fieldContext?.invalid)}\n        data-readonly={dataAttr(fieldContext?.readOnly)}\n        {...rest}\n      >\n        {children}\n\n        {required ? (\n          requiredIndicator ? (\n            <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n          ) : (\n            <FieldRequiredIndicator />\n          )\n        ) : (\n          optionalIndicator\n        )}\n      </styled.label>\n    )\n  },\n  \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n  ({ children, ...rest }) => {\n    if (!isValidElement(children)) {\n      return (\n        <styled.span aria-hidden role=\"presentation\" {...rest}>\n          {children ?? <>*</>}\n        </styled.span>\n      )\n    } else {\n      return children\n    }\n  },\n  \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n  (props) => {\n    const { helperMessageId, invalid, replace } = useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={helperMessageId}\n        hidden={replace && invalid ? true : false}\n        {...props}\n      />\n    )\n  },\n  \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n  (props) => {\n    const { errorMessageId, invalid } = useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={errorMessageId}\n        aria-live={invalid ? \"polite\" : undefined}\n        hidden={!invalid}\n        {...props}\n      />\n    )\n  },\n  \"errorMessage\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"field.js","names":["createContext"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  isObject,\n  useSplitChildren,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n  extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n  errorMessageId: string\n  focused: boolean\n  helperMessageId: string\n  id: string\n  labelId: string\n  onBlur: () => void\n  onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n  name: \"FieldContext\",\n  strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n  /**\n   * If `true`, the field will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the field will be invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * If `true`, the field will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n}\n\nexport interface FieldRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<FieldStyle>,\n    Pick<FieldLabelProps, \"optionalIndicator\" | \"requiredIndicator\">,\n    FieldProps {\n  /**\n   * The field error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The field helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The field label to use.\n   */\n  label?: ReactNode\n  /**\n   * The name of the field.\n   */\n  name?: string\n  /**\n   * If `true`, switch between helper message and error message using invalid.\n   *\n   * @default true\n   */\n  replace?: boolean\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: FieldErrorMessageProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: FieldHelperMessageProps\n  /**\n   * Props the label component.\n   */\n  labelProps?: FieldLabelProps\n}\n\nconst {\n  PropsContext: FieldPropsContext,\n  usePropsContext: useFieldPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/**\n * `Field` is a component used to group form elements with label, helper message, error message, etc.\n *\n * @see https://yamada-ui.com/docs/components/field\n */\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n  ({\n    id,\n    name,\n    children,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    label,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    errorMessageProps,\n    helperMessageProps,\n    labelProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const labelId = useId()\n    const helperMessageId = useId()\n    const errorMessageId = useId()\n    const formContext = useFormContext()\n    const fieldsetContext = useFieldsetContext()\n    const [focused, setFocused] = useState<boolean>(false)\n    const [\n      omittedChildren,\n      customLabel,\n      customHelperMessage,\n      customErrorMessage,\n    ] = useSplitChildren(\n      children,\n      FieldLabel,\n      FieldHelperMessage,\n      FieldErrorMessage,\n    )\n\n    id ??= uuid\n    optionalIndicator ??= formContext?.optionalIndicator\n    requiredIndicator ??= formContext?.requiredIndicator\n\n    disabled ??= fieldsetContext?.disabled\n    invalid ??= fieldsetContext?.invalid\n    readOnly ??= fieldsetContext?.readOnly\n    required ??= fieldsetContext?.required\n\n    if (name) {\n      disabled ??= isObject(formContext?.disabled)\n        ? formContext.disabled[name]\n        : formContext?.disabled\n      invalid ??= isObject(formContext?.invalid)\n        ? formContext.invalid[name]\n        : formContext?.invalid\n      readOnly ??= isObject(formContext?.readOnly)\n        ? formContext.readOnly[name]\n        : formContext?.readOnly\n      required ??= isObject(formContext?.required)\n        ? formContext.required[name]\n        : formContext?.required\n      replace ??= isObject(formContext?.replace)\n        ? (formContext.replace[name] ?? true)\n        : (formContext?.replace ?? true)\n      errorMessage ??= formContext?.errorMessage?.[name]\n      helperMessage ??= formContext?.helperMessage?.[name]\n    }\n\n    const context = useMemo(\n      () => ({\n        id,\n        disabled,\n        errorMessageId,\n        focused,\n        helperMessageId,\n        invalid,\n        labelId,\n        readOnly,\n        replace,\n        required,\n        onBlur: () => setFocused(false),\n        onFocus: () => setFocused(true),\n      }),\n      [\n        id,\n        disabled,\n        labelId,\n        focused,\n        invalid,\n        helperMessageId,\n        errorMessageId,\n        readOnly,\n        replace,\n        required,\n      ],\n    )\n\n    return (\n      <FieldContext value={context}>\n        <styled.div\n          data-disabled={dataAttr(disabled)}\n          data-focus={dataAttr(focused)}\n          data-invalid={dataAttr(invalid)}\n          data-readonly={dataAttr(readOnly)}\n          role=\"group\"\n          {...rest}\n        >\n          {customLabel ||\n            (label ? (\n              <FieldLabel\n                optionalIndicator={optionalIndicator}\n                requiredIndicator={requiredIndicator}\n                {...labelProps}\n              >\n                {label}\n              </FieldLabel>\n            ) : null)}\n\n          {omittedChildren}\n\n          {customHelperMessage ||\n            (helperMessage ? (\n              <FieldHelperMessage {...helperMessageProps}>\n                {helperMessage}\n              </FieldHelperMessage>\n            ) : null)}\n\n          {customErrorMessage ||\n            (errorMessage ? (\n              <FieldErrorMessage {...errorMessageProps}>\n                {errorMessage}\n              </FieldErrorMessage>\n            ) : null)}\n        </styled.div>\n      </FieldContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n  /**\n   * The optional indicator to use.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * If `true`, the field will be required.\n   *\n   * @default false\n   */\n  required?: boolean\n  /**\n   * The required indicator to use.\n   */\n  requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n  ({\n    id,\n    htmlFor,\n    children,\n    optionalIndicator = null,\n    required,\n    requiredIndicator = null,\n    ...rest\n  }) => {\n    const fieldContext = useFieldContext()\n\n    id ??= fieldContext?.labelId\n    htmlFor ??= fieldContext?.id\n    required ??= fieldContext?.required\n\n    return (\n      <styled.label\n        id={id}\n        htmlFor={htmlFor}\n        data-disabled={dataAttr(fieldContext?.disabled)}\n        data-focus={dataAttr(fieldContext?.focused)}\n        data-invalid={dataAttr(fieldContext?.invalid)}\n        data-readonly={dataAttr(fieldContext?.readOnly)}\n        {...rest}\n      >\n        {children}\n\n        {required ? (\n          requiredIndicator ? (\n            <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n          ) : (\n            <FieldRequiredIndicator />\n          )\n        ) : (\n          optionalIndicator\n        )}\n      </styled.label>\n    )\n  },\n  \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n  ({ children, ...rest }) => {\n    if (!isValidElement(children))\n      return (\n        <styled.span aria-hidden role=\"presentation\" {...rest}>\n          {children ?? <>*</>}\n        </styled.span>\n      )\n    else return children\n  },\n  \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n  (props) => {\n    const { helperMessageId, invalid, replace } = useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={helperMessageId}\n        hidden={replace && invalid ? true : false}\n        {...props}\n      />\n    )\n  },\n  \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n  (props) => {\n    const { errorMessageId, invalid } = useFieldContext() ?? {}\n\n    return (\n      <styled.span\n        id={errorMessageId}\n        aria-live={invalid ? \"polite\" : undefined}\n        hidden={!invalid}\n        {...props}\n      />\n    )\n  },\n  \"errorMessage\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/file-input/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","names":[],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) {\n            return cloneElement(node, { key: index })\n          } else {\n            return node\n          }\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa,KAAK;CAEnE,MAAM,gBAAgB,cAAc;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,oBAAC,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;aACvC;EACU,CAAA;EAGjB,IAAI,UAAU,OAAO,SAAS,MAAM;EAEpC,OAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;GAEvC,IAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;IAAM,CAAC;IAEvC,IAAI,eAAe,IAAI,GACrB,OAAO,aAAa,MAAM,EAAE,KAAK,MAAM,CAAC;SAExC,OAAO;GAEX,OACE,OACE,qBAAC,cAAD,EAAA,UAAA,CACG,OAAO,OAAO,KAAK,GACnB,CAAC,OAAO,YAAY,IACT,EAAA,GAHK,KAGL;EAGpB,CAAC;CACH,GAAG;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;CAAM,CAAC;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,OAAO,KAAR;EAAY,GAAI;EAAU,GAAI,cAAc;YACzC;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}
+{"version":3,"file":"file-input.js","names":[],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) return cloneElement(node, { key: index })\n          else return node\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa,KAAK;CAEnE,MAAM,gBAAgB,cAAc;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,oBAAC,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;aACvC;EACU,CAAA;EAGjB,IAAI,UAAU,OAAO,SAAS,MAAM;EAEpC,OAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;GAEvC,IAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;IAAM,CAAC;IAEvC,IAAI,eAAe,IAAI,GAAG,OAAO,aAAa,MAAM,EAAE,KAAK,MAAM,CAAC;SAC7D,OAAO;GACd,OACE,OACE,qBAAC,cAAD,EAAA,UAAA,CACG,OAAO,OAAO,KAAK,GACnB,CAAC,OAAO,YAAY,IACT,EAAA,GAHK,KAGL;EAGpB,CAAC;CACH,GAAG;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;CAAM,CAAC;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,OAAO,KAAR;EAAY,GAAI;EAAU,GAAI,cAAc;YACzC;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}

package/dist/esm/components/flip/flip.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip.js","names":[],"sources":["../../../../src/components/flip/flip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, Orientation, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { FlipStyle } from \"./flip.style\"\nimport { useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll, useSafeLayoutEffect } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { flipStyle } from \"./flip.style\"\n\nconst flipVariants: Variants = {\n  enter: ({ ident, orientation, visible }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? (visible ? 180 : 0) : visible ? 0 : 180,\n  }),\n  exit: ({ ident, orientation }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? 0 : 180,\n  }),\n}\n\ninterface Rect {\n  height?: number\n  width?: number\n}\n\nexport interface FlipProps\n  extends Omit<HTMLMotionProps<\"button\">, \"onChange\">, ThemeProps<FlipStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: FlipPropsContext,\n  usePropsContext: useFlipPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FlipProps, FlipStyle>(\"flip\", flipStyle)\n\nexport { FlipPropsContext, useFlipPropsContext }\n\n/**\n * `Flip` is an animation component that alternates between flipping two elements.\n *\n * @see https://yamada-ui.com/docs/components/flip\n */\nexport const Flip = withProvider(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    orientation = \"horizontal\",\n    readOnly,\n    to,\n    transition = {},\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const [{ height, width }, setRect] = useState<Rect>({})\n    const fromRef = useRef<HTMLDivElement | null>(null)\n    const toRef = useRef<HTMLDivElement | null>(null)\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n    const visible = value === \"to\"\n\n    const style = useMemo(\n      () => ({\n        height: height ? `${height}px` : \"auto\",\n        width: width ? `${width}px` : \"auto\",\n      }),\n      [width, height],\n    )\n\n    const onClick = () => {\n      if (readOnly) return\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n    }\n\n    useSafeLayoutEffect(() => {\n      const from = fromRef.current\n      const to = toRef.current\n\n      if (!from || !to) return\n\n      if (\n        from.offsetWidth !== to.offsetWidth ||\n        from.offsetHeight !== to.offsetHeight\n      ) {\n        console.warn(\n          `Flip: \"from\" element (width: ${from.offsetWidth}px, height: ${from.offsetHeight}px) does not match \"to\" element (width: ${to.offsetWidth}px, height: ${to.offsetHeight}px). Please ensure both elements have the same dimensions.`,\n        )\n      }\n\n      setRect({ height: from.offsetHeight, width: from.offsetWidth })\n    }, [fromRef, toRef])\n\n    return (\n      <motion.button\n        type=\"button\"\n        style={style}\n        data-disabled={dataAttr(disabled)}\n        data-orientation={orientation}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        disabled={disabled}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        <FlipFrom\n          ref={fromRef}\n          custom={{ orientation, visible }}\n          transition={{ delay, duration, ...transition }}\n        >\n          {from}\n        </FlipFrom>\n\n        <FlipTo\n          ref={toRef}\n          custom={{ orientation, visible }}\n          transition={{ delay, duration, ...transition }}\n        >\n          {to}\n        </FlipTo>\n      </motion.button>\n    )\n  },\n  \"root\",\n)()\n\ninterface FlipFromProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipFrom = withContext<\"span\", FlipFromProps>(\n  ({ custom, ...rest }) => {\n    return (\n      <motion.span\n        animate=\"enter\"\n        custom={{ ident: \"from\", ...custom }}\n        initial=\"exit\"\n        variants={flipVariants}\n        {...rest}\n      />\n    )\n  },\n  [\"item\", \"from\"],\n)()\n\ninterface FlipToProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipTo = withContext<\"span\", FlipToProps>(\n  ({ custom, ...rest }) => {\n    return (\n      <motion.span\n        animate=\"enter\"\n        custom={{ ident: \"to\", ...custom }}\n        initial=\"exit\"\n        variants={flipVariants}\n        {...rest}\n      />\n    )\n  },\n  [\"item\", \"to\"],\n)()\n"],"mappings":";;;;;;;;;;AAcA,MAAM,eAAyB;CAC7B,QAAQ,EAAE,OAAO,aAAa,eAAe,GAC1C,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAU,UAAU,MAAM,IAAK,UAAU,IAAI,IAC3D;CACA,OAAO,EAAE,OAAO,mBAAmB,GAChC,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAS,IAAI,IAC3B;AACF;AA+DA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA0C,QAAQ,SAAS;;;;;;AAS/D,MAAa,OAAO,cACjB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,cAAc,cACd,UACA,IACA,aAAa,CAAC,GACd,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,CAAC,EAAE,QAAQ,SAAS,WAAW,SAAe,CAAC,CAAC;CACtD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,QAAQ,OAA8B,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,UAAU,UAAU;CAE1B,MAAM,QAAQ,eACL;EACL,QAAQ,SAAS,GAAG,OAAO,MAAM;EACjC,OAAO,QAAQ,GAAG,MAAM,MAAM;CAChC,IACA,CAAC,OAAO,MAAM,CAChB;CAEA,MAAM,gBAAgB;EACpB,IAAI,UAAU;EAEd,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;CACtD;CAEA,0BAA0B;EACxB,MAAM,OAAO,QAAQ;EACrB,MAAM,KAAK,MAAM;EAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI;EAElB,IACE,KAAK,gBAAgB,GAAG,eACxB,KAAK,iBAAiB,GAAG,cAEzB,QAAQ,KACN,gCAAgC,KAAK,YAAY,cAAc,KAAK,aAAa,0CAA0C,GAAG,YAAY,cAAc,GAAG,aAAa,2DAC1K;EAGF,QAAQ;GAAE,QAAQ,KAAK;GAAc,OAAO,KAAK;EAAY,CAAC;CAChE,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,OACE,qBAAC,OAAO,QAAR;EACE,MAAK;EACE;EACP,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,oBAAkB;EAClB,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,cAAY;EACF;EACV,UAAA,GAAA,cAAA,WAAA,CAAoB,aAAa,OAAO;EACxC,GAAI;YATN,CAWE,oBAAC,UAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;aAE5C;EACO,CAAA,GAEV,oBAAC,QAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;aAE5C;EACK,CAAA,CACK;;AAEnB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,WAAW,aACd,EAAE,QAAQ,GAAG,WAAW;CACvB,OACE,oBAAC,OAAO,MAAR;EACE,SAAQ;EACR,QAAQ;GAAE,OAAO;GAAQ,GAAG;EAAO;EACnC,SAAQ;EACR,UAAU;EACV,GAAI;CACL,CAAA;AAEL,GACA,CAAC,QAAQ,MAAM,CACjB,CAAC,CAAC;AAIF,MAAM,SAAS,aACZ,EAAE,QAAQ,GAAG,WAAW;CACvB,OACE,oBAAC,OAAO,MAAR;EACE,SAAQ;EACR,QAAQ;GAAE,OAAO;GAAM,GAAG;EAAO;EACjC,SAAQ;EACR,UAAU;EACV,GAAI;CACL,CAAA;AAEL,GACA,CAAC,QAAQ,IAAI,CACf,CAAC,CAAC"}
+{"version":3,"file":"flip.js","names":[],"sources":["../../../../src/components/flip/flip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, Orientation, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { FlipStyle } from \"./flip.style\"\nimport { useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll, useSafeLayoutEffect } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { flipStyle } from \"./flip.style\"\n\nconst flipVariants: Variants = {\n  enter: ({ ident, orientation, visible }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? (visible ? 180 : 0) : visible ? 0 : 180,\n  }),\n  exit: ({ ident, orientation }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? 0 : 180,\n  }),\n}\n\ninterface Rect {\n  height?: number\n  width?: number\n}\n\nexport interface FlipProps\n  extends Omit<HTMLMotionProps<\"button\">, \"onChange\">, ThemeProps<FlipStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: FlipPropsContext,\n  usePropsContext: useFlipPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FlipProps, FlipStyle>(\"flip\", flipStyle)\n\nexport { FlipPropsContext, useFlipPropsContext }\n\n/**\n * `Flip` is an animation component that alternates between flipping two elements.\n *\n * @see https://yamada-ui.com/docs/components/flip\n */\nexport const Flip = withProvider(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    orientation = \"horizontal\",\n    readOnly,\n    to,\n    transition = {},\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const [{ height, width }, setRect] = useState<Rect>({})\n    const fromRef = useRef<HTMLDivElement | null>(null)\n    const toRef = useRef<HTMLDivElement | null>(null)\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n    const visible = value === \"to\"\n\n    const style = useMemo(\n      () => ({\n        height: height ? `${height}px` : \"auto\",\n        width: width ? `${width}px` : \"auto\",\n      }),\n      [width, height],\n    )\n\n    const onClick = () => {\n      if (readOnly) return\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n    }\n\n    useSafeLayoutEffect(() => {\n      const from = fromRef.current\n      const to = toRef.current\n\n      if (!from || !to) return\n\n      if (\n        from.offsetWidth !== to.offsetWidth ||\n        from.offsetHeight !== to.offsetHeight\n      )\n        console.warn(\n          `Flip: \"from\" element (width: ${from.offsetWidth}px, height: ${from.offsetHeight}px) does not match \"to\" element (width: ${to.offsetWidth}px, height: ${to.offsetHeight}px). Please ensure both elements have the same dimensions.`,\n        )\n\n      setRect({ height: from.offsetHeight, width: from.offsetWidth })\n    }, [fromRef, toRef])\n\n    return (\n      <motion.button\n        type=\"button\"\n        style={style}\n        data-disabled={dataAttr(disabled)}\n        data-orientation={orientation}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        disabled={disabled}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        <FlipFrom\n          ref={fromRef}\n          custom={{ orientation, visible }}\n          transition={{ delay, duration, ...transition }}\n        >\n          {from}\n        </FlipFrom>\n\n        <FlipTo\n          ref={toRef}\n          custom={{ orientation, visible }}\n          transition={{ delay, duration, ...transition }}\n        >\n          {to}\n        </FlipTo>\n      </motion.button>\n    )\n  },\n  \"root\",\n)()\n\ninterface FlipFromProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipFrom = withContext<\"span\", FlipFromProps>(\n  ({ custom, ...rest }) => {\n    return (\n      <motion.span\n        animate=\"enter\"\n        custom={{ ident: \"from\", ...custom }}\n        initial=\"exit\"\n        variants={flipVariants}\n        {...rest}\n      />\n    )\n  },\n  [\"item\", \"from\"],\n)()\n\ninterface FlipToProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipTo = withContext<\"span\", FlipToProps>(\n  ({ custom, ...rest }) => {\n    return (\n      <motion.span\n        animate=\"enter\"\n        custom={{ ident: \"to\", ...custom }}\n        initial=\"exit\"\n        variants={flipVariants}\n        {...rest}\n      />\n    )\n  },\n  [\"item\", \"to\"],\n)()\n"],"mappings":";;;;;;;;;;AAcA,MAAM,eAAyB;CAC7B,QAAQ,EAAE,OAAO,aAAa,eAAe,GAC1C,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAU,UAAU,MAAM,IAAK,UAAU,IAAI,IAC3D;CACA,OAAO,EAAE,OAAO,mBAAmB,GAChC,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAS,IAAI,IAC3B;AACF;AA+DA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA0C,QAAQ,SAAS;;;;;;AAS/D,MAAa,OAAO,cACjB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,cAAc,cACd,UACA,IACA,aAAa,CAAC,GACd,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,CAAC,EAAE,QAAQ,SAAS,WAAW,SAAe,CAAC,CAAC;CACtD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,QAAQ,OAA8B,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,UAAU,UAAU;CAE1B,MAAM,QAAQ,eACL;EACL,QAAQ,SAAS,GAAG,OAAO,MAAM;EACjC,OAAO,QAAQ,GAAG,MAAM,MAAM;CAChC,IACA,CAAC,OAAO,MAAM,CAChB;CAEA,MAAM,gBAAgB;EACpB,IAAI,UAAU;EAEd,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;CACtD;CAEA,0BAA0B;EACxB,MAAM,OAAO,QAAQ;EACrB,MAAM,KAAK,MAAM;EAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI;EAElB,IACE,KAAK,gBAAgB,GAAG,eACxB,KAAK,iBAAiB,GAAG,cAEzB,QAAQ,KACN,gCAAgC,KAAK,YAAY,cAAc,KAAK,aAAa,0CAA0C,GAAG,YAAY,cAAc,GAAG,aAAa,2DAC1K;EAEF,QAAQ;GAAE,QAAQ,KAAK;GAAc,OAAO,KAAK;EAAY,CAAC;CAChE,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,OACE,qBAAC,OAAO,QAAR;EACE,MAAK;EACE;EACP,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,oBAAkB;EAClB,kBAAA,GAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,cAAY;EACF;EACV,UAAA,GAAA,cAAA,WAAA,CAAoB,aAAa,OAAO;EACxC,GAAI;YATN,CAWE,oBAAC,UAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;aAE5C;EACO,CAAA,GAEV,oBAAC,QAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;aAE5C;EACK,CAAA,CACK;;AAEnB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,WAAW,aACd,EAAE,QAAQ,GAAG,WAAW;CACvB,OACE,oBAAC,OAAO,MAAR;EACE,SAAQ;EACR,QAAQ;GAAE,OAAO;GAAQ,GAAG;EAAO;EACnC,SAAQ;EACR,UAAU;EACV,GAAI;CACL,CAAA;AAEL,GACA,CAAC,QAAQ,MAAM,CACjB,CAAC,CAAC;AAIF,MAAM,SAAS,aACZ,EAAE,QAAQ,GAAG,WAAW;CACvB,OACE,oBAAC,OAAO,MAAR;EACE,SAAQ;EACR,QAAQ;GAAE,OAAO;GAAM,GAAG;EAAO;EACjC,SAAQ;EACR,UAAU;EACV,GAAI;CACL,CAAA;AAEL,GACA,CAAC,QAAQ,IAAI,CACf,CAAC,CAAC"}

package/dist/esm/components/highlight/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","names":[],"sources":["../../../../src/components/highlight/highlight.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { MarkProps } from \"../mark\"\nimport type { TextProps } from \"../text\"\nimport { Fragment } from \"react\"\nimport { Mark } from \"../mark\"\nimport { Text } from \"../text\"\nimport { useHighlight } from \"./use-highlight\"\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * The text used for searching.\n   */\n  children: string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/docs/components/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment = false,\n  query,\n  markProps,\n  ...rest\n}) => {\n  const chunks = useHighlight({ query, text })\n  const { colorScheme } = rest\n\n  if (fragment) {\n    return (\n      <>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </>\n    )\n  } else {\n    return (\n      <Text {...rest}>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </Text>\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;AAkCA,MAAa,aAAiC,EAC5C,UAAU,MACV,WAAW,OACX,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,aAAa;EAAE;EAAO;CAAK,CAAC;CAC3C,MAAM,EAAE,gBAAgB;CAExB,IAAI,UACF,OACE,oBAAA,YAAA,EAAA,UACG,OAAO,KAAK,EAAE,OAAO,QAAQ,UAC5B,QACE,oBAAC,MAAD;EAA+B;EAAa,GAAI;YAC7C;CACG,GAFK,KAEL,IAEN,oBAAC,UAAD,EAAA,UAAuB,KAAe,GAAvB,KAAuB,CAE1C,EACA,CAAA;MAGJ,OACE,oBAAC,MAAD;EAAM,GAAI;YACP,OAAO,KAAK,EAAE,OAAO,QAAQ,UAC5B,QACE,oBAAC,MAAD;GAA+B;GAAa,GAAI;aAC7C;EACG,GAFK,KAEL,IAEN,oBAAC,UAAD,EAAA,UAAuB,KAAe,GAAvB,KAAuB,CAE1C;CACI,CAAA;AAGZ"}
+{"version":3,"file":"highlight.js","names":[],"sources":["../../../../src/components/highlight/highlight.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { MarkProps } from \"../mark\"\nimport type { TextProps } from \"../text\"\nimport { Fragment } from \"react\"\nimport { Mark } from \"../mark\"\nimport { Text } from \"../text\"\nimport { useHighlight } from \"./use-highlight\"\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * The text used for searching.\n   */\n  children: string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/docs/components/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment = false,\n  query,\n  markProps,\n  ...rest\n}) => {\n  const chunks = useHighlight({ query, text })\n  const { colorScheme } = rest\n\n  if (fragment)\n    return (\n      <>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </>\n    )\n  else\n    return (\n      <Text {...rest}>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </Text>\n    )\n}\n"],"mappings":";;;;;;;;;;;AAkCA,MAAa,aAAiC,EAC5C,UAAU,MACV,WAAW,OACX,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,aAAa;EAAE;EAAO;CAAK,CAAC;CAC3C,MAAM,EAAE,gBAAgB;CAExB,IAAI,UACF,OACE,oBAAA,YAAA,EAAA,UACG,OAAO,KAAK,EAAE,OAAO,QAAQ,UAC5B,QACE,oBAAC,MAAD;EAA+B;EAAa,GAAI;YAC7C;CACG,GAFK,KAEL,IAEN,oBAAC,UAAD,EAAA,UAAuB,KAAe,GAAvB,KAAuB,CAE1C,EACA,CAAA;MAGJ,OACE,oBAAC,MAAD;EAAM,GAAI;YACP,OAAO,KAAK,EAAE,OAAO,QAAQ,UAC5B,QACE,oBAAC,MAAD;GAA+B;GAAa,GAAI;aAC7C;EACG,GAFK,KAEL,IAEN,oBAAC,UAAD,EAAA,UAAuB,KAAe,GAAvB,KAAuB,CAE1C;CACI,CAAA;AAEZ"}

package/dist/esm/components/indicator/indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"indicator.js","names":[],"sources":["../../../../src/components/indicator/indicator.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatProps } from \"../float\"\nimport type { IndicatorStyle } from \"./indicator.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr, isNumber, isObject } from \"../../utils\"\nimport { Float } from \"../float\"\nimport { indicatorStyle } from \"./indicator.style\"\n\ninterface PingOptions {\n  /**\n   * It is used for the color of the ping animation.\n   */\n  color?: CSSProps[\"backgroundColor\"]\n  /**\n   * It is used for the duration of the ping animation.\n   */\n  duration?: CSSProps[\"animationDuration\"]\n  /**\n   * It is used for the count of the ping animation.\n   */\n  iterationCount?: CSSProps[\"animationIterationCount\"]\n  /**\n   * It is used for the scale of the ping animation.\n   */\n  scale?: CSSProps[\"scale\"]\n  /**\n   * It is used for the timing function of the ping animation.\n   */\n  timingFunction?: CSSProps[\"animationTimingFunction\"]\n}\n\nexport interface IndicatorProps\n  extends\n    Omit<HTMLStyledProps, \"offset\">,\n    Omit<ThemeProps<IndicatorStyle>, \"ping\">,\n    Pick<FloatProps, \"offset\" | \"placement\"> {\n  /**\n   * If `true`, the indicator will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The indicator label to use.\n   */\n  label?: ReactNode\n  /**\n   * If `label` is of type number, the maximum number displayed.\n   *\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * If `true`, make an element scale and fade like a radar ping or ripple of water.\n   *\n   * @default false\n   */\n  ping?: boolean | PingOptions\n  /**\n   * If `true`, display 0.\n   *\n   * @default true\n   */\n  showZero?: boolean\n  /**\n   * Props for the float element.\n   */\n  floatProps?: IndicatorFloatProps\n  /**\n   * Props for the label element.\n   */\n  labelProps?: IndicatorLabelProps\n}\n\nconst {\n  PropsContext: IndicatorPropsContext,\n  usePropsContext: useIndicatorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<IndicatorProps, IndicatorStyle>(\n  \"indicator\",\n  indicatorStyle,\n)\n\nexport { IndicatorPropsContext, useIndicatorPropsContext }\n\n/**\n * `Indicator` is a component that displays at the corner of elements such as avatars.\n *\n * @see https://yamada-ui.com/docs/components/indicator\n */\nexport const Indicator = withProvider(\n  ({\n    children,\n    disabled,\n    label,\n    offset,\n    overflowCount = 99,\n    placement,\n    showZero = true,\n    floatProps,\n    labelProps,\n    ...rest\n  }) => {\n    const numeric = isNumber(label)\n\n    disabled ??= numeric && !showZero && label <= 0\n\n    const computedLabel = useMemo(() => {\n      if (numeric && label > overflowCount) {\n        return (\n          <>\n            {overflowCount}\n            <styled.span>+</styled.span>\n          </>\n        )\n      } else {\n        return label\n      }\n    }, [numeric, label, overflowCount])\n\n    return (\n      <styled.div {...rest}>\n        {children}\n\n        {!disabled ? (\n          <IndicatorFloat offset={offset} placement={placement} {...floatProps}>\n            <IndicatorLabel data-numeric={dataAttr(numeric)} {...labelProps}>\n              {computedLabel}\n            </IndicatorLabel>\n          </IndicatorFloat>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ ping, ...rest }) => {\n  if (isObject(ping)) {\n    const { color, duration, iterationCount, scale, timingFunction } = ping\n\n    return {\n      ...rest,\n      \"--animation-scale\": scale,\n      \"--duration\": varAttr(duration, \"durations\"),\n      \"--iteration-count\": iterationCount,\n      \"--ping-color\": varAttr(color, \"colors\"),\n      \"--timing-function\": varAttr(timingFunction, \"easings\"),\n      ping: true,\n    }\n  } else {\n    return { ...rest, ping }\n  }\n})\n\ninterface IndicatorFloatProps extends FloatProps {}\n\nconst IndicatorFloat = withContext<\"div\", IndicatorFloatProps>(Float, \"float\")()\n\ninterface IndicatorLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst IndicatorLabel = withContext<\"span\", IndicatorLabelProps>(\n  \"span\",\n  \"label\",\n)()\n"],"mappings":";;;;;;;;;;AA8EA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,UACA,OACA,QACA,gBAAgB,IAChB,WACA,WAAW,MACX,YACA,YACA,GAAG,WACC;CACJ,MAAM,WAAA,GAAA,cAAA,SAAA,CAAmB,KAAK;CAE9B,aAAa,WAAW,CAAC,YAAY,SAAS;CAE9C,MAAM,gBAAgB,cAAc;EAClC,IAAI,WAAW,QAAQ,eACrB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,eACD,oBAAC,OAAO,MAAR,EAAA,UAAa,IAAc,CAAA,CAC3B,EAAA,CAAA;OAGJ,OAAO;CAEX,GAAG;EAAC;EAAS;EAAO;CAAa,CAAC;CAElC,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACG,UAEA,CAAC,WACA,oBAAC,gBAAD;GAAwB;GAAmB;GAAW,GAAI;aACxD,oBAAC,gBAAD;IAAgB,iBAAA,GAAA,cAAA,SAAA,CAAuB,OAAO;IAAG,GAAI;cAClD;GACa,CAAA;EACF,CAAA,IACd,IACM;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW;CACvB,KAAA,GAAA,cAAA,SAAA,CAAa,IAAI,GAAG;EAClB,MAAM,EAAE,OAAO,UAAU,gBAAgB,OAAO,mBAAmB;EAEnE,OAAO;GACL,GAAG;GACH,qBAAqB;GACrB,cAAc,QAAQ,UAAU,WAAW;GAC3C,qBAAqB;GACrB,gBAAgB,QAAQ,OAAO,QAAQ;GACvC,qBAAqB,QAAQ,gBAAgB,SAAS;GACtD,MAAM;EACR;CACF,OACE,OAAO;EAAE,GAAG;EAAM;CAAK;AAE3B,CAAC;AAID,MAAM,iBAAiB,YAAwC,OAAO,OAAO,CAAC,CAAC;AAI/E,MAAM,iBAAiB,YACrB,QACA,OACF,CAAC,CAAC"}
+{"version":3,"file":"indicator.js","names":[],"sources":["../../../../src/components/indicator/indicator.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatProps } from \"../float\"\nimport type { IndicatorStyle } from \"./indicator.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr, isNumber, isObject } from \"../../utils\"\nimport { Float } from \"../float\"\nimport { indicatorStyle } from \"./indicator.style\"\n\ninterface PingOptions {\n  /**\n   * It is used for the color of the ping animation.\n   */\n  color?: CSSProps[\"backgroundColor\"]\n  /**\n   * It is used for the duration of the ping animation.\n   */\n  duration?: CSSProps[\"animationDuration\"]\n  /**\n   * It is used for the count of the ping animation.\n   */\n  iterationCount?: CSSProps[\"animationIterationCount\"]\n  /**\n   * It is used for the scale of the ping animation.\n   */\n  scale?: CSSProps[\"scale\"]\n  /**\n   * It is used for the timing function of the ping animation.\n   */\n  timingFunction?: CSSProps[\"animationTimingFunction\"]\n}\n\nexport interface IndicatorProps\n  extends\n    Omit<HTMLStyledProps, \"offset\">,\n    Omit<ThemeProps<IndicatorStyle>, \"ping\">,\n    Pick<FloatProps, \"offset\" | \"placement\"> {\n  /**\n   * If `true`, the indicator will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The indicator label to use.\n   */\n  label?: ReactNode\n  /**\n   * If `label` is of type number, the maximum number displayed.\n   *\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * If `true`, make an element scale and fade like a radar ping or ripple of water.\n   *\n   * @default false\n   */\n  ping?: boolean | PingOptions\n  /**\n   * If `true`, display 0.\n   *\n   * @default true\n   */\n  showZero?: boolean\n  /**\n   * Props for the float element.\n   */\n  floatProps?: IndicatorFloatProps\n  /**\n   * Props for the label element.\n   */\n  labelProps?: IndicatorLabelProps\n}\n\nconst {\n  PropsContext: IndicatorPropsContext,\n  usePropsContext: useIndicatorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<IndicatorProps, IndicatorStyle>(\n  \"indicator\",\n  indicatorStyle,\n)\n\nexport { IndicatorPropsContext, useIndicatorPropsContext }\n\n/**\n * `Indicator` is a component that displays at the corner of elements such as avatars.\n *\n * @see https://yamada-ui.com/docs/components/indicator\n */\nexport const Indicator = withProvider(\n  ({\n    children,\n    disabled,\n    label,\n    offset,\n    overflowCount = 99,\n    placement,\n    showZero = true,\n    floatProps,\n    labelProps,\n    ...rest\n  }) => {\n    const numeric = isNumber(label)\n\n    disabled ??= numeric && !showZero && label <= 0\n\n    const computedLabel = useMemo(() => {\n      if (numeric && label > overflowCount)\n        return (\n          <>\n            {overflowCount}\n            <styled.span>+</styled.span>\n          </>\n        )\n      else return label\n    }, [numeric, label, overflowCount])\n\n    return (\n      <styled.div {...rest}>\n        {children}\n\n        {!disabled ? (\n          <IndicatorFloat offset={offset} placement={placement} {...floatProps}>\n            <IndicatorLabel data-numeric={dataAttr(numeric)} {...labelProps}>\n              {computedLabel}\n            </IndicatorLabel>\n          </IndicatorFloat>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ ping, ...rest }) => {\n  if (isObject(ping)) {\n    const { color, duration, iterationCount, scale, timingFunction } = ping\n\n    return {\n      ...rest,\n      \"--animation-scale\": scale,\n      \"--duration\": varAttr(duration, \"durations\"),\n      \"--iteration-count\": iterationCount,\n      \"--ping-color\": varAttr(color, \"colors\"),\n      \"--timing-function\": varAttr(timingFunction, \"easings\"),\n      ping: true,\n    }\n  } else {\n    return { ...rest, ping }\n  }\n})\n\ninterface IndicatorFloatProps extends FloatProps {}\n\nconst IndicatorFloat = withContext<\"div\", IndicatorFloatProps>(Float, \"float\")()\n\ninterface IndicatorLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst IndicatorLabel = withContext<\"span\", IndicatorLabelProps>(\n  \"span\",\n  \"label\",\n)()\n"],"mappings":";;;;;;;;;;AA8EA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,UACA,OACA,QACA,gBAAgB,IAChB,WACA,WAAW,MACX,YACA,YACA,GAAG,WACC;CACJ,MAAM,WAAA,GAAA,cAAA,SAAA,CAAmB,KAAK;CAE9B,aAAa,WAAW,CAAC,YAAY,SAAS;CAE9C,MAAM,gBAAgB,cAAc;EAClC,IAAI,WAAW,QAAQ,eACrB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,eACD,oBAAC,OAAO,MAAR,EAAA,UAAa,IAAc,CAAA,CAC3B,EAAA,CAAA;OAED,OAAO;CACd,GAAG;EAAC;EAAS;EAAO;CAAa,CAAC;CAElC,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACG,UAEA,CAAC,WACA,oBAAC,gBAAD;GAAwB;GAAmB;GAAW,GAAI;aACxD,oBAAC,gBAAD;IAAgB,iBAAA,GAAA,cAAA,SAAA,CAAuB,OAAO;IAAG,GAAI;cAClD;GACa,CAAA;EACF,CAAA,IACd,IACM;;AAEhB,GACA,MACF,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW;CACvB,KAAA,GAAA,cAAA,SAAA,CAAa,IAAI,GAAG;EAClB,MAAM,EAAE,OAAO,UAAU,gBAAgB,OAAO,mBAAmB;EAEnE,OAAO;GACL,GAAG;GACH,qBAAqB;GACrB,cAAc,QAAQ,UAAU,WAAW;GAC3C,qBAAqB;GACrB,gBAAgB,QAAQ,OAAO,QAAQ;GACvC,qBAAqB,QAAQ,gBAAgB,SAAS;GACtD,MAAM;EACR;CACF,OACE,OAAO;EAAE,GAAG;EAAM;CAAK;AAE3B,CAAC;AAID,MAAM,iBAAiB,YAAwC,OAAO,OAAO,CAAC,CAAC;AAI/E,MAAM,iBAAiB,YACrB,QACA,OACF,CAAC,CAAC"}

package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: null | RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const root = rootRef?.current ?? null\n\n    const observer = new IntersectionObserver(\n      async ([entry]) => {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (!entry?.isIntersecting || processingRef.current || !el) return\n\n        const props = { entry, finish: onFinish, index: indexRef.current }\n\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        let prevScrollPosition = 0\n\n        if (reverse)\n          prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n        await onLoad(props)\n\n        if (reverse)\n          setTimeout(() => {\n            const target = el === body ? getWindow() : el\n            const position =\n              (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n            target?.scrollTo({ [direction]: position })\n          })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      },\n      { root, rootMargin, threshold },\n    )\n\n    return observer\n  }, [\n    rootRef,\n    rootMargin,\n    threshold,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      ) {\n        root.setAttribute(\"tabindex\", \"0\")\n      }\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-infinite-scroll.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  else return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n  IntersectionObserverInit,\n  \"root\"\n> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: null | RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    index: number\n    finish: () => void\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<Y>(null)\n  const { getDocument, getWindow } = useEnvironment()\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const direction = vertical ? \"top\" : \"left\"\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = reverse\n            ? vertical\n              ? el.scrollHeight\n              : el.scrollWidth\n            : 0\n\n          target?.scrollTo({ behavior, [direction]: position })\n        }\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [\n      disabled,\n      rootRef,\n      getDocument,\n      vertical,\n      getWindow,\n      reverse,\n      behavior,\n      direction,\n    ],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const root = rootRef?.current ?? null\n\n    const observer = new IntersectionObserver(\n      async ([entry]) => {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (!entry?.isIntersecting || processingRef.current || !el) return\n\n        const props = { entry, finish: onFinish, index: indexRef.current }\n\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        let prevScrollPosition = 0\n\n        if (reverse)\n          prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n        await onLoad(props)\n\n        if (reverse)\n          setTimeout(() => {\n            const target = el === body ? getWindow() : el\n            const position =\n              (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n            target?.scrollTo({ [direction]: position })\n          })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      },\n      { root, rootMargin, threshold },\n    )\n\n    return observer\n  }, [\n    rootRef,\n    rootMargin,\n    threshold,\n    getDocument,\n    vertical,\n    onFinish,\n    reverse,\n    onLoad,\n    getWindow,\n    direction,\n  ])\n\n  useEffect(() => {\n    const setTabIndexAttribute = () => {\n      const root = rootRef?.current\n      if (\n        root &&\n        isScrollable(root, vertical) &&\n        !root.hasAttribute(\"tabindex\")\n      )\n        root.setAttribute(\"tabindex\", \"0\")\n    }\n\n    const setupObserver = async () => {\n      const el = ref.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad) {\n        processingRef.current = true\n\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse) {\n        const root = rootRef?.current\n        const body = getDocument()?.body\n        const el = root && isScrollable(root, vertical) ? root : body\n\n        if (el) {\n          const target = el === body ? getWindow() : el\n          const position = vertical ? el.scrollHeight : el.scrollWidth\n\n          target?.scrollTo({ [direction]: position })\n        }\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setTabIndexAttribute()\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n    getDocument,\n    getWindow,\n    direction,\n  ])\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}

package/dist/esm/components/input/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../../../../src/components/input/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Component, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps } from \"./input\"\nimport type { InputStyle } from \"./input.style\"\nimport { cloneElement, useMemo } from \"react\"\nimport { isSomeElement, isTruthyDataAttr, useValidChildren } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { InputPropsContext } from \"./input\"\nimport { InputAddonPropsContext } from \"./input-addon\"\nimport { InputElement, InputElementPropsContext } from \"./input-element\"\n\nexport interface InputGroupRootProps\n  extends\n    WithoutThemeProps<GroupProps, InputStyle>,\n    ThemeProps<InputStyle>,\n    Pick<InputProps, \"errorBorderColor\" | \"focusBorderColor\">,\n    FieldProps {}\n\nexport const InputGroupRoot = ((props: InputGroupRootProps) => {\n  const {\n    props: {\n      id: _id,\n      size,\n      variant,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      readOnly,\n      required,\n      ...rest\n    },\n    dataProps,\n  } = useFieldProps(props)\n  const validChildren = useValidChildren(children)\n  const cloneChildren = useMemo(\n    () =>\n      validChildren.map((child, index) => {\n        const first = !index\n\n        if (isSomeElement(child.type, InputElement)) {\n          return cloneElement(child, {\n            \"data-ungrouped\": \"\",\n            placement: first ? \"start\" : \"end\",\n            ...child.props,\n          })\n        } else {\n          return child\n        }\n      }),\n    [validChildren],\n  )\n  const sharedContext = useMemo(\n    () => ({\n      size,\n      variant,\n      errorBorderColor,\n      focusBorderColor,\n      ...dataProps,\n    }),\n    [size, variant, errorBorderColor, focusBorderColor, dataProps],\n  )\n  const inputContext = useMemo(\n    () => ({\n      ...sharedContext,\n      disabled,\n      invalid: isTruthyDataAttr(sharedContext[\"data-invalid\"]),\n      readOnly,\n      required,\n    }),\n    [sharedContext, disabled, readOnly, required],\n  )\n\n  return (\n    <InputPropsContext value={inputContext}>\n      <InputAddonPropsContext value={sharedContext}>\n        <InputElementPropsContext value={sharedContext}>\n          <Group attached minW=\"0\" w=\"full\" {...rest}>\n            {cloneChildren}\n          </Group>\n        </InputElementPropsContext>\n      </InputAddonPropsContext>\n    </InputPropsContext>\n  )\n}) as Component<\"div\", InputGroupRootProps>\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,mBAAmB,UAA+B;CAC7D,MAAM,EACJ,OAAO,EACL,IAAI,KACJ,MACA,SACA,UACA,UACA,kBACA,kBACA,UACA,UACA,GAAG,QAEL,cACE,cAAc,KAAK;CACvB,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,gBAAgB,cAElB,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,QAAQ,CAAC;EAEf,IAAI,cAAc,MAAM,MAAM,YAAY,GACxC,OAAO,aAAa,OAAO;GACzB,kBAAkB;GAClB,WAAW,QAAQ,UAAU;GAC7B,GAAG,MAAM;EACX,CAAC;OAED,OAAO;CAEX,CAAC,GACH,CAAC,aAAa,CAChB;CACA,MAAM,gBAAgB,eACb;EACL;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAM;EAAS;EAAkB;EAAkB;CAAS,CAC/D;CAYA,OACE,oBAAC,mBAAD;EAAmB,OAZA,eACZ;GACL,GAAG;GACH;GACA,UAAA,GAAA,cAAA,iBAAA,CAA0B,cAAc,eAAe;GACvD;GACA;EACF,IACA;GAAC;GAAe;GAAU;GAAU;EAAQ,CAIP;YACnC,oBAAC,wBAAD;GAAwB,OAAO;aAC7B,oBAAC,0BAAD;IAA0B,OAAO;cAC/B,oBAAC,OAAD;KAAO,UAAA;KAAS,MAAK;KAAI,GAAE;KAAO,GAAI;eACnC;IACI,CAAA;GACiB,CAAA;EACJ,CAAA;CACP,CAAA;AAEvB"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../../src/components/input/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Component, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps } from \"./input\"\nimport type { InputStyle } from \"./input.style\"\nimport { cloneElement, useMemo } from \"react\"\nimport { isSomeElement, isTruthyDataAttr, useValidChildren } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { InputPropsContext } from \"./input\"\nimport { InputAddonPropsContext } from \"./input-addon\"\nimport { InputElement, InputElementPropsContext } from \"./input-element\"\n\nexport interface InputGroupRootProps\n  extends\n    WithoutThemeProps<GroupProps, InputStyle>,\n    ThemeProps<InputStyle>,\n    Pick<InputProps, \"errorBorderColor\" | \"focusBorderColor\">,\n    FieldProps {}\n\nexport const InputGroupRoot = ((props: InputGroupRootProps) => {\n  const {\n    props: {\n      id: _id,\n      size,\n      variant,\n      children,\n      disabled,\n      errorBorderColor,\n      focusBorderColor,\n      readOnly,\n      required,\n      ...rest\n    },\n    dataProps,\n  } = useFieldProps(props)\n  const validChildren = useValidChildren(children)\n  const cloneChildren = useMemo(\n    () =>\n      validChildren.map((child, index) => {\n        const first = !index\n\n        if (isSomeElement(child.type, InputElement))\n          return cloneElement(child, {\n            \"data-ungrouped\": \"\",\n            placement: first ? \"start\" : \"end\",\n            ...child.props,\n          })\n        else return child\n      }),\n    [validChildren],\n  )\n  const sharedContext = useMemo(\n    () => ({\n      size,\n      variant,\n      errorBorderColor,\n      focusBorderColor,\n      ...dataProps,\n    }),\n    [size, variant, errorBorderColor, focusBorderColor, dataProps],\n  )\n  const inputContext = useMemo(\n    () => ({\n      ...sharedContext,\n      disabled,\n      invalid: isTruthyDataAttr(sharedContext[\"data-invalid\"]),\n      readOnly,\n      required,\n    }),\n    [sharedContext, disabled, readOnly, required],\n  )\n\n  return (\n    <InputPropsContext value={inputContext}>\n      <InputAddonPropsContext value={sharedContext}>\n        <InputElementPropsContext value={sharedContext}>\n          <Group attached minW=\"0\" w=\"full\" {...rest}>\n            {cloneChildren}\n          </Group>\n        </InputElementPropsContext>\n      </InputAddonPropsContext>\n    </InputPropsContext>\n  )\n}) as Component<\"div\", InputGroupRootProps>\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,mBAAmB,UAA+B;CAC7D,MAAM,EACJ,OAAO,EACL,IAAI,KACJ,MACA,SACA,UACA,UACA,kBACA,kBACA,UACA,UACA,GAAG,QAEL,cACE,cAAc,KAAK;CACvB,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,gBAAgB,cAElB,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,QAAQ,CAAC;EAEf,IAAI,cAAc,MAAM,MAAM,YAAY,GACxC,OAAO,aAAa,OAAO;GACzB,kBAAkB;GAClB,WAAW,QAAQ,UAAU;GAC7B,GAAG,MAAM;EACX,CAAC;OACE,OAAO;CACd,CAAC,GACH,CAAC,aAAa,CAChB;CACA,MAAM,gBAAgB,eACb;EACL;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAM;EAAS;EAAkB;EAAkB;CAAS,CAC/D;CAYA,OACE,oBAAC,mBAAD;EAAmB,OAZA,eACZ;GACL,GAAG;GACH;GACA,UAAA,GAAA,cAAA,iBAAA,CAA0B,cAAc,eAAe;GACvD;GACA;EACF,IACA;GAAC;GAAe;GAAU;GAAU;EAAQ,CAIP;YACnC,oBAAC,wBAAD;GAAwB,OAAO;aAC7B,oBAAC,0BAAD;IAA0B,OAAO;cAC/B,oBAAC,OAAD;KAAO,UAAA;KAAS,MAAK;KAAI,GAAE;KAAO,GAAI;eACnC;IACI,CAAA;GACiB,CAAA;EACJ,CAAA;CACP,CAAA;AAEvB"}

package/dist/esm/components/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":[],"sources":["../../../../src/components/list/list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  CSSProps,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ListStyle } from \"./list.style\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { listStyle } from \"./list.style\"\n\nexport interface ListItem extends ListItemProps {}\n\nexport interface ListRootProps\n  extends HTMLStyledProps<\"ul\">, Omit<ThemeProps<ListStyle>, \"styleType\"> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: ListItem[]\n  /**\n   * The CSS `list-style-position` property.\n   */\n  stylePosition?: CSSProps[\"listStylePosition\"]\n  /**\n   * The CSS `list-style-position` property.\n   */\n  styleType?: CSSProps[\"listStyleType\"]\n}\n\nconst {\n  PropsContext: ListPropsContext,\n  usePropsContext: useListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ListRootProps, ListStyle>(\"list\", listStyle)\n\nexport { ListPropsContext, useListPropsContext }\n\n/**\n * `List` is a component for displaying lists. By default, it renders a `ul` element.\n *\n * @see https://yamada-ui.com/docs/components/list\n */\nexport const ListRoot = withProvider<\"ul\", ListRootProps, \"styleType\">(\n  ({\n    as: asProp,\n    children,\n    items,\n    stylePosition: listStylePosition,\n    styleType: listStyleType = \"none\",\n    ...rest\n  }) => {\n    const as = asProp ?? (listStyleType == \"decimal\" ? \"ol\" : undefined)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => <ListItem key={index} {...props} />)\n    }, [children, items])\n\n    return (\n      <styled.ul\n        as={as}\n        listStylePosition={listStylePosition}\n        listStyleType={listStyleType}\n        role=\"list\"\n        {...rest}\n      >\n        {computedChildren}\n      </styled.ul>\n    )\n  },\n  \"root\",\n  { transferProps: [\"styleType\"] },\n)()\n\nexport interface ListItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The icon to use.\n   */\n  icon?: ReactElement<any>\n}\n\nexport const ListItem = withContext<\"li\", ListItemProps>(\n  ({ children, icon, ...rest }) => (\n    <styled.li {...rest}>\n      <ListItemIcon>{icon}</ListItemIcon>\n\n      {children}\n    </styled.li>\n  ),\n  \"item\",\n)()\n\nexport interface ListIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const ListItemIcon = withContext<\"svg\", ListIconProps>(\n  ({ children, ...rest }) => {\n    if (isValidElement<HTMLProps<\"svg\">>(children)) {\n      return cloneElement(children, {\n        ...children.props,\n        ...rest,\n        role: \"presentation\",\n      })\n    } else {\n      return null\n    }\n  },\n  \"icon\",\n)({ \"data-list-icon\": \"\" })\n"],"mappings":";;;;;;;AAgCA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,SAAS;;;;;;AASnE,MAAa,WAAW,cACrB,EACC,IAAI,QACJ,UACA,OACA,eAAe,mBACf,WAAW,gBAAgB,QAC3B,GAAG,WACC;CACJ,MAAM,KAAK,WAAW,iBAAiB,YAAY,OAAO,KAAA;CAC1D,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,OAAO,KAAK,OAAO,UAAU,oBAAC,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CAAC;CACzE,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OACE,oBAAC,OAAO,IAAR;EACM;EACe;EACJ;EACf,MAAK;EACL,GAAI;YAEH;CACQ,CAAA;AAEf,GACA,QACA,EAAE,eAAe,CAAC,WAAW,EAAE,CACjC,CAAC,CAAC;AASF,MAAa,WAAW,aACrB,EAAE,UAAU,MAAM,GAAG,WACpB,qBAAC,OAAO,IAAR;CAAW,GAAI;WAAf,CACE,oBAAC,cAAD,EAAA,UAAe,KAAmB,CAAA,GAEjC,QACQ;IAEb,MACF,CAAC,CAAC;AAIF,MAAa,eAAe,aACzB,EAAE,UAAU,GAAG,WAAW;CACzB,IAAI,eAAiC,QAAQ,GAC3C,OAAO,aAAa,UAAU;EAC5B,GAAG,SAAS;EACZ,GAAG;EACH,MAAM;CACR,CAAC;MAED,OAAO;AAEX,GACA,MACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC"}
+{"version":3,"file":"list.js","names":[],"sources":["../../../../src/components/list/list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  CSSProps,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ListStyle } from \"./list.style\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { listStyle } from \"./list.style\"\n\nexport interface ListItem extends ListItemProps {}\n\nexport interface ListRootProps\n  extends HTMLStyledProps<\"ul\">, Omit<ThemeProps<ListStyle>, \"styleType\"> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: ListItem[]\n  /**\n   * The CSS `list-style-position` property.\n   */\n  stylePosition?: CSSProps[\"listStylePosition\"]\n  /**\n   * The CSS `list-style-position` property.\n   */\n  styleType?: CSSProps[\"listStyleType\"]\n}\n\nconst {\n  PropsContext: ListPropsContext,\n  usePropsContext: useListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ListRootProps, ListStyle>(\"list\", listStyle)\n\nexport { ListPropsContext, useListPropsContext }\n\n/**\n * `List` is a component for displaying lists. By default, it renders a `ul` element.\n *\n * @see https://yamada-ui.com/docs/components/list\n */\nexport const ListRoot = withProvider<\"ul\", ListRootProps, \"styleType\">(\n  ({\n    as: asProp,\n    children,\n    items,\n    stylePosition: listStylePosition,\n    styleType: listStyleType = \"none\",\n    ...rest\n  }) => {\n    const as = asProp ?? (listStyleType == \"decimal\" ? \"ol\" : undefined)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => <ListItem key={index} {...props} />)\n    }, [children, items])\n\n    return (\n      <styled.ul\n        as={as}\n        listStylePosition={listStylePosition}\n        listStyleType={listStyleType}\n        role=\"list\"\n        {...rest}\n      >\n        {computedChildren}\n      </styled.ul>\n    )\n  },\n  \"root\",\n  { transferProps: [\"styleType\"] },\n)()\n\nexport interface ListItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The icon to use.\n   */\n  icon?: ReactElement<any>\n}\n\nexport const ListItem = withContext<\"li\", ListItemProps>(\n  ({ children, icon, ...rest }) => (\n    <styled.li {...rest}>\n      <ListItemIcon>{icon}</ListItemIcon>\n\n      {children}\n    </styled.li>\n  ),\n  \"item\",\n)()\n\nexport interface ListIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const ListItemIcon = withContext<\"svg\", ListIconProps>(\n  ({ children, ...rest }) => {\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, {\n        ...children.props,\n        ...rest,\n        role: \"presentation\",\n      })\n    else return null\n  },\n  \"icon\",\n)({ \"data-list-icon\": \"\" })\n"],"mappings":";;;;;;;AAgCA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,SAAS;;;;;;AASnE,MAAa,WAAW,cACrB,EACC,IAAI,QACJ,UACA,OACA,eAAe,mBACf,WAAW,gBAAgB,QAC3B,GAAG,WACC;CACJ,MAAM,KAAK,WAAW,iBAAiB,YAAY,OAAO,KAAA;CAC1D,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,OAAO,KAAK,OAAO,UAAU,oBAAC,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CAAC;CACzE,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OACE,oBAAC,OAAO,IAAR;EACM;EACe;EACJ;EACf,MAAK;EACL,GAAI;YAEH;CACQ,CAAA;AAEf,GACA,QACA,EAAE,eAAe,CAAC,WAAW,EAAE,CACjC,CAAC,CAAC;AASF,MAAa,WAAW,aACrB,EAAE,UAAU,MAAM,GAAG,WACpB,qBAAC,OAAO,IAAR;CAAW,GAAI;WAAf,CACE,oBAAC,cAAD,EAAA,UAAe,KAAmB,CAAA,GAEjC,QACQ;IAEb,MACF,CAAC,CAAC;AAIF,MAAa,eAAe,aACzB,EAAE,UAAU,GAAG,WAAW;CACzB,IAAI,eAAiC,QAAQ,GAC3C,OAAO,aAAa,UAAU;EAC5B,GAAG,SAAS;EACZ,GAAG;EACH,MAAM;CACR,CAAC;MACE,OAAO;AACd,GACA,MACF,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC"}