@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

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

@@ -1 +1 @@
-{"version":3,"file":"editable.js","names":[],"sources":["../../../../src/components/editable/editable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { EditableStyle } from \"./editable.style\"\nimport type { UseEditableProps, UseEditableReturn } from \"./use-editable\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { useInputBorder } from \"../input\"\nimport { editableStyle } from \"./editable.style\"\nimport {\n  EditableContext,\n  useEditable,\n  useEditableContext,\n} from \"./use-editable\"\n\ninterface EditableElementProps extends Pick<\n  UseEditableReturn,\n  \"editing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n> {}\n\nexport interface EditableRootProps\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n    >,\n    ThemeProps<EditableStyle>,\n    UseInputBorderProps,\n    UseEditableProps {\n  /**\n   * The editable children to use.\n   */\n  children?: ReactNodeOrFunction<EditableElementProps>\n}\n\nconst {\n  PropsContext: EditablePropsContext,\n  usePropsContext: useEditablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<EditableRootProps, EditableStyle>(\n  \"editable\",\n  editableStyle,\n)\n\nexport { EditablePropsContext, useEditablePropsContext }\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see https://yamada-ui.com/docs/components/editable\n */\nexport const EditableRoot = withProvider(\n  ({ children, errorBorderColor, focusBorderColor, ...props }) => {\n    const {\n      editing,\n      value: _value,\n      getRootProps,\n      onCancel,\n      onEdit,\n      onSubmit,\n      ...rest\n    } = useEditable(props)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const cloneChildren = runIfFn(children, {\n      editing,\n      onCancel,\n      onEdit,\n      onSubmit,\n    })\n\n    return (\n      <EditableContext value={{ editing, ...rest }}>\n        <styled.div {...getRootProps()} {...varProps}>\n          {cloneChildren}\n        </styled.div>\n      </EditableContext>\n    )\n  },\n)()\n\nexport interface EditablePreviewProps extends HTMLStyledProps<\"span\"> {}\n\nexport const EditablePreview = withContext<\"span\", EditablePreviewProps>(\n  \"span\",\n  \"preview\",\n)(undefined, (props) => {\n  const { getPreviewProps } = useEditableContext()\n\n  return { ...getPreviewProps(props) }\n})\n\nexport interface EditableInputProps extends HTMLStyledProps<\"input\"> {}\n\nexport const EditableInput = withContext<\"input\", EditableInputProps>(\n  \"input\",\n  \"input\",\n)(undefined, (props) => {\n  const { getInputProps } = useEditableContext()\n\n  return { ...getInputProps(props) }\n})\n\nexport interface EditableTextareaProps extends HTMLStyledProps<\"textarea\"> {}\n\nexport const EditableTextarea = withContext<\"textarea\", EditableTextareaProps>(\n  \"textarea\",\n  \"textarea\",\n)(undefined, (props) => {\n  const { getTextareaProps } = useEditableContext()\n\n  return { ...getTextareaProps(props) }\n})\n\nexport interface EditableControlProps extends HTMLStyledProps {}\n\nexport const EditableControl = withContext<\"div\", EditableControlProps>(\n  \"div\",\n  \"control\",\n)(undefined, (props) => {\n  const { getControlProps } = useEditableContext()\n\n  return { ...getControlProps(props) }\n})\n\nexport interface EditableEditTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableEditTrigger = withContext<\n  \"button\",\n  EditableEditTriggerProps\n>(\"button\", { name: \"EditTrigger\", slot: [\"trigger\", \"edit\"] })(\n  undefined,\n  (props) => {\n    const { getEditProps } = useEditableContext()\n\n    return { asChild: true, ...getEditProps(props) }\n  },\n)\n\nexport interface EditableCancelTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableCancelTrigger = withContext<\n  \"button\",\n  EditableCancelTriggerProps\n>(\"button\", { name: \"CancelTrigger\", slot: [\"trigger\", \"cancel\"] })(\n  undefined,\n  (props) => {\n    const { getCancelProps } = useEditableContext()\n\n    return { asChild: true, ...getCancelProps(props) }\n  },\n)\n\nexport interface EditableSubmitTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableSubmitTrigger = withContext<\n  \"button\",\n  EditableSubmitTriggerProps\n>(\"button\", { name: \"SubmitTrigger\", slot: [\"trigger\", \"submit\"] })(\n  undefined,\n  (props) => {\n    const { getSubmitProps } = useEditableContext()\n\n    return { asChild: true, ...getSubmitProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;AAqCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,YAAY;CAC9D,MAAM,EACJ,SACA,OAAO,QACP,cACA,UACA,QACA,UACA,GAAG,SACD,YAAY,KAAK;CACrB,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,iBAAA,GAAA,cAAA,QAAA,CAAwB,UAAU;EACtC;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAS,GAAG;EAAK;EACzC,UAAA,oBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;GAAG,GAAI;GACjC,UAAA;EACS,CAAA;CACG,CAAA;AAErB,CACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,QACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,gBAAgB,YAC3B,SACA,OACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,kBAAkB,mBAAmB;CAE7C,OAAO,EAAE,GAAG,cAAc,KAAK,EAAE;AACnC,CAAC;AAID,MAAa,mBAAmB,YAC9B,YACA,UACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,qBAAqB,mBAAmB;CAEhD,OAAO,EAAE,GAAG,iBAAiB,KAAK,EAAE;AACtC,CAAC;AAID,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,sBAAsB,YAGjC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CAAC,CAAC,CAC7D,KAAA,IACC,UAAU;CACT,MAAM,EAAE,iBAAiB,mBAAmB;CAE5C,OAAO;EAAE,SAAS;EAAM,GAAG,aAAa,KAAK;CAAE;AACjD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF"}
+{"version":3,"file":"editable.js","names":["runIfFn"],"sources":["../../../../src/components/editable/editable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { EditableStyle } from \"./editable.style\"\nimport type { UseEditableProps, UseEditableReturn } from \"./use-editable\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { useInputBorder } from \"../input\"\nimport { editableStyle } from \"./editable.style\"\nimport {\n  EditableContext,\n  useEditable,\n  useEditableContext,\n} from \"./use-editable\"\n\ninterface EditableElementProps extends Pick<\n  UseEditableReturn,\n  \"editing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n> {}\n\nexport interface EditableRootProps\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n    >,\n    ThemeProps<EditableStyle>,\n    UseInputBorderProps,\n    UseEditableProps {\n  /**\n   * The editable children to use.\n   */\n  children?: ReactNodeOrFunction<EditableElementProps>\n}\n\nconst {\n  PropsContext: EditablePropsContext,\n  usePropsContext: useEditablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<EditableRootProps, EditableStyle>(\n  \"editable\",\n  editableStyle,\n)\n\nexport { EditablePropsContext, useEditablePropsContext }\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see https://yamada-ui.com/docs/components/editable\n */\nexport const EditableRoot = withProvider(\n  ({ children, errorBorderColor, focusBorderColor, ...props }) => {\n    const {\n      editing,\n      value: _value,\n      getRootProps,\n      onCancel,\n      onEdit,\n      onSubmit,\n      ...rest\n    } = useEditable(props)\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const cloneChildren = runIfFn(children, {\n      editing,\n      onCancel,\n      onEdit,\n      onSubmit,\n    })\n\n    return (\n      <EditableContext value={{ editing, ...rest }}>\n        <styled.div {...getRootProps()} {...varProps}>\n          {cloneChildren}\n        </styled.div>\n      </EditableContext>\n    )\n  },\n)()\n\nexport interface EditablePreviewProps extends HTMLStyledProps<\"span\"> {}\n\nexport const EditablePreview = withContext<\"span\", EditablePreviewProps>(\n  \"span\",\n  \"preview\",\n)(undefined, (props) => {\n  const { getPreviewProps } = useEditableContext()\n\n  return { ...getPreviewProps(props) }\n})\n\nexport interface EditableInputProps extends HTMLStyledProps<\"input\"> {}\n\nexport const EditableInput = withContext<\"input\", EditableInputProps>(\n  \"input\",\n  \"input\",\n)(undefined, (props) => {\n  const { getInputProps } = useEditableContext()\n\n  return { ...getInputProps(props) }\n})\n\nexport interface EditableTextareaProps extends HTMLStyledProps<\"textarea\"> {}\n\nexport const EditableTextarea = withContext<\"textarea\", EditableTextareaProps>(\n  \"textarea\",\n  \"textarea\",\n)(undefined, (props) => {\n  const { getTextareaProps } = useEditableContext()\n\n  return { ...getTextareaProps(props) }\n})\n\nexport interface EditableControlProps extends HTMLStyledProps {}\n\nexport const EditableControl = withContext<\"div\", EditableControlProps>(\n  \"div\",\n  \"control\",\n)(undefined, (props) => {\n  const { getControlProps } = useEditableContext()\n\n  return { ...getControlProps(props) }\n})\n\nexport interface EditableEditTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableEditTrigger = withContext<\n  \"button\",\n  EditableEditTriggerProps\n>(\"button\", { name: \"EditTrigger\", slot: [\"trigger\", \"edit\"] })(\n  undefined,\n  (props) => {\n    const { getEditProps } = useEditableContext()\n\n    return { asChild: true, ...getEditProps(props) }\n  },\n)\n\nexport interface EditableCancelTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableCancelTrigger = withContext<\n  \"button\",\n  EditableCancelTriggerProps\n>(\"button\", { name: \"CancelTrigger\", slot: [\"trigger\", \"cancel\"] })(\n  undefined,\n  (props) => {\n    const { getCancelProps } = useEditableContext()\n\n    return { asChild: true, ...getCancelProps(props) }\n  },\n)\n\nexport interface EditableSubmitTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableSubmitTrigger = withContext<\n  \"button\",\n  EditableSubmitTriggerProps\n>(\"button\", { name: \"SubmitTrigger\", slot: [\"trigger\", \"submit\"] })(\n  undefined,\n  (props) => {\n    const { getSubmitProps } = useEditableContext()\n\n    return { asChild: true, ...getSubmitProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;AAqCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,YAAY;CAC9D,MAAM,EACJ,SACA,OAAO,QACP,cACA,UACA,QACA,UACA,GAAG,SACD,YAAY,KAAK;CACrB,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,iBAAA,GAAgBA,cAAAA,QAAAA,CAAQ,UAAU;EACtC;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAS,GAAG;EAAK;EACzC,UAAA,oBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;GAAG,GAAI;GACjC,UAAA;EACS,CAAA;CACG,CAAA;AAErB,CACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,QACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,gBAAgB,YAC3B,SACA,OACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,kBAAkB,mBAAmB;CAE7C,OAAO,EAAE,GAAG,cAAc,KAAK,EAAE;AACnC,CAAC;AAID,MAAa,mBAAmB,YAC9B,YACA,UACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,qBAAqB,mBAAmB;CAEhD,OAAO,EAAE,GAAG,iBAAiB,KAAK,EAAE;AACtC,CAAC;AAID,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,sBAAsB,YAGjC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CAAC,CAAC,CAC7D,KAAA,IACC,UAAU;CACT,MAAM,EAAE,iBAAiB,mBAAmB;CAE5C,OAAO;EAAE,SAAS;EAAM,GAAG,aAAa,KAAK;CAAE;AACjD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF"}

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  isActiveElement,\n  isShadowRoot,\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 rootNode = ev.currentTarget.getRootNode() as Document | ShadowRoot\n      const relatedTarget = (\n        isShadowRoot(rootNode)\n          ? (rootNode.activeElement ?? ev.relatedTarget)\n          : (ev.relatedTarget ?? rootNode.activeElement)\n      ) 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 || !inputRef.current) return\n    if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n      inputRef.current.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":";;;;;;;;;;AA0BA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B,EAC3E,MAAM,kBACR,CAAC;AA2DD,MAAa,eAAe,QAA0B,CAAC,MAAM;CAC3D,MAAM,EACJ,OAAO,EACL,IACA,cACA,UACA,aACA,mBAAmB,MACnB,UACA,UACA,mBAAmB,MACnB,mBACA,eAAe,MACf,OAAO,WACP,UAAU,cACV,UAAU,cACV,QAAQ,YACR,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,YAAY,eAAe,UAAU;CAC3C,MAAM,CAAC,SAAS,cAAc,SAC5B,CAAC,CAAC,qBAAqB,CAAC,QAC1B;CACA,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C,cAAc,gBAAgB;EAC9B,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,cAAc,CAAC,WAAW,CAAC;CACjC,MAAM,aAAa,MAAM,WAAW;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,WAAW,OAA+C,IAAI;CACpE,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,YAAY,OAA0B,IAAI;CAEhD,MAAM,WAAW,aACd,OACC,SAAS,GAAG,cAAc,KAAK,GACjC,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,kBAAkB,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;CAExE,MAAM,SAAS,kBAAkB;EAC/B,IAAI,aAAa,WAAW,IAAI;CAClC,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,WAAW,kBAAkB;EACjC,WAAW,KAAK;EAChB,SAAS,SAAS;EAClB,eAAe,SAAS;CAC1B,GAAG;EAAC;EAAW;EAAc;CAAQ,CAAC;CAEtC,MAAM,WAAW,kBAAkB;EACjC,WAAW,KAAK;EAChB,aAAa,KAAK;EAClB,eAAe,KAAK;CACtB,GAAG,CAAC,cAAc,KAAK,CAAC;CAExB,MAAM,YAAY,aACf,OAAsB;EACrB,IAAI,GAAG,QAAQ,YAAY,GAAG,QAAQ,SAAS;EAE/C,IAAI,GAAG,QAAQ,UAAU;GACvB,GAAG,eAAe;GAClB,SAAS;EACX,OAAO;GACL,MAAM,EAAE,SAAS,aAAa;GAE9B,IAAI,CAAC,YAAY,CAAC,SAAS;IACzB,GAAG,eAAe;IAClB,SAAS;GACX;EACF;CACF,GACA,CAAC,UAAU,QAAQ,CACrB;CAEA,MAAM,yBAAyB,aAC5B,OAAsB;EACrB,IAAI,GAAG,QAAQ,UAAU;EAEzB,GAAG,eAAe;EAClB,SAAS;CACX,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,SAAS,aACZ,OAAmB;EAClB,IAAI,CAAC,SAAS;EAEd,MAAM,WAAW,GAAG,cAAc,YAAY;EAC9C,MAAM,iBAAA,GAAA,cAAA,aAAA,CACS,QAAQ,IAChB,SAAS,iBAAiB,GAAG,gBAC7B,GAAG,iBAAiB,SAAS;EAEpC,MAAM,kBAAA,GAAA,cAAA,SAAA,CAA0B,UAAU,SAAS,aAAa;EAChE,MAAM,kBAAA,GAAA,cAAA,SAAA,CAA0B,UAAU,SAAS,aAAa;EAGhE,IAAI,EAFc,CAAC,kBAAkB,CAAC,iBAEtB;EAEhB,IAAI,cAAc,SAAS;OACtB,SAAS;CAChB,GACA;EAAC;EAAS;EAAc;EAAU;CAAQ,CAC5C;CAEA,sBAAsB;EACpB,KAAK;EACL,UAAU,CAAC,WAAW,SAAS;EAC/B,SAAS;CACX,CAAC;CAED,0BAA0B;EACxB,IAAI,CAAC,SAAS;EAEd,SAAS,SAAS,MAAM;EAExB,IAAI,kBAAkB,SAAS,SAAS,OAAO;CACjD,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,IAAI,CAAC,SAAS;GACZ,QAAQ,SAAS,MAAM;GAEvB;EACF;EAEA,SAAS,SAAS,MAAM;EAExB,IAAI,kBAAkB,SAAS,SAAS,OAAO;EAE/C,UAAU;CACZ,GAAG;EAAC;EAAS;EAAW;CAAgB,CAAC;CAEzC,gBAAgB;EACd,IAAI,WAAW,CAAC,SAAS,SAAS;EAClC,KAAA,GAAA,cAAA,gBAAA,CAAoB,SAAS,SAAS,SAAS,QAAQ,YAAY,CAAC,GAClE,SAAS,QAAQ,KAAK;CAC1B,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,eAA2B,aAC9B,WAAW;EACV,GAAG;EACH,GAAG;EACH,GAAG;CACL,IACA,CAAC,MAAM,SAAS,CAClB;CAEA,MAAM,kBAAsC,aACzC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;EAC3B,GAAG;EACH,GAAG;EACH,KAAK,UAAU,YAAY,GAAG;EAC9B,UAAU,aAAa,cAAc;EACrC,QAAQ;EACR,UAAU,eAAe,mBAAmB,IAAI,KAAA;EAChD,UAAA,GAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,QAAQ,iBAAiB;CAC9D,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,gBAAqC,aACxC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;EAC3B,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA,KAAK,UAAU,UAAU,GAAG;EAC5B;EACA,QAAQ,CAAC;EACT;EACA;EACA;EACA;EACA,SAAA,GAAA,cAAA,WAAA,CAAmB,WAAW,QAAQ,MAAM,QAAQ,MAAM;EAC1D,WAAA,GAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;EAC7C,UAAA,GAAA,cAAA,WAAA,CAAoB,WAAW,SAAS,MAAM,SAAS,iBAAiB;EACxE,YAAA,GAAA,cAAA,WAAA,CAAsB,MAAM,WAAW,SAAS;CAClD,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,mBAA2C,aAC9C,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;EAC3B,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA,KAAK,UAAU,UAAU,GAAG;EAC5B;EACA,QAAQ,CAAC;EACT;EACA;EACA;EACA;EACA,SAAA,GAAA,cAAA,WAAA,CAAmB,WAAW,QAAQ,MAAM,QAAQ,MAAM;EAC1D,WAAA,GAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;EAC7C,UAAA,GAAA,cAAA,WAAA,CAAoB,WAAW,SAAS,MAAM,SAAS,iBAAiB;EACxE,YAAA,GAAA,cAAA,WAAA,CAAsB,MAAM,WAAW,sBAAsB;CAC/D,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,kBAA8B,aACjC,WAAW;EACV,GAAG;EACH,MAAM;EACN,GAAG;CACL,IACA,CAAC,SAAS,CACZ;CAEA,MAAM,eAAqC,aACxC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;EAC3B,GAAG;EACH,GAAG;EACH,KAAK,UAAU,SAAS,GAAG;EAC3B;EACA,QAAQ;EACR,UAAA,GAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,MAAM;CAC3C,IACA;EAAC;EAAW;EAAU;EAAS;CAAM,CACvC;CAEA,MAAM,iBAAuC,aAC1C,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;EAC3B,GAAG;EACH,GAAG;EACH,KAAK,UAAU,WAAW,GAAG;EAC7B;EACA,QAAQ,CAAC;EACT,UAAA,GAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,QAAQ;CAC7C,IACA;EAAC;EAAW;EAAU;EAAS;CAAQ,CACzC;CAcA,OAAO;EACL;EACA;EACA,gBAf2C,aAC1C,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;GAC3B,GAAG;GACH,GAAG;GACH,KAAK,UAAU,WAAW,GAAG;GAC7B;GACA,QAAQ,CAAC;GACT,UAAA,GAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,QAAQ;EAC7C,IACA;GAAC;GAAW;GAAU;GAAS;EAAQ,CAM1B;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-editable.js","names":["createContext","isShadowRoot","contains","isActiveElement","handlerAll"],"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  isActiveElement,\n  isShadowRoot,\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 rootNode = ev.currentTarget.getRootNode() as Document | ShadowRoot\n      const relatedTarget = (\n        isShadowRoot(rootNode)\n          ? (rootNode.activeElement ?? ev.relatedTarget)\n          : (ev.relatedTarget ?? rootNode.activeElement)\n      ) 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 || !inputRef.current) return\n    if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n      inputRef.current.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 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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"}
+{"version":3,"file":"field.js","names":["createContext","isObject","dataAttr"],"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/field/use-field-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../src/components/field/use-field-props.ts"],"sourcesContent":["\"use client\"\n\nimport type { FocusEventHandler } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"./field\"\nimport { useMemo, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isObject,\n  useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { useFieldContext } from \"./field\"\n\nexport interface UseFieldProps<Y extends HTMLElement> extends FieldProps {\n  id?: string\n  name?: string\n  notSupportReadOnly?: boolean\n  onBlur?: FocusEventHandler<Y>\n  onFocus?: FocusEventHandler<Y>\n}\n\nexport const useFieldProps = <Y extends HTMLElement, M extends Dict>(\n  {\n    id,\n    name,\n    \"aria-describedby\": ariaDescribedby,\n    disabled,\n    invalid,\n    notSupportReadOnly,\n    readOnly,\n    required,\n    onBlur,\n    onFocus,\n    ...rest\n  }: M & UseFieldProps<Y> = {} as M & UseFieldProps<Y>,\n) => {\n  const { getDocument } = useEnvironment()\n  const formContext = useFormContext()\n  const fieldsetContext = useFieldsetContext()\n  const fieldContext = useFieldContext()\n  const [errorMessageId, setErrorMessageId] = useState<string | undefined>(\n    undefined,\n  )\n  const [helperMessageId, setHelperMessageId] = useState<string | undefined>(\n    undefined,\n  )\n\n  id ??= fieldContext?.id\n  disabled ??= fieldContext?.disabled ?? fieldsetContext?.disabled\n  required ??= fieldContext?.required ?? fieldsetContext?.required\n  readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly\n  invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid\n\n  if (name) {\n    disabled ??= isObject(formContext?.disabled)\n      ? formContext.disabled[name]\n      : formContext?.disabled\n    required ??= isObject(formContext?.required)\n      ? formContext.required[name]\n      : formContext?.required\n    readOnly ??= isObject(formContext?.readOnly)\n      ? formContext.readOnly[name]\n      : formContext?.readOnly\n    invalid ??= isObject(formContext?.invalid)\n      ? formContext.invalid[name]\n      : formContext?.invalid\n  }\n\n  useSafeLayoutEffect(() => {\n    const hasErrorMessage =\n      !!fieldContext?.errorMessageId &&\n      !!getDocument()?.getElementById(fieldContext.errorMessageId)\n    const hasHelperMessage =\n      !!fieldContext?.helperMessageId &&\n      !!getDocument()?.getElementById(fieldContext.helperMessageId)\n\n    setErrorMessageId(\n      invalid && hasErrorMessage ? fieldContext.errorMessageId : undefined,\n    )\n    setHelperMessageId(\n      (!fieldContext?.replace || !invalid) && hasHelperMessage\n        ? fieldContext.helperMessageId\n        : undefined,\n    )\n  }, [\n    fieldContext?.errorMessageId,\n    fieldContext?.helperMessageId,\n    fieldContext?.replace,\n    invalid,\n  ])\n\n  const props = useMemo(\n    () => ({\n      id,\n      name,\n      disabled,\n      readOnly,\n      required,\n      ...rest,\n    }),\n    [id, name, disabled, readOnly, required, rest],\n  )\n  const dataProps = useMemo(\n    () => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-invalid\": dataAttr(invalid),\n      \"data-readonly\": dataAttr(readOnly),\n      \"data-required\": dataAttr(required),\n    }),\n    [disabled, invalid, readOnly, required],\n  )\n  const ariaProps = useMemo(\n    () => ({\n      \"aria-describedby\":\n        ariaDescribedby ?? cx(errorMessageId, helperMessageId),\n      \"aria-disabled\": ariaAttr(\n        notSupportReadOnly ? readOnly || disabled : disabled,\n      ),\n      \"aria-invalid\": ariaAttr(invalid),\n      \"aria-readonly\": notSupportReadOnly ? undefined : ariaAttr(readOnly),\n      \"aria-required\": ariaAttr(required),\n    }),\n    [\n      errorMessageId,\n      helperMessageId,\n      ariaDescribedby,\n      notSupportReadOnly,\n      readOnly,\n      disabled,\n      invalid,\n      required,\n    ],\n  )\n  const eventProps = useMemo(\n    () => ({\n      onBlur: handlerAll(fieldContext?.onBlur, onBlur),\n      onFocus: handlerAll(fieldContext?.onFocus, onFocus),\n    }),\n    [fieldContext?.onBlur, fieldContext?.onFocus, onBlur, onFocus],\n  )\n\n  return {\n    context: fieldContext,\n    props,\n    ariaProps,\n    dataProps,\n    eventProps,\n  }\n}\n\nexport const resetFieldProps = {\n  disabled: false,\n  invalid: false,\n  readOnly: false,\n  required: false,\n}\n"],"mappings":";;;;;;;;;AA2BA,MAAa,iBACX,EACE,IACA,MACA,oBAAoB,iBACpB,UACA,SACA,oBACA,UACA,UACA,QACA,SACA,GAAG,SACqB,CAAC,MACxB;CACH,MAAM,EAAE,gBAAgB,eAAe;CACvC,MAAM,cAAc,eAAe;CACnC,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,KAAA,CACF;CACA,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,KAAA,CACF;CAEA,OAAO,cAAc;CACrB,aAAa,cAAc,YAAY,iBAAiB;CACxD,aAAa,cAAc,YAAY,iBAAiB;CACxD,aAAa,cAAc,YAAY,iBAAiB;CACxD,YAAY,cAAc,WAAW,iBAAiB;CAEtD,IAAI,MAAM;EACR,cAAA,GAAA,cAAA,SAAA,CAAsB,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,cAAA,GAAA,cAAA,SAAA,CAAsB,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,cAAA,GAAA,cAAA,SAAA,CAAsB,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,aAAA,GAAA,cAAA,SAAA,CAAqB,aAAa,OAAO,IACrC,YAAY,QAAQ,QACpB,aAAa;CACnB;CAEA,0BAA0B;EACxB,MAAM,kBACJ,CAAC,CAAC,cAAc,kBAChB,CAAC,CAAC,YAAY,CAAC,EAAE,eAAe,aAAa,cAAc;EAC7D,MAAM,mBACJ,CAAC,CAAC,cAAc,mBAChB,CAAC,CAAC,YAAY,CAAC,EAAE,eAAe,aAAa,eAAe;EAE9D,kBACE,WAAW,kBAAkB,aAAa,iBAAiB,KAAA,CAC7D;EACA,oBACG,CAAC,cAAc,WAAW,CAAC,YAAY,mBACpC,aAAa,kBACb,KAAA,CACN;CACF,GAAG;EACD,cAAc;EACd,cAAc;EACd,cAAc;EACd;CACF,CAAC;CAED,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAI;EAAM;EAAU;EAAU;EAAU;CAAI,CAC/C;CACA,MAAM,YAAY,eACT;EACL,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;EAChC,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;CACpC,IACA;EAAC;EAAU;EAAS;EAAU;CAAQ,CACxC;CA+BA,OAAO;EACL,SAAS;EACT;EACA,WAjCgB,eACT;GACL,oBACE,oBAAA,GAAA,cAAA,GAAA,CAAsB,gBAAgB,eAAe;GACvD,kBAAA,GAAA,cAAA,SAAA,CACE,qBAAqB,YAAY,WAAW,QAC9C;GACA,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;GAChC,iBAAiB,qBAAqB,KAAA,KAAA,GAAA,cAAA,SAAA,CAAqB,QAAQ;GACnE,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EACpC,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAaQ;EACR;EACA,YAbiB,eACV;GACL,SAAA,GAAA,cAAA,WAAA,CAAmB,cAAc,QAAQ,MAAM;GAC/C,UAAA,GAAA,cAAA,WAAA,CAAoB,cAAc,SAAS,OAAO;EACpD,IACA;GAAC,cAAc;GAAQ,cAAc;GAAS;GAAQ;EAAO,CAQpD;CACX;AACF;AAEA,MAAa,kBAAkB;CAC7B,UAAU;CACV,SAAS;CACT,UAAU;CACV,UAAU;AACZ"}
+{"version":3,"file":"use-field-props.js","names":["isObject","dataAttr","cx","ariaAttr","handlerAll"],"sources":["../../../../src/components/field/use-field-props.ts"],"sourcesContent":["\"use client\"\n\nimport type { FocusEventHandler } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"./field\"\nimport { useMemo, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isObject,\n  useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { useFieldContext } from \"./field\"\n\nexport interface UseFieldProps<Y extends HTMLElement> extends FieldProps {\n  id?: string\n  name?: string\n  notSupportReadOnly?: boolean\n  onBlur?: FocusEventHandler<Y>\n  onFocus?: FocusEventHandler<Y>\n}\n\nexport const useFieldProps = <Y extends HTMLElement, M extends Dict>(\n  {\n    id,\n    name,\n    \"aria-describedby\": ariaDescribedby,\n    disabled,\n    invalid,\n    notSupportReadOnly,\n    readOnly,\n    required,\n    onBlur,\n    onFocus,\n    ...rest\n  }: M & UseFieldProps<Y> = {} as M & UseFieldProps<Y>,\n) => {\n  const { getDocument } = useEnvironment()\n  const formContext = useFormContext()\n  const fieldsetContext = useFieldsetContext()\n  const fieldContext = useFieldContext()\n  const [errorMessageId, setErrorMessageId] = useState<string | undefined>(\n    undefined,\n  )\n  const [helperMessageId, setHelperMessageId] = useState<string | undefined>(\n    undefined,\n  )\n\n  id ??= fieldContext?.id\n  disabled ??= fieldContext?.disabled ?? fieldsetContext?.disabled\n  required ??= fieldContext?.required ?? fieldsetContext?.required\n  readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly\n  invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid\n\n  if (name) {\n    disabled ??= isObject(formContext?.disabled)\n      ? formContext.disabled[name]\n      : formContext?.disabled\n    required ??= isObject(formContext?.required)\n      ? formContext.required[name]\n      : formContext?.required\n    readOnly ??= isObject(formContext?.readOnly)\n      ? formContext.readOnly[name]\n      : formContext?.readOnly\n    invalid ??= isObject(formContext?.invalid)\n      ? formContext.invalid[name]\n      : formContext?.invalid\n  }\n\n  useSafeLayoutEffect(() => {\n    const hasErrorMessage =\n      !!fieldContext?.errorMessageId &&\n      !!getDocument()?.getElementById(fieldContext.errorMessageId)\n    const hasHelperMessage =\n      !!fieldContext?.helperMessageId &&\n      !!getDocument()?.getElementById(fieldContext.helperMessageId)\n\n    setErrorMessageId(\n      invalid && hasErrorMessage ? fieldContext.errorMessageId : undefined,\n    )\n    setHelperMessageId(\n      (!fieldContext?.replace || !invalid) && hasHelperMessage\n        ? fieldContext.helperMessageId\n        : undefined,\n    )\n  }, [\n    fieldContext?.errorMessageId,\n    fieldContext?.helperMessageId,\n    fieldContext?.replace,\n    invalid,\n  ])\n\n  const props = useMemo(\n    () => ({\n      id,\n      name,\n      disabled,\n      readOnly,\n      required,\n      ...rest,\n    }),\n    [id, name, disabled, readOnly, required, rest],\n  )\n  const dataProps = useMemo(\n    () => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-invalid\": dataAttr(invalid),\n      \"data-readonly\": dataAttr(readOnly),\n      \"data-required\": dataAttr(required),\n    }),\n    [disabled, invalid, readOnly, required],\n  )\n  const ariaProps = useMemo(\n    () => ({\n      \"aria-describedby\":\n        ariaDescribedby ?? cx(errorMessageId, helperMessageId),\n      \"aria-disabled\": ariaAttr(\n        notSupportReadOnly ? readOnly || disabled : disabled,\n      ),\n      \"aria-invalid\": ariaAttr(invalid),\n      \"aria-readonly\": notSupportReadOnly ? undefined : ariaAttr(readOnly),\n      \"aria-required\": ariaAttr(required),\n    }),\n    [\n      errorMessageId,\n      helperMessageId,\n      ariaDescribedby,\n      notSupportReadOnly,\n      readOnly,\n      disabled,\n      invalid,\n      required,\n    ],\n  )\n  const eventProps = useMemo(\n    () => ({\n      onBlur: handlerAll(fieldContext?.onBlur, onBlur),\n      onFocus: handlerAll(fieldContext?.onFocus, onFocus),\n    }),\n    [fieldContext?.onBlur, fieldContext?.onFocus, onBlur, onFocus],\n  )\n\n  return {\n    context: fieldContext,\n    props,\n    ariaProps,\n    dataProps,\n    eventProps,\n  }\n}\n\nexport const resetFieldProps = {\n  disabled: false,\n  invalid: false,\n  readOnly: false,\n  required: false,\n}\n"],"mappings":";;;;;;;;;AA2BA,MAAa,iBACX,EACE,IACA,MACA,oBAAoB,iBACpB,UACA,SACA,oBACA,UACA,UACA,QACA,SACA,GAAG,SACqB,CAAC,MACxB;CACH,MAAM,EAAE,gBAAgB,eAAe;CACvC,MAAM,cAAc,eAAe;CACnC,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,KAAA,CACF;CACA,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,KAAA,CACF;CAEA,OAAO,cAAc;CACrB,aAAa,cAAc,YAAY,iBAAiB;CACxD,aAAa,cAAc,YAAY,iBAAiB;CACxD,aAAa,cAAc,YAAY,iBAAiB;CACxD,YAAY,cAAc,WAAW,iBAAiB;CAEtD,IAAI,MAAM;EACR,cAAA,GAAaA,cAAAA,SAAAA,CAAS,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,cAAA,GAAaA,cAAAA,SAAAA,CAAS,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,cAAA,GAAaA,cAAAA,SAAAA,CAAS,aAAa,QAAQ,IACvC,YAAY,SAAS,QACrB,aAAa;EACjB,aAAA,GAAYA,cAAAA,SAAAA,CAAS,aAAa,OAAO,IACrC,YAAY,QAAQ,QACpB,aAAa;CACnB;CAEA,0BAA0B;EACxB,MAAM,kBACJ,CAAC,CAAC,cAAc,kBAChB,CAAC,CAAC,YAAY,CAAC,EAAE,eAAe,aAAa,cAAc;EAC7D,MAAM,mBACJ,CAAC,CAAC,cAAc,mBAChB,CAAC,CAAC,YAAY,CAAC,EAAE,eAAe,aAAa,eAAe;EAE9D,kBACE,WAAW,kBAAkB,aAAa,iBAAiB,KAAA,CAC7D;EACA,oBACG,CAAC,cAAc,WAAW,CAAC,YAAY,mBACpC,aAAa,kBACb,KAAA,CACN;CACF,GAAG;EACD,cAAc;EACd,cAAc;EACd,cAAc;EACd;CACF,CAAC;CAED,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAI;EAAM;EAAU;EAAU;EAAU;CAAI,CAC/C;CACA,MAAM,YAAY,eACT;EACL,kBAAA,GAAiBC,cAAAA,SAAAA,CAAS,QAAQ;EAClC,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO;EAChC,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;EAClC,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;CACpC,IACA;EAAC;EAAU;EAAS;EAAU;CAAQ,CACxC;CA+BA,OAAO;EACL,SAAS;EACT;EACA,WAjCgB,eACT;GACL,oBACE,oBAAA,GAAmBC,cAAAA,GAAAA,CAAG,gBAAgB,eAAe;GACvD,kBAAA,GAAiBC,cAAAA,SAAAA,CACf,qBAAqB,YAAY,WAAW,QAC9C;GACA,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO;GAChC,iBAAiB,qBAAqB,KAAA,KAAA,GAAYA,cAAAA,SAAAA,CAAS,QAAQ;GACnE,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;EACpC,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAaQ;EACR;EACA,YAbiB,eACV;GACL,SAAA,GAAQC,cAAAA,WAAAA,CAAW,cAAc,QAAQ,MAAM;GAC/C,UAAA,GAASA,cAAAA,WAAAA,CAAW,cAAc,SAAS,OAAO;EACpD,IACA;GAAC,cAAc;GAAQ,cAAc;GAAS;GAAQ;EAAO,CAQpD;CACX;AACF;AAEA,MAAa,kBAAkB;CAC7B,UAAU;CACV,SAAS;CACT,UAAU;CACV,UAAU;AACZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"fieldset.js","names":["createContext"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFormContext } from \"../form\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n  FieldsetRootProps,\n  \"disabled\" | \"invalid\" | \"readOnly\" | \"required\"\n> {\n  id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n  name: \"FieldsetContext\",\n  strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n  extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n  /**\n   * The fieldset error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The fieldset helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The fieldset legend to use.\n   */\n  legend?: ReactNode\n  /**\n   * Props the content component.\n   */\n  contentProps?: FieldsetContentProps\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: FieldsetErrorMessageProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FieldsetHeaderProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: FieldsetHelperMessageProps\n  /**\n   * Props the legend component.\n   */\n  legendProps?: FieldsetLegendProps\n}\n\nconst {\n  PropsContext: FieldsetPropsContext,\n  usePropsContext: useFieldsetPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n  \"fieldset\",\n  fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/**\n * `Fieldset` is a component used to group multiple controls.\n *\n * @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n  ({\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    legend,\n    readOnly,\n    required,\n    contentProps,\n    errorMessageProps,\n    headerProps,\n    helperMessageProps,\n    legendProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const [\n      omittedChildren,\n      customLegend,\n      customHeader,\n      customContent,\n      customHelperMessage,\n      customErrorMessage,\n    ] = useSplitChildren(\n      children,\n      FieldsetLegend,\n      FieldsetHeader,\n      FieldsetContent,\n      FieldsetHelperMessage,\n      FieldsetErrorMessage,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        disabled,\n        invalid,\n        readOnly,\n        required,\n      }),\n      [id, disabled, invalid, readOnly, required],\n    )\n\n    return (\n      <FieldsetContext value={context}>\n        <styled.fieldset aria-labelledby={cx(id, ariaLabelledBy)} {...rest}>\n          {customHeader || (\n            <FieldsetHeader {...headerProps}>\n              {customLegend ||\n                (legend ? (\n                  <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n                ) : null)}\n\n              {customHelperMessage ||\n                (helperMessage ? (\n                  <FieldsetHelperMessage {...helperMessageProps}>\n                    {helperMessage}\n                  </FieldsetHelperMessage>\n                ) : null)}\n            </FieldsetHeader>\n          )}\n\n          {customContent || (\n            <FieldsetContent {...contentProps}>\n              {omittedChildren}\n            </FieldsetContent>\n          )}\n\n          {customErrorMessage ||\n            (errorMessage ? (\n              <FieldsetErrorMessage {...errorMessageProps}>\n                {errorMessage}\n              </FieldsetErrorMessage>\n            ) : null)}\n        </styled.fieldset>\n      </FieldsetContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const { size, variant } = useFormContext() ?? {}\n\n  return { size, variant, ...props }\n})\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n  \"legend\",\n  \"legend\",\n)(undefined, (props) => {\n  const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n  return {\n    id,\n    \"data-disabled\": dataAttr(disabled),\n    \"data-invalid\": dataAttr(invalid),\n    ...props,\n  }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n  \"div\",\n  \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n  \"div\",\n  \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n  \"span\",\n  FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n  const { id } = useFieldsetContext() ?? {}\n\n  return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n  \"span\",\n  FieldsetErrorMessageProps\n>((props) => {\n  const { invalid } = useFieldsetContext() ?? {}\n\n  return (\n    <styled.span\n      aria-live={invalid ? \"polite\" : undefined}\n      hidden={!invalid}\n      {...props}\n    />\n  )\n}, \"errorMessage\")()\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B;CAC3E,MAAM;CACN,QAAQ;AACV,CAAC;AAwCD,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EACC,IACA,mBAAmB,gBACnB,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,OAAO,MAAM;CACnB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACE,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,oBACF;CAEA,OAAO;CAEP,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAI;EAAU;EAAS;EAAU;CAAQ,CAC5C;CAEA,OACE,oBAAC,iBAAD;EAAiB,OAAO;EACtB,UAAA,qBAAC,OAAO,UAAR;GAAiB,oBAAA,GAAA,cAAA,GAAA,CAAoB,IAAI,cAAc;GAAG,GAAI;GAA9D,UAAA;IACG,gBACC,qBAAC,gBAAD;KAAgB,GAAI;KAApB,UAAA,CACG,iBACE,SACC,oBAAC,gBAAD;MAAgB,GAAI;MAAc,UAAA;KAAuB,CAAA,IACvD,OAEL,wBACE,gBACC,oBAAC,uBAAD;MAAuB,GAAI;MACxB,UAAA;KACoB,CAAA,IACrB,KACQ;;IAGjB,iBACC,oBAAC,iBAAD;KAAiB,GAAI;KAClB,UAAA;IACc,CAAA;IAGlB,uBACE,eACC,oBAAC,sBAAD;KAAsB,GAAI;KACvB,UAAA;IACmB,CAAA,IACpB;GACS;;CACF,CAAA;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,EAAE,MAAM,YAAY,eAAe,KAAK,CAAC;CAE/C,OAAO;EAAE;EAAM;EAAS,GAAG;CAAM;AACnC,CAAC;AAID,MAAa,iBAAiB,YAC5B,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,IAAI,UAAU,YAAY,mBAAmB,KAAK,CAAC;CAE3D,OAAO;EACL;EACA,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;EAChC,GAAG;CACL;AACF,CAAC;AAID,MAAa,iBAAiB,YAC5B,OACA,QACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,YAGnC,QAAQ,eAAe,CAAC,CAAC,KAAA,IAAY,UAAU;CAC/C,MAAM,EAAE,OAAO,mBAAmB,KAAK,CAAC;CAExC,OAAO;EAAE,oBAAoB;EAAI,GAAG;CAAM;AAC5C,CAAC;AAID,MAAa,uBAAuB,aAGjC,UAAU;CACX,MAAM,EAAE,YAAY,mBAAmB,KAAK,CAAC;CAE7C,OACE,oBAAC,OAAO,MAAR;EACE,aAAW,UAAU,WAAW,KAAA;EAChC,QAAQ,CAAC;EACT,GAAI;CACL,CAAA;AAEL,GAAG,cAAc,CAAC,CAAC"}
+{"version":3,"file":"fieldset.js","names":["createContext","cx","dataAttr"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFormContext } from \"../form\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n  FieldsetRootProps,\n  \"disabled\" | \"invalid\" | \"readOnly\" | \"required\"\n> {\n  id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n  name: \"FieldsetContext\",\n  strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n  extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n  /**\n   * The fieldset error message to use.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The fieldset helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The fieldset legend to use.\n   */\n  legend?: ReactNode\n  /**\n   * Props the content component.\n   */\n  contentProps?: FieldsetContentProps\n  /**\n   * Props the error message component.\n   */\n  errorMessageProps?: FieldsetErrorMessageProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FieldsetHeaderProps\n  /**\n   * Props the helper message component.\n   */\n  helperMessageProps?: FieldsetHelperMessageProps\n  /**\n   * Props the legend component.\n   */\n  legendProps?: FieldsetLegendProps\n}\n\nconst {\n  PropsContext: FieldsetPropsContext,\n  usePropsContext: useFieldsetPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n  \"fieldset\",\n  fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/**\n * `Fieldset` is a component used to group multiple controls.\n *\n * @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n  ({\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    legend,\n    readOnly,\n    required,\n    contentProps,\n    errorMessageProps,\n    headerProps,\n    helperMessageProps,\n    legendProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const [\n      omittedChildren,\n      customLegend,\n      customHeader,\n      customContent,\n      customHelperMessage,\n      customErrorMessage,\n    ] = useSplitChildren(\n      children,\n      FieldsetLegend,\n      FieldsetHeader,\n      FieldsetContent,\n      FieldsetHelperMessage,\n      FieldsetErrorMessage,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        disabled,\n        invalid,\n        readOnly,\n        required,\n      }),\n      [id, disabled, invalid, readOnly, required],\n    )\n\n    return (\n      <FieldsetContext value={context}>\n        <styled.fieldset aria-labelledby={cx(id, ariaLabelledBy)} {...rest}>\n          {customHeader || (\n            <FieldsetHeader {...headerProps}>\n              {customLegend ||\n                (legend ? (\n                  <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n                ) : null)}\n\n              {customHelperMessage ||\n                (helperMessage ? (\n                  <FieldsetHelperMessage {...helperMessageProps}>\n                    {helperMessage}\n                  </FieldsetHelperMessage>\n                ) : null)}\n            </FieldsetHeader>\n          )}\n\n          {customContent || (\n            <FieldsetContent {...contentProps}>\n              {omittedChildren}\n            </FieldsetContent>\n          )}\n\n          {customErrorMessage ||\n            (errorMessage ? (\n              <FieldsetErrorMessage {...errorMessageProps}>\n                {errorMessage}\n              </FieldsetErrorMessage>\n            ) : null)}\n        </styled.fieldset>\n      </FieldsetContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const { size, variant } = useFormContext() ?? {}\n\n  return { size, variant, ...props }\n})\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n  \"legend\",\n  \"legend\",\n)(undefined, (props) => {\n  const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n  return {\n    id,\n    \"data-disabled\": dataAttr(disabled),\n    \"data-invalid\": dataAttr(invalid),\n    ...props,\n  }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n  \"div\",\n  \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n  \"div\",\n  \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n  \"span\",\n  FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n  const { id } = useFieldsetContext() ?? {}\n\n  return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n  \"span\",\n  FieldsetErrorMessageProps\n>((props) => {\n  const { invalid } = useFieldsetContext() ?? {}\n\n  return (\n    <styled.span\n      aria-live={invalid ? \"polite\" : undefined}\n      hidden={!invalid}\n      {...props}\n    />\n  )\n}, \"errorMessage\")()\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B;CAC3E,MAAM;CACN,QAAQ;AACV,CAAC;AAwCD,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EACC,IACA,mBAAmB,gBACnB,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,OAAO,MAAM;CACnB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACE,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,oBACF;CAEA,OAAO;CAEP,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAI;EAAU;EAAS;EAAU;CAAQ,CAC5C;CAEA,OACE,oBAAC,iBAAD;EAAiB,OAAO;EACtB,UAAA,qBAAC,OAAO,UAAR;GAAiB,oBAAA,GAAiBC,cAAAA,GAAAA,CAAG,IAAI,cAAc;GAAG,GAAI;GAA9D,UAAA;IACG,gBACC,qBAAC,gBAAD;KAAgB,GAAI;KAApB,UAAA,CACG,iBACE,SACC,oBAAC,gBAAD;MAAgB,GAAI;MAAc,UAAA;KAAuB,CAAA,IACvD,OAEL,wBACE,gBACC,oBAAC,uBAAD;MAAuB,GAAI;MACxB,UAAA;KACoB,CAAA,IACrB,KACQ;;IAGjB,iBACC,oBAAC,iBAAD;KAAiB,GAAI;KAClB,UAAA;IACc,CAAA;IAGlB,uBACE,eACC,oBAAC,sBAAD;KAAsB,GAAI;KACvB,UAAA;IACmB,CAAA,IACpB;GACS;;CACF,CAAA;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,EAAE,MAAM,YAAY,eAAe,KAAK,CAAC;CAE/C,OAAO;EAAE;EAAM;EAAS,GAAG;CAAM;AACnC,CAAC;AAID,MAAa,iBAAiB,YAC5B,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,IAAI,UAAU,YAAY,mBAAmB,KAAK,CAAC;CAE3D,OAAO;EACL;EACA,kBAAA,GAAiBC,cAAAA,SAAAA,CAAS,QAAQ;EAClC,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO;EAChC,GAAG;CACL;AACF,CAAC;AAID,MAAa,iBAAiB,YAC5B,OACA,QACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,YAGnC,QAAQ,eAAe,CAAC,CAAC,KAAA,IAAY,UAAU;CAC/C,MAAM,EAAE,OAAO,mBAAmB,KAAK,CAAC;CAExC,OAAO;EAAE,oBAAoB;EAAI,GAAG;CAAM;AAC5C,CAAC;AAID,MAAa,uBAAuB,aAGjC,UAAU;CACX,MAAM,EAAE,YAAY,mBAAmB,KAAK,CAAC;CAE7C,OACE,oBAAC,OAAO,MAAR;EACE,aAAW,UAAU,WAAW,KAAA;EAChC,QAAQ,CAAC;EACT,GAAI;CACL,CAAA;AAEL,GAAG,cAAc,CAAC,CAAC"}

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

