@yamada-ui/react 2.2.5-dev-20260720084813 → 2.2.5-dev-20260720123845

package/dist/cjs/components/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/cjs/components/motion/motion.cjs

@@ -14,9 +14,10 @@ const Component = require_factory.styled("div", { forwardProps: ["transition"] }
 */
 const Motion = (({ ref, as: asProp = "div", className, ...rest }) => {
 	const system = require_system_provider.useSystem();
+	const as = (0, react.useMemo)(() => motion_react.motion.create(asProp), [asProp]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		as: (0, react.useMemo)(() => motion_react.motion.create(asProp), [asProp]),
+		as,
 		className: (0, require_utils_index.utils_exports.cx)(system.utils.getClassName("motion"), className),
 		...rest
 	});

package/dist/cjs/components/motion/motion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"motion.cjs","names":["styled","useSystem","motion"],"sources":["../../../../src/components/motion/motion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { HTMLMotionProps, MotionStyledComponent } from \"./index.types\"\nimport { motion } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { styled, useSystem } from \"../../core\"\nimport { cx } from \"../../utils\"\n\nconst forwardProps = [\"transition\"]\n\nconst Component = styled<\"div\", Dict>(\"div\", { forwardProps })\n\n/**\n * `Motion` is a component that allows for the easy implementation of a wide variety of animations.\n *\n * @see https://yamada-ui.com/docs/components/motion\n */\nexport const Motion = (({\n  ref,\n  as: asProp = \"div\",\n  className,\n  ...rest\n}: HTMLMotionProps) => {\n  const system = useSystem()\n  const as = useMemo(() => motion.create(asProp), [asProp])\n\n  return (\n    <Component\n      ref={ref}\n      as={as}\n      className={cx(system.utils.getClassName(\"motion\"), className)}\n      {...rest}\n    />\n  )\n}) as MotionStyledComponent<\"div\">\n"],"mappings":";;;;;;;;AAWA,MAAM,YAAYA,gBAAAA,OAAoB,OAAO,EAAE,cAAA,CAFzB,YAEoC,EAAE,CAAC;;;;;;AAO7D,MAAa,WAAW,EACtB,KACA,IAAI,SAAS,OACb,WACA,GAAG,WACkB;CACrB,MAAM,SAASC,wBAAAA,UAAU;CAGzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,KAAA,GAAA,MAAA,QAAA,OALqBC,aAAAA,OAAO,OAAO,MAAM,GAAG,CAAC,MAAM,CAK9C;EACL,YAAA,GAAA,oBAAA,cAAA,GAAA,CAAc,OAAO,MAAM,aAAa,QAAQ,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"motion.cjs","names":["styled","useSystem","motion"],"sources":["../../../../src/components/motion/motion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { HTMLMotionProps, MotionStyledComponent } from \"./index.types\"\nimport { motion } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { styled, useSystem } from \"../../core\"\nimport { cx } from \"../../utils\"\n\nconst forwardProps = [\"transition\"]\n\nconst Component = styled<\"div\", Dict>(\"div\", { forwardProps })\n\n/**\n * `Motion` is a component that allows for the easy implementation of a wide variety of animations.\n *\n * @see https://yamada-ui.com/docs/components/motion\n */\nexport const Motion = (({\n  ref,\n  as: asProp = \"div\",\n  className,\n  ...rest\n}: HTMLMotionProps) => {\n  const system = useSystem()\n  const as = useMemo(() => motion.create(asProp), [asProp])\n\n  return (\n    <Component\n      ref={ref}\n      as={as}\n      className={cx(system.utils.getClassName(\"motion\"), className)}\n      {...rest}\n    />\n  )\n}) as MotionStyledComponent<\"div\">\n"],"mappings":";;;;;;;;AAWA,MAAM,YAAYA,gBAAAA,OAAoB,OAAO,EAAE,cAAA,CAFzB,YAEoC,EAAE,CAAC;;;;;;AAO7D,MAAa,WAAW,EACtB,KACA,IAAI,SAAS,OACb,WACA,GAAG,WACkB;CACrB,MAAM,SAASC,wBAAAA,UAAU;CACzB,MAAM,MAAA,GAAA,MAAA,QAAA,OAAmBC,aAAAA,OAAO,OAAO,MAAM,GAAG,CAAC,MAAM,CAAC;CAExD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACD;EACJ,YAAA,GAAA,oBAAA,cAAA,GAAA,CAAc,OAAO,MAAM,aAAa,QAAQ,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/cjs/components/native-accordion/native-accordion.cjs

@@ -22,13 +22,15 @@ const NativeAccordionRoot = withProvider(({ children, icon, iconHidden, items, .
 		if (children) return children;
 		return items?.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionItem, { ...props }, index));
 	}, [children, items]);
+	const context = (0, react.useMemo)(() => ({ name }), [name]);
+	const componentContext = (0, react.useMemo)(() => ({
+		icon,
+		iconHidden
+	}), [icon, iconHidden]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_native_accordion.NativeAccordionContext, {
-		value: (0, react.useMemo)(() => ({ name }), [name]),
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
-			value: (0, react.useMemo)(() => ({
-				icon,
-				iconHidden
-			}), [icon, iconHidden]),
+			value: componentContext,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
 				...getRootProps(),
 				children: computedChildren
@@ -39,20 +41,21 @@ const NativeAccordionRoot = withProvider(({ children, icon, iconHidden, items, .
 const NativeAccordionItem = withContext(({ button, children, icon, ...rest }) => {
 	const { disabled, getButtonProps, getIconProps, getItemProps, getPanelProps } = require_use_native_accordion.useNativeAccordionItem(rest);
 	const [omittedChildren, customAccordionButton, customAccordionPanel] = require_children.useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel);
+	const context = (0, react.useMemo)(() => ({
+		disabled,
+		icon,
+		getButtonProps,
+		getIconProps,
+		getPanelProps
+	}), [
+		disabled,
+		getIconProps,
+		getPanelProps,
+		getButtonProps,
+		icon
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemComponentContext, {
-		value: (0, react.useMemo)(() => ({
-			disabled,
-			icon,
-			getButtonProps,
-			getIconProps,
-			getPanelProps
-		}), [
-			disabled,
-			getIconProps,
-			getPanelProps,
-			getButtonProps,
-			icon
-		]),
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.details, {
 			...getItemProps(),
 			children: [customAccordionButton ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionButton, { children: button }), customAccordionPanel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAccordionPanel, { children: omittedChildren })]

package/dist/cjs/components/native-accordion/native-accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"native-accordion.cjs","names":["createContext","createSlotComponent","nativeAccordionStyle","useNativeAccordion","NativeAccordionContext","styled","useNativeAccordionItem","useSplitChildren","ChevronDownIcon","Children"],"sources":["../../../../src/components/native-accordion/native-accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativeAccordionStyle } from \"./native-accordion.style\"\nimport type {\n  UseNativeAccordionItemProps,\n  UseNativeAccordionItemReturn,\n  UseNativeAccordionProps,\n} from \"./use-native-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, useSplitChildren } from \"../../utils\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { nativeAccordionStyle } from \"./native-accordion.style\"\nimport {\n  NativeAccordionContext,\n  useNativeAccordion,\n  useNativeAccordionItem,\n} from \"./use-native-accordion\"\n\nexport interface NativeAccordionItem extends NativeAccordionItemProps {}\n\ninterface ComponentContext extends Pick<\n  NativeAccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface NativeAccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<NativeAccordionStyle>,\n    UseNativeAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNode\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: NativeAccordionItem[]\n}\n\ninterface ItemComponentContext\n  extends\n    Pick<NativeAccordionItemProps, \"icon\">,\n    Omit<UseNativeAccordionItemReturn, \"getItemProps\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: NativeAccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useNativeAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  NativeAccordionRootProps,\n  NativeAccordionStyle,\n  ComponentContext\n>(\"native-accordion\", nativeAccordionStyle)\n\nexport { NativeAccordionPropsContext, useNativeAccordionPropsContext }\n\n/**\n * `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the native HTML details element.\n *\n * @see https://yamada-ui.com/docs/components/native-accordion\n */\nexport const NativeAccordionRoot = withProvider<\n  \"div\",\n  NativeAccordionRootProps\n>(({ children, icon, iconHidden, items, ...props }) => {\n  const { name, getRootProps } = useNativeAccordion(props)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items?.map((props, index) => (\n      <NativeAccordionItem key={index} {...props} />\n    ))\n  }, [children, items])\n  const context = useMemo(() => ({ name }), [name])\n  const componentContext = useMemo(\n    () => ({ icon, iconHidden }),\n    [icon, iconHidden],\n  )\n\n  return (\n    <NativeAccordionContext value={context}>\n      <ComponentContext value={componentContext}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    </NativeAccordionContext>\n  )\n}, \"root\")()\n\nexport interface NativeAccordionItemProps\n  extends HTMLStyledProps<\"details\">, UseNativeAccordionItemProps {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNode\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionItem = withContext<\n  \"details\",\n  NativeAccordionItemProps\n>(({ button, children, icon, ...rest }) => {\n  const {\n    disabled,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  } = useNativeAccordionItem(rest)\n  const [omittedChildren, customAccordionButton, customAccordionPanel] =\n    useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel)\n  const context = useMemo(\n    () => ({\n      disabled,\n      icon,\n      getButtonProps,\n      getIconProps,\n      getPanelProps,\n    }),\n    [disabled, getIconProps, getPanelProps, getButtonProps, icon],\n  )\n\n  return (\n    <ItemComponentContext value={context}>\n      <styled.details {...getItemProps()}>\n        {customAccordionButton ?? (\n          <NativeAccordionButton>{button}</NativeAccordionButton>\n        )}\n        {customAccordionPanel ?? (\n          <NativeAccordionPanel>{omittedChildren}</NativeAccordionPanel>\n        )}\n      </styled.details>\n    </ItemComponentContext>\n  )\n}, \"item\")()\n\nexport interface NativeAccordionButtonProps extends HTMLStyledProps<\"summary\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionButton = withContext<\n  \"summary\",\n  NativeAccordionButtonProps\n>(({ children, icon: customIcon, ...rest }) => {\n  const { icon: rootIcon } = useComponentContext()\n  const { icon: itemIcon, getButtonProps } = useItemComponentContext()\n\n  return (\n    <styled.summary {...getButtonProps(rest)}>\n      {children}\n\n      <NativeAccordionIcon>\n        {customIcon ?? itemIcon ?? rootIcon}\n      </NativeAccordionIcon>\n    </styled.summary>\n  )\n}, \"button\")()\n\nexport interface NativeAccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const NativeAccordionIcon = withContext<\"svg\", NativeAccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useItemComponentContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface NativeAccordionPanelProps extends HTMLStyledProps {}\n\nexport const NativeAccordionPanel = withContext<\n  \"div\",\n  NativeAccordionPanelProps\n>(({ children, ...rest }) => {\n  const { getPanelProps } = useItemComponentContext()\n\n  return (\n    <styled.div {...getPanelProps(rest)}>\n      <styled.div>{children}</styled.div>\n    </styled.div>\n  )\n}, \"panel\")()\n"],"mappings":"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"}
+{"version":3,"file":"native-accordion.cjs","names":["createContext","createSlotComponent","nativeAccordionStyle","useNativeAccordion","NativeAccordionContext","styled","useNativeAccordionItem","useSplitChildren","ChevronDownIcon","Children"],"sources":["../../../../src/components/native-accordion/native-accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativeAccordionStyle } from \"./native-accordion.style\"\nimport type {\n  UseNativeAccordionItemProps,\n  UseNativeAccordionItemReturn,\n  UseNativeAccordionProps,\n} from \"./use-native-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, useSplitChildren } from \"../../utils\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { nativeAccordionStyle } from \"./native-accordion.style\"\nimport {\n  NativeAccordionContext,\n  useNativeAccordion,\n  useNativeAccordionItem,\n} from \"./use-native-accordion\"\n\nexport interface NativeAccordionItem extends NativeAccordionItemProps {}\n\ninterface ComponentContext extends Pick<\n  NativeAccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface NativeAccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<NativeAccordionStyle>,\n    UseNativeAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNode\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: NativeAccordionItem[]\n}\n\ninterface ItemComponentContext\n  extends\n    Pick<NativeAccordionItemProps, \"icon\">,\n    Omit<UseNativeAccordionItemReturn, \"getItemProps\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: NativeAccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useNativeAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  NativeAccordionRootProps,\n  NativeAccordionStyle,\n  ComponentContext\n>(\"native-accordion\", nativeAccordionStyle)\n\nexport { NativeAccordionPropsContext, useNativeAccordionPropsContext }\n\n/**\n * `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the native HTML details element.\n *\n * @see https://yamada-ui.com/docs/components/native-accordion\n */\nexport const NativeAccordionRoot = withProvider<\n  \"div\",\n  NativeAccordionRootProps\n>(({ children, icon, iconHidden, items, ...props }) => {\n  const { name, getRootProps } = useNativeAccordion(props)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items?.map((props, index) => (\n      <NativeAccordionItem key={index} {...props} />\n    ))\n  }, [children, items])\n  const context = useMemo(() => ({ name }), [name])\n  const componentContext = useMemo(\n    () => ({ icon, iconHidden }),\n    [icon, iconHidden],\n  )\n\n  return (\n    <NativeAccordionContext value={context}>\n      <ComponentContext value={componentContext}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    </NativeAccordionContext>\n  )\n}, \"root\")()\n\nexport interface NativeAccordionItemProps\n  extends HTMLStyledProps<\"details\">, UseNativeAccordionItemProps {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNode\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionItem = withContext<\n  \"details\",\n  NativeAccordionItemProps\n>(({ button, children, icon, ...rest }) => {\n  const {\n    disabled,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  } = useNativeAccordionItem(rest)\n  const [omittedChildren, customAccordionButton, customAccordionPanel] =\n    useSplitChildren(children, NativeAccordionButton, NativeAccordionPanel)\n  const context = useMemo(\n    () => ({\n      disabled,\n      icon,\n      getButtonProps,\n      getIconProps,\n      getPanelProps,\n    }),\n    [disabled, getIconProps, getPanelProps, getButtonProps, icon],\n  )\n\n  return (\n    <ItemComponentContext value={context}>\n      <styled.details {...getItemProps()}>\n        {customAccordionButton ?? (\n          <NativeAccordionButton>{button}</NativeAccordionButton>\n        )}\n        {customAccordionPanel ?? (\n          <NativeAccordionPanel>{omittedChildren}</NativeAccordionPanel>\n        )}\n      </styled.details>\n    </ItemComponentContext>\n  )\n}, \"item\")()\n\nexport interface NativeAccordionButtonProps extends HTMLStyledProps<\"summary\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNode\n}\n\nexport const NativeAccordionButton = withContext<\n  \"summary\",\n  NativeAccordionButtonProps\n>(({ children, icon: customIcon, ...rest }) => {\n  const { icon: rootIcon } = useComponentContext()\n  const { icon: itemIcon, getButtonProps } = useItemComponentContext()\n\n  return (\n    <styled.summary {...getButtonProps(rest)}>\n      {children}\n\n      <NativeAccordionIcon>\n        {customIcon ?? itemIcon ?? rootIcon}\n      </NativeAccordionIcon>\n    </styled.summary>\n  )\n}, \"button\")()\n\nexport interface NativeAccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const NativeAccordionIcon = withContext<\"svg\", NativeAccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useItemComponentContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface NativeAccordionPanelProps extends HTMLStyledProps {}\n\nexport const NativeAccordionPanel = withContext<\n  \"div\",\n  NativeAccordionPanelProps\n>(({ children, ...rest }) => {\n  const { getPanelProps } = useItemComponentContext()\n\n  return (\n    <styled.div {...getPanelProps(rest)}>\n      <styled.div>{children}</styled.div>\n    </styled.div>\n  )\n}, \"panel\")()\n"],"mappings":"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"}

package/dist/cjs/components/native-popover/native-popover.cjs

@@ -16,28 +16,29 @@ const { ComponentContext, PropsContext: NativePopoverPropsContext, StyleContext,
 const NativePopoverRoot = (props) => {
 	const [styleContext, { children, ...rest }] = useRootComponentProps(props);
 	const { getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps } = require_use_native_popover.useNativePopover(rest);
+	const componentContext = (0, react.useMemo)(() => ({
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps,
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	}), [
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps,
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
-			value: (0, react.useMemo)(() => ({
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			}), [
-				getAnchorProps,
-				getBodyProps,
-				getCloseTriggerProps,
-				getContentProps,
-				getFooterProps,
-				getHeaderProps,
-				getPositionerProps,
-				getTriggerProps
-			]),
+			value: componentContext,
 			children
 		})
 	});

package/dist/cjs/components/native-popover/native-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"native-popover.cjs","names":["createSlotComponent","nativePopoverStyle","useNativePopover","styled"],"sources":["../../../../src/components/native-popover/native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativePopoverStyle } from \"./native-popover.style\"\nimport type {\n  UseNativePopoverProps,\n  UseNativePopoverReturn,\n} from \"./use-native-popover\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { nativePopoverStyle } from \"./native-popover.style\"\nimport { useNativePopover } from \"./use-native-popover\"\n\ninterface ComponentContext extends Pick<\n  UseNativePopoverReturn,\n  | \"getAnchorProps\"\n  | \"getBodyProps\"\n  | \"getCloseTriggerProps\"\n  | \"getContentProps\"\n  | \"getFooterProps\"\n  | \"getHeaderProps\"\n  | \"getPositionerProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface NativePopoverRootProps\n  extends\n    UseNativePopoverProps,\n    ThemeProps<NativePopoverStyle>,\n    PropsWithChildren {}\n\nconst {\n  ComponentContext,\n  PropsContext: NativePopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useNativePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<\n  NativePopoverRootProps,\n  NativePopoverStyle,\n  ComponentContext\n>(\"native-popover\", nativePopoverStyle)\n\nexport { NativePopoverPropsContext, useNativePopoverPropsContext }\n\n/**\n * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.\n *\n * @see https://yamada-ui.com/docs/components/native-popover\n */\nexport const NativePopoverRoot: FC<NativePopoverRootProps> = (props) => {\n  const [styleContext, { children, ...rest }] = useRootComponentProps(props)\n  const {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  } = useNativePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>{children}</ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface NativePopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverTrigger = withContext<\n  \"button\",\n  NativePopoverTriggerProps\n>(\"button\", \"trigger\")({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface NativePopoverAnchorProps extends HTMLStyledProps {}\n\nexport const NativePopoverAnchor = withContext<\"div\", NativePopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface NativePopoverPositionerProps extends HTMLStyledProps {}\n\nconst NativePopoverPositioner = withContext<\n  \"div\",\n  NativePopoverPositionerProps\n>(\"div\", \"positioner\")({ asChild: true }, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface NativePopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverCloseTrigger = withContext<\n  \"button\",\n  NativePopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface NativePopoverContentProps\n  extends HTMLStyledProps, PropsWithChildren {}\n\nexport const NativePopoverContent = withContext<\n  \"div\",\n  NativePopoverContentProps\n>(({ children, ...rest }) => {\n  const { getContentProps } = useComponentContext()\n\n  return (\n    <NativePopoverPositioner>\n      <styled.div {...getContentProps(cast<HTMLStyledProps>(rest))}>\n        {children}\n      </styled.div>\n    </NativePopoverPositioner>\n  )\n}, \"content\")({\n  suppressHydrationWarning: true,\n})\n\nexport interface NativePopoverHeaderProps extends HTMLStyledProps {}\n\nexport const NativePopoverHeader = withContext<\"div\", NativePopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface NativePopoverBodyProps extends HTMLStyledProps {}\n\nexport const NativePopoverBody = withContext<\"div\", NativePopoverBodyProps>(\n  \"div\",\n  \"body\",\n)(undefined, (props) => {\n  const { getBodyProps } = useComponentContext()\n\n  return getBodyProps(props)\n})\n\nexport interface NativePopoverFooterProps extends HTMLStyledProps {}\n\nexport const NativePopoverFooter = withContext<\"div\", NativePopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,kBACA,cAAc,2BACd,cACA,qBACA,iBAAiB,8BACjB,aACA,0BACEA,yBAAAA,oBAIF,kBAAkBC,6BAAAA,kBAAkB;;;;;;AAStC,MAAa,qBAAiD,UAAU;CACtE,MAAM,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,sBAAsB,KAAK;CACzE,MAAM,EACJ,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,oBACEC,2BAAAA,iBAAiB,IAAI;CAwBzB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;EAAc,OAAO;YACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QAxBb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,IACA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAK0C;GAAI;EAA2B,CAAA;CAC3D,CAAA;AAElB;AAIA,MAAa,uBAAuB,YAGlC,UAAU,SAAS,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CACnD,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CAC9B,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC;AAID,MAAM,0BAA0B,YAG9B,OAAO,YAAY,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CACnD,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB,KAAK;AACjC,CAAC;AAID,MAAa,4BAA4B,YAGvC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,OAAO;AAAE,CAAC,CAAC,CAC/D,EAAE,SAAS,KAAK,IACf,UAAU;CACT,MAAM,EAAE,yBAAyB,oBAAoB;CAErD,OAAO,qBAAqB,KAAK;AACnC,CACF;AAKA,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,GAAI,iBAAA,GAAA,oBAAA,cAAA,KAAA,CAAsC,IAAI,CAAC;EACxD;CACS,CAAA,EACW,CAAA;AAE7B,GAAG,SAAS,CAAC,CAAC,EACZ,0BAA0B,KAC5B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC;AAID,MAAa,oBAAoB,YAC/B,OACA,MACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,iBAAiB,oBAAoB;CAE7C,OAAO,aAAa,KAAK;AAC3B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC"}
+{"version":3,"file":"native-popover.cjs","names":["createSlotComponent","nativePopoverStyle","useNativePopover","styled"],"sources":["../../../../src/components/native-popover/native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativePopoverStyle } from \"./native-popover.style\"\nimport type {\n  UseNativePopoverProps,\n  UseNativePopoverReturn,\n} from \"./use-native-popover\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { nativePopoverStyle } from \"./native-popover.style\"\nimport { useNativePopover } from \"./use-native-popover\"\n\ninterface ComponentContext extends Pick<\n  UseNativePopoverReturn,\n  | \"getAnchorProps\"\n  | \"getBodyProps\"\n  | \"getCloseTriggerProps\"\n  | \"getContentProps\"\n  | \"getFooterProps\"\n  | \"getHeaderProps\"\n  | \"getPositionerProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface NativePopoverRootProps\n  extends\n    UseNativePopoverProps,\n    ThemeProps<NativePopoverStyle>,\n    PropsWithChildren {}\n\nconst {\n  ComponentContext,\n  PropsContext: NativePopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useNativePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<\n  NativePopoverRootProps,\n  NativePopoverStyle,\n  ComponentContext\n>(\"native-popover\", nativePopoverStyle)\n\nexport { NativePopoverPropsContext, useNativePopoverPropsContext }\n\n/**\n * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.\n *\n * @see https://yamada-ui.com/docs/components/native-popover\n */\nexport const NativePopoverRoot: FC<NativePopoverRootProps> = (props) => {\n  const [styleContext, { children, ...rest }] = useRootComponentProps(props)\n  const {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  } = useNativePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>{children}</ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface NativePopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverTrigger = withContext<\n  \"button\",\n  NativePopoverTriggerProps\n>(\"button\", \"trigger\")({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface NativePopoverAnchorProps extends HTMLStyledProps {}\n\nexport const NativePopoverAnchor = withContext<\"div\", NativePopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface NativePopoverPositionerProps extends HTMLStyledProps {}\n\nconst NativePopoverPositioner = withContext<\n  \"div\",\n  NativePopoverPositionerProps\n>(\"div\", \"positioner\")({ asChild: true }, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface NativePopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverCloseTrigger = withContext<\n  \"button\",\n  NativePopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface NativePopoverContentProps\n  extends HTMLStyledProps, PropsWithChildren {}\n\nexport const NativePopoverContent = withContext<\n  \"div\",\n  NativePopoverContentProps\n>(({ children, ...rest }) => {\n  const { getContentProps } = useComponentContext()\n\n  return (\n    <NativePopoverPositioner>\n      <styled.div {...getContentProps(cast<HTMLStyledProps>(rest))}>\n        {children}\n      </styled.div>\n    </NativePopoverPositioner>\n  )\n}, \"content\")({\n  suppressHydrationWarning: true,\n})\n\nexport interface NativePopoverHeaderProps extends HTMLStyledProps {}\n\nexport const NativePopoverHeader = withContext<\"div\", NativePopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface NativePopoverBodyProps extends HTMLStyledProps {}\n\nexport const NativePopoverBody = withContext<\"div\", NativePopoverBodyProps>(\n  \"div\",\n  \"body\",\n)(undefined, (props) => {\n  const { getBodyProps } = useComponentContext()\n\n  return getBodyProps(props)\n})\n\nexport interface NativePopoverFooterProps extends HTMLStyledProps {}\n\nexport const NativePopoverFooter = withContext<\"div\", NativePopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,kBACA,cAAc,2BACd,cACA,qBACA,iBAAiB,8BACjB,aACA,0BACEA,yBAAAA,oBAIF,kBAAkBC,6BAAAA,kBAAkB;;;;;;AAStC,MAAa,qBAAiD,UAAU;CACtE,MAAM,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,sBAAsB,KAAK;CACzE,MAAM,EACJ,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,oBACEC,2BAAAA,iBAAiB,IAAI;CACzB,MAAM,oBAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD;EAAc,OAAO;YACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,OAAO;GAAmB;EAA2B,CAAA;CAC3D,CAAA;AAElB;AAIA,MAAa,uBAAuB,YAGlC,UAAU,SAAS,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CACnD,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OAAO,gBAAgB,KAAK;AAC9B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CAC9B,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC;AAID,MAAM,0BAA0B,YAG9B,OAAO,YAAY,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,UAAU;CACnD,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB,KAAK;AACjC,CAAC;AAID,MAAa,4BAA4B,YAGvC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,OAAO;AAAE,CAAC,CAAC,CAC/D,EAAE,SAAS,KAAK,IACf,UAAU;CACT,MAAM,EAAE,yBAAyB,oBAAoB;CAErD,OAAO,qBAAqB,KAAK;AACnC,CACF;AAKA,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,GAAI,iBAAA,GAAA,oBAAA,cAAA,KAAA,CAAsC,IAAI,CAAC;EACxD;CACS,CAAA,EACW,CAAA;AAE7B,GAAG,SAAS,CAAC,CAAC,EACZ,0BAA0B,KAC5B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC;AAID,MAAa,oBAAoB,YAC/B,OACA,MACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,iBAAiB,oBAAoB;CAE7C,OAAO,aAAa,KAAK;AAC3B,CAAC;AAID,MAAa,sBAAsB,YACjC,OACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,oBAAoB;CAE/C,OAAO,eAAe,KAAK;AAC7B,CAAC"}

package/dist/cjs/components/native-popover/use-native-popover.cjs

@@ -64,9 +64,10 @@ const useNativePopover = ({ autoUpdate, disabled = false, elements, flip, gutter
 	const getPositionerProps = (0, react.useCallback)((props) => getPopperProps(props), [getPopperProps]);
 	const getContentProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
 		const hasHeader = !!getDocument()?.getElementById(headerId);
+		const hasBody = !!getDocument()?.getElementById(bodyId);
 		return {
 			id: contentId,
-			"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedby, !!getDocument()?.getElementById(bodyId) ? bodyId : void 0),
+			"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedby, hasBody ? bodyId : void 0),
 			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, hasHeader ? headerId : void 0),
 			"data-popup": (0, require_utils_index.utils_exports.dataAttr)(true),
 			popover: popover === true ? "" : popover,

package/dist/cjs/components/native-popover/use-native-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","mergeRefs"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: UsePopperProps[\"placement\"]\n  /**\n   * The mode of the popover.\n   *\n   * @default 'auto'\n   */\n  popover?: \"\" | \"auto\" | \"hint\" | \"manual\" | true\n  /**\n   * The target element ID for the popover trigger.\n   * If not provided, a generated ID will be used.\n   */\n  popoverTarget?: string\n  /**\n   * The action for the popover target.\n   *\n   * @default 'toggle'\n   */\n  popoverTargetAction?: \"hide\" | \"show\" | \"toggle\"\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n  autoUpdate,\n  disabled = false,\n  elements,\n  flip,\n  gutter,\n  matchWidth,\n  middleware,\n  offset,\n  placement = \"end\",\n  platform,\n  popover = \"auto\",\n  popoverTarget,\n  popoverTargetAction = \"toggle\",\n  preventOverflow,\n  strategy,\n  transform,\n  updateRef,\n  whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const generatedContentId = useId()\n  const contentId = popoverTarget ?? generatedContentId\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLButtonElement>) => {\n      if (!disabled) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [disabled],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => {\n      return {\n        type: \"button\",\n        \"aria-controls\": contentId,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-haspopup\": \"dialog\",\n        popoverTarget: contentId,\n        popoverTargetAction,\n        role: \"button\",\n        ...props,\n        ref: mergeRefs(ref, triggerRef, (node) => {\n          if (anchorRef.current == null) refs.setReference(node)\n        }),\n        onClick: handlerAll(props.onClick, onClick),\n      }\n    },\n    [contentId, disabled, onClick, popoverTargetAction, refs],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(\n    (props) => getPopperProps(props),\n    [getPopperProps],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const hasHeader = !!getDocument()?.getElementById(headerId)\n      const hasBody = !!getDocument()?.getElementById(bodyId)\n\n      return {\n        id: contentId,\n        \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n        \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n        \"data-popup\": dataAttr(true),\n        popover: popover === true ? \"\" : popover,\n        role: \"dialog\",\n        tabIndex: -1,\n        ...props,\n        ref: mergeRefs(ref, contentRef),\n      }\n    },\n    [getDocument, headerId, bodyId, contentId, popover],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({ id: headerId, ...props }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({ id: bodyId, ...props }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        popoverTarget: contentId,\n        popoverTargetAction: \"hide\",\n        ...props,\n      }\n    },\n    [contentId],\n  )\n\n  return {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":"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"}
+{"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","mergeRefs"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: UsePopperProps[\"placement\"]\n  /**\n   * The mode of the popover.\n   *\n   * @default 'auto'\n   */\n  popover?: \"\" | \"auto\" | \"hint\" | \"manual\" | true\n  /**\n   * The target element ID for the popover trigger.\n   * If not provided, a generated ID will be used.\n   */\n  popoverTarget?: string\n  /**\n   * The action for the popover target.\n   *\n   * @default 'toggle'\n   */\n  popoverTargetAction?: \"hide\" | \"show\" | \"toggle\"\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n  autoUpdate,\n  disabled = false,\n  elements,\n  flip,\n  gutter,\n  matchWidth,\n  middleware,\n  offset,\n  placement = \"end\",\n  platform,\n  popover = \"auto\",\n  popoverTarget,\n  popoverTargetAction = \"toggle\",\n  preventOverflow,\n  strategy,\n  transform,\n  updateRef,\n  whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const generatedContentId = useId()\n  const contentId = popoverTarget ?? generatedContentId\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLButtonElement>) => {\n      if (!disabled) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [disabled],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => {\n      return {\n        type: \"button\",\n        \"aria-controls\": contentId,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-haspopup\": \"dialog\",\n        popoverTarget: contentId,\n        popoverTargetAction,\n        role: \"button\",\n        ...props,\n        ref: mergeRefs(ref, triggerRef, (node) => {\n          if (anchorRef.current == null) refs.setReference(node)\n        }),\n        onClick: handlerAll(props.onClick, onClick),\n      }\n    },\n    [contentId, disabled, onClick, popoverTargetAction, refs],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(\n    (props) => getPopperProps(props),\n    [getPopperProps],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const hasHeader = !!getDocument()?.getElementById(headerId)\n      const hasBody = !!getDocument()?.getElementById(bodyId)\n\n      return {\n        id: contentId,\n        \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n        \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n        \"data-popup\": dataAttr(true),\n        popover: popover === true ? \"\" : popover,\n        role: \"dialog\",\n        tabIndex: -1,\n        ...props,\n        ref: mergeRefs(ref, contentRef),\n      }\n    },\n    [getDocument, headerId, bodyId, contentId, popover],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({ id: headerId, ...props }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({ id: bodyId, ...props }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        popoverTarget: contentId,\n        popoverTargetAction: \"hide\",\n        ...props,\n      }\n    },\n    [contentId],\n  )\n\n  return {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":"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"}

package/dist/cjs/components/notice/notice-provider.cjs

@@ -26,21 +26,23 @@ const createMethods = (id, refs, defaultLimit) => ({
 const NoticeProvider = ({ children, containerRef, expand = false, limit = 3 }) => {
 	const placementMap = (0, react.useRef)({});
 	const id = (0, react.useId)();
+	const value = (0, react.useMemo)(() => ({ ...createMethods(id, placementMap.current, limit) }), [id, limit]);
+	const components = (0, react.useMemo)(() => {
+		return Object.keys(require_notice.PLACEMENT_MAP).map((placement) => {
+			if (!placementMap.current[placement]) placementMap.current[placement] = { current: createController() };
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notice.NoticeRoot, {
+				ref: placementMap.current[placement],
+				expand,
+				limit,
+				placement
+			}, placement);
+		});
+	}, [limit, expand]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NoticeContext, {
-		value: (0, react.useMemo)(() => ({ ...createMethods(id, placementMap.current, limit) }), [id, limit]),
+		value,
 		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
 			containerRef,
-			children: (0, react.useMemo)(() => {
-				return Object.keys(require_notice.PLACEMENT_MAP).map((placement) => {
-					if (!placementMap.current[placement]) placementMap.current[placement] = { current: createController() };
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_notice.NoticeRoot, {
-						ref: placementMap.current[placement],
-						expand,
-						limit,
-						placement
-					}, placement);
-				});
-			}, [limit, expand])
+			children: components
 		})]
 	});
 };

package/dist/cjs/components/notice/notice-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice-provider.cjs","names":["Portal","PLACEMENT_MAP","NoticeRoot"],"sources":["../../../../src/components/notice/notice-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, RefObject } from \"react\"\nimport type {\n  HTMLStyledProps,\n  NoticeConfig,\n  NoticePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport { createContext, createRef, use, useId, useMemo, useRef } from \"react\"\nimport { Portal } from \"../portal\"\nimport { NoticeRoot, PLACEMENT_MAP } from \"./notice\"\n\nexport interface NoticeProviderProps\n  extends HTMLStyledProps, NoticeConfig, ThemeProps<NoticeStyle> {\n  /**\n   * Container ref for the portal.\n   */\n  containerRef?: RefObject<HTMLElement>\n}\n\ninterface NoticeState {\n  limit: number\n  placement: NoticePlacement\n}\n\nexport interface NoticeMethods {\n  getId: (placement: NoticePlacement) => string\n  getLimit: (placement: NoticePlacement) => number\n  updateLimit: (state: NoticeState) => void\n}\n\ninterface NoticeContext extends NoticeMethods {}\n\nconst NoticeContext = createContext({} as NoticeContext)\n\nexport type Controller = ReturnType<typeof createController>\n\nconst createController = () => ({\n  getLimit: createRef<NoticeMethods[\"getLimit\"]>(),\n  updateLimit: createRef<NoticeMethods[\"updateLimit\"]>(),\n})\n\nconst createMethods = (\n  id: string,\n  refs: {\n    [K in NoticePlacement]?: RefObject<Controller>\n  },\n  defaultLimit: number,\n): NoticeMethods => ({\n  getId: (placement) => {\n    return `${id}-${placement}`\n  },\n  getLimit: (placement) => {\n    const method = refs[placement]?.current.getLimit.current\n\n    return method?.(placement) ?? defaultLimit\n  },\n  updateLimit: (state) => {\n    const { placement } = state\n    const method = refs[placement]?.current.updateLimit.current\n\n    method?.(state)\n  },\n})\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n  children,\n  containerRef,\n  expand = false,\n  limit = 3,\n}) => {\n  const placementMap = useRef<{\n    [K in NoticePlacement]?: RefObject<Controller>\n  }>({})\n  const id = useId()\n\n  const value = useMemo(\n    () => ({ ...createMethods(id, placementMap.current, limit) }),\n    [id, limit],\n  )\n\n  const components = useMemo(() => {\n    return (Object.keys(PLACEMENT_MAP) as NoticePlacement[]).map(\n      (placement) => {\n        if (!placementMap.current[placement])\n          placementMap.current[placement] = { current: createController() }\n\n        return (\n          <NoticeRoot\n            key={placement}\n            ref={placementMap.current[placement]}\n            expand={expand}\n            limit={limit}\n            placement={placement}\n          />\n        )\n      },\n    )\n  }, [limit, expand])\n\n  return (\n    <NoticeContext value={value}>\n      {children}\n      <Portal containerRef={containerRef}>{components}</Portal>\n    </NoticeContext>\n  )\n}\n\nexport const useNoticeContext = (): NoticeContext => {\n  const context = use(NoticeContext)\n\n  return context\n}\n"],"mappings":";;;;;;AAmCA,MAAM,iBAAA,GAAA,MAAA,cAAA,CAA8B,CAAC,CAAkB;AAIvD,MAAM,0BAA0B;CAC9B,WAAA,GAAA,MAAA,UAAA,CAA+C;CAC/C,cAAA,GAAA,MAAA,UAAA,CAAqD;AACvD;AAEA,MAAM,iBACJ,IACA,MAGA,kBACmB;CACnB,QAAQ,cAAc;EACpB,OAAO,GAAG,GAAG,GAAG;CAClB;CACA,WAAW,cAAc;EACvB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,SAAS;EAEjD,OAAO,SAAS,SAAS,KAAK;CAChC;CACA,cAAc,UAAU;EACtB,MAAM,EAAE,cAAc;EACtB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,YAAY;EAEpD,SAAS,KAAK;CAChB;AACF;AAEA,MAAa,kBAA2C,EACtD,UACA,cACA,SAAS,OACT,QAAQ,QACJ;CACJ,MAAM,gBAAA,GAAA,MAAA,OAAA,CAEH,CAAC,CAAC;CACL,MAAM,MAAA,GAAA,MAAA,MAAA,CAAW;CA0BjB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAD;EAAe,QAAA,GAAA,MAAA,QAAA,QAxBR,EAAE,GAAG,cAAc,IAAI,aAAa,SAAS,KAAK,EAAE,IAC3D,CAAC,IAAI,KAAK,CAuBgB;YAA1B,CACG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,QAAD;GAAsB;sCAtBO;IAC/B,OAAQ,OAAO,KAAKC,eAAAA,aAAa,CAAC,CAAuB,KACtD,cAAc;KACb,IAAI,CAAC,aAAa,QAAQ,YACxB,aAAa,QAAQ,aAAa,EAAE,SAAS,iBAAiB,EAAE;KAElE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,YAAD;MAEE,KAAK,aAAa,QAAQ;MAClB;MACD;MACI;KACZ,GALM,SAKN;IAEL,CACF;GACF,GAAG,CAAC,OAAO,MAAM,CAKiC;EAAU,CAAA,CAC3C;;AAEnB;AAEA,MAAa,yBAAwC;CAGnD,QAAA,GAAA,MAAA,IAAA,CAFoB,aAEP;AACf"}
+{"version":3,"file":"notice-provider.cjs","names":["PLACEMENT_MAP","NoticeRoot","Portal"],"sources":["../../../../src/components/notice/notice-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, RefObject } from \"react\"\nimport type {\n  HTMLStyledProps,\n  NoticeConfig,\n  NoticePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { NoticeStyle } from \"./notice.style\"\nimport { createContext, createRef, use, useId, useMemo, useRef } from \"react\"\nimport { Portal } from \"../portal\"\nimport { NoticeRoot, PLACEMENT_MAP } from \"./notice\"\n\nexport interface NoticeProviderProps\n  extends HTMLStyledProps, NoticeConfig, ThemeProps<NoticeStyle> {\n  /**\n   * Container ref for the portal.\n   */\n  containerRef?: RefObject<HTMLElement>\n}\n\ninterface NoticeState {\n  limit: number\n  placement: NoticePlacement\n}\n\nexport interface NoticeMethods {\n  getId: (placement: NoticePlacement) => string\n  getLimit: (placement: NoticePlacement) => number\n  updateLimit: (state: NoticeState) => void\n}\n\ninterface NoticeContext extends NoticeMethods {}\n\nconst NoticeContext = createContext({} as NoticeContext)\n\nexport type Controller = ReturnType<typeof createController>\n\nconst createController = () => ({\n  getLimit: createRef<NoticeMethods[\"getLimit\"]>(),\n  updateLimit: createRef<NoticeMethods[\"updateLimit\"]>(),\n})\n\nconst createMethods = (\n  id: string,\n  refs: {\n    [K in NoticePlacement]?: RefObject<Controller>\n  },\n  defaultLimit: number,\n): NoticeMethods => ({\n  getId: (placement) => {\n    return `${id}-${placement}`\n  },\n  getLimit: (placement) => {\n    const method = refs[placement]?.current.getLimit.current\n\n    return method?.(placement) ?? defaultLimit\n  },\n  updateLimit: (state) => {\n    const { placement } = state\n    const method = refs[placement]?.current.updateLimit.current\n\n    method?.(state)\n  },\n})\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n  children,\n  containerRef,\n  expand = false,\n  limit = 3,\n}) => {\n  const placementMap = useRef<{\n    [K in NoticePlacement]?: RefObject<Controller>\n  }>({})\n  const id = useId()\n\n  const value = useMemo(\n    () => ({ ...createMethods(id, placementMap.current, limit) }),\n    [id, limit],\n  )\n\n  const components = useMemo(() => {\n    return (Object.keys(PLACEMENT_MAP) as NoticePlacement[]).map(\n      (placement) => {\n        if (!placementMap.current[placement])\n          placementMap.current[placement] = { current: createController() }\n\n        return (\n          <NoticeRoot\n            key={placement}\n            ref={placementMap.current[placement]}\n            expand={expand}\n            limit={limit}\n            placement={placement}\n          />\n        )\n      },\n    )\n  }, [limit, expand])\n\n  return (\n    <NoticeContext value={value}>\n      {children}\n      <Portal containerRef={containerRef}>{components}</Portal>\n    </NoticeContext>\n  )\n}\n\nexport const useNoticeContext = (): NoticeContext => {\n  const context = use(NoticeContext)\n\n  return context\n}\n"],"mappings":";;;;;;AAmCA,MAAM,iBAAA,GAAA,MAAA,cAAA,CAA8B,CAAC,CAAkB;AAIvD,MAAM,0BAA0B;CAC9B,WAAA,GAAA,MAAA,UAAA,CAA+C;CAC/C,cAAA,GAAA,MAAA,UAAA,CAAqD;AACvD;AAEA,MAAM,iBACJ,IACA,MAGA,kBACmB;CACnB,QAAQ,cAAc;EACpB,OAAO,GAAG,GAAG,GAAG;CAClB;CACA,WAAW,cAAc;EACvB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,SAAS;EAEjD,OAAO,SAAS,SAAS,KAAK;CAChC;CACA,cAAc,UAAU;EACtB,MAAM,EAAE,cAAc;EACtB,MAAM,SAAS,KAAK,UAAU,EAAE,QAAQ,YAAY;EAEpD,SAAS,KAAK;CAChB;AACF;AAEA,MAAa,kBAA2C,EACtD,UACA,cACA,SAAS,OACT,QAAQ,QACJ;CACJ,MAAM,gBAAA,GAAA,MAAA,OAAA,CAEH,CAAC,CAAC;CACL,MAAM,MAAA,GAAA,MAAA,MAAA,CAAW;CAEjB,MAAM,SAAA,GAAA,MAAA,QAAA,QACG,EAAE,GAAG,cAAc,IAAI,aAAa,SAAS,KAAK,EAAE,IAC3D,CAAC,IAAI,KAAK,CACZ;CAEA,MAAM,cAAA,GAAA,MAAA,QAAA,OAA2B;EAC/B,OAAQ,OAAO,KAAKA,eAAAA,aAAa,CAAC,CAAuB,KACtD,cAAc;GACb,IAAI,CAAC,aAAa,QAAQ,YACxB,aAAa,QAAQ,aAAa,EAAE,SAAS,iBAAiB,EAAE;GAElE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,YAAD;IAEE,KAAK,aAAa,QAAQ;IAClB;IACD;IACI;GACZ,GALM,SAKN;EAEL,CACF;CACF,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,eAAD;EAAsB;YAAtB,CACG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAAsB;aAAe;EAAmB,CAAA,CAC3C;;AAEnB;AAEA,MAAa,yBAAwC;CAGnD,QAAA,GAAA,MAAA,IAAA,CAFoB,aAEP;AACf"}

package/dist/cjs/components/pagination/use-pagination.cjs

@@ -22,11 +22,14 @@ const usePagination = ({ boundaries = 1, defaultPage = 1, disabled = false, page
 		const nextSiblings = Math.min(currentPage + siblings, total - boundaries);
 		const prevDots = prevSiblings > boundaries + 2;
 		const nextDots = nextSiblings < total - (boundaries + 1);
-		if (!prevDots && nextDots) return [
-			...computedRange(1, siblings * 2 + boundaries + 2),
-			"ellipsis",
-			...computedRange(total - (boundaries - 1), total)
-		];
+		if (!prevDots && nextDots) {
+			const prevPages = siblings * 2 + boundaries + 2;
+			return [
+				...computedRange(1, prevPages),
+				"ellipsis",
+				...computedRange(total - (boundaries - 1), total)
+			];
+		}
 		if (prevDots && !nextDots) {
 			const nextPages = boundaries + 1 + 2 * siblings;
 			return [

package/dist/cjs/components/pagination/use-pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-pagination.cjs","names":["createContext","useControllableState","useI18n","mergeProps","mergeRefs"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n  createContext<PaginationContext>({\n    name: \"PaginationContext\",\n  })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n  HTMLProps,\n  \"onChange\" | \"page\"\n> {\n  /**\n   * The total number of pages in pagination.\n   */\n  total: number\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /**\n   * The initial page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   *\n   * @default 1\n   */\n  defaultPage?: number\n  /**\n   * If `true`, the pagination all item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   */\n  page?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * The callback invoked when the page changes.\n   */\n  onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n  boundaries = 1,\n  defaultPage = 1,\n  disabled = false,\n  page,\n  siblings = 1,\n  total,\n  onChange: onChangeProp,\n  ...rest\n}: UsePaginationProps) => {\n  const { ref: restRef, ...restProps } = rest\n  const [currentPage, setCurrentPage] = useControllableState({\n    defaultValue: defaultPage,\n    value: page,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"pagination\")\n  const range = useMemo((): Page[] => {\n    const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n    if (minimumTotal >= total) return computedRange(1, total)\n\n    const prevSiblings = Math.max(currentPage - siblings, boundaries)\n    const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n    const prevDots = prevSiblings > boundaries + 2\n    const nextDots = nextSiblings < total - (boundaries + 1)\n\n    if (!prevDots && nextDots) {\n      const prevPages = siblings * 2 + boundaries + 2\n\n      return [\n        ...computedRange(1, prevPages),\n        \"ellipsis\",\n        ...computedRange(total - (boundaries - 1), total),\n      ]\n    }\n\n    if (prevDots && !nextDots) {\n      const nextPages = boundaries + 1 + 2 * siblings\n\n      return [\n        ...computedRange(1, boundaries),\n        \"ellipsis\",\n        ...computedRange(total - nextPages, total),\n      ]\n    }\n\n    return [\n      ...computedRange(1, boundaries),\n      \"ellipsis\",\n      ...computedRange(prevSiblings, nextSiblings),\n      \"ellipsis\",\n      ...computedRange(total - boundaries + 1, total),\n    ]\n  }, [boundaries, siblings, currentPage, total])\n\n  const onChange = useCallback(\n    (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n    [setCurrentPage, total],\n  )\n\n  const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n  const onChangeEnd = useCallback(\n    () => setCurrentPage(total),\n    [setCurrentPage, total],\n  )\n\n  const onChangePrev = useCallback(\n    () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n    [setCurrentPage],\n  )\n\n  const onChangeNext = useCallback(\n    () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n    [setCurrentPage, total],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-label\": t(\"Pagination\"),\n          role: \"navigation\",\n        },\n        restProps,\n        props,\n        {\n          ref: mergeRefs(ref, restRef),\n        },\n      )(),\n    [restProps, restRef, t],\n  )\n\n  const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n    ({ page, ...props } = {}) => {\n      if (isNumber(page))\n        return {\n          type: \"button\",\n          \"aria-current\": currentPage === page ? \"page\" : undefined,\n          \"aria-label\": t(\"Go to page {value}\", { value: page }),\n          disabled,\n          ...props,\n          onClick: handlerAll(props.onClick, () => onChange(page)),\n        }\n      else return { ...props, \"data-ellipsis\": \"\" }\n    },\n    [currentPage, t, onChange, disabled],\n  )\n\n  const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to first page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeStart),\n    }),\n    [onChangeStart, t, disabled, currentPage],\n  )\n\n  const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to last page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeEnd),\n    }),\n    [onChangeEnd, t, disabled, currentPage, total],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to previous page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangePrev),\n    }),\n    [onChangePrev, t, disabled, currentPage],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to next page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeNext),\n    }),\n    [onChangeNext, t, disabled, currentPage, total],\n  )\n\n  return {\n    currentPage,\n    disabled,\n    range,\n    total,\n    getEndTriggerProps,\n    getItemProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    getStartTriggerProps,\n    onChange,\n    onChangeEnd,\n    onChangeNext,\n    onChangePrev,\n    onChangeStart,\n  }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n  Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}
+{"version":3,"file":"use-pagination.cjs","names":["createContext","useControllableState","useI18n","mergeProps","mergeRefs"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n  createContext<PaginationContext>({\n    name: \"PaginationContext\",\n  })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n  HTMLProps,\n  \"onChange\" | \"page\"\n> {\n  /**\n   * The total number of pages in pagination.\n   */\n  total: number\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /**\n   * The initial page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   *\n   * @default 1\n   */\n  defaultPage?: number\n  /**\n   * If `true`, the pagination all item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The page of the pagination.\n   * Should be less than `total` and greater than `1`.\n   */\n  page?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * The callback invoked when the page changes.\n   */\n  onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n  boundaries = 1,\n  defaultPage = 1,\n  disabled = false,\n  page,\n  siblings = 1,\n  total,\n  onChange: onChangeProp,\n  ...rest\n}: UsePaginationProps) => {\n  const { ref: restRef, ...restProps } = rest\n  const [currentPage, setCurrentPage] = useControllableState({\n    defaultValue: defaultPage,\n    value: page,\n    onChange: onChangeProp,\n  })\n  const { t } = useI18n(\"pagination\")\n  const range = useMemo((): Page[] => {\n    const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n    if (minimumTotal >= total) return computedRange(1, total)\n\n    const prevSiblings = Math.max(currentPage - siblings, boundaries)\n    const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n    const prevDots = prevSiblings > boundaries + 2\n    const nextDots = nextSiblings < total - (boundaries + 1)\n\n    if (!prevDots && nextDots) {\n      const prevPages = siblings * 2 + boundaries + 2\n\n      return [\n        ...computedRange(1, prevPages),\n        \"ellipsis\",\n        ...computedRange(total - (boundaries - 1), total),\n      ]\n    }\n\n    if (prevDots && !nextDots) {\n      const nextPages = boundaries + 1 + 2 * siblings\n\n      return [\n        ...computedRange(1, boundaries),\n        \"ellipsis\",\n        ...computedRange(total - nextPages, total),\n      ]\n    }\n\n    return [\n      ...computedRange(1, boundaries),\n      \"ellipsis\",\n      ...computedRange(prevSiblings, nextSiblings),\n      \"ellipsis\",\n      ...computedRange(total - boundaries + 1, total),\n    ]\n  }, [boundaries, siblings, currentPage, total])\n\n  const onChange = useCallback(\n    (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n    [setCurrentPage, total],\n  )\n\n  const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n  const onChangeEnd = useCallback(\n    () => setCurrentPage(total),\n    [setCurrentPage, total],\n  )\n\n  const onChangePrev = useCallback(\n    () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n    [setCurrentPage],\n  )\n\n  const onChangeNext = useCallback(\n    () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n    [setCurrentPage, total],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-label\": t(\"Pagination\"),\n          role: \"navigation\",\n        },\n        restProps,\n        props,\n        {\n          ref: mergeRefs(ref, restRef),\n        },\n      )(),\n    [restProps, restRef, t],\n  )\n\n  const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n    ({ page, ...props } = {}) => {\n      if (isNumber(page))\n        return {\n          type: \"button\",\n          \"aria-current\": currentPage === page ? \"page\" : undefined,\n          \"aria-label\": t(\"Go to page {value}\", { value: page }),\n          disabled,\n          ...props,\n          onClick: handlerAll(props.onClick, () => onChange(page)),\n        }\n      else return { ...props, \"data-ellipsis\": \"\" }\n    },\n    [currentPage, t, onChange, disabled],\n  )\n\n  const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to first page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeStart),\n    }),\n    [onChangeStart, t, disabled, currentPage],\n  )\n\n  const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to last page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeEnd),\n    }),\n    [onChangeEnd, t, disabled, currentPage, total],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to previous page\"),\n      disabled: disabled || currentPage === 1,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangePrev),\n    }),\n    [onChangePrev, t, disabled, currentPage],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      type: \"button\",\n      \"aria-label\": t(\"Go to next page\"),\n      disabled: disabled || currentPage === total,\n      ...props,\n      onClick: handlerAll(props.onClick, onChangeNext),\n    }),\n    [onChangeNext, t, disabled, currentPage, total],\n  )\n\n  return {\n    currentPage,\n    disabled,\n    range,\n    total,\n    getEndTriggerProps,\n    getItemProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    getStartTriggerProps,\n    onChange,\n    onChangeEnd,\n    onChangeNext,\n    onChangePrev,\n    onChangeStart,\n  }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n  Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}

package/dist/cjs/components/pin-input/pin-input.cjs

@@ -23,18 +23,19 @@ const PinInputRoot = withProvider(({ children, errorBorderColor, focusBorderColo
 		if (validChildren.length) return validChildren;
 		else return Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinInputField, { index }, index));
 	}, [children, items]);
+	const context = (0, react.useMemo)(() => ({
+		errorBorderColor,
+		focusBorderColor,
+		getInputProps
+	}), [
+		getInputProps,
+		errorBorderColor,
+		focusBorderColor
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_pin_input.PinInputDescendantsContext, {
 		value: descendants,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
-			value: (0, react.useMemo)(() => ({
-				errorBorderColor,
-				focusBorderColor,
-				getInputProps
-			}), [
-				getInputProps,
-				errorBorderColor,
-				focusBorderColor
-			]),
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
 				...getRootProps(),
 				children: cloneChildren

package/dist/cjs/components/pin-input/pin-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.cjs","names":["createSlotComponent","pinInputStyle","usePinInput","getValidChildren","PinInputDescendantsContext","Group","Input","usePinInputDescendant","useFieldProps","mergeRefs"],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  RequiredPropGetter,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n  PinInputDescendantsContext,\n  usePinInput,\n  usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n  getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, PinInputStyle>,\n      \"defaultValue\" | \"mask\" | \"onChange\"\n    >,\n    ThemeProps<PinInputStyle>,\n    UseInputBorderProps,\n    UsePinInputProps {}\n\nconst {\n  ComponentContext,\n  PropsContext: PinInputPropsContext,\n  useComponentContext,\n  usePropsContext: usePinInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n  \"pin-input\",\n  pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see https://yamada-ui.com/docs/components/pin-input\n */\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n  ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n    const { descendants, items, getInputProps, getRootProps } =\n      usePinInput(rest)\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (validChildren.length) return validChildren\n      else\n        return Array.from({ length: items }, (_, index) => (\n          <PinInputField key={index} index={index} />\n        ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n      [getInputProps, errorBorderColor, focusBorderColor],\n    )\n\n    return (\n      <PinInputDescendantsContext value={descendants}>\n        <ComponentContext value={context}>\n          <Group {...getRootProps()}>{cloneChildren}</Group>\n        </ComponentContext>\n      </PinInputDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n  /**\n   * The index of the pin input field.\n   */\n  index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n  Input,\n  \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n  const { errorBorderColor, focusBorderColor, getInputProps } =\n    useComponentContext()\n  const { register } = usePinInputDescendant()\n  const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n  return {\n    ...getInputProps({\n      errorBorderColor,\n      focusBorderColor,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      index,\n    }),\n  }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzCC,sBAAAA,YAAY,IAAI;CAClB,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,MAAM,gBAAgBC,iBAAAA,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CAMpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,4BAAD;EAA4B,OAAO;YACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,QAAA,QANb;IAAE;IAAkB;IAAkB;GAAc,IAC3D;IAAC;IAAe;IAAkB;GAAgB,CAKjB;aAC7B,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3BC,cAAAA,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAaC,sBAAAA,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAeC,wBAAAA,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAKC,YAAAA,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}
+{"version":3,"file":"pin-input.cjs","names":["createSlotComponent","pinInputStyle","usePinInput","getValidChildren","PinInputDescendantsContext","Group","Input","usePinInputDescendant","useFieldProps","mergeRefs"],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  RequiredPropGetter,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n  PinInputDescendantsContext,\n  usePinInput,\n  usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n  getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n  extends\n    Omit<\n      WithoutThemeProps<GroupProps, PinInputStyle>,\n      \"defaultValue\" | \"mask\" | \"onChange\"\n    >,\n    ThemeProps<PinInputStyle>,\n    UseInputBorderProps,\n    UsePinInputProps {}\n\nconst {\n  ComponentContext,\n  PropsContext: PinInputPropsContext,\n  useComponentContext,\n  usePropsContext: usePinInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n  \"pin-input\",\n  pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see https://yamada-ui.com/docs/components/pin-input\n */\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n  ({ children, errorBorderColor, focusBorderColor, ...rest }) => {\n    const { descendants, items, getInputProps, getRootProps } =\n      usePinInput(rest)\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (validChildren.length) return validChildren\n      else\n        return Array.from({ length: items }, (_, index) => (\n          <PinInputField key={index} index={index} />\n        ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n      [getInputProps, errorBorderColor, focusBorderColor],\n    )\n\n    return (\n      <PinInputDescendantsContext value={descendants}>\n        <ComponentContext value={context}>\n          <Group {...getRootProps()}>{cloneChildren}</Group>\n        </ComponentContext>\n      </PinInputDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n  /**\n   * The index of the pin input field.\n   */\n  index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n  Input,\n  \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n  const { errorBorderColor, focusBorderColor, getInputProps } =\n    useComponentContext()\n  const { register } = usePinInputDescendant()\n  const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n  return {\n    ...getInputProps({\n      errorBorderColor,\n      focusBorderColor,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      index,\n    }),\n  }\n})\n"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,OAAO,eAAe,iBACzCC,sBAAAA,YAAY,IAAI;CAClB,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,MAAM,gBAAgBC,iBAAAA,iBAAiB,QAAQ;EAE/C,IAAI,cAAc,QAAQ,OAAO;OAE/B,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAkC,MAAQ,GAAtB,KAAsB,CAC3C;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,WAAA,GAAA,MAAA,QAAA,QACG;EAAE;EAAkB;EAAkB;CAAc,IAC3D;EAAC;EAAe;EAAkB;CAAgB,CACpD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,4BAAD;EAA4B,OAAO;YACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,OAAO;aACvB,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAO,GAAI,aAAa;cAAI;GAAqB,CAAA;EACjC,CAAA;CACQ,CAAA;AAEhC,GACA,MACF,CAAC,CAAC;AASF,MAAa,gBAAgB,YAC3BC,cAAAA,OACA,OACF,CAAC,CAAC,KAAA,IAAY,EAAE,KAAK,OAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,oBAAoB;CACtB,MAAM,EAAE,aAAaC,sBAAAA,sBAAsB;CAC3C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAeC,wBAAAA,cAAc,IAAI;CAEtE,OAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAKC,YAAAA,UAAU,UAAU,GAAG;EAC5B;CACF,CAAC,EACH;AACF,CAAC"}