@@ -55,7 +55,8 @@ const FileInput = withProvider(({ children, component, errorBorderColor, focusBo
 		children: cloneChildren
 	})] });
 }, "root")((props) => {
-	return mergeProps(useInputPropsContext(), props)();
+	const context = useInputPropsContext();
+	return mergeProps(context, props)();
 });
 const FileInputTag = withContext("span", "tag")();
 //#endregion

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)) 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;GACvC,UAAA;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;EACzC,UAAA;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;GACvC,UAAA;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;EACzC,UAAA;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,UAAU,qBAAqB;CAErC,OAAO,WAAW,SAAS,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-file-input.js","names":[],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNull,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" | \"input\" = \"input\"> =\n  FieldProps &\n    Omit<HTMLProps<Y>, \"defaultValue\" | \"onChange\" | \"ref\" | \"value\"> &\n    Pick<HTMLProps<\"input\">, \"accept\" | \"multiple\" | \"ref\"> & {\n      /**\n       * The initial value of the file input.\n       */\n      defaultValue?: File[]\n      /**\n       * Ref to a reset function.\n       */\n      resetRef?: RefObject<(() => void) | null>\n      /**\n       * The value of the file input.\n       */\n      value?: File[]\n      /**\n       * Function to be called when a file change event occurs.\n       */\n      onChange?: (files: File[] | undefined) => void\n    }\n\nexport const useFileInput = <Y extends \"button\" | \"input\" = \"input\">(\n  props: UseFileInputProps<Y>,\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      \"aria-labelledby\": ariaLabelledby,\n      accept,\n      defaultValue,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      resetRef,\n      value,\n      onChange: onChangeProp,\n      onClick: onClickProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseFileInputProps<Y>>({\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [values, setValues] = useControllableState<File[] | undefined>({\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n  })\n  const count = values?.length ?? 0\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    inputRef.current?.click()\n  }, [interactive])\n\n  const onReset = useCallback(() => {\n    if (inputRef.current) inputRef.current.value = \"\"\n\n    setValues(undefined)\n  }, [setValues])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const files = !isNull(ev.currentTarget.files)\n        ? Array.from(ev.currentTarget.files)\n        : undefined\n\n      setValues(files?.length ? files : undefined)\n    },\n    [setValues],\n  )\n\n  const clickableProps = useClickable<HTMLElement, Dict>({\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n    \"aria-labelledby\": cx(ariaLabelledby, labelId),\n    disabled: !interactive,\n    focusable: readOnly && !disabled,\n    focusOnClick: interactive,\n    onClick: handlerAll(onClickProp, onClick),\n  })\n\n  assignRef(resetRef, onReset)\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      id,\n      form,\n      type: \"file\",\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      required,\n      ariaProps,\n      dataProps,\n      id,\n      form,\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      ref,\n      onChange,\n    ],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"data-placeholder\": dataAttr(!count),\n      ...clickableProps,\n      \"aria-labelledby\": cx(ariaLabelledby, clickableProps[\"aria-labelledby\"]),\n      tabIndex: interactive ? 0 : clickableProps.tabIndex,\n      ...props,\n    }),\n    [clickableProps, count, interactive],\n  )\n\n  return {\n    disabled,\n    interactive,\n    readOnly,\n    required,\n    values,\n    clickableProps,\n    getFieldProps,\n    getInputProps,\n  }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;AA0CA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,IACA,KACA,MACA,MACA,mBAAmB,gBACnB,QACA,cACA,UACA,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACE,cAAiD;EACnD,GAAG;EACH,oBAAoB;CACtB,CAAC;CACD,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,QAAQ,aAAa,qBAAyC;EACnE;EACA;EACA,UAAU;CACZ,CAAC;CACD,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,UAAU,kBAAkB;EAChC,IAAI,CAAC,aAAa;EAElB,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,kBAAkB;EAChC,IAAI,SAAS,SAAS,SAAS,QAAQ,QAAQ;EAE/C,UAAU,KAAA,CAAS;CACrB,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,aACd,OAAsC;EACrC,MAAM,QAAQ,EAAA,GAAA,cAAA,OAAA,CAAQ,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC,KAAA;EAEJ,UAAU,OAAO,SAAS,QAAQ,KAAA,CAAS;CAC7C,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAiB,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,oBAAA,GAAA,cAAA,GAAA,CAAsB,gBAAgB,OAAO;EAC7C,UAAU,CAAC;EACX,WAAW,YAAY,CAAC;EACxB,cAAc;EACd,UAAA,GAAA,cAAA,WAAA,CAAoB,aAAa,OAAO;CAC1C,CAAC;CAED,UAAU,UAAU,OAAO;CAE3B,MAAM,gBAAqC,aACxC,QAAQ,CAAC,OAAO;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACH,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;EACvC,WAAA,GAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;CAC/C,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAaA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eAlBgC,aAC/B,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,OAAO;GACzD,qBAAA,GAAA,cAAA,SAAA,CAA6B,CAAC,KAAK;GACnC,GAAG;GACH,oBAAA,GAAA,cAAA,GAAA,CAAsB,gBAAgB,eAAe,kBAAkB;GACvE,UAAU,cAAc,IAAI,eAAe;GAC3C,GAAG;EACL,IACA;GAAC;GAAgB;GAAO;EAAW,CAUvB;EACZ;CACF;AACF"}
+{"version":3,"file":"use-file-input.js","names":["isNull","cx","handlerAll","dataAttr"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNull,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" | \"input\" = \"input\"> =\n  FieldProps &\n    Omit<HTMLProps<Y>, \"defaultValue\" | \"onChange\" | \"ref\" | \"value\"> &\n    Pick<HTMLProps<\"input\">, \"accept\" | \"multiple\" | \"ref\"> & {\n      /**\n       * The initial value of the file input.\n       */\n      defaultValue?: File[]\n      /**\n       * Ref to a reset function.\n       */\n      resetRef?: RefObject<(() => void) | null>\n      /**\n       * The value of the file input.\n       */\n      value?: File[]\n      /**\n       * Function to be called when a file change event occurs.\n       */\n      onChange?: (files: File[] | undefined) => void\n    }\n\nexport const useFileInput = <Y extends \"button\" | \"input\" = \"input\">(\n  props: UseFileInputProps<Y>,\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      \"aria-labelledby\": ariaLabelledby,\n      accept,\n      defaultValue,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      resetRef,\n      value,\n      onChange: onChangeProp,\n      onClick: onClickProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseFileInputProps<Y>>({\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [values, setValues] = useControllableState<File[] | undefined>({\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n  })\n  const count = values?.length ?? 0\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    inputRef.current?.click()\n  }, [interactive])\n\n  const onReset = useCallback(() => {\n    if (inputRef.current) inputRef.current.value = \"\"\n\n    setValues(undefined)\n  }, [setValues])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const files = !isNull(ev.currentTarget.files)\n        ? Array.from(ev.currentTarget.files)\n        : undefined\n\n      setValues(files?.length ? files : undefined)\n    },\n    [setValues],\n  )\n\n  const clickableProps = useClickable<HTMLElement, Dict>({\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n    \"aria-labelledby\": cx(ariaLabelledby, labelId),\n    disabled: !interactive,\n    focusable: readOnly && !disabled,\n    focusOnClick: interactive,\n    onClick: handlerAll(onClickProp, onClick),\n  })\n\n  assignRef(resetRef, onReset)\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      id,\n      form,\n      type: \"file\",\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      required,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      required,\n      ariaProps,\n      dataProps,\n      id,\n      form,\n      name,\n      accept,\n      disabled,\n      multiple,\n      readOnly,\n      ref,\n      onChange,\n    ],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"data-placeholder\": dataAttr(!count),\n      ...clickableProps,\n      \"aria-labelledby\": cx(ariaLabelledby, clickableProps[\"aria-labelledby\"]),\n      tabIndex: interactive ? 0 : clickableProps.tabIndex,\n      ...props,\n    }),\n    [clickableProps, count, interactive],\n  )\n\n  return {\n    disabled,\n    interactive,\n    readOnly,\n    required,\n    values,\n    clickableProps,\n    getFieldProps,\n    getInputProps,\n  }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;AA0CA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,CAAC,GACxB,OAAO,EACL,IACA,KACA,MACA,MACA,mBAAmB,gBACnB,QACA,cACA,UACA,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACE,cAAiD;EACnD,GAAG;EACH,oBAAoB;CACtB,CAAC;CACD,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,QAAQ,aAAa,qBAAyC;EACnE;EACA;EACA,UAAU;CACZ,CAAC;CACD,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,UAAU,kBAAkB;EAChC,IAAI,CAAC,aAAa;EAElB,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,kBAAkB;EAChC,IAAI,SAAS,SAAS,SAAS,QAAQ,QAAQ;EAE/C,UAAU,KAAA,CAAS;CACrB,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,aACd,OAAsC;EACrC,MAAM,QAAQ,EAAA,GAACA,cAAAA,OAAAA,CAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC,KAAA;EAEJ,UAAU,OAAO,SAAS,QAAQ,KAAA,CAAS;CAC7C,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAiB,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,oBAAA,GAAmBC,cAAAA,GAAAA,CAAG,gBAAgB,OAAO;EAC7C,UAAU,CAAC;EACX,WAAW,YAAY,CAAC;EACxB,cAAc;EACd,UAAA,GAASC,cAAAA,WAAAA,CAAW,aAAa,OAAO;CAC1C,CAAC;CAED,UAAU,UAAU,OAAO;CAE3B,MAAM,gBAAqC,aACxC,QAAQ,CAAC,OAAO;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACH,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;EACvC,WAAA,GAAUA,cAAAA,WAAAA,CAAW,MAAM,UAAU,QAAQ;CAC/C,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAaA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eAlBgC,aAC/B,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,OAAO;GACzD,qBAAA,GAAoBC,cAAAA,SAAAA,CAAS,CAAC,KAAK;GACnC,GAAG;GACH,oBAAA,GAAmBF,cAAAA,GAAAA,CAAG,gBAAgB,eAAe,kBAAkB;GACvE,UAAU,cAAc,IAAI,eAAe;GAC3C,GAAG;EACL,IACA;GAAC;GAAgB;GAAO;EAAW,CAUvB;EACZ;CACF;AACF"}

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      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;EATN,UAAA,CAWE,oBAAC,UAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;GAE5C,UAAA;EACO,CAAA,GAEV,oBAAC,QAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;GAE5C,UAAA;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":["dataAttr","handlerAll"],"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,GAAeA,cAAAA,SAAAA,CAAS,QAAQ;EAChC,oBAAkB;EAClB,kBAAA,GAAeA,cAAAA,SAAAA,CAAS,QAAQ;EAChC,cAAY;EACF;EACV,UAAA,GAASC,cAAAA,WAAAA,CAAW,aAAa,OAAO;EACxC,GAAI;EATN,UAAA,CAWE,oBAAC,UAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;GAE5C,UAAA;EACO,CAAA,GAEV,oBAAC,QAAD;GACE,KAAK;GACL,QAAQ;IAAE;IAAa;GAAQ;GAC/B,YAAY;IAAE;IAAO;IAAU,GAAG;GAAW;GAE5C,UAAA;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/float/float.js.map

@@ -1 +1 @@
-{"version":3,"file":"float.js","names":[],"sources":["../../../../src/components/float/float.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatStyle } from \"./float.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { isArray } from \"../../utils\"\nimport { floatStyle } from \"./float.style\"\n\nexport interface FloatProps\n  extends Omit<HTMLStyledProps, \"offset\">, ThemeProps<FloatStyle> {\n  /**\n   * Changes position offset.\n   */\n  offset?: CSSProps[\"inset\"]\n}\n\nconst {\n  PropsContext: FloatPropsContext,\n  usePropsContext: useFloatPropsContext,\n  withContext,\n} = createComponent<FloatProps, FloatStyle>(\"float\", floatStyle)\n\nexport { FloatPropsContext, useFloatPropsContext }\n\n/**\n * `Float` is a component used to anchor an element to the edge of a container.\n *\n * @see https://yamada-ui.com/docs/components/float\n */\nexport const Float = withContext(\"div\")(undefined, ({ offset, ...rest }) => {\n  const [offsetBlock, offsetInline] = isArray(offset)\n    ? offset\n    : [offset, offset]\n\n  return {\n    \"--offset-block\": varAttr(offsetBlock, \"spaces\"),\n    \"--offset-inline\": varAttr(offsetInline, \"spaces\"),\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;AAgBA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,YAAY,KAAK,CAAC,CAAC,KAAA,IAAY,EAAE,QAAQ,GAAG,WAAW;CAC1E,MAAM,CAAC,aAAa,iBAAA,GAAA,cAAA,QAAA,CAAwB,MAAM,IAC9C,SACA,CAAC,QAAQ,MAAM;CAEnB,OAAO;EACL,kBAAkB,QAAQ,aAAa,QAAQ;EAC/C,mBAAmB,QAAQ,cAAc,QAAQ;EACjD,GAAG;CACL;AACF,CAAC"}
+{"version":3,"file":"float.js","names":["isArray"],"sources":["../../../../src/components/float/float.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatStyle } from \"./float.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { isArray } from \"../../utils\"\nimport { floatStyle } from \"./float.style\"\n\nexport interface FloatProps\n  extends Omit<HTMLStyledProps, \"offset\">, ThemeProps<FloatStyle> {\n  /**\n   * Changes position offset.\n   */\n  offset?: CSSProps[\"inset\"]\n}\n\nconst {\n  PropsContext: FloatPropsContext,\n  usePropsContext: useFloatPropsContext,\n  withContext,\n} = createComponent<FloatProps, FloatStyle>(\"float\", floatStyle)\n\nexport { FloatPropsContext, useFloatPropsContext }\n\n/**\n * `Float` is a component used to anchor an element to the edge of a container.\n *\n * @see https://yamada-ui.com/docs/components/float\n */\nexport const Float = withContext(\"div\")(undefined, ({ offset, ...rest }) => {\n  const [offsetBlock, offsetInline] = isArray(offset)\n    ? offset\n    : [offset, offset]\n\n  return {\n    \"--offset-block\": varAttr(offsetBlock, \"spaces\"),\n    \"--offset-inline\": varAttr(offsetInline, \"spaces\"),\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;AAgBA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,YAAY,KAAK,CAAC,CAAC,KAAA,IAAY,EAAE,QAAQ,GAAG,WAAW;CAC1E,MAAM,CAAC,aAAa,iBAAA,GAAgBA,cAAAA,QAAAA,CAAQ,MAAM,IAC9C,SACA,CAAC,QAAQ,MAAM;CAEnB,OAAO;EACL,kBAAkB,QAAQ,aAAa,QAAQ;EAC/C,mBAAmB,QAAQ,cAAc,QAAQ;EACjD,GAAG;CACL;AACF,CAAC"}

package/dist/esm/components/focus-lock/focus-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-lock.js","names":["createContext"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n  createContext,\n  getFocusableElements,\n  interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n  ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const [shards, setShards] = useState<HTMLElement[]>([])\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const registerShard = useCallback((shard: HTMLElement) => {\n    setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n    return () => {\n      setShards((prev) => prev.filter((item) => item !== shard))\n    }\n  }, [])\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <FocusLockShardContext value={registerShard}>\n      <InternalFocusLock\n        autoFocus={autoFocus}\n        crossFrame={lockFocusAcrossFrames}\n        disabled={disabled}\n        persistentFocus={persistentFocus}\n        returnFocus={returnFocus}\n        shards={shards}\n        onActivation={onActivation}\n        onDeactivation={onDeactivation}\n      >\n        {children}\n      </InternalFocusLock>\n    </FocusLockShardContext>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAwB,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,gBAAgB,aAAa,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}
+{"version":3,"file":"focus-lock.js","names":["createContext","interopDefault","getFocusableElements"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n  createContext,\n  getFocusableElements,\n  interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n  ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const [shards, setShards] = useState<HTMLElement[]>([])\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const registerShard = useCallback((shard: HTMLElement) => {\n    setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n    return () => {\n      setShards((prev) => prev.filter((item) => item !== shard))\n    }\n  }, [])\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <FocusLockShardContext value={registerShard}>\n      <InternalFocusLock\n        autoFocus={autoFocus}\n        crossFrame={lockFocusAcrossFrames}\n        disabled={disabled}\n        persistentFocus={persistentFocus}\n        returnFocus={returnFocus}\n        shards={shards}\n        onActivation={onActivation}\n        onDeactivation={onDeactivation}\n      >\n        {children}\n      </InternalFocusLock>\n    </FocusLockShardContext>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAoBC,cAAAA,eAAAA,CAAe,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAwB,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,gBAAgB,aAAa,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACFC;QAAAA,GAAAA,cAAAA,qBAAAA,CAAqB,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"for.js","names":[],"sources":["../../../../src/components/for/for.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport { isArray } from \"../../utils\"\n\nexport interface ForProps<Y> {\n  /**\n   * The array to iterate over.\n   */\n  each: readonly Y[] | undefined | Y[]\n  /**\n   * The render function to render each item in the array.\n   */\n  children: (value: Y, index: number, array: Y[]) => ReactNode\n  /**\n   * The fallback content to render when the array is empty.\n   */\n  fallback?: ReactNode\n  /**\n   * The maximum number of items to include in the render result.\n   */\n  limit?: number\n  /**\n   * The number of items to skip before including them in the render result.\n   * @default 0\n   */\n  offset?: number\n  /**\n   * The boolean value to determine the order of the items in the array.\n   * If `true`, the items will be reversed.\n   * If `sortBy` is provided, inversion is applied to the sorted array.\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * A function that returns a boolean indicating whether the item should be included in the render result.\n   */\n  filter?: (value: Y, index: number, array: Y[]) => boolean\n  /**\n   * The function to sort the items in the array.\n   * If function is provided, the items will be sorted based on the return value.\n   * If `reverse` is `true`, the inversion is applied to the sorted array.\n   */\n  sort?: (a: Y, b: Y) => number\n}\n\n/**\n * `For` is a component used to loop over an array and render a component for each item.\n *\n * @see https://yamada-ui.com/docs/components/for\n */\nexport const For = <Y,>({\n  children,\n  each,\n  fallback,\n  filter,\n  limit,\n  offset = 0,\n  reverse = false,\n  sort,\n}: ForProps<Y>): ReactNode => {\n  if (!each || !isArray(each) || !each.length) return fallback || null\n\n  const cloned = [...each]\n  const filtered = filter ? cloned.filter(filter) : cloned\n  const sorted = sort ? filtered.sort(sort) : filtered\n  const reversed = reverse ? sorted.reverse() : sorted\n  const sliced = reversed.slice(offset, limit ? offset + limit : undefined)\n\n  if (!sliced.length) return fallback || null\n\n  return sliced.map(children)\n}\n"],"mappings":";;;;;;;AAiDA,MAAa,OAAW,EACtB,UACA,MACA,UACA,QACA,OACA,SAAS,GACT,UAAU,OACV,WAC4B;CAC5B,IAAI,CAAC,QAAQ,EAAA,GAAA,cAAA,QAAA,CAAS,IAAI,KAAK,CAAC,KAAK,QAAQ,OAAO,YAAY;CAEhE,MAAM,SAAS,CAAC,GAAG,IAAI;CACvB,MAAM,WAAW,SAAS,OAAO,OAAO,MAAM,IAAI;CAClD,MAAM,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI;CAE5C,MAAM,UADW,UAAU,OAAO,QAAQ,IAAI,OAAA,CACtB,MAAM,QAAQ,QAAQ,SAAS,QAAQ,KAAA,CAAS;CAExE,IAAI,CAAC,OAAO,QAAQ,OAAO,YAAY;CAEvC,OAAO,OAAO,IAAI,QAAQ;AAC5B"}
+{"version":3,"file":"for.js","names":["isArray"],"sources":["../../../../src/components/for/for.tsx"],"sourcesContent":["import type { ReactNode } from \"react\"\nimport { isArray } from \"../../utils\"\n\nexport interface ForProps<Y> {\n  /**\n   * The array to iterate over.\n   */\n  each: readonly Y[] | undefined | Y[]\n  /**\n   * The render function to render each item in the array.\n   */\n  children: (value: Y, index: number, array: Y[]) => ReactNode\n  /**\n   * The fallback content to render when the array is empty.\n   */\n  fallback?: ReactNode\n  /**\n   * The maximum number of items to include in the render result.\n   */\n  limit?: number\n  /**\n   * The number of items to skip before including them in the render result.\n   * @default 0\n   */\n  offset?: number\n  /**\n   * The boolean value to determine the order of the items in the array.\n   * If `true`, the items will be reversed.\n   * If `sortBy` is provided, inversion is applied to the sorted array.\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * A function that returns a boolean indicating whether the item should be included in the render result.\n   */\n  filter?: (value: Y, index: number, array: Y[]) => boolean\n  /**\n   * The function to sort the items in the array.\n   * If function is provided, the items will be sorted based on the return value.\n   * If `reverse` is `true`, the inversion is applied to the sorted array.\n   */\n  sort?: (a: Y, b: Y) => number\n}\n\n/**\n * `For` is a component used to loop over an array and render a component for each item.\n *\n * @see https://yamada-ui.com/docs/components/for\n */\nexport const For = <Y,>({\n  children,\n  each,\n  fallback,\n  filter,\n  limit,\n  offset = 0,\n  reverse = false,\n  sort,\n}: ForProps<Y>): ReactNode => {\n  if (!each || !isArray(each) || !each.length) return fallback || null\n\n  const cloned = [...each]\n  const filtered = filter ? cloned.filter(filter) : cloned\n  const sorted = sort ? filtered.sort(sort) : filtered\n  const reversed = reverse ? sorted.reverse() : sorted\n  const sliced = reversed.slice(offset, limit ? offset + limit : undefined)\n\n  if (!sliced.length) return fallback || null\n\n  return sliced.map(children)\n}\n"],"mappings":";;;;;;;AAiDA,MAAa,OAAW,EACtB,UACA,MACA,UACA,QACA,OACA,SAAS,GACT,UAAU,OACV,WAC4B;CAC5B,IAAI,CAAC,QAAQ,EAAA,GAACA,cAAAA,QAAAA,CAAQ,IAAI,KAAK,CAAC,KAAK,QAAQ,OAAO,YAAY;CAEhE,MAAM,SAAS,CAAC,GAAG,IAAI;CACvB,MAAM,WAAW,SAAS,OAAO,OAAO,MAAM,IAAI;CAClD,MAAM,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI;CAE5C,MAAM,UADW,UAAU,OAAO,QAAQ,IAAI,OAAA,CACtB,MAAM,QAAQ,QAAQ,SAAS,QAAQ,KAAA,CAAS;CAExE,IAAI,CAAC,OAAO,QAAQ,OAAO,YAAY;CAEvC,OAAO,OAAO,IAAI,QAAQ;AAC5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":["createContext"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n  FormRootProps,\n  | \"disabled\"\n  | \"errorMessage\"\n  | \"helperMessage\"\n  | \"invalid\"\n  | \"optionalIndicator\"\n  | \"readOnly\"\n  | \"replace\"\n  | \"required\"\n  | \"requiredIndicator\"\n  | \"size\"\n  | \"variant\"\n> {\n  descriptionId: string\n  id: string\n  titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n  name: \"FormContext\",\n  strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n  extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n  /**\n   * The form description to use.\n   */\n  description?: ReactNode\n  /**\n   * An object managing the disabled state of each field.\n   */\n  disabled?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the error message of each field.\n   */\n  errorMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the helper message of each field.\n   */\n  helperMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the invalid state of each field.\n   */\n  invalid?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The optional indicator to use for each field.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * An object managing the read only state of each field.\n   */\n  readOnly?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the replace state of each field.\n   */\n  replace?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the required state of each field.\n   */\n  required?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The required indicator to use for each field.\n   */\n  requiredIndicator?: ReactNode\n  /**\n   * The submit button to use.\n   */\n  submitButton?: ReactNode\n  /**\n   * The form title to use.\n   */\n  title?: ReactNode\n  /**\n   * Props the body component.\n   */\n  bodyProps?: FormBodyProps\n  /**\n   * Props the description component.\n   */\n  descriptionProps?: FormDescriptionProps\n  /**\n   * Props the footer component.\n   */\n  footerProps?: FormFooterProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FormHeaderProps\n  /**\n   * Props the submit button component.\n   */\n  submitButtonProps?: FormSubmitButtonProps\n  /**\n   * Props the title component.\n   */\n  titleProps?: FormTitleProps\n}\n\nconst {\n  PropsContext: FormPropsContext,\n  usePropsContext: useFormPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n  \"form\",\n  formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n  ({\n    id,\n    size,\n    variant,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    description,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    noValidate = true,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    submitButton,\n    title,\n    bodyProps,\n    descriptionProps,\n    footerProps,\n    headerProps,\n    submitButtonProps,\n    titleProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const titleId = useId()\n    const descriptionId = useId()\n    const [\n      omittedChildren,\n      customHeader,\n      customBody,\n      customFooter,\n      customTitle,\n      customDescription,\n      customSubmitButton,\n    ] = useSplitChildren(\n      children,\n      FormHeader,\n      FormBody,\n      FormFooter,\n      FormTitle,\n      FormDescription,\n      FormSubmitButton,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        size,\n        variant,\n        descriptionId,\n        disabled,\n        errorMessage,\n        helperMessage,\n        invalid,\n        optionalIndicator,\n        readOnly,\n        replace,\n        required,\n        requiredIndicator,\n        titleId,\n      }),\n      [\n        id,\n        titleId,\n        descriptionId,\n        disabled,\n        size,\n        variant,\n        errorMessage,\n        helperMessage,\n        invalid,\n        readOnly,\n        replace,\n        required,\n        optionalIndicator,\n        requiredIndicator,\n      ],\n    )\n\n    return (\n      <FormContext value={context}>\n        <styled.form\n          id={id}\n          aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n          noValidate={noValidate}\n          {...rest}\n        >\n          {customHeader ||\n            (customTitle || title || customDescription || description ? (\n              <FormHeader {...headerProps}>\n                {customTitle ||\n                  (title ? (\n                    <FormTitle {...titleProps}>{title}</FormTitle>\n                  ) : null)}\n\n                {customDescription ||\n                  (description ? (\n                    <FormDescription {...descriptionProps}>\n                      {description}\n                    </FormDescription>\n                  ) : null)}\n              </FormHeader>\n            ) : null)}\n\n          {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n          {customFooter ||\n            (customSubmitButton || submitButton ? (\n              <FormFooter {...footerProps}>\n                {customSubmitButton ||\n                  (submitButton ? (\n                    <FormSubmitButton {...submitButtonProps}>\n                      {submitButton}\n                    </FormSubmitButton>\n                  ) : null)}\n              </FormFooter>\n            ) : null)}\n        </styled.form>\n      </FormContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { titleId } = useFormContext() ?? {}\n\n    return { id: titleId, ...props }\n  },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { descriptionId, titleId } = useFormContext() ?? {}\n\n  return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n  Button,\n  \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n  const { id } = useFormContext() ?? {}\n\n  return { form: id, ...props }\n})\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,CAAC,aAAa,kBAAkBA,gBAA2B;CAC/D,MAAM;CACN,QAAQ;AACV,CAAC;AAgFD,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACrB,EACC,IACA,MACA,SACA,mBAAmB,gBACnB,UACA,aACA,UACA,cACA,eACA,SACA,aAAa,MACb,mBACA,UACA,SACA,UACA,mBACA,cACA,OACA,WACA,kBACA,aACA,aACA,mBACA,YACA,GAAG,WACC;CACJ,MAAM,OAAO,MAAM;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAC5B,MAAM,CACJ,iBACA,cACA,YACA,cACA,aACA,mBACA,sBACE,iBACF,UACA,YACA,UACA,YACA,WACA,iBACA,gBACF;CAEA,OAAO;CAEP,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,qBAAC,OAAO,MAAR;GACM;GACJ,oBAAA,GAAA,cAAA,GAAA,CAAoB,SAAS,eAAe,cAAc;GAC9C;GACZ,GAAI;GAJN,UAAA;IAMG,iBACE,eAAe,SAAS,qBAAqB,cAC5C,qBAAC,YAAD;KAAY,GAAI;KAAhB,UAAA,CACG,gBACE,QACC,oBAAC,WAAD;MAAW,GAAI;MAAa,UAAA;KAAiB,CAAA,IAC3C,OAEL,sBACE,cACC,oBAAC,iBAAD;MAAiB,GAAI;MAClB,UAAA;KACc,CAAA,IACf,KACI;IACV,CAAA,IAAA;IAEL,cAAc,oBAAC,UAAD;KAAU,GAAI;KAAY,UAAA;IAA0B,CAAA;IAElE,iBACE,sBAAsB,eACrB,oBAAC,YAAD;KAAY,GAAI;KACb,UAAA,uBACE,eACC,oBAAC,kBAAD;MAAkB,GAAI;MACnB,UAAA;KACe,CAAA,IAChB;IACI,CAAA,IACV;GACK;;CACF,CAAA;AAEjB,GACA,QACA,EAAE,eAAe,CAAC,QAAQ,SAAS,EAAE,CACvC,CAAC,CAAC;AAIF,MAAa,aAAa,YAAoC,OAAO,QAAQ,CAAC,CAAC;AAI/E,MAAa,YAAY,YAAkC,MAAM,OAAO,CAAC,CACvE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,YAAY,eAAe,KAAK,CAAC;CAEzC,OAAO;EAAE,IAAI;EAAS,GAAG;CAAM;AACjC,CACF;AAIA,MAAa,kBAAkB,YAC7B,KACA,aACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,eAAe,YAAY,eAAe,KAAK,CAAC;CAExD,OAAO;EAAE,IAAI;EAAe,oBAAoB;EAAS,GAAG;CAAM;AACpE,CAAC;AAID,MAAa,WAAW,YAAkC,OAAO,MAAM,CAAC,CAAC;AAIzE,MAAa,YAAY,YAAmC,OAAO,OAAO,CAAC,CAAC;AAI5E,MAAa,aAAa,YAAoC,OAAO,QAAQ,CAAC,CAAC;AAI/E,MAAa,mBAAmB,YAC9B,QACA,cACF,CAAC,CAAC,EAAE,MAAM,SAAS,IAAI,UAAU;CAC/B,MAAM,EAAE,OAAO,eAAe,KAAK,CAAC;CAEpC,OAAO;EAAE,MAAM;EAAI,GAAG;CAAM;AAC9B,CAAC"}
+{"version":3,"file":"form.js","names":["createContext","cx"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n  FormRootProps,\n  | \"disabled\"\n  | \"errorMessage\"\n  | \"helperMessage\"\n  | \"invalid\"\n  | \"optionalIndicator\"\n  | \"readOnly\"\n  | \"replace\"\n  | \"required\"\n  | \"requiredIndicator\"\n  | \"size\"\n  | \"variant\"\n> {\n  descriptionId: string\n  id: string\n  titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n  name: \"FormContext\",\n  strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n  extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n  /**\n   * The form description to use.\n   */\n  description?: ReactNode\n  /**\n   * An object managing the disabled state of each field.\n   */\n  disabled?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the error message of each field.\n   */\n  errorMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the helper message of each field.\n   */\n  helperMessage?: { [key: string]: ReactNode }\n  /**\n   * An object managing the invalid state of each field.\n   */\n  invalid?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The optional indicator to use for each field.\n   */\n  optionalIndicator?: ReactNode\n  /**\n   * An object managing the read only state of each field.\n   */\n  readOnly?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the replace state of each field.\n   */\n  replace?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * An object managing the required state of each field.\n   */\n  required?: boolean | { [key: string]: boolean | undefined }\n  /**\n   * The required indicator to use for each field.\n   */\n  requiredIndicator?: ReactNode\n  /**\n   * The submit button to use.\n   */\n  submitButton?: ReactNode\n  /**\n   * The form title to use.\n   */\n  title?: ReactNode\n  /**\n   * Props the body component.\n   */\n  bodyProps?: FormBodyProps\n  /**\n   * Props the description component.\n   */\n  descriptionProps?: FormDescriptionProps\n  /**\n   * Props the footer component.\n   */\n  footerProps?: FormFooterProps\n  /**\n   * Props the header component.\n   */\n  headerProps?: FormHeaderProps\n  /**\n   * Props the submit button component.\n   */\n  submitButtonProps?: FormSubmitButtonProps\n  /**\n   * Props the title component.\n   */\n  titleProps?: FormTitleProps\n}\n\nconst {\n  PropsContext: FormPropsContext,\n  usePropsContext: useFormPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n  \"form\",\n  formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n  ({\n    id,\n    size,\n    variant,\n    \"aria-labelledby\": ariaLabelledBy,\n    children,\n    description,\n    disabled,\n    errorMessage,\n    helperMessage,\n    invalid,\n    noValidate = true,\n    optionalIndicator,\n    readOnly,\n    replace,\n    required,\n    requiredIndicator,\n    submitButton,\n    title,\n    bodyProps,\n    descriptionProps,\n    footerProps,\n    headerProps,\n    submitButtonProps,\n    titleProps,\n    ...rest\n  }) => {\n    const uuid = useId()\n    const titleId = useId()\n    const descriptionId = useId()\n    const [\n      omittedChildren,\n      customHeader,\n      customBody,\n      customFooter,\n      customTitle,\n      customDescription,\n      customSubmitButton,\n    ] = useSplitChildren(\n      children,\n      FormHeader,\n      FormBody,\n      FormFooter,\n      FormTitle,\n      FormDescription,\n      FormSubmitButton,\n    )\n\n    id ??= uuid\n\n    const context = useMemo(\n      () => ({\n        id,\n        size,\n        variant,\n        descriptionId,\n        disabled,\n        errorMessage,\n        helperMessage,\n        invalid,\n        optionalIndicator,\n        readOnly,\n        replace,\n        required,\n        requiredIndicator,\n        titleId,\n      }),\n      [\n        id,\n        titleId,\n        descriptionId,\n        disabled,\n        size,\n        variant,\n        errorMessage,\n        helperMessage,\n        invalid,\n        readOnly,\n        replace,\n        required,\n        optionalIndicator,\n        requiredIndicator,\n      ],\n    )\n\n    return (\n      <FormContext value={context}>\n        <styled.form\n          id={id}\n          aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n          noValidate={noValidate}\n          {...rest}\n        >\n          {customHeader ||\n            (customTitle || title || customDescription || description ? (\n              <FormHeader {...headerProps}>\n                {customTitle ||\n                  (title ? (\n                    <FormTitle {...titleProps}>{title}</FormTitle>\n                  ) : null)}\n\n                {customDescription ||\n                  (description ? (\n                    <FormDescription {...descriptionProps}>\n                      {description}\n                    </FormDescription>\n                  ) : null)}\n              </FormHeader>\n            ) : null)}\n\n          {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n          {customFooter ||\n            (customSubmitButton || submitButton ? (\n              <FormFooter {...footerProps}>\n                {customSubmitButton ||\n                  (submitButton ? (\n                    <FormSubmitButton {...submitButtonProps}>\n                      {submitButton}\n                    </FormSubmitButton>\n                  ) : null)}\n              </FormFooter>\n            ) : null)}\n        </styled.form>\n      </FormContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { titleId } = useFormContext() ?? {}\n\n    return { id: titleId, ...props }\n  },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { descriptionId, titleId } = useFormContext() ?? {}\n\n  return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n  Button,\n  \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n  const { id } = useFormContext() ?? {}\n\n  return { form: id, ...props }\n})\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,CAAC,aAAa,kBAAkBA,gBAA2B;CAC/D,MAAM;CACN,QAAQ;AACV,CAAC;AAgFD,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,SACF;;;;;;AASA,MAAa,WAAW,cACrB,EACC,IACA,MACA,SACA,mBAAmB,gBACnB,UACA,aACA,UACA,cACA,eACA,SACA,aAAa,MACb,mBACA,UACA,SACA,UACA,mBACA,cACA,OACA,WACA,kBACA,aACA,aACA,mBACA,YACA,GAAG,WACC;CACJ,MAAM,OAAO,MAAM;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAC5B,MAAM,CACJ,iBACA,cACA,YACA,cACA,aACA,mBACA,sBACE,iBACF,UACA,YACA,UACA,YACA,WACA,iBACA,gBACF;CAEA,OAAO;CAEP,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,qBAAC,OAAO,MAAR;GACM;GACJ,oBAAA,GAAiBC,cAAAA,GAAAA,CAAG,SAAS,eAAe,cAAc;GAC9C;GACZ,GAAI;GAJN,UAAA;IAMG,iBACE,eAAe,SAAS,qBAAqB,cAC5C,qBAAC,YAAD;KAAY,GAAI;KAAhB,UAAA,CACG,gBACE,QACC,oBAAC,WAAD;MAAW,GAAI;MAAa,UAAA;KAAiB,CAAA,IAC3C,OAEL,sBACE,cACC,oBAAC,iBAAD;MAAiB,GAAI;MAClB,UAAA;KACc,CAAA,IACf,KACI;IACV,CAAA,IAAA;IAEL,cAAc,oBAAC,UAAD;KAAU,GAAI;KAAY,UAAA;IAA0B,CAAA;IAElE,iBACE,sBAAsB,eACrB,oBAAC,YAAD;KAAY,GAAI;KACb,UAAA,uBACE,eACC,oBAAC,kBAAD;MAAkB,GAAI;MACnB,UAAA;KACe,CAAA,IAChB;IACI,CAAA,IACV;GACK;;CACF,CAAA;AAEjB,GACA,QACA,EAAE,eAAe,CAAC,QAAQ,SAAS,EAAE,CACvC,CAAC,CAAC;AAIF,MAAa,aAAa,YAAoC,OAAO,QAAQ,CAAC,CAAC;AAI/E,MAAa,YAAY,YAAkC,MAAM,OAAO,CAAC,CACvE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,YAAY,eAAe,KAAK,CAAC;CAEzC,OAAO;EAAE,IAAI;EAAS,GAAG;CAAM;AACjC,CACF;AAIA,MAAa,kBAAkB,YAC7B,KACA,aACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,eAAe,YAAY,eAAe,KAAK,CAAC;CAExD,OAAO;EAAE,IAAI;EAAe,oBAAoB;EAAS,GAAG;CAAM;AACpE,CAAC;AAID,MAAa,WAAW,YAAkC,OAAO,MAAM,CAAC,CAAC;AAIzE,MAAa,YAAY,YAAmC,OAAO,OAAO,CAAC,CAAC;AAI5E,MAAa,aAAa,YAAoC,OAAO,QAAQ,CAAC,CAAC;AAI/E,MAAa,mBAAmB,YAC9B,QACA,cACF,CAAC,CAAC,EAAE,MAAM,SAAS,IAAI,UAAU;CAC/B,MAAM,EAAE,OAAO,eAAe,KAAK,CAAC;CAEpC,OAAO;EAAE,MAAM;EAAI,GAAG;CAAM;AAC9B,CAAC"}

package/dist/esm/components/grid/grid-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","names":[],"sources":["../../../../src/components/grid/grid-item.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { GridItemStyle } from \"./grid-item.style\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { gridItemStyle } from \"./grid-item.style\"\n\nexport interface GridItemProps extends HTMLStyledProps {\n  /**\n   * The CSS `grid-area` property.\n   */\n  area?: CSSProps[\"gridArea\"]\n  /**\n   * The CSS `grid-column-end` property.\n   */\n  colEnd?: CSSProps[\"gridColumnEnd\"]\n  /**\n   * The number of columns the grid item should `span`.\n   */\n  colSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-column-start` property.\n   */\n  colStart?: CSSProps[\"gridColumnStart\"]\n  /**\n   * The CSS `grid-row-end` property.\n   */\n  rowEnd?: CSSProps[\"gridRowEnd\"]\n  /**\n   * The number of rows the grid item should `span`.\n   */\n  rowSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-row-start` property.\n   */\n  rowStart?: CSSProps[\"gridRowStart\"]\n}\n\nconst {\n  PropsContext: GridItemPropsContext,\n  usePropsContext: useGridItemPropsContext,\n  withContext,\n} = createComponent<GridItemProps, GridItemStyle>(\"grid-item\", gridItemStyle)\n\nexport { GridItemPropsContext, useGridItemPropsContext }\n\nexport const GridItem = withContext(\"div\")(\n  undefined,\n  ({\n    area: gridArea,\n    colEnd: gridColumnEnd,\n    colSpan,\n    colStart: gridColumnStart,\n    rowEnd: gridRowEnd,\n    rowSpan,\n    rowStart: gridRowStart,\n    ...rest\n  }) => ({\n    gridArea,\n    gridColumn: replaceObject(colSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridColumnEnd,\n    gridColumnStart,\n    gridRow: replaceObject(rowSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridRowEnd,\n    gridRowStart,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,aAAa;AAI5E,MAAa,WAAW,YAAY,KAAK,CAAC,CACxC,KAAA,IACC,EACC,MAAM,UACN,QAAQ,eACR,SACA,UAAU,iBACV,QAAQ,YACR,SACA,UAAU,cACV,GAAG,YACE;CACL;CACA,aAAA,GAAA,cAAA,cAAA,CAA0B,UAAU,UAClC,SAAS,OAAO,QAAQ,MAAM,QAAQ,UAAU,KAAA,CAClD;CACA;CACA;CACA,UAAA,GAAA,cAAA,cAAA,CAAuB,UAAU,UAC/B,SAAS,OAAO,QAAQ,MAAM,QAAQ,UAAU,KAAA,CAClD;CACA;CACA;CACA,GAAG;AACL,EACF"}
+{"version":3,"file":"grid-item.js","names":["replaceObject"],"sources":["../../../../src/components/grid/grid-item.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { GridItemStyle } from \"./grid-item.style\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { gridItemStyle } from \"./grid-item.style\"\n\nexport interface GridItemProps extends HTMLStyledProps {\n  /**\n   * The CSS `grid-area` property.\n   */\n  area?: CSSProps[\"gridArea\"]\n  /**\n   * The CSS `grid-column-end` property.\n   */\n  colEnd?: CSSProps[\"gridColumnEnd\"]\n  /**\n   * The number of columns the grid item should `span`.\n   */\n  colSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-column-start` property.\n   */\n  colStart?: CSSProps[\"gridColumnStart\"]\n  /**\n   * The CSS `grid-row-end` property.\n   */\n  rowEnd?: CSSProps[\"gridRowEnd\"]\n  /**\n   * The number of rows the grid item should `span`.\n   */\n  rowSpan?: StyleValue<number>\n  /**\n   * The CSS `grid-row-start` property.\n   */\n  rowStart?: CSSProps[\"gridRowStart\"]\n}\n\nconst {\n  PropsContext: GridItemPropsContext,\n  usePropsContext: useGridItemPropsContext,\n  withContext,\n} = createComponent<GridItemProps, GridItemStyle>(\"grid-item\", gridItemStyle)\n\nexport { GridItemPropsContext, useGridItemPropsContext }\n\nexport const GridItem = withContext(\"div\")(\n  undefined,\n  ({\n    area: gridArea,\n    colEnd: gridColumnEnd,\n    colSpan,\n    colStart: gridColumnStart,\n    rowEnd: gridRowEnd,\n    rowSpan,\n    rowStart: gridRowStart,\n    ...rest\n  }) => ({\n    gridArea,\n    gridColumn: replaceObject(colSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridColumnEnd,\n    gridColumnStart,\n    gridRow: replaceObject(rowSpan, (value) =>\n      value != null ? `span ${value}/span ${value}` : undefined,\n    ),\n    gridRowEnd,\n    gridRowStart,\n    ...rest,\n  }),\n)\n"],"mappings":";;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,aAAa;AAI5E,MAAa,WAAW,YAAY,KAAK,CAAC,CACxC,KAAA,IACC,EACC,MAAM,UACN,QAAQ,eACR,SACA,UAAU,iBACV,QAAQ,YACR,SACA,UAAU,cACV,GAAG,YACE;CACL;CACA,aAAA,GAAYA,cAAAA,cAAAA,CAAc,UAAU,UAClC,SAAS,OAAO,QAAQ,MAAM,QAAQ,UAAU,KAAA,CAClD;CACA;CACA;CACA,UAAA,GAASA,cAAAA,cAAAA,CAAc,UAAU,UAC/B,SAAS,OAAO,QAAQ,MAAM,QAAQ,UAAU,KAAA,CAClD;CACA;CACA;CACA,GAAG;AACL,EACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"group.js","names":[],"sources":["../../../../src/components/group/group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps } from \"../../core\"\nimport type { FlexProps } from \"../flex\"\nimport type { GroupStyle } from \"./group.style\"\nimport { createComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr } from \"../../utils\"\nimport { Flex } from \"../flex\"\nimport { groupStyle } from \"./group.style\"\nimport { useGroup } from \"./use-group\"\n\nexport interface GroupProps\n  extends Omit<FlexProps, \"grow\">, ThemeProps<GroupStyle> {}\n\nconst {\n  PropsContext: GroupPropsContext,\n  usePropsContext: useGroupPropsContext,\n  withContext,\n} = createComponent<GroupProps, GroupStyle>(\"group\", groupStyle)\n\nexport { GroupPropsContext, useGroupPropsContext }\n\n/**\n * `Group` is a component that groups and attaches multiple elements together.\n *\n * @see https://yamada-ui.com/docs/components/group\n */\nexport const Group = withContext<\"div\", GroupProps, \"attached\" | \"orientation\">(\n  Flex,\n  { transferProps: [\"attached\", \"orientation\"] },\n)(\n  undefined,\n  ({\n    attached: attachedProp,\n    children,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const orientation = useValue(orientationProp)\n    const attached = useValue(attachedProp)\n    const cloneChildren = useGroup(children)\n\n    return {\n      \"data-attached\": dataAttr(attached),\n      \"data-orientation\": orientation,\n      children: cloneChildren,\n      role: \"group\",\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAeA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,YACnB,MACA,EAAE,eAAe,CAAC,YAAY,aAAa,EAAE,CAC/C,CAAC,CACC,KAAA,IACC,EACC,UAAU,cACV,UACA,aAAa,iBACb,GAAG,WACC;CACJ,MAAM,cAAc,SAAS,eAAe;CAC5C,MAAM,WAAW,SAAS,YAAY;CACtC,MAAM,gBAAgB,SAAS,QAAQ;CAEvC,OAAO;EACL,kBAAA,GAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,oBAAoB;EACpB,UAAU;EACV,MAAM;EACN,GAAG;CACL;AACF,CACF"}
+{"version":3,"file":"group.js","names":["dataAttr"],"sources":["../../../../src/components/group/group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps } from \"../../core\"\nimport type { FlexProps } from \"../flex\"\nimport type { GroupStyle } from \"./group.style\"\nimport { createComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr } from \"../../utils\"\nimport { Flex } from \"../flex\"\nimport { groupStyle } from \"./group.style\"\nimport { useGroup } from \"./use-group\"\n\nexport interface GroupProps\n  extends Omit<FlexProps, \"grow\">, ThemeProps<GroupStyle> {}\n\nconst {\n  PropsContext: GroupPropsContext,\n  usePropsContext: useGroupPropsContext,\n  withContext,\n} = createComponent<GroupProps, GroupStyle>(\"group\", groupStyle)\n\nexport { GroupPropsContext, useGroupPropsContext }\n\n/**\n * `Group` is a component that groups and attaches multiple elements together.\n *\n * @see https://yamada-ui.com/docs/components/group\n */\nexport const Group = withContext<\"div\", GroupProps, \"attached\" | \"orientation\">(\n  Flex,\n  { transferProps: [\"attached\", \"orientation\"] },\n)(\n  undefined,\n  ({\n    attached: attachedProp,\n    children,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const orientation = useValue(orientationProp)\n    const attached = useValue(attachedProp)\n    const cloneChildren = useGroup(children)\n\n    return {\n      \"data-attached\": dataAttr(attached),\n      \"data-orientation\": orientation,\n      children: cloneChildren,\n      role: \"group\",\n      ...rest,\n    }\n  },\n)\n"],"mappings":";;;;;;;;AAeA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,YACnB,MACA,EAAE,eAAe,CAAC,YAAY,aAAa,EAAE,CAC/C,CAAC,CACC,KAAA,IACC,EACC,UAAU,cACV,UACA,aAAa,iBACb,GAAG,WACC;CACJ,MAAM,cAAc,SAAS,eAAe;CAC5C,MAAM,WAAW,SAAS,YAAY;CACtC,MAAM,gBAAgB,SAAS,QAAQ;CAEvC,OAAO;EACL,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;EAClC,oBAAoB;EACpB,UAAU;EACV,MAAM;EACN,GAAG;CACL;AACF,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-group.js","names":[],"sources":["../../../../src/components/group/use-group.ts"],"sourcesContent":["import type { CSSProperties, DataAttributes, ReactNode } from \"react\"\nimport { cloneElement, useMemo } from \"react\"\nimport { dataAttr, isNull, isUndefined, useValidChildren } from \"../../utils\"\n\nexport const useGroup = (children?: ReactNode) => {\n  const validChildren = useValidChildren(children)\n  const omittedChildren = useMemo(\n    () =>\n      validChildren.filter((child) => {\n        const ungrouped = child.props[\"data-ungrouped\"]\n\n        return isUndefined(ungrouped) || isNull(ungrouped)\n      }),\n    [validChildren],\n  )\n  const count = omittedChildren.length\n  const cloneChildren = useMemo(\n    () =>\n      validChildren.map((child) => {\n        const index = omittedChildren.indexOf(child)\n        const ungrouped = index === -1\n\n        if (ungrouped) return child\n\n        return cloneElement(child, {\n          ...child.props,\n          style: {\n            \"--group-count\": count,\n            \"--group-index\": index,\n            ...child.props?.style,\n          },\n          \"data-group-between\": dataAttr(index > 0 && index < count - 1),\n          \"data-group-end\": dataAttr(index === count - 1),\n          \"data-group-start\": dataAttr(index === 0),\n          \"data-peer\": \"\",\n        })\n      }),\n    [validChildren, omittedChildren, count],\n  )\n\n  return cloneChildren\n}\n\nexport type UseGroupReturn = ReturnType<typeof useGroup>\n\ninterface Props extends DataAttributes {\n  style?: CSSProperties\n}\n\nexport const useGroupItemProps = <Y extends Props>({\n  style: {\n    \"--group-count\": groupCount,\n    \"--group-index\": groupIndex,\n    ...style\n  } = {},\n  \"data-group-between\": dataGroupBetween,\n  \"data-group-end\": dataGroupEnd,\n  \"data-group-start\": dataGroupStart,\n  \"data-peer\": dataPeer,\n  ...rest\n}: Y) => {\n  const pickedProps = useMemo(\n    () => ({\n      style: {\n        \"--group-count\": groupCount!,\n        \"--group-index\": groupIndex!,\n      },\n      \"data-group-between\": dataGroupBetween,\n      \"data-group-end\": dataGroupEnd,\n      \"data-group-start\": dataGroupStart,\n      \"data-peer\": dataPeer,\n    }),\n    [\n      groupCount,\n      groupIndex,\n      dataGroupBetween,\n      dataGroupEnd,\n      dataGroupStart,\n      dataPeer,\n    ],\n  )\n  const omittedProps = useMemo(() => ({ style, ...rest }), [style, rest])\n\n  return [pickedProps, omittedProps] as const\n}\n\nexport type UseGroupItemReturn = ReturnType<typeof useGroupItemProps>\n"],"mappings":";;;;AAIA,MAAa,YAAY,aAAyB;CAChD,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,kBAAkB,cAEpB,cAAc,QAAQ,UAAU;EAC9B,MAAM,YAAY,MAAM,MAAM;EAE9B,QAAA,GAAA,cAAA,YAAA,CAAmB,SAAS,MAAA,GAAA,cAAA,OAAA,CAAY,SAAS;CACnD,CAAC,GACH,CAAC,aAAa,CAChB;CACA,MAAM,QAAQ,gBAAgB;CAyB9B,OAxBsB,cAElB,cAAc,KAAK,UAAU;EAC3B,MAAM,QAAQ,gBAAgB,QAAQ,KAAK;EAG3C,IAFkB,UAAU,IAEb,OAAO;EAEtB,OAAO,aAAa,OAAO;GACzB,GAAG,MAAM;GACT,OAAO;IACL,iBAAiB;IACjB,iBAAiB;IACjB,GAAG,MAAM,OAAO;GAClB;GACA,uBAAA,GAAA,cAAA,SAAA,CAA+B,QAAQ,KAAK,QAAQ,QAAQ,CAAC;GAC7D,mBAAA,GAAA,cAAA,SAAA,CAA2B,UAAU,QAAQ,CAAC;GAC9C,qBAAA,GAAA,cAAA,SAAA,CAA6B,UAAU,CAAC;GACxC,aAAa;EACf,CAAC;CACH,CAAC,GACH;EAAC;EAAe;EAAiB;CAAK,CAGrB;AACrB;AAQA,MAAa,qBAAsC,EACjD,OAAO,EACL,iBAAiB,YACjB,iBAAiB,YACjB,GAAG,UACD,CAAC,GACL,sBAAsB,kBACtB,kBAAkB,cAClB,oBAAoB,gBACpB,aAAa,UACb,GAAG,WACI;CAuBP,OAAO,CAtBa,eACX;EACL,OAAO;GACL,iBAAiB;GACjB,iBAAiB;EACnB;EACA,sBAAsB;EACtB,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;CACf,IACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CAIgB,GAFG,eAAe;EAAE;EAAO,GAAG;CAAK,IAAI,CAAC,OAAO,IAAI,CAErC,CAAC;AACnC"}
+{"version":3,"file":"use-group.js","names":["isUndefined","isNull","dataAttr"],"sources":["../../../../src/components/group/use-group.ts"],"sourcesContent":["import type { CSSProperties, DataAttributes, ReactNode } from \"react\"\nimport { cloneElement, useMemo } from \"react\"\nimport { dataAttr, isNull, isUndefined, useValidChildren } from \"../../utils\"\n\nexport const useGroup = (children?: ReactNode) => {\n  const validChildren = useValidChildren(children)\n  const omittedChildren = useMemo(\n    () =>\n      validChildren.filter((child) => {\n        const ungrouped = child.props[\"data-ungrouped\"]\n\n        return isUndefined(ungrouped) || isNull(ungrouped)\n      }),\n    [validChildren],\n  )\n  const count = omittedChildren.length\n  const cloneChildren = useMemo(\n    () =>\n      validChildren.map((child) => {\n        const index = omittedChildren.indexOf(child)\n        const ungrouped = index === -1\n\n        if (ungrouped) return child\n\n        return cloneElement(child, {\n          ...child.props,\n          style: {\n            \"--group-count\": count,\n            \"--group-index\": index,\n            ...child.props?.style,\n          },\n          \"data-group-between\": dataAttr(index > 0 && index < count - 1),\n          \"data-group-end\": dataAttr(index === count - 1),\n          \"data-group-start\": dataAttr(index === 0),\n          \"data-peer\": \"\",\n        })\n      }),\n    [validChildren, omittedChildren, count],\n  )\n\n  return cloneChildren\n}\n\nexport type UseGroupReturn = ReturnType<typeof useGroup>\n\ninterface Props extends DataAttributes {\n  style?: CSSProperties\n}\n\nexport const useGroupItemProps = <Y extends Props>({\n  style: {\n    \"--group-count\": groupCount,\n    \"--group-index\": groupIndex,\n    ...style\n  } = {},\n  \"data-group-between\": dataGroupBetween,\n  \"data-group-end\": dataGroupEnd,\n  \"data-group-start\": dataGroupStart,\n  \"data-peer\": dataPeer,\n  ...rest\n}: Y) => {\n  const pickedProps = useMemo(\n    () => ({\n      style: {\n        \"--group-count\": groupCount!,\n        \"--group-index\": groupIndex!,\n      },\n      \"data-group-between\": dataGroupBetween,\n      \"data-group-end\": dataGroupEnd,\n      \"data-group-start\": dataGroupStart,\n      \"data-peer\": dataPeer,\n    }),\n    [\n      groupCount,\n      groupIndex,\n      dataGroupBetween,\n      dataGroupEnd,\n      dataGroupStart,\n      dataPeer,\n    ],\n  )\n  const omittedProps = useMemo(() => ({ style, ...rest }), [style, rest])\n\n  return [pickedProps, omittedProps] as const\n}\n\nexport type UseGroupItemReturn = ReturnType<typeof useGroupItemProps>\n"],"mappings":";;;;AAIA,MAAa,YAAY,aAAyB;CAChD,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,kBAAkB,cAEpB,cAAc,QAAQ,UAAU;EAC9B,MAAM,YAAY,MAAM,MAAM;EAE9B,QAAA,GAAOA,cAAAA,YAAAA,CAAY,SAAS,MAAA,GAAKC,cAAAA,OAAAA,CAAO,SAAS;CACnD,CAAC,GACH,CAAC,aAAa,CAChB;CACA,MAAM,QAAQ,gBAAgB;CAyB9B,OAxBsB,cAElB,cAAc,KAAK,UAAU;EAC3B,MAAM,QAAQ,gBAAgB,QAAQ,KAAK;EAG3C,IAFkB,UAAU,IAEb,OAAO;EAEtB,OAAO,aAAa,OAAO;GACzB,GAAG,MAAM;GACT,OAAO;IACL,iBAAiB;IACjB,iBAAiB;IACjB,GAAG,MAAM,OAAO;GAClB;GACA,uBAAA,GAAsBC,cAAAA,SAAAA,CAAS,QAAQ,KAAK,QAAQ,QAAQ,CAAC;GAC7D,mBAAA,GAAkBA,cAAAA,SAAAA,CAAS,UAAU,QAAQ,CAAC;GAC9C,qBAAA,GAAoBA,cAAAA,SAAAA,CAAS,UAAU,CAAC;GACxC,aAAa;EACf,CAAC;CACH,CAAC,GACH;EAAC;EAAe;EAAiB;CAAK,CAGrB;AACrB;AAQA,MAAa,qBAAsC,EACjD,OAAO,EACL,iBAAiB,YACjB,iBAAiB,YACjB,GAAG,UACD,CAAC,GACL,sBAAsB,kBACtB,kBAAkB,cAClB,oBAAoB,gBACpB,aAAa,UACb,GAAG,WACI;CAuBP,OAAO,CAtBa,eACX;EACL,OAAO;GACL,iBAAiB;GACjB,iBAAiB;EACnB;EACA,sBAAsB;EACtB,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;CACf,IACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CAIgB,GAFG,eAAe;EAAE;EAAO,GAAG;CAAK,IAAI,CAAC,OAAO,IAAI,CAErC,CAAC;AACnC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-highlight.js","names":[],"sources":["../../../../src/components/highlight/use-highlight.ts"],"sourcesContent":["import { useMemo } from \"react\"\nimport { toArray } from \"../../utils\"\n\nexport interface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst createRegexp = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nexport interface UseHighlightProps {\n  query: string | string[]\n  text: string\n}\n\nexport const useHighlight = ({ query, text }: UseHighlightProps) => {\n  const chunks = useMemo(() => {\n    const regexp = createRegexp(toArray(query))\n\n    if (!regexp) return [{ match: false, text }]\n\n    return text\n      .split(regexp)\n      .filter(Boolean)\n      .map((text) => ({ match: regexp.test(text), text }))\n  }, [text, query])\n\n  return chunks\n}\n\nexport type UseHighlightReturn = ReturnType<typeof useHighlight>\n"],"mappings":";;;AAQA,MAAM,gBAAgB,SACpB,KAAK,QAAQ,yBAAyB,SAAiB,KAAK,MAAM;AAEpE,MAAM,gBAAgB,UAAwC;CAC5D,QAAQ,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;CAErE,IAAI,MAAM,QAAQ,OAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,EAAE,IAAI,IAAI;AAClE;AAOA,MAAa,gBAAgB,EAAE,OAAO,WAA8B;CAYlE,OAXe,cAAc;EAC3B,MAAM,SAAS,cAAA,GAAA,cAAA,QAAA,CAAqB,KAAK,CAAC;EAE1C,IAAI,CAAC,QAAQ,OAAO,CAAC;GAAE,OAAO;GAAO;EAAK,CAAC;EAE3C,OAAO,KACJ,MAAM,MAAM,CAAC,CACb,OAAO,OAAO,CAAC,CACf,KAAK,UAAU;GAAE,OAAO,OAAO,KAAK,IAAI;GAAG;EAAK,EAAE;CACvD,GAAG,CAAC,MAAM,KAAK,CAEH;AACd"}
+{"version":3,"file":"use-highlight.js","names":["toArray"],"sources":["../../../../src/components/highlight/use-highlight.ts"],"sourcesContent":["import { useMemo } from \"react\"\nimport { toArray } from \"../../utils\"\n\nexport interface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst createRegexp = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nexport interface UseHighlightProps {\n  query: string | string[]\n  text: string\n}\n\nexport const useHighlight = ({ query, text }: UseHighlightProps) => {\n  const chunks = useMemo(() => {\n    const regexp = createRegexp(toArray(query))\n\n    if (!regexp) return [{ match: false, text }]\n\n    return text\n      .split(regexp)\n      .filter(Boolean)\n      .map((text) => ({ match: regexp.test(text), text }))\n  }, [text, query])\n\n  return chunks\n}\n\nexport type UseHighlightReturn = ReturnType<typeof useHighlight>\n"],"mappings":";;;AAQA,MAAM,gBAAgB,SACpB,KAAK,QAAQ,yBAAyB,SAAiB,KAAK,MAAM;AAEpE,MAAM,gBAAgB,UAAwC;CAC5D,QAAQ,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;CAErE,IAAI,MAAM,QAAQ,OAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,EAAE,IAAI,IAAI;AAClE;AAOA,MAAa,gBAAgB,EAAE,OAAO,WAA8B;CAYlE,OAXe,cAAc;EAC3B,MAAM,SAAS,cAAA,GAAaA,cAAAA,QAAAA,CAAQ,KAAK,CAAC;EAE1C,IAAI,CAAC,QAAQ,OAAO,CAAC;GAAE,OAAO;GAAO;EAAK,CAAC;EAE3C,OAAO,KACJ,MAAM,MAAM,CAAC,CACb,OAAO,OAAO,CAAC,CACf,KAAK,UAAU;GAAE,OAAO,OAAO,KAAK,IAAI;GAAG;EAAK,EAAE;CACvD,GAAG,CAAC,MAAM,KAAK,CAEH;AACd"}