@yamada-ui/react 2.2.2-dev-20260525083850 → 2.2.2-dev-20260525150310

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["motion"],"sources":["../../../../src/components/drawer/drawer.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, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\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 { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n  extends\n    Omit<UseDrawerReturn, \"getRootProps\">,\n    Pick<\n      DrawerRootProps,\n      \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n    > {}\n\nexport interface DrawerRootProps\n  extends\n    ThemeProps<DrawerStyle>,\n    Omit<UseDrawerProps, \"placement\" | \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    ShorthandDrawerContentProps {\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 drawer opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the drawer close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the drag bar when `closeOnDrag` is `true`.\n   *\n   * @default true\n   */\n  withDragBar?: boolean\n  /**\n   * If `true`, display the drawer 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 drawer has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DrawerPropsContext,\n  useComponentContext,\n  usePropsContext: useDrawerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n  \"drawer\",\n  drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/docs/components/drawer\n */\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n  ({\n    allowPinchZoom = false,\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    closeOnDrag,\n    dragConstraints,\n    dragElastic,\n    dragOffset,\n    dragVelocity,\n    duration = { enter: 0.4, exit: 0.3 },\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    placement: placementProp,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = !closeOnDrag,\n    withDragBar = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const placement = useValue(placementProp)\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      DrawerOpenTrigger,\n      DrawerOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useDrawer({\n      closeOnDrag,\n      dragConstraints,\n      dragElastic,\n      dragOffset,\n      dragVelocity,\n      placement,\n      ...props,\n    })\n    const customOpenTrigger = trigger ? (\n      <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n    ) : null\n\n    const context = useMemo(\n      () => ({\n        duration,\n        open,\n        placement,\n        withCloseButton,\n        withDragBar,\n        ...rest,\n      }),\n      [duration, open, withDragBar, placement, 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 ? <DrawerOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandDrawerContent\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  { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\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 DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n  \"button\",\n  DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  undefined,\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getCloseTriggerProps(props) }\n  },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n  const { duration, getOverlayProps } = useComponentContext()\n\n  return (\n    <motion.div\n      animate=\"enter\"\n      custom={{ duration }}\n      exit=\"exit\"\n      initial=\"exit\"\n      variants={fadeVariants}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      closeOnDrag,\n      duration,\n      open,\n      placement,\n      withCloseButton,\n      withDragBar,\n      getContentProps,\n    } = useComponentContext()\n    const [omittedChildren, customCloseButton, customDragBar] =\n      useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n    return (\n      <Slide\n        as=\"section\"\n        duration={duration}\n        open={open}\n        placement={placement}\n        {...(getContentProps(rest) as SlideProps)}\n      >\n        {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n        {customDragBar ??\n          (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n        {omittedChildren}\n      </Slide>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n  /**\n   * The drawer body to use.\n   */\n  body?: DrawerBodyProps | ReactNode\n  /**\n   * The drawer cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The drawer footer to use.\n   */\n  footer?: DrawerFooterProps | ReactNode\n  /**\n   * The drawer header to use.\n   */\n  header?: DrawerHeaderProps | ReactNode\n  /**\n   * The drawer middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The drawer success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The drawer title to use.\n   */\n  title?: DrawerTitleProps | 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 ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\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(DrawerHeader, header)\n  const customTitle = wrapOrPassProps(DrawerTitle, title)\n  const customBody = wrapOrPassProps(DrawerBody, body)\n  const customFooter = wrapOrPassProps(DrawerFooter, 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    <DrawerContent>\n      {customHeader ??\n        (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <DrawerFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </DrawerFooter>\n        ) : null)}\n    </DrawerContent>\n  )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n  \"div\",\n  \"dragBar\",\n)(undefined, (props) => {\n  const { getDragBarProps } = useComponentContext()\n\n  return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\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":"drawer.js","names":["motion"],"sources":["../../../../src/components/drawer/drawer.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, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\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 { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n  extends\n    Omit<UseDrawerReturn, \"getRootProps\">,\n    Pick<\n      DrawerRootProps,\n      \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n    > {}\n\nexport interface DrawerRootProps\n  extends\n    ThemeProps<DrawerStyle>,\n    Omit<UseDrawerProps, \"placement\" | \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    ShorthandDrawerContentProps {\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 drawer opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The animation duration.\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the drawer close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the drag bar when `closeOnDrag` is `true`.\n   *\n   * @default true\n   */\n  withDragBar?: boolean\n  /**\n   * If `true`, display the drawer 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 drawer has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DrawerPropsContext,\n  useComponentContext,\n  usePropsContext: useDrawerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n  \"drawer\",\n  drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/docs/components/drawer\n */\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n  ({\n    allowPinchZoom = false,\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    closeOnDrag,\n    dragConstraints,\n    dragElastic,\n    dragOffset,\n    dragVelocity,\n    duration = { enter: 0.4, exit: 0.3 },\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    placement: placementProp,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = !closeOnDrag,\n    withDragBar = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const placement = useValue(placementProp)\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      DrawerOpenTrigger,\n      DrawerOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useDrawer({\n      closeOnDrag,\n      dragConstraints,\n      dragElastic,\n      dragOffset,\n      dragVelocity,\n      placement,\n      ...props,\n    })\n    const customOpenTrigger = trigger ? (\n      <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n    ) : null\n\n    const context = useMemo(\n      () => ({\n        duration,\n        open,\n        placement,\n        withCloseButton,\n        withDragBar,\n        ...rest,\n      }),\n      [duration, open, withDragBar, placement, 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 ? <DrawerOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandDrawerContent\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  { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\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 DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n  \"button\",\n  DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  undefined,\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return { asChild: true, ...getCloseTriggerProps(props) }\n  },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n  const { duration, getOverlayProps } = useComponentContext()\n\n  return (\n    <motion.div\n      animate=\"enter\"\n      custom={{ duration }}\n      exit=\"exit\"\n      initial=\"exit\"\n      variants={fadeVariants}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n  ({ children, ...rest }) => {\n    const {\n      closeOnDrag,\n      duration,\n      open,\n      placement,\n      withCloseButton,\n      withDragBar,\n      getContentProps,\n    } = useComponentContext()\n    const [omittedChildren, customCloseButton, customDragBar] =\n      useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n    return (\n      <Slide\n        as=\"section\"\n        duration={duration}\n        open={open}\n        placement={placement}\n        {...(getContentProps(rest) as SlideProps)}\n      >\n        {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n        {customDragBar ??\n          (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n        {omittedChildren}\n      </Slide>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n  /**\n   * The drawer body to use.\n   */\n  body?: DrawerBodyProps | ReactNode\n  /**\n   * The drawer cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The drawer footer to use.\n   */\n  footer?: DrawerFooterProps | ReactNode\n  /**\n   * The drawer header to use.\n   */\n  header?: DrawerHeaderProps | ReactNode\n  /**\n   * The drawer middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The drawer success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The drawer title to use.\n   */\n  title?: DrawerTitleProps | 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 ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\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(DrawerHeader, header)\n  const customTitle = wrapOrPassProps(DrawerTitle, title)\n  const customBody = wrapOrPassProps(DrawerBody, body)\n  const customFooter = wrapOrPassProps(DrawerFooter, 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    <DrawerContent>\n      {customHeader ??\n        (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <DrawerFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </DrawerFooter>\n        ) : null)}\n    </DrawerContent>\n  )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n  \"div\",\n  \"dragBar\",\n)(undefined, (props) => {\n  const { getDragBarProps } = useComponentContext()\n\n  return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\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/esm/components/drawer/drawer.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.style.js","names":[],"sources":["../../../../src/components/drawer/drawer.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { modalStyle } from \"../modal\"\n\nexport const drawerStyle = defineComponentSlotStyle({\n  base: {\n    ...modalStyle.base,\n    body: {\n      ...modalStyle.base?.body,\n      overflow: \"auto\",\n    },\n    content: {\n      ...modalStyle.base?.content,\n      position: \"fixed\",\n      rounded: \"l4\",\n    },\n    dragBar: {\n      bg: \"bg.subtle\",\n      position: \"absolute\",\n      rounded: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * The placement of the drawer.\n     *\n     * @default 'inline-end'\n     */\n    placement: {\n      \"block-end\": {\n        content: { maxW: \"full\", roundedBottom: \"0\" },\n        dragBar: {\n          left: \"50%\",\n          minH: \"2\",\n          top: \"md\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"block-start\": {\n        content: { maxW: \"full\", roundedTop: \"0\" },\n        dragBar: {\n          bottom: \"md\",\n          left: \"50%\",\n          minH: \"2\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"inline-end\": {\n        content: { roundedRight: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          left: \"md\",\n          minW: \"2\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n      \"inline-start\": {\n        content: { roundedLeft: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          minW: \"2\",\n          right: \"md\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: { content: { maxW: \"xs\" } },\n    sm: { content: { maxW: \"sm\" } },\n    md: { content: { maxW: \"md\" } },\n    lg: { content: { maxW: \"lg\" } },\n    xl: { content: { maxW: \"xl\" } },\n    \"2xl\": { content: { maxW: \"2xl\" } },\n    \"3xl\": { content: { maxW: \"3xl\" } },\n    \"4xl\": { content: { maxW: \"4xl\" } },\n    \"5xl\": { content: { maxW: \"5xl\" } },\n    \"6xl\": { content: { maxW: \"6xl\" } },\n    full: { content: { minH: \"dvh\", minW: \"vw\", rounded: \"0\" } },\n  },\n\n  compounds: [\n    {\n      css: {\n        content: {\n          pb: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            top: \"calc(-100dvh + 1px)\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-start\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pt: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"calc(-100dvh + 1px)\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          ps: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            position: \"absolute\",\n            right: \"calc(-100% + 1px)\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pe: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"calc(-100% + 1px)\",\n            position: \"absolute\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-start\",\n      withDragBar: true,\n    },\n  ],\n\n  defaultProps: {\n    size: \"lg\",\n    placement: \"inline-end\",\n  },\n})\n\nexport type DrawerStyle = typeof drawerStyle\n"],"mappings":";;;AAGA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,GAAG,WAAW;EACd,MAAM;GACJ,GAAG,WAAW,MAAM;GACpB,UAAU;GACX;EACD,SAAS;GACP,GAAG,WAAW,MAAM;GACpB,UAAU;GACV,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,UAAU;GACV,SAAS;GACV;EACF;CAED,OAAO;;;;;;AAML,WAAW;EACT,aAAa;GACX,SAAS;IAAE,MAAM;IAAQ,eAAe;IAAK;GAC7C,SAAS;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;IACX,GAAG;IACJ;GACF;EACD,eAAe;GACb,SAAS;IAAE,MAAM;IAAQ,YAAY;IAAK;GAC1C,SAAS;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;IACX,GAAG;IACJ;GACF;EACD,cAAc;GACZ,SAAS,EAAE,cAAc,KAAK;GAC9B,SAAS;IACP,GAAG;IACH,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;IACZ;GACF;EACD,gBAAgB;GACd,SAAS,EAAE,aAAa,KAAK;GAC7B,SAAS;IACP,GAAG;IACH,MAAM;IACN,OAAO;IACP,KAAK;IACL,WAAW;IACZ;GACF;EACF,EACF;CAED,OAAO;EACL,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,MAAM,EAAE,SAAS;GAAE,MAAM;GAAO,MAAM;GAAM,SAAS;GAAK,EAAE;EAC7D;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;KACJ;IACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,GAAG;KACJ;IACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;KACJ;IACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,KAAK;KACL,GAAG;KACJ;IACF,EACF;GACD,aAAa;GACb,WAAW;GACX,aAAa;GACd;EACF;CAED,cAAc;EACZ,MAAM;EACN,WAAW;EACZ;CACF,CAAC"}
+{"version":3,"file":"drawer.style.js","names":[],"sources":["../../../../src/components/drawer/drawer.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { modalStyle } from \"../modal\"\n\nexport const drawerStyle = defineComponentSlotStyle({\n  base: {\n    ...modalStyle.base,\n    body: {\n      ...modalStyle.base?.body,\n      overflow: \"auto\",\n    },\n    content: {\n      ...modalStyle.base?.content,\n      position: \"fixed\",\n      rounded: \"l4\",\n    },\n    dragBar: {\n      bg: \"bg.subtle\",\n      position: \"absolute\",\n      rounded: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * The placement of the drawer.\n     *\n     * @default 'inline-end'\n     */\n    placement: {\n      \"block-end\": {\n        content: { maxW: \"full\", roundedBottom: \"0\" },\n        dragBar: {\n          left: \"50%\",\n          minH: \"2\",\n          top: \"md\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"block-start\": {\n        content: { maxW: \"full\", roundedTop: \"0\" },\n        dragBar: {\n          bottom: \"md\",\n          left: \"50%\",\n          minH: \"2\",\n          transform: \"translateX(-50%)\",\n          w: \"3xs\",\n        },\n      },\n      \"inline-end\": {\n        content: { roundedRight: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          left: \"md\",\n          minW: \"2\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n      \"inline-start\": {\n        content: { roundedLeft: \"0\" },\n        dragBar: {\n          h: \"3xs\",\n          minW: \"2\",\n          right: \"md\",\n          top: \"50%\",\n          transform: \"translateY(-50%)\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: { content: { maxW: \"xs\" } },\n    sm: { content: { maxW: \"sm\" } },\n    md: { content: { maxW: \"md\" } },\n    lg: { content: { maxW: \"lg\" } },\n    xl: { content: { maxW: \"xl\" } },\n    \"2xl\": { content: { maxW: \"2xl\" } },\n    \"3xl\": { content: { maxW: \"3xl\" } },\n    \"4xl\": { content: { maxW: \"4xl\" } },\n    \"5xl\": { content: { maxW: \"5xl\" } },\n    \"6xl\": { content: { maxW: \"6xl\" } },\n    full: { content: { minH: \"dvh\", minW: \"vw\", rounded: \"0\" } },\n  },\n\n  compounds: [\n    {\n      css: {\n        content: {\n          pb: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            top: \"calc(-100dvh + 1px)\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-start\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pt: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"calc(-100dvh + 1px)\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"0\",\n            position: \"absolute\",\n            right: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"block-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          ps: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            position: \"absolute\",\n            right: \"calc(-100% + 1px)\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-end\",\n      withDragBar: true,\n    },\n    {\n      css: {\n        content: {\n          pe: \"md\",\n          _after: {\n            bg: \"bg.panel\",\n            bottom: \"0\",\n            display: \"block\",\n            h: \"dvh\",\n            left: \"calc(-100% + 1px)\",\n            position: \"absolute\",\n            top: \"0\",\n            w: \"full\",\n          },\n        },\n      },\n      closeOnDrag: true,\n      placement: \"inline-start\",\n      withDragBar: true,\n    },\n  ],\n\n  defaultProps: {\n    size: \"lg\",\n    placement: \"inline-end\",\n  },\n})\n\nexport type DrawerStyle = typeof drawerStyle\n"],"mappings":";;;AAGA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,GAAG,WAAW;EACd,MAAM;GACJ,GAAG,WAAW,MAAM;GACpB,UAAU;EACZ;EACA,SAAS;GACP,GAAG,WAAW,MAAM;GACpB,UAAU;GACV,SAAS;EACX;EACA,SAAS;GACP,IAAI;GACJ,UAAU;GACV,SAAS;EACX;CACF;CAEA,OAAO;;;;;;AAML,WAAW;EACT,aAAa;GACX,SAAS;IAAE,MAAM;IAAQ,eAAe;GAAI;GAC5C,SAAS;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;IACX,GAAG;GACL;EACF;EACA,eAAe;GACb,SAAS;IAAE,MAAM;IAAQ,YAAY;GAAI;GACzC,SAAS;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;IACX,GAAG;GACL;EACF;EACA,cAAc;GACZ,SAAS,EAAE,cAAc,IAAI;GAC7B,SAAS;IACP,GAAG;IACH,MAAM;IACN,MAAM;IACN,KAAK;IACL,WAAW;GACb;EACF;EACA,gBAAgB;GACd,SAAS,EAAE,aAAa,IAAI;GAC5B,SAAS;IACP,GAAG;IACH,MAAM;IACN,OAAO;IACP,KAAK;IACL,WAAW;GACb;EACF;CACF,EACF;CAEA,OAAO;EACL,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,EAAE;EAC9B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,EAAE;EAC9B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,EAAE;EAC9B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,EAAE;EAC9B,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,EAAE;EAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAClC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAClC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAClC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAClC,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAClC,MAAM,EAAE,SAAS;GAAE,MAAM;GAAO,MAAM;GAAM,SAAS;EAAI,EAAE;CAC7D;CAEA,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;IACL;GACF,EACF;GACA,aAAa;GACb,WAAW;GACX,aAAa;EACf;EACA;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,OAAO;KACP,GAAG;IACL;GACF,EACF;GACA,aAAa;GACb,WAAW;GACX,aAAa;EACf;EACA;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,UAAU;KACV,OAAO;KACP,KAAK;KACL,GAAG;IACL;GACF,EACF;GACA,aAAa;GACb,WAAW;GACX,aAAa;EACf;EACA;GACE,KAAK,EACH,SAAS;IACP,IAAI;IACJ,QAAQ;KACN,IAAI;KACJ,QAAQ;KACR,SAAS;KACT,GAAG;KACH,MAAM;KACN,UAAU;KACV,KAAK;KACL,GAAG;IACL;GACF,EACF;GACA,aAAa;GACb,WAAW;GACX,aAAa;EACf;CACF;CAEA,cAAc;EACZ,MAAM;EACN,WAAW;CACb;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-drawer.js","names":[],"sources":["../../../../src/components/drawer/use-drawer.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, SimplePlacement } from \"../../core\"\nimport type { UseModalProps } from \"../modal\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport { useCallback, useMemo } from \"react\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { useModal } from \"../modal\"\n\ntype DragEndEventHandler = Required<HTMLMotionProps>[\"onDragEnd\"]\n\nexport interface UseDrawerProps extends UseModalProps {\n  /**\n   * If `true`, then the drawer will close on drag.\n   *\n   * @default false\n   */\n  closeOnDrag?: boolean\n  /**\n   * Applies constraints on the permitted draggable area.\n   *\n   * @default 0\n   */\n  dragConstraints?: number\n  /**\n   * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.\n   *\n   * @default 0.1\n   */\n  dragElastic?: number\n  /**\n   * Offset from being dragged to closing.\n   *\n   * @default 80\n   */\n  dragOffset?: number\n  /**\n   * Velocity of the drag that triggers close.\n   *\n   * @default 100\n   */\n  dragVelocity?: number\n  /**\n   * The placement of the drawer.\n   *\n   * @default 'inline-end'\n   */\n  placement?: SimplePlacement\n}\n\nexport const useDrawer = ({\n  closeOnDrag = false,\n  closeOnEsc,\n  closeOnOverlay,\n  dragConstraints = 0,\n  dragElastic = 0.1,\n  dragOffset = 80,\n  dragVelocity = 100,\n  placement = \"inline-end\",\n  onEsc,\n  ...rest\n}: UseDrawerProps = {}) => {\n  const {\n    getContentProps: getModalContentProps,\n    onClose,\n    ...modalProps\n  } = useModal({\n    closeOnEsc,\n    closeOnOverlay,\n    onEsc,\n    ...rest,\n  })\n\n  const drag = useMemo<HTMLMotionProps[\"drag\"]>(() => {\n    if (!closeOnDrag) return false\n\n    switch (placement) {\n      case \"block-start\":\n      case \"block-end\":\n        return \"y\"\n      case \"inline-start\":\n      case \"inline-end\":\n        return \"x\"\n    }\n  }, [placement, closeOnDrag])\n\n  const getDragRestriction = useCallback(\n    (value: number) => {\n      switch (placement) {\n        case \"block-start\":\n          return { bottom: value }\n        case \"block-end\":\n          return { top: value }\n        case \"inline-start\":\n          return { right: value }\n        case \"inline-end\":\n          return { left: value }\n      }\n    },\n    [placement],\n  )\n\n  const onDragEnd: DragEndEventHandler = useCallback(\n    (_, info) => {\n      switch (placement) {\n        case \"block-start\":\n          if (\n            info.velocity.y <= dragVelocity * -1 ||\n            info.offset.y <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"block-end\":\n          if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset)\n            onClose()\n          break\n\n        case \"inline-start\":\n          if (\n            info.velocity.x <= dragVelocity * -1 ||\n            info.offset.x <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"inline-end\":\n          if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset)\n            onClose()\n          break\n      }\n    },\n    [placement, dragVelocity, dragOffset, onClose],\n  )\n\n  const getContentProps: PropGetter<HTMLMotionProps<\"section\">> = useCallback(\n    (props = {}) => ({\n      drag,\n      dragConstraints: getDragRestriction(dragConstraints),\n      dragElastic: getDragRestriction(dragElastic),\n      dragMomentum: false,\n      dragSnapToOrigin: true,\n      ...cast<HTMLMotionProps<\"section\">>(\n        getModalContentProps(cast<HTMLProps<\"section\">>(props)),\n      ),\n      onDragEnd: handlerAll(\n        (ev, info) => props.onDragEnd?.(ev, info),\n        onDragEnd,\n      ),\n    }),\n    [\n      drag,\n      getDragRestriction,\n      dragConstraints,\n      dragElastic,\n      onDragEnd,\n      getModalContentProps,\n    ],\n  )\n\n  const getDragBarProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    ...modalProps,\n    closeOnDrag,\n    getContentProps,\n    getDragBarProps,\n    onClose,\n  }\n}\n\nexport type UseDrawerReturn = ReturnType<typeof useDrawer>\n"],"mappings":";;;;;AAkDA,MAAa,aAAa,EACxB,cAAc,OACd,YACA,gBACA,kBAAkB,GAClB,cAAc,IACd,aAAa,IACb,eAAe,KACf,YAAY,cACZ,OACA,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,EACJ,iBAAiB,sBACjB,SACA,GAAG,eACD,SAAS;EACX;EACA;EACA;EACA,GAAG;EACJ,CAAC;CAEF,MAAM,OAAO,cAAuC;EAClD,IAAI,CAAC,aAAa,OAAO;EAEzB,QAAQ,WAAR;GACE,KAAK;GACL,KAAK,aACH,OAAO;GACT,KAAK;GACL,KAAK,cACH,OAAO;;IAEV,CAAC,WAAW,YAAY,CAAC;CAE5B,MAAM,qBAAqB,aACxB,UAAkB;EACjB,QAAQ,WAAR;GACE,KAAK,eACH,OAAO,EAAE,QAAQ,OAAO;GAC1B,KAAK,aACH,OAAO,EAAE,KAAK,OAAO;GACvB,KAAK,gBACH,OAAO,EAAE,OAAO,OAAO;GACzB,KAAK,cACH,OAAO,EAAE,MAAM,OAAO;;IAG5B,CAAC,UAAU,CACZ;CAED,MAAM,YAAiC,aACpC,GAAG,SAAS;EACX,QAAQ,WAAR;GACE,KAAK;IACH,IACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,IAE9B,SAAS;IACX;GAEF,KAAK;IACH,IAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,YACtD,SAAS;IACX;GAEF,KAAK;IACH,IACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,IAE9B,SAAS;IACX;GAEF,KAAK;IACH,IAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,YACtD,SAAS;IACX;;IAGN;EAAC;EAAW;EAAc;EAAY;EAAQ,CAC/C;CAED,MAAM,kBAA0D,aAC7D,QAAQ,EAAE,MAAM;EACf;EACA,iBAAiB,mBAAmB,gBAAgB;EACpD,aAAa,mBAAmB,YAAY;EAC5C,cAAc;EACd,kBAAkB;EAClB,IAAA,GAAA,cAAA,MACE,sBAAA,GAAA,cAAA,MAAgD,MAAM,CAAC,CACxD;EACD,YAAA,GAAA,cAAA,aACG,IAAI,SAAS,MAAM,YAAY,IAAI,KAAK,EACzC,UACD;EACF,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,kBAA8B,aACjC,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;CAED,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-drawer.js","names":[],"sources":["../../../../src/components/drawer/use-drawer.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, SimplePlacement } from \"../../core\"\nimport type { UseModalProps } from \"../modal\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport { useCallback, useMemo } from \"react\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { useModal } from \"../modal\"\n\ntype DragEndEventHandler = Required<HTMLMotionProps>[\"onDragEnd\"]\n\nexport interface UseDrawerProps extends UseModalProps {\n  /**\n   * If `true`, then the drawer will close on drag.\n   *\n   * @default false\n   */\n  closeOnDrag?: boolean\n  /**\n   * Applies constraints on the permitted draggable area.\n   *\n   * @default 0\n   */\n  dragConstraints?: number\n  /**\n   * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.\n   *\n   * @default 0.1\n   */\n  dragElastic?: number\n  /**\n   * Offset from being dragged to closing.\n   *\n   * @default 80\n   */\n  dragOffset?: number\n  /**\n   * Velocity of the drag that triggers close.\n   *\n   * @default 100\n   */\n  dragVelocity?: number\n  /**\n   * The placement of the drawer.\n   *\n   * @default 'inline-end'\n   */\n  placement?: SimplePlacement\n}\n\nexport const useDrawer = ({\n  closeOnDrag = false,\n  closeOnEsc,\n  closeOnOverlay,\n  dragConstraints = 0,\n  dragElastic = 0.1,\n  dragOffset = 80,\n  dragVelocity = 100,\n  placement = \"inline-end\",\n  onEsc,\n  ...rest\n}: UseDrawerProps = {}) => {\n  const {\n    getContentProps: getModalContentProps,\n    onClose,\n    ...modalProps\n  } = useModal({\n    closeOnEsc,\n    closeOnOverlay,\n    onEsc,\n    ...rest,\n  })\n\n  const drag = useMemo<HTMLMotionProps[\"drag\"]>(() => {\n    if (!closeOnDrag) return false\n\n    switch (placement) {\n      case \"block-start\":\n      case \"block-end\":\n        return \"y\"\n      case \"inline-start\":\n      case \"inline-end\":\n        return \"x\"\n    }\n  }, [placement, closeOnDrag])\n\n  const getDragRestriction = useCallback(\n    (value: number) => {\n      switch (placement) {\n        case \"block-start\":\n          return { bottom: value }\n        case \"block-end\":\n          return { top: value }\n        case \"inline-start\":\n          return { right: value }\n        case \"inline-end\":\n          return { left: value }\n      }\n    },\n    [placement],\n  )\n\n  const onDragEnd: DragEndEventHandler = useCallback(\n    (_, info) => {\n      switch (placement) {\n        case \"block-start\":\n          if (\n            info.velocity.y <= dragVelocity * -1 ||\n            info.offset.y <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"block-end\":\n          if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset)\n            onClose()\n          break\n\n        case \"inline-start\":\n          if (\n            info.velocity.x <= dragVelocity * -1 ||\n            info.offset.x <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"inline-end\":\n          if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset)\n            onClose()\n          break\n      }\n    },\n    [placement, dragVelocity, dragOffset, onClose],\n  )\n\n  const getContentProps: PropGetter<HTMLMotionProps<\"section\">> = useCallback(\n    (props = {}) => ({\n      drag,\n      dragConstraints: getDragRestriction(dragConstraints),\n      dragElastic: getDragRestriction(dragElastic),\n      dragMomentum: false,\n      dragSnapToOrigin: true,\n      ...cast<HTMLMotionProps<\"section\">>(\n        getModalContentProps(cast<HTMLProps<\"section\">>(props)),\n      ),\n      onDragEnd: handlerAll(\n        (ev, info) => props.onDragEnd?.(ev, info),\n        onDragEnd,\n      ),\n    }),\n    [\n      drag,\n      getDragRestriction,\n      dragConstraints,\n      dragElastic,\n      onDragEnd,\n      getModalContentProps,\n    ],\n  )\n\n  const getDragBarProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    ...modalProps,\n    closeOnDrag,\n    getContentProps,\n    getDragBarProps,\n    onClose,\n  }\n}\n\nexport type UseDrawerReturn = ReturnType<typeof useDrawer>\n"],"mappings":";;;;;AAkDA,MAAa,aAAa,EACxB,cAAc,OACd,YACA,gBACA,kBAAkB,GAClB,cAAc,IACd,aAAa,IACb,eAAe,KACf,YAAY,cACZ,OACA,GAAG,SACe,CAAC,MAAM;CACzB,MAAM,EACJ,iBAAiB,sBACjB,SACA,GAAG,eACD,SAAS;EACX;EACA;EACA;EACA,GAAG;CACL,CAAC;CAED,MAAM,OAAO,cAAuC;EAClD,IAAI,CAAC,aAAa,OAAO;EAEzB,QAAQ,WAAR;GACE,KAAK;GACL,KAAK,aACH,OAAO;GACT,KAAK;GACL,KAAK,cACH,OAAO;EACX;CACF,GAAG,CAAC,WAAW,WAAW,CAAC;CAE3B,MAAM,qBAAqB,aACxB,UAAkB;EACjB,QAAQ,WAAR;GACE,KAAK,eACH,OAAO,EAAE,QAAQ,MAAM;GACzB,KAAK,aACH,OAAO,EAAE,KAAK,MAAM;GACtB,KAAK,gBACH,OAAO,EAAE,OAAO,MAAM;GACxB,KAAK,cACH,OAAO,EAAE,MAAM,MAAM;EACzB;CACF,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,YAAiC,aACpC,GAAG,SAAS;EACX,QAAQ,WAAR;GACE,KAAK;IACH,IACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,IAE9B,QAAQ;IACV;GAEF,KAAK;IACH,IAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,YACtD,QAAQ;IACV;GAEF,KAAK;IACH,IACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,IAE9B,QAAQ;IACV;GAEF,KAAK;IACH,IAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,YACtD,QAAQ;IACV;EACJ;CACF,GACA;EAAC;EAAW;EAAc;EAAY;CAAO,CAC/C;CAEA,MAAM,kBAA0D,aAC7D,QAAQ,CAAC,OAAO;EACf;EACA,iBAAiB,mBAAmB,eAAe;EACnD,aAAa,mBAAmB,WAAW;EAC3C,cAAc;EACd,kBAAkB;EAClB,IAAA,GAAA,cAAA,MACE,sBAAA,GAAA,cAAA,MAAgD,KAAK,CAAC,CACxD;EACA,YAAA,GAAA,cAAA,aACG,IAAI,SAAS,MAAM,YAAY,IAAI,IAAI,GACxC,SACF;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,kBAA8B,aACjC,WAAW,EACV,GAAG,MACL,IACA,CAAC,CACH;CAEA,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;CACF;AACF"}

package/dist/esm/components/dropzone/accept-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"accept-types.js","names":[],"sources":["../../../../src/components/dropzone/accept-types.ts"],"sourcesContent":["export const ACCEPT_TYPES = {\n  csv: \"text/csv\",\n  doc: \"application/msword\",\n  docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  exe: \"application/vnd.microsoft.portable-executable\",\n  gif: \"image/gif\",\n  html: \"text/html\",\n  jpeg: \"image/jpeg\",\n  mp3: \"audio/mpeg\",\n  mp4: \"video/mp4\",\n  mpeg: \"video/mpeg\",\n  pdf: \"application/pdf\",\n  png: \"image/png\",\n  ppt: \"application/vnd.ms-powerpoint\",\n  pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n  svg: \"image/svg+xml\",\n  txt: \"text/plain\",\n  webp: \"image/webp\",\n  xls: \"application/vnd.ms-excel\",\n  xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n  zip: \"application/zip\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n  ACCEPT_TYPES.png,\n  ACCEPT_TYPES.gif,\n  ACCEPT_TYPES.jpeg,\n  ACCEPT_TYPES.svg,\n  ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":";AAAA,MAAa,eAAe;CAC1B,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;CACN;AAED,MAAa,oBAAoB;CAC/B,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACd;AACD,MAAa,kBAAkB,CAAC,aAAa,IAAI;AACjD,MAAa,sBAAsB,CAAC,aAAa,KAAK,aAAa,KAAK;AACxE,MAAa,uBAAuB,CAAC,aAAa,KAAK,aAAa,KAAK;AACzE,MAAa,6BAA6B,CAAC,aAAa,KAAK,aAAa,KAAK;AAC/E,MAAa,kBAAkB,CAAC,aAAa,IAAI"}
+{"version":3,"file":"accept-types.js","names":[],"sources":["../../../../src/components/dropzone/accept-types.ts"],"sourcesContent":["export const ACCEPT_TYPES = {\n  csv: \"text/csv\",\n  doc: \"application/msword\",\n  docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  exe: \"application/vnd.microsoft.portable-executable\",\n  gif: \"image/gif\",\n  html: \"text/html\",\n  jpeg: \"image/jpeg\",\n  mp3: \"audio/mpeg\",\n  mp4: \"video/mp4\",\n  mpeg: \"video/mpeg\",\n  pdf: \"application/pdf\",\n  png: \"image/png\",\n  ppt: \"application/vnd.ms-powerpoint\",\n  pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n  svg: \"image/svg+xml\",\n  txt: \"text/plain\",\n  webp: \"image/webp\",\n  xls: \"application/vnd.ms-excel\",\n  xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n  zip: \"application/zip\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n  ACCEPT_TYPES.png,\n  ACCEPT_TYPES.gif,\n  ACCEPT_TYPES.jpeg,\n  ACCEPT_TYPES.svg,\n  ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":";AAAA,MAAa,eAAe;CAC1B,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;AACP;AAEA,MAAa,oBAAoB;CAC/B,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;AACf;AACA,MAAa,kBAAkB,CAAC,aAAa,GAAG;AAChD,MAAa,sBAAsB,CAAC,aAAa,KAAK,aAAa,IAAI;AACvE,MAAa,uBAAuB,CAAC,aAAa,KAAK,aAAa,IAAI;AACxE,MAAa,6BAA6B,CAAC,aAAa,KAAK,aAAa,IAAI;AAC9E,MAAa,kBAAkB,CAAC,aAAa,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","names":[],"sources":["../../../../src/components/dropzone/dropzone.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FadeProps } from \"../fade\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { Loading } from \"../loading\"\nimport type { DropzoneStyle } from \"./dropzone.style\"\nimport type { UseDropzoneProps, UseDropzoneReturn } from \"./use-dropzone\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { Fade } from \"../fade\"\nimport { useInputBorder } from \"../input\"\nimport { useLoadingComponent } from \"../loading\"\nimport { Portal } from \"../portal\"\nimport { dropzoneStyle } from \"./dropzone.style\"\nimport { useDropzone } from \"./use-dropzone\"\n\ninterface ComponentContext extends Pick<\n  UseDropzoneReturn,\n  \"dragAccept\" | \"dragIdle\" | \"dragReject\" | \"loading\"\n> {}\n\nexport interface DropzoneRootProps\n  extends\n    Merge<HTMLStyledProps, UseDropzoneProps>,\n    UseInputBorderProps,\n    ThemeProps<DropzoneStyle>,\n    Pick<DropzoneLoadingProps, \"loadingScheme\"> {\n  /**\n   * Props for dropzone input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for dropzone loading icon element.\n   */\n  loadingProps?: DropzoneLoadingProps\n  /**\n   * Props for dropzone overlay element.\n   */\n  overlayProps?: DropzoneOverlayProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DropzonePropsContext,\n  useComponentContext,\n  usePropsContext: useDropzonePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DropzoneRootProps, DropzoneStyle>(\n  \"dropzone\",\n  dropzoneStyle,\n)\n\nexport { DropzonePropsContext, useDropzonePropsContext }\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see https://yamada-ui.com/docs/components/dropzone\n */\nexport const DropzoneRoot = withProvider(\n  ({\n    children,\n    errorBorderColor,\n    focusBorderColor,\n    loadingScheme,\n    inputProps,\n    loadingProps,\n    overlayProps,\n    ...rest\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const {\n      dragAccept,\n      dragIdle,\n      dragReject,\n      loading,\n      getInputProps,\n      getRootProps,\n    } = useDropzone(rest)\n    const context = useMemo(\n      () => ({\n        dragAccept,\n        dragIdle,\n        dragReject,\n        loading,\n      }),\n      [dragAccept, dragIdle, dragReject, loading],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <Portal>\n          <styled.input {...getInputProps(inputProps)} />\n        </Portal>\n\n        <styled.div data-group {...varProps} {...getRootProps()}>\n          <DropzoneOverlay {...overlayProps}>\n            <DropzoneLoading loadingScheme={loadingScheme} {...loadingProps} />\n          </DropzoneOverlay>\n\n          {children}\n        </styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DropzoneIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const DropzoneIcon = withContext<\"svg\", DropzoneIconProps>(\n  \"svg\",\n  \"icon\",\n)()\n\nexport interface DropzoneTitleProps extends HTMLStyledProps<\"p\"> {}\n\nexport const DropzoneTitle = withContext<\"p\", DropzoneTitleProps>(\n  \"p\",\n  \"title\",\n)()\n\nexport interface DropzoneDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const DropzoneDescription = withContext<\"p\", DropzoneDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n\ninterface DropzoneOverlayProps extends FadeProps {\n  loadingProps?: DropzoneLoadingProps\n}\n\nconst DropzoneOverlay = withContext<\"div\", DropzoneOverlayProps>(\n  Fade,\n  \"overlay\",\n)(undefined, (props) => {\n  const { loading } = useComponentContext()\n\n  return { open: loading, unmountOnExit: true, ...props }\n})\n\ninterface DropzoneLoadingProps extends Loading.Props {\n  /**\n   * The loading scheme.\n   *\n   * @default 'oval'\n   */\n  loadingScheme?: Loading.Scheme\n}\n\nconst DropzoneLoading = withContext<\"svg\", DropzoneLoadingProps>(\n  ({ loadingScheme = \"oval\", ...rest }) => {\n    const Component = useLoadingComponent(loadingScheme)\n\n    return <Component {...rest} />\n  },\n  \"loading\",\n)()\n\nexport interface DropzoneAcceptProps extends PropsWithChildren {}\n\nexport const DropzoneAccept: FC<DropzoneAcceptProps> = ({ children }) => {\n  const { dragAccept } = useComponentContext()\n\n  return dragAccept ? children : null\n}\n\nexport interface DropzoneRejectProps extends PropsWithChildren {}\n\nexport const DropzoneReject: FC<DropzoneRejectProps> = ({ children }) => {\n  const { dragReject } = useComponentContext()\n\n  return dragReject ? children : null\n}\n\nexport interface DropzoneIdleProps extends PropsWithChildren {}\n\nexport const DropzoneIdle: FC<DropzoneIdleProps> = ({ children }) => {\n  const { dragIdle } = useComponentContext()\n\n  return dragIdle ? children : null\n}\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EACC,UACA,kBACA,kBACA,eACA,YACA,cACA,cACA,GAAG,WACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EACJ,YACA,UACA,YACA,SACA,eACA,iBACE,YAAY,KAAK;CAWrB,OACE,qBAAC,kBAAD;EAAkB,OAXJ,eACP;GACL;GACA;GACA;GACA;GACD,GACD;GAAC;GAAY;GAAU;GAAY;GAAQ,CAIX;YAAhC,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,WAAW,EAAI,CAAA,EACxC,CAAA,EAET,qBAAC,OAAO,KAAR;GAAY,cAAA;GAAW,GAAI;GAAU,GAAI,cAAc;aAAvD,CACE,oBAAC,iBAAD;IAAiB,GAAI;cACnB,oBAAC,iBAAD;KAAgC;KAAe,GAAI;KAAgB,CAAA;IACnD,CAAA,EAEjB,SACU;KACI;;GAGvB,OACD,EAAE;AAIH,MAAa,eAAe,YAC1B,OACA,OACD,EAAE;AAIH,MAAa,gBAAgB,YAC3B,KACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE;AAMH,MAAM,kBAAkB,YACtB,MACA,UACD,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,YAAY,qBAAqB;CAEzC,OAAO;EAAE,MAAM;EAAS,eAAe;EAAM,GAAG;EAAO;EACvD;AAWF,MAAM,kBAAkB,aACrB,EAAE,gBAAgB,QAAQ,GAAG,WAAW;CAGvC,OAAO,oBAFW,oBAAoB,cAErB,EAAV,EAAW,GAAI,MAAQ,CAAA;GAEhC,UACD,EAAE;AAIH,MAAa,kBAA2C,EAAE,eAAe;CACvE,MAAM,EAAE,eAAe,qBAAqB;CAE5C,OAAO,aAAa,WAAW;;AAKjC,MAAa,kBAA2C,EAAE,eAAe;CACvE,MAAM,EAAE,eAAe,qBAAqB;CAE5C,OAAO,aAAa,WAAW;;AAKjC,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,aAAa,qBAAqB;CAE1C,OAAO,WAAW,WAAW"}
+{"version":3,"file":"dropzone.js","names":[],"sources":["../../../../src/components/dropzone/dropzone.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FadeProps } from \"../fade\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { Loading } from \"../loading\"\nimport type { DropzoneStyle } from \"./dropzone.style\"\nimport type { UseDropzoneProps, UseDropzoneReturn } from \"./use-dropzone\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { Fade } from \"../fade\"\nimport { useInputBorder } from \"../input\"\nimport { useLoadingComponent } from \"../loading\"\nimport { Portal } from \"../portal\"\nimport { dropzoneStyle } from \"./dropzone.style\"\nimport { useDropzone } from \"./use-dropzone\"\n\ninterface ComponentContext extends Pick<\n  UseDropzoneReturn,\n  \"dragAccept\" | \"dragIdle\" | \"dragReject\" | \"loading\"\n> {}\n\nexport interface DropzoneRootProps\n  extends\n    Merge<HTMLStyledProps, UseDropzoneProps>,\n    UseInputBorderProps,\n    ThemeProps<DropzoneStyle>,\n    Pick<DropzoneLoadingProps, \"loadingScheme\"> {\n  /**\n   * Props for dropzone input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for dropzone loading icon element.\n   */\n  loadingProps?: DropzoneLoadingProps\n  /**\n   * Props for dropzone overlay element.\n   */\n  overlayProps?: DropzoneOverlayProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DropzonePropsContext,\n  useComponentContext,\n  usePropsContext: useDropzonePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DropzoneRootProps, DropzoneStyle>(\n  \"dropzone\",\n  dropzoneStyle,\n)\n\nexport { DropzonePropsContext, useDropzonePropsContext }\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see https://yamada-ui.com/docs/components/dropzone\n */\nexport const DropzoneRoot = withProvider(\n  ({\n    children,\n    errorBorderColor,\n    focusBorderColor,\n    loadingScheme,\n    inputProps,\n    loadingProps,\n    overlayProps,\n    ...rest\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const {\n      dragAccept,\n      dragIdle,\n      dragReject,\n      loading,\n      getInputProps,\n      getRootProps,\n    } = useDropzone(rest)\n    const context = useMemo(\n      () => ({\n        dragAccept,\n        dragIdle,\n        dragReject,\n        loading,\n      }),\n      [dragAccept, dragIdle, dragReject, loading],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <Portal>\n          <styled.input {...getInputProps(inputProps)} />\n        </Portal>\n\n        <styled.div data-group {...varProps} {...getRootProps()}>\n          <DropzoneOverlay {...overlayProps}>\n            <DropzoneLoading loadingScheme={loadingScheme} {...loadingProps} />\n          </DropzoneOverlay>\n\n          {children}\n        </styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DropzoneIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const DropzoneIcon = withContext<\"svg\", DropzoneIconProps>(\n  \"svg\",\n  \"icon\",\n)()\n\nexport interface DropzoneTitleProps extends HTMLStyledProps<\"p\"> {}\n\nexport const DropzoneTitle = withContext<\"p\", DropzoneTitleProps>(\n  \"p\",\n  \"title\",\n)()\n\nexport interface DropzoneDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const DropzoneDescription = withContext<\"p\", DropzoneDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n\ninterface DropzoneOverlayProps extends FadeProps {\n  loadingProps?: DropzoneLoadingProps\n}\n\nconst DropzoneOverlay = withContext<\"div\", DropzoneOverlayProps>(\n  Fade,\n  \"overlay\",\n)(undefined, (props) => {\n  const { loading } = useComponentContext()\n\n  return { open: loading, unmountOnExit: true, ...props }\n})\n\ninterface DropzoneLoadingProps extends Loading.Props {\n  /**\n   * The loading scheme.\n   *\n   * @default 'oval'\n   */\n  loadingScheme?: Loading.Scheme\n}\n\nconst DropzoneLoading = withContext<\"svg\", DropzoneLoadingProps>(\n  ({ loadingScheme = \"oval\", ...rest }) => {\n    const Component = useLoadingComponent(loadingScheme)\n\n    return <Component {...rest} />\n  },\n  \"loading\",\n)()\n\nexport interface DropzoneAcceptProps extends PropsWithChildren {}\n\nexport const DropzoneAccept: FC<DropzoneAcceptProps> = ({ children }) => {\n  const { dragAccept } = useComponentContext()\n\n  return dragAccept ? children : null\n}\n\nexport interface DropzoneRejectProps extends PropsWithChildren {}\n\nexport const DropzoneReject: FC<DropzoneRejectProps> = ({ children }) => {\n  const { dragReject } = useComponentContext()\n\n  return dragReject ? children : null\n}\n\nexport interface DropzoneIdleProps extends PropsWithChildren {}\n\nexport const DropzoneIdle: FC<DropzoneIdleProps> = ({ children }) => {\n  const { dragIdle } = useComponentContext()\n\n  return dragIdle ? children : null\n}\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EACC,UACA,kBACA,kBACA,eACA,YACA,cACA,cACA,GAAG,WACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EACJ,YACA,UACA,YACA,SACA,eACA,iBACE,YAAY,IAAI;CAWpB,OACE,qBAAC,kBAAD;EAAkB,OAXJ,eACP;GACL;GACA;GACA;GACA;EACF,IACA;GAAC;GAAY;GAAU;GAAY;EAAO,CAIX;YAA/B,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA,EACxC,CAAA,GAER,qBAAC,OAAO,KAAR;GAAY,cAAA;GAAW,GAAI;GAAU,GAAI,aAAa;aAAtD,CACE,oBAAC,iBAAD;IAAiB,GAAI;cACnB,oBAAC,iBAAD;KAAgC;KAAe,GAAI;IAAe,CAAA;GACnD,CAAA,GAEhB,QACS;IACI;;AAEtB,GACA,MACF,EAAE;AAIF,MAAa,eAAe,YAC1B,OACA,MACF,EAAE;AAIF,MAAa,gBAAgB,YAC3B,KACA,OACF,EAAE;AAIF,MAAa,sBAAsB,YACjC,KACA,aACF,EAAE;AAMF,MAAM,kBAAkB,YACtB,MACA,SACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,YAAY,oBAAoB;CAExC,OAAO;EAAE,MAAM;EAAS,eAAe;EAAM,GAAG;CAAM;AACxD,CAAC;AAWD,MAAM,kBAAkB,aACrB,EAAE,gBAAgB,QAAQ,GAAG,WAAW;CAGvC,OAAO,oBAFW,oBAAoB,aAEtB,GAAT,EAAW,GAAI,KAAO,CAAA;AAC/B,GACA,SACF,EAAE;AAIF,MAAa,kBAA2C,EAAE,eAAe;CACvE,MAAM,EAAE,eAAe,oBAAoB;CAE3C,OAAO,aAAa,WAAW;AACjC;AAIA,MAAa,kBAA2C,EAAE,eAAe;CACvE,MAAM,EAAE,eAAe,oBAAoB;CAE3C,OAAO,aAAa,WAAW;AACjC;AAIA,MAAa,gBAAuC,EAAE,eAAe;CACnE,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OAAO,WAAW,WAAW;AAC/B"}

package/dist/esm/components/dropzone/dropzone.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.style.js","names":[],"sources":["../../../../src/components/dropzone/dropzone.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const dropzoneStyle = defineComponentSlotStyle({\n  base: {\n    description: { fontSize: \"sm\" },\n    icon: { fontSize: \"7xl\" },\n    loading: { fontSize: \"4xl\" },\n    overlay: {\n      alignItems: \"center\",\n      bg: \"bg.panel/40\",\n      boxSize: \"full\",\n      display: \"flex\",\n      inset: 0,\n      justifyContent: \"center\",\n      position: \"absolute\",\n      zIndex: \"yamcha\",\n    },\n    root: {\n      \"& *\": { pointerEvents: \"none\" },\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      focusRingColor: \"{focus-border-color}\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      p: \"md\",\n      position: \"relative\",\n      rounded: \"l2\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _loading: { cursor: \"not-allowed\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    title: {\n      fontSize: \"xl\",\n    },\n  },\n\n  variants: {\n    base: {\n      icon: {\n        _groupAccept: { color: \"success\" },\n        _groupReject: { color: \"error\" },\n      },\n      root: {\n        color: \"fg.subtle\",\n        _accept: { bg: \"success.bg\" },\n        _container: [\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n        ],\n        _reject: { bg: \"error.bg\" },\n      },\n      title: { color: \"fg.muted\" },\n    },\n    dashed: {\n      root: {\n        bg: \"transparent\",\n        borderStyle: \"dashed\",\n        borderWidth: \"1px\",\n        _accept: { borderColor: \"success.muted\" },\n        _reject: { borderColor: [\"error.muted\", \"error.subtle\"] },\n        _hover: {\n          \"&:not([data-accept], [data-reject])\": {\n            bg: \"bg.panel\",\n          },\n        },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    panel: {\n      root: {\n        bg: \"bg.panel\",\n        border: \"1px solid transparent\",\n        focusVisibleRing: \"inside\",\n        _hover: { bg: \"bg.subtle\" },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    plain: {\n      root: {\n        rounded: \"0\",\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    solid: {\n      root: {\n        bg: \"transparent\",\n        borderWidth: \"1px\",\n        focusVisibleRing: \"inside\",\n        _accept: { borderColor: \"success.muted\" },\n        _reject: { borderColor: [\"error.muted\", \"error.subtle\"] },\n        _hover: { bg: \"bg.panel\" },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { minH: \"xs\" },\n    },\n    sm: {\n      root: { minH: \"sm\" },\n    },\n    md: {\n      root: { minH: \"md\" },\n    },\n    lg: {\n      root: { minH: \"lg\" },\n    },\n    full: {\n      root: { minH: \"full\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"sm\",\n    variant: \"dashed\",\n  },\n})\n\nexport type DropzoneStyle = typeof dropzoneStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,aAAa,EAAE,UAAU,MAAM;EAC/B,MAAM,EAAE,UAAU,OAAO;EACzB,SAAS,EAAE,UAAU,OAAO;EAC5B,SAAS;GACP,YAAY;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,UAAU;GACV,QAAQ;GACT;EACD,MAAM;GACJ,OAAO,EAAE,eAAe,QAAQ;GAChC,wBAAwB;GACxB,wBAAwB;GACxB,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,gBAAgB;GAChB,gBAAgB;GAChB,UAAU;GACV,GAAG;GACH,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,UAAU,EAAE,QAAQ,eAAe;GACnC,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,OAAO,EACL,UAAU,MACX;EACF;CAED,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,cAAc,EAAE,OAAO,WAAW;IAClC,cAAc,EAAE,OAAO,SAAS;IACjC;GACD,MAAM;IACJ,OAAO;IACP,SAAS,EAAE,IAAI,cAAc;IAC7B,YAAY;KACV;MAAE,KAAK,EAAE,IAAI,MAAM;MAAE,OAAO;MAAiC;KAC7D;MAAE,KAAK,EAAE,IAAI,MAAM;MAAE,OAAO;MAAoC;KAChE;MAAE,KAAK,EAAE,IAAI,MAAM;MAAE,OAAO;MAAoC;KAChE;MAAE,KAAK,EAAE,IAAI,MAAM;MAAE,OAAO;MAAuC;KACpE;IACD,SAAS,EAAE,IAAI,YAAY;IAC5B;GACD,OAAO,EAAE,OAAO,YAAY;GAC7B;EACD,QAAQ,EACN,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS,EAAE,aAAa,iBAAiB;GACzC,SAAS,EAAE,aAAa,CAAC,eAAe,eAAe,EAAE;GACzD,QAAQ,EACN,uCAAuC,EACrC,IAAI,YACL,EACF;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF,EACF;EACD,OAAO,EACL,MAAM;GACJ,IAAI;GACJ,QAAQ;GACR,kBAAkB;GAClB,QAAQ,EAAE,IAAI,aAAa;GAC3B,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF,EACF;EACD,OAAO,EACL,MAAM;GACJ,SAAS;GACT,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF,EACF;EACD,OAAO,EACL,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,kBAAkB;GAClB,SAAS,EAAE,aAAa,iBAAiB;GACzC,SAAS,EAAE,aAAa,CAAC,eAAe,eAAe,EAAE;GACzD,QAAQ,EAAE,IAAI,YAAY;GAC1B,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF,EACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,MAAM,MAAM,EACrB;EACD,IAAI,EACF,MAAM,EAAE,MAAM,MAAM,EACrB;EACD,IAAI,EACF,MAAM,EAAE,MAAM,MAAM,EACrB;EACD,IAAI,EACF,MAAM,EAAE,MAAM,MAAM,EACrB;EACD,MAAM,EACJ,MAAM,EAAE,MAAM,QAAQ,EACvB;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"dropzone.style.js","names":[],"sources":["../../../../src/components/dropzone/dropzone.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const dropzoneStyle = defineComponentSlotStyle({\n  base: {\n    description: { fontSize: \"sm\" },\n    icon: { fontSize: \"7xl\" },\n    loading: { fontSize: \"4xl\" },\n    overlay: {\n      alignItems: \"center\",\n      bg: \"bg.panel/40\",\n      boxSize: \"full\",\n      display: \"flex\",\n      inset: 0,\n      justifyContent: \"center\",\n      position: \"absolute\",\n      zIndex: \"yamcha\",\n    },\n    root: {\n      \"& *\": { pointerEvents: \"none\" },\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      focusRingColor: \"{focus-border-color}\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      p: \"md\",\n      position: \"relative\",\n      rounded: \"l2\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _loading: { cursor: \"not-allowed\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    title: {\n      fontSize: \"xl\",\n    },\n  },\n\n  variants: {\n    base: {\n      icon: {\n        _groupAccept: { color: \"success\" },\n        _groupReject: { color: \"error\" },\n      },\n      root: {\n        color: \"fg.subtle\",\n        _accept: { bg: \"success.bg\" },\n        _container: [\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n        ],\n        _reject: { bg: \"error.bg\" },\n      },\n      title: { color: \"fg.muted\" },\n    },\n    dashed: {\n      root: {\n        bg: \"transparent\",\n        borderStyle: \"dashed\",\n        borderWidth: \"1px\",\n        _accept: { borderColor: \"success.muted\" },\n        _reject: { borderColor: [\"error.muted\", \"error.subtle\"] },\n        _hover: {\n          \"&:not([data-accept], [data-reject])\": {\n            bg: \"bg.panel\",\n          },\n        },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    panel: {\n      root: {\n        bg: \"bg.panel\",\n        border: \"1px solid transparent\",\n        focusVisibleRing: \"inside\",\n        _hover: { bg: \"bg.subtle\" },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    plain: {\n      root: {\n        rounded: \"0\",\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n    solid: {\n      root: {\n        bg: \"transparent\",\n        borderWidth: \"1px\",\n        focusVisibleRing: \"inside\",\n        _accept: { borderColor: \"success.muted\" },\n        _reject: { borderColor: [\"error.muted\", \"error.subtle\"] },\n        _hover: { bg: \"bg.panel\" },\n        _invalid: {\n          borderColor: \"{error-border-color}\",\n          focusRingColor: \"{error-border-color}\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { minH: \"xs\" },\n    },\n    sm: {\n      root: { minH: \"sm\" },\n    },\n    md: {\n      root: { minH: \"md\" },\n    },\n    lg: {\n      root: { minH: \"lg\" },\n    },\n    full: {\n      root: { minH: \"full\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"sm\",\n    variant: \"dashed\",\n  },\n})\n\nexport type DropzoneStyle = typeof dropzoneStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,aAAa,EAAE,UAAU,KAAK;EAC9B,MAAM,EAAE,UAAU,MAAM;EACxB,SAAS,EAAE,UAAU,MAAM;EAC3B,SAAS;GACP,YAAY;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,UAAU;GACV,QAAQ;EACV;EACA,MAAM;GACJ,OAAO,EAAE,eAAe,OAAO;GAC/B,wBAAwB;GACxB,wBAAwB;GACxB,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,gBAAgB;GAChB,gBAAgB;GAChB,UAAU;GACV,GAAG;GACH,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,UAAU,EAAE,QAAQ,cAAc;GAClC,WAAW,EAAE,YAAY,WAAW;GACpC,WAAW,EAAE,YAAY,WAAW;EACtC;EACA,OAAO,EACL,UAAU,KACZ;CACF;CAEA,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,cAAc,EAAE,OAAO,UAAU;IACjC,cAAc,EAAE,OAAO,QAAQ;GACjC;GACA,MAAM;IACJ,OAAO;IACP,SAAS,EAAE,IAAI,aAAa;IAC5B,YAAY;KACV;MAAE,KAAK,EAAE,IAAI,KAAK;MAAG,OAAO;KAAgC;KAC5D;MAAE,KAAK,EAAE,IAAI,KAAK;MAAG,OAAO;KAAmC;KAC/D;MAAE,KAAK,EAAE,IAAI,KAAK;MAAG,OAAO;KAAmC;KAC/D;MAAE,KAAK,EAAE,IAAI,KAAK;MAAG,OAAO;KAAsC;IACpE;IACA,SAAS,EAAE,IAAI,WAAW;GAC5B;GACA,OAAO,EAAE,OAAO,WAAW;EAC7B;EACA,QAAQ,EACN,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS,EAAE,aAAa,gBAAgB;GACxC,SAAS,EAAE,aAAa,CAAC,eAAe,cAAc,EAAE;GACxD,QAAQ,EACN,uCAAuC,EACrC,IAAI,WACN,EACF;GACA,UAAU;IACR,aAAa;IACb,gBAAgB;GAClB;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,IAAI;GACJ,QAAQ;GACR,kBAAkB;GAClB,QAAQ,EAAE,IAAI,YAAY;GAC1B,UAAU;IACR,aAAa;IACb,gBAAgB;GAClB;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,SAAS;GACT,UAAU;IACR,aAAa;IACb,gBAAgB;GAClB;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,IAAI;GACJ,aAAa;GACb,kBAAkB;GAClB,SAAS,EAAE,aAAa,gBAAgB;GACxC,SAAS,EAAE,aAAa,CAAC,eAAe,cAAc,EAAE;GACxD,QAAQ,EAAE,IAAI,WAAW;GACzB,UAAU;IACR,aAAa;IACb,gBAAgB;GAClB;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,MAAM,KAAK,EACrB;EACA,IAAI,EACF,MAAM,EAAE,MAAM,KAAK,EACrB;EACA,IAAI,EACF,MAAM,EAAE,MAAM,KAAK,EACrB;EACA,IAAI,EACF,MAAM,EAAE,MAAM,KAAK,EACrB;EACA,MAAM,EACJ,MAAM,EAAE,MAAM,OAAO,EACvB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-dropzone.js","names":["useDropzone","useOriginalDropzone"],"sources":["../../../../src/components/dropzone/use-dropzone.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Accept, DropzoneOptions } from \"react-dropzone\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { fromEvent } from \"file-selector\"\nimport { useCallback, useId } from \"react\"\nimport { useDropzone as useOriginalDropzone } from \"react-dropzone\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  isArray,\n  mergeRefs,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseDropzoneProps\n  extends Omit<HTMLProps, \"onDrop\" | \"onError\">, FieldProps {\n  /**\n   * Set accepted file types.\n   */\n  accept?: Accept | string[]\n  /**\n   * Set to true to focus the root element on render.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Use this to provide a custom file aggregator.\n   */\n  getFilesFromEvent?: DropzoneOptions[\"getFilesFromEvent\"]\n  /**\n   * If `true`, display the dropzone loading icon.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Maximum accepted number of files.\n   * The default value is 0 which means there is no limitation to how many files are accepted.\n   *\n   * @default 0\n   */\n  maxFiles?: number\n  /**\n   * Maximum file size (in bytes).\n   *\n   * @default Infinity\n   */\n  maxSize?: number\n  /**\n   * Minimum file size (in bytes).\n   *\n   * @default 0\n   */\n  minSize?: number\n  /**\n   * Allow drag and drop (or selection from the file dialog) of multiple files.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * If true, disables click to open the native file selection dialog.\n   *\n   * @default false\n   */\n  noClick?: boolean\n  /**\n   * If true, disables drag and drop.\n   *\n   * @default false\n   */\n  noDrag?: boolean\n  /**\n   * If true, stops drag event propagation to parents.\n   *\n   * @default false\n   */\n  noDragEventsBubbling?: boolean\n  /**\n   * If true, disables `space` and `enter` to open the native file selection dialog.\n   * Note that it also stops tracking the focus state.\n   *\n   * @default false\n   */\n  noKeyboard?: boolean\n  /**\n   * Ref to a open function.\n   */\n  openRef?: RefObject<() => void>\n  /**\n   * If false, allow dropped items to take over the current browser window.\n   *\n   * @default true\n   */\n  preventDropOnDocument?: boolean\n  /**\n   * If true, use the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) to read files.\n   *\n   * @default false\n   */\n  useFsAccessApi?: boolean\n  /**\n   * Custom validation function.\n   * It must return null if there's no errors.\n   */\n  validator?: DropzoneOptions[\"validator\"]\n  /**\n   * Callback for when the dragenter event occurs.\n   */\n  onDragEnter?: DropzoneOptions[\"onDragEnter\"]\n  /**\n   * Callback for when the dragleave event occurs.\n   */\n  onDragLeave?: DropzoneOptions[\"onDragLeave\"]\n  /**\n   * Callback for when the dragover event occurs.\n   */\n  onDragOver?: DropzoneOptions[\"onDragOver\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n   */\n  onDrop?: DropzoneOptions[\"onDrop\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that if no files are accepted, this callback is not invoked.\n   */\n  onDropAccepted?: DropzoneOptions[\"onDropAccepted\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that if no files are rejected, this callback is not invoked.\n   */\n  onDropRejected?: DropzoneOptions[\"onDropRejected\"]\n  /**\n   * Callback for when there's some error from any of the promises.\n   */\n  onError?: DropzoneOptions[\"onError\"]\n  /**\n   * Callback for when closing the file dialog with no selection.\n   */\n  onFileDialogCancel?: DropzoneOptions[\"onFileDialogCancel\"]\n  /**\n   * Callback for when opening the file dialog.\n   */\n  onFileDialogOpen?: DropzoneOptions[\"onFileDialogOpen\"]\n}\n\nexport const useDropzone = (props: UseDropzoneProps = {}) => {\n  const {\n    props: {\n      id,\n      name,\n      accept,\n      autoFocus = false,\n      disabled,\n      getFilesFromEvent = fromEvent,\n      loading,\n      maxFiles = 0,\n      maxSize = Infinity,\n      minSize = 0,\n      multiple = false,\n      noClick = false,\n      noDrag = false,\n      noDragEventsBubbling = false,\n      noKeyboard = false,\n      openRef,\n      preventDropOnDocument = true,\n      readOnly,\n      useFsAccessApi = false,\n      validator,\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      onDropAccepted,\n      onDropRejected,\n      onError,\n      onFileDialogCancel,\n      onFileDialogOpen,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const labelledbyId = useId()\n  const interactive = !(loading || readOnly || disabled)\n  const {\n    acceptedFiles,\n    fileRejections,\n    isDragAccept: dragAccept,\n    isDragActive: dragActive,\n    isDragReject: dragReject,\n    isFocused: focused,\n    open,\n    getInputProps: getOriginalInputProps,\n    getRootProps: getOriginalRootProps,\n  } = useOriginalDropzone({\n    accept: isArray(accept)\n      ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n      : accept,\n    autoFocus,\n    disabled: !interactive,\n    getFilesFromEvent,\n    maxFiles,\n    maxSize,\n    minSize,\n    multiple,\n    noClick,\n    noDrag,\n    noDragEventsBubbling,\n    noKeyboard,\n    preventDropOnDocument,\n    useFsAccessApi,\n    validator,\n    onDragEnter,\n    onDragLeave,\n    onDragOver,\n    onDrop,\n    onDropAccepted,\n    onDropRejected,\n    onError,\n    onFileDialogCancel,\n    onFileDialogOpen,\n  })\n  const dragIdle = !dragAccept && !dragReject\n\n  assignRef(openRef, open)\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const { ref: restRef, ...restProps } = rest\n      const { ref: rootRef, ...rootProps } = getOriginalRootProps(\n        mergeProps(\n          {\n            id: labelledbyId,\n            ...dataProps,\n            ...eventProps,\n            \"aria-disabled\": ariaAttr(!interactive),\n            \"data-accept\": dataAttr(dragAccept),\n            \"data-idle\": dataAttr(dragIdle),\n            \"data-loading\": dataAttr(loading),\n            \"data-reject\": dataAttr(dragReject),\n          },\n          restProps,\n          props,\n        )(),\n      ) as HTMLProps\n\n      return {\n        ...rootProps,\n        ref: mergeRefs(restRef, ref, rootRef),\n      }\n    },\n    [\n      getOriginalRootProps,\n      labelledbyId,\n      dataProps,\n      eventProps,\n      interactive,\n      dragAccept,\n      dragIdle,\n      loading,\n      dragReject,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      getOriginalInputProps({\n        id,\n        name,\n        disabled,\n        readOnly,\n        ...ariaProps,\n        ...dataProps,\n        ...props,\n        \"aria-labelledby\": cx(ariaLabelledby, labelledbyId),\n      }),\n    [\n      getOriginalInputProps,\n      id,\n      name,\n      disabled,\n      readOnly,\n      ariaProps,\n      dataProps,\n      labelledbyId,\n    ],\n  )\n\n  return {\n    acceptedFiles,\n    dragAccept,\n    dragActive,\n    dragIdle,\n    dragReject,\n    fileRejections,\n    focused,\n    loading,\n    open,\n    getInputProps,\n    getRootProps,\n  }\n}\n\nexport type UseDropzoneReturn = ReturnType<typeof useDropzone>\n"],"mappings":";;;;;;;;;AA8JA,MAAaA,iBAAe,QAA0B,EAAE,KAAK;CAC3D,MAAM,EACJ,OAAO,EACL,IACA,MACA,QACA,YAAY,OACZ,UACA,oBAAoB,WACpB,SACA,WAAW,GACX,UAAU,UACV,UAAU,GACV,WAAW,OACX,UAAU,OACV,SAAS,OACT,uBAAuB,OACvB,aAAa,OACb,SACA,wBAAwB,MACxB,UACA,iBAAiB,OACjB,WACA,aACA,aACA,YACA,QACA,gBACA,gBACA,SACA,oBACA,kBACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,eAAe,OAAO;CAC5B,MAAM,cAAc,EAAE,WAAW,YAAY;CAC7C,MAAM,EACJ,eACA,gBACA,cAAc,YACd,cAAc,YACd,cAAc,YACd,WAAW,SACX,MACA,eAAe,uBACf,cAAc,yBACZC,YAAoB;EACtB,SAAA,GAAA,cAAA,SAAgB,OAAO,GACnB,OAAO,QAAQ,MAAM,aAAa;GAAE,GAAG;IAAO,UAAU,EAAE;GAAE,GAAG,EAAE,CAAC,GAClE;EACJ;EACA,UAAU,CAAC;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,WAAW,CAAC,cAAc,CAAC;CAEjC,UAAU,SAAS,KAAK;CAExB,MAAM,eAA2B,aAC9B,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;EAC1B,MAAM,EAAE,KAAK,SAAS,GAAG,cAAc;EACvC,MAAM,EAAE,KAAK,SAAS,GAAG,cAAc,qBACrC,WACE;GACE,IAAI;GACJ,GAAG;GACH,GAAG;GACH,kBAAA,GAAA,cAAA,UAA0B,CAAC,YAAY;GACvC,gBAAA,GAAA,cAAA,UAAwB,WAAW;GACnC,cAAA,GAAA,cAAA,UAAsB,SAAS;GAC/B,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,gBAAA,GAAA,cAAA,UAAwB,WAAW;GACpC,EACD,WACA,MACD,EAAE,CACJ;EAED,OAAO;GACL,GAAG;GACH,KAAK,UAAU,SAAS,KAAK,QAAQ;GACtC;IAEH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CA0BD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAlCyC,aACxC,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,EAAE,KACnD,sBAAsB;GACpB;GACA;GACA;GACA;GACA,GAAG;GACH,GAAG;GACH,GAAG;GACH,oBAAA,GAAA,cAAA,IAAsB,gBAAgB,aAAa;GACpD,CAAC,EACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAaY;EACb;EACD"}
+{"version":3,"file":"use-dropzone.js","names":["useDropzone","useOriginalDropzone"],"sources":["../../../../src/components/dropzone/use-dropzone.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Accept, DropzoneOptions } from \"react-dropzone\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { fromEvent } from \"file-selector\"\nimport { useCallback, useId } from \"react\"\nimport { useDropzone as useOriginalDropzone } from \"react-dropzone\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  isArray,\n  mergeRefs,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseDropzoneProps\n  extends Omit<HTMLProps, \"onDrop\" | \"onError\">, FieldProps {\n  /**\n   * Set accepted file types.\n   */\n  accept?: Accept | string[]\n  /**\n   * Set to true to focus the root element on render.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * Use this to provide a custom file aggregator.\n   */\n  getFilesFromEvent?: DropzoneOptions[\"getFilesFromEvent\"]\n  /**\n   * If `true`, display the dropzone loading icon.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Maximum accepted number of files.\n   * The default value is 0 which means there is no limitation to how many files are accepted.\n   *\n   * @default 0\n   */\n  maxFiles?: number\n  /**\n   * Maximum file size (in bytes).\n   *\n   * @default Infinity\n   */\n  maxSize?: number\n  /**\n   * Minimum file size (in bytes).\n   *\n   * @default 0\n   */\n  minSize?: number\n  /**\n   * Allow drag and drop (or selection from the file dialog) of multiple files.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * If true, disables click to open the native file selection dialog.\n   *\n   * @default false\n   */\n  noClick?: boolean\n  /**\n   * If true, disables drag and drop.\n   *\n   * @default false\n   */\n  noDrag?: boolean\n  /**\n   * If true, stops drag event propagation to parents.\n   *\n   * @default false\n   */\n  noDragEventsBubbling?: boolean\n  /**\n   * If true, disables `space` and `enter` to open the native file selection dialog.\n   * Note that it also stops tracking the focus state.\n   *\n   * @default false\n   */\n  noKeyboard?: boolean\n  /**\n   * Ref to a open function.\n   */\n  openRef?: RefObject<() => void>\n  /**\n   * If false, allow dropped items to take over the current browser window.\n   *\n   * @default true\n   */\n  preventDropOnDocument?: boolean\n  /**\n   * If true, use the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) to read files.\n   *\n   * @default false\n   */\n  useFsAccessApi?: boolean\n  /**\n   * Custom validation function.\n   * It must return null if there's no errors.\n   */\n  validator?: DropzoneOptions[\"validator\"]\n  /**\n   * Callback for when the dragenter event occurs.\n   */\n  onDragEnter?: DropzoneOptions[\"onDragEnter\"]\n  /**\n   * Callback for when the dragleave event occurs.\n   */\n  onDragLeave?: DropzoneOptions[\"onDragLeave\"]\n  /**\n   * Callback for when the dragover event occurs.\n   */\n  onDragOver?: DropzoneOptions[\"onDragOver\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n   */\n  onDrop?: DropzoneOptions[\"onDrop\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that if no files are accepted, this callback is not invoked.\n   */\n  onDropAccepted?: DropzoneOptions[\"onDropAccepted\"]\n  /**\n   * Callback for when the drop event occurs.\n   * Note that if no files are rejected, this callback is not invoked.\n   */\n  onDropRejected?: DropzoneOptions[\"onDropRejected\"]\n  /**\n   * Callback for when there's some error from any of the promises.\n   */\n  onError?: DropzoneOptions[\"onError\"]\n  /**\n   * Callback for when closing the file dialog with no selection.\n   */\n  onFileDialogCancel?: DropzoneOptions[\"onFileDialogCancel\"]\n  /**\n   * Callback for when opening the file dialog.\n   */\n  onFileDialogOpen?: DropzoneOptions[\"onFileDialogOpen\"]\n}\n\nexport const useDropzone = (props: UseDropzoneProps = {}) => {\n  const {\n    props: {\n      id,\n      name,\n      accept,\n      autoFocus = false,\n      disabled,\n      getFilesFromEvent = fromEvent,\n      loading,\n      maxFiles = 0,\n      maxSize = Infinity,\n      minSize = 0,\n      multiple = false,\n      noClick = false,\n      noDrag = false,\n      noDragEventsBubbling = false,\n      noKeyboard = false,\n      openRef,\n      preventDropOnDocument = true,\n      readOnly,\n      useFsAccessApi = false,\n      validator,\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      onDropAccepted,\n      onDropRejected,\n      onError,\n      onFileDialogCancel,\n      onFileDialogOpen,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const labelledbyId = useId()\n  const interactive = !(loading || readOnly || disabled)\n  const {\n    acceptedFiles,\n    fileRejections,\n    isDragAccept: dragAccept,\n    isDragActive: dragActive,\n    isDragReject: dragReject,\n    isFocused: focused,\n    open,\n    getInputProps: getOriginalInputProps,\n    getRootProps: getOriginalRootProps,\n  } = useOriginalDropzone({\n    accept: isArray(accept)\n      ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n      : accept,\n    autoFocus,\n    disabled: !interactive,\n    getFilesFromEvent,\n    maxFiles,\n    maxSize,\n    minSize,\n    multiple,\n    noClick,\n    noDrag,\n    noDragEventsBubbling,\n    noKeyboard,\n    preventDropOnDocument,\n    useFsAccessApi,\n    validator,\n    onDragEnter,\n    onDragLeave,\n    onDragOver,\n    onDrop,\n    onDropAccepted,\n    onDropRejected,\n    onError,\n    onFileDialogCancel,\n    onFileDialogOpen,\n  })\n  const dragIdle = !dragAccept && !dragReject\n\n  assignRef(openRef, open)\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => {\n      const { ref: restRef, ...restProps } = rest\n      const { ref: rootRef, ...rootProps } = getOriginalRootProps(\n        mergeProps(\n          {\n            id: labelledbyId,\n            ...dataProps,\n            ...eventProps,\n            \"aria-disabled\": ariaAttr(!interactive),\n            \"data-accept\": dataAttr(dragAccept),\n            \"data-idle\": dataAttr(dragIdle),\n            \"data-loading\": dataAttr(loading),\n            \"data-reject\": dataAttr(dragReject),\n          },\n          restProps,\n          props,\n        )(),\n      ) as HTMLProps\n\n      return {\n        ...rootProps,\n        ref: mergeRefs(restRef, ref, rootRef),\n      }\n    },\n    [\n      getOriginalRootProps,\n      labelledbyId,\n      dataProps,\n      eventProps,\n      interactive,\n      dragAccept,\n      dragIdle,\n      loading,\n      dragReject,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      getOriginalInputProps({\n        id,\n        name,\n        disabled,\n        readOnly,\n        ...ariaProps,\n        ...dataProps,\n        ...props,\n        \"aria-labelledby\": cx(ariaLabelledby, labelledbyId),\n      }),\n    [\n      getOriginalInputProps,\n      id,\n      name,\n      disabled,\n      readOnly,\n      ariaProps,\n      dataProps,\n      labelledbyId,\n    ],\n  )\n\n  return {\n    acceptedFiles,\n    dragAccept,\n    dragActive,\n    dragIdle,\n    dragReject,\n    fileRejections,\n    focused,\n    loading,\n    open,\n    getInputProps,\n    getRootProps,\n  }\n}\n\nexport type UseDropzoneReturn = ReturnType<typeof useDropzone>\n"],"mappings":";;;;;;;;;AA8JA,MAAaA,iBAAe,QAA0B,CAAC,MAAM;CAC3D,MAAM,EACJ,OAAO,EACL,IACA,MACA,QACA,YAAY,OACZ,UACA,oBAAoB,WACpB,SACA,WAAW,GACX,UAAU,UACV,UAAU,GACV,WAAW,OACX,UAAU,OACV,SAAS,OACT,uBAAuB,OACvB,aAAa,OACb,SACA,wBAAwB,MACxB,UACA,iBAAiB,OACjB,WACA,aACA,aACA,YACA,QACA,gBACA,gBACA,SACA,oBACA,kBACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,eAAe,MAAM;CAC3B,MAAM,cAAc,EAAE,WAAW,YAAY;CAC7C,MAAM,EACJ,eACA,gBACA,cAAc,YACd,cAAc,YACd,cAAc,YACd,WAAW,SACX,MACA,eAAe,uBACf,cAAc,yBACZC,YAAoB;EACtB,SAAA,GAAA,cAAA,SAAgB,MAAM,IAClB,OAAO,QAAQ,MAAM,aAAa;GAAE,GAAG;IAAO,UAAU,CAAC;EAAE,IAAI,CAAC,CAAC,IACjE;EACJ;EACA,UAAU,CAAC;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,WAAW,CAAC,cAAc,CAAC;CAEjC,UAAU,SAAS,IAAI;CAEvB,MAAM,eAA2B,aAC9B,EAAE,KAAK,GAAG,UAAU,CAAC,MAAM;EAC1B,MAAM,EAAE,KAAK,SAAS,GAAG,cAAc;EACvC,MAAM,EAAE,KAAK,SAAS,GAAG,cAAc,qBACrC,WACE;GACE,IAAI;GACJ,GAAG;GACH,GAAG;GACH,kBAAA,GAAA,cAAA,UAA0B,CAAC,WAAW;GACtC,gBAAA,GAAA,cAAA,UAAwB,UAAU;GAClC,cAAA,GAAA,cAAA,UAAsB,QAAQ;GAC9B,iBAAA,GAAA,cAAA,UAAyB,OAAO;GAChC,gBAAA,GAAA,cAAA,UAAwB,UAAU;EACpC,GACA,WACA,KACF,EAAE,CACJ;EAEA,OAAO;GACL,GAAG;GACH,KAAK,UAAU,SAAS,KAAK,OAAO;EACtC;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CA0BA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAlCyC,aACxC,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,MAClD,sBAAsB;GACpB;GACA;GACA;GACA;GACA,GAAG;GACH,GAAG;GACH,GAAG;GACH,oBAAA,GAAA,cAAA,IAAsB,gBAAgB,YAAY;EACpD,CAAC,GACH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAaY;EACZ;CACF;AACF"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"editable.style.js","names":[],"sources":["../../../../src/components/editable/editable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const editableStyle = defineComponentSlotStyle({\n  base: {\n    control: {\n      alignItems: \"start\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n    },\n    input: {\n      bg: \"transparent\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    preview: {\n      bg: \"transparent\",\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      whiteSpace: \"pre-line\",\n      _hover: {\n        bg: \"bg.subtle\",\n      },\n      _readOnly: {\n        pointerEvents: \"none\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      alignItems: \"start\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n      position: \"relative\",\n      w: \"full\",\n    },\n    textarea: {\n      bg: \"transparent\",\n      boxSizing: \"content-box\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n  },\n})\n\nexport type EditableStyle = typeof editableStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB,EACpD,MAAM;CACJ,SAAS;EACP,YAAY;EACZ,SAAS;EACT,KAAK;EACN;CACD,OAAO;EACL,IAAI;EACJ,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,YAAY;GACV;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAiC;GAC7D;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAoC;GAChE;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAoC;GAChE;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAuC;GACpE;EACD,UAAU;GACR,aAAa;GACb,gBAAgB;GACjB;EACD,WAAW,EACT,YAAY,YACb;EACF;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,YAAY;EACZ,QAAQ,EACN,IAAI,aACL;EACD,WAAW,EACT,eAAe,QAChB;EACD,WAAW,EACT,YAAY,YACb;EACF;CACD,MAAM;EACJ,wBAAwB;EACxB,wBAAwB;EACxB,YAAY;EACZ,SAAS;EACT,KAAK;EACL,UAAU;EACV,GAAG;EACJ;CACD,UAAU;EACR,IAAI;EACJ,WAAW;EACX,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,YAAY;GACV;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAiC;GAC7D;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAoC;GAChE;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAoC;GAChE;IAAE,KAAK,EAAE,IAAI,MAAM;IAAE,OAAO;IAAuC;GACpE;EACD,UAAU;GACR,aAAa;GACb,gBAAgB;GACjB;EACD,WAAW,EACT,YAAY,YACb;EACF;CACF,EACF,CAAC"}
+{"version":3,"file":"editable.style.js","names":[],"sources":["../../../../src/components/editable/editable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const editableStyle = defineComponentSlotStyle({\n  base: {\n    control: {\n      alignItems: \"start\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n    },\n    input: {\n      bg: \"transparent\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    preview: {\n      bg: \"transparent\",\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      whiteSpace: \"pre-line\",\n      _hover: {\n        bg: \"bg.subtle\",\n      },\n      _readOnly: {\n        pointerEvents: \"none\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      alignItems: \"start\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n      position: \"relative\",\n      w: \"full\",\n    },\n    textarea: {\n      bg: \"transparent\",\n      boxSizing: \"content-box\",\n      focusRingColor: \"{focus-border-color}\",\n      focusVisibleRing: \"inside\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      minH: \"1lh\",\n      p: \"1\",\n      rounded: \"l2\",\n      textAlign: \"inherit\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      w: \"full\",\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n  },\n})\n\nexport type EditableStyle = typeof editableStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB,EACpD,MAAM;CACJ,SAAS;EACP,YAAY;EACZ,SAAS;EACT,KAAK;CACP;CACA,OAAO;EACL,IAAI;EACJ,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,YAAY;GACV;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAgC;GAC5D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAmC;GAC/D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAmC;GAC/D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAsC;EACpE;EACA,UAAU;GACR,aAAa;GACb,gBAAgB;EAClB;EACA,WAAW,EACT,YAAY,WACd;CACF;CACA,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,YAAY;EACZ,QAAQ,EACN,IAAI,YACN;EACA,WAAW,EACT,eAAe,OACjB;EACA,WAAW,EACT,YAAY,WACd;CACF;CACA,MAAM;EACJ,wBAAwB;EACxB,wBAAwB;EACxB,YAAY;EACZ,SAAS;EACT,KAAK;EACL,UAAU;EACV,GAAG;CACL;CACA,UAAU;EACR,IAAI;EACJ,WAAW;EACX,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,MAAM;EACN,GAAG;EACH,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,GAAG;EACH,YAAY;GACV;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAgC;GAC5D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAmC;GAC/D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAmC;GAC/D;IAAE,KAAK,EAAE,IAAI,KAAK;IAAG,OAAO;GAAsC;EACpE;EACA,UAAU;GACR,aAAa;GACb,gBAAgB;EAClB;EACA,WAAW,EACT,YAAY,WACd;CACF;AACF,EACF,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"em.js","names":[],"sources":["../../../../src/components/em/em.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmStyle } from \"./em.style\"\nimport { createComponent } from \"../../core\"\nimport { emStyle } from \"./em.style\"\n\nexport interface EmProps extends HTMLStyledProps<\"em\">, ThemeProps<EmStyle> {}\n\nconst {\n  PropsContext: EmPropsContext,\n  usePropsContext: useEmPropsContext,\n  withContext,\n} = createComponent<EmProps, EmStyle>(\"em\", emStyle)\n\nexport { EmPropsContext, useEmPropsContext }\n\n/**\n * `Em` is a component that represents emphasized text. By default, it renders a `em` element.\n *\n * @see https://yamada-ui.com/docs/components/em\n */\nexport const Em = withContext(\"em\")()\n"],"mappings":";;;;AASA,MAAM,EACJ,cAAc,gBACd,iBAAiB,mBACjB,gBACE,gBAAkC,MAAM,QAAQ;;;;;;AASpD,MAAa,KAAK,YAAY,KAAK,EAAE"}
+{"version":3,"file":"em.js","names":[],"sources":["../../../../src/components/em/em.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmStyle } from \"./em.style\"\nimport { createComponent } from \"../../core\"\nimport { emStyle } from \"./em.style\"\n\nexport interface EmProps extends HTMLStyledProps<\"em\">, ThemeProps<EmStyle> {}\n\nconst {\n  PropsContext: EmPropsContext,\n  usePropsContext: useEmPropsContext,\n  withContext,\n} = createComponent<EmProps, EmStyle>(\"em\", emStyle)\n\nexport { EmPropsContext, useEmPropsContext }\n\n/**\n * `Em` is a component that represents emphasized text. By default, it renders a `em` element.\n *\n * @see https://yamada-ui.com/docs/components/em\n */\nexport const Em = withContext(\"em\")()\n"],"mappings":";;;;AASA,MAAM,EACJ,cAAc,gBACd,iBAAiB,mBACjB,gBACE,gBAAkC,MAAM,OAAO;;;;;;AASnD,MAAa,KAAK,YAAY,IAAI,EAAE"}

package/dist/esm/components/em/em.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"em.style.js","names":[],"sources":["../../../../src/components/em/em.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const emStyle = defineComponentStyle({\n  base: {\n    fontSize: \"italic\",\n  },\n})\n\nexport type EmStyle = typeof emStyle\n"],"mappings":";;AAEA,MAAa,UAAU,qBAAqB,EAC1C,MAAM,EACJ,UAAU,UACX,EACF,CAAC"}
+{"version":3,"file":"em.style.js","names":[],"sources":["../../../../src/components/em/em.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const emStyle = defineComponentStyle({\n  base: {\n    fontSize: \"italic\",\n  },\n})\n\nexport type EmStyle = typeof emStyle\n"],"mappings":";;AAEA,MAAa,UAAU,qBAAqB,EAC1C,MAAM,EACJ,UAAU,SACZ,EACF,CAAC"}

package/dist/esm/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmptyState } from \"./empty-state.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { emptyState } from \"./empty-state.style\"\n\nexport interface EmptyStateRootProps\n  extends Omit<HTMLStyledProps, \"title\">, ThemeProps<EmptyState> {\n  /**\n   * The empty state description to use.\n   */\n  description?: ReactNode\n  /**\n   * The empty state indicator to use.\n   */\n  indicator?: ReactNode\n  /**\n   * The empty state title to use.\n   */\n  title?: ReactNode\n  /**\n   * The props for the empty state content component.\n   */\n  contentProps?: EmptyStateContentProps\n  /**\n   * The props for the empty state description component.\n   */\n  descriptionProps?: EmptyStateDescriptionProps\n  /**\n   * The props for the empty state indicator component.\n   */\n  indicatorProps?: EmptyStateIndicatorProps\n  /**\n   * The props for the empty state title component.\n   */\n  titleProps?: EmptyStateTitleProps\n}\n\nconst {\n  PropsContext: EmptyStatePropsContext,\n  usePropsContext: useEmptyStatePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<EmptyStateRootProps, EmptyState>(\n  \"empty-state\",\n  emptyState,\n)\n\nexport { EmptyStatePropsContext, useEmptyStatePropsContext }\n\n/**\n * `EmptyState` is used to display when a resource is empty or not available.\n *\n * @see https://yamada-ui.com/docs/components/empty-state\n */\nexport const EmptyStateRoot = withProvider<\"div\", EmptyStateRootProps>(\n  ({\n    children,\n    description,\n    indicator,\n    title,\n    contentProps,\n    descriptionProps,\n    indicatorProps,\n    titleProps,\n    ...rest\n  }) => {\n    const [\n      omittedChildren,\n      customIndicator,\n      customContent,\n      customTitle,\n      customDescription,\n    ] = useSplitChildren(\n      children,\n      EmptyStateIndicator,\n      EmptyStateContent,\n      EmptyStateTitle,\n      EmptyStateDescription,\n    )\n\n    return (\n      <styled.div {...rest}>\n        {customIndicator ?? (\n          <EmptyStateIndicator {...indicatorProps}>\n            {indicator}\n          </EmptyStateIndicator>\n        )}\n\n        {customContent ?? (\n          <EmptyStateContent {...contentProps}>\n            {customTitle ??\n              (title ? (\n                <EmptyStateTitle {...titleProps}>{title}</EmptyStateTitle>\n              ) : null)}\n\n            {customDescription ??\n              (description ? (\n                <EmptyStateDescription {...descriptionProps}>\n                  {description}\n                </EmptyStateDescription>\n              ) : null)}\n          </EmptyStateContent>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface EmptyStateIndicatorProps extends HTMLStyledProps {}\n\nexport const EmptyStateIndicator = withContext<\"div\", EmptyStateIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\nexport interface EmptyStateContentProps extends HTMLStyledProps {}\n\nexport const EmptyStateContent = withContext<\"div\", EmptyStateContentProps>(\n  \"div\",\n  \"content\",\n)()\n\nexport interface EmptyStateTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const EmptyStateTitle = withContext<\"h3\", EmptyStateTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface EmptyStateDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const EmptyStateDescription = withContext<\n  \"p\",\n  EmptyStateDescriptionProps\n>(\"p\", \"description\")()\n"],"mappings":";;;;;;;AAyCA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,eACA,WACD;;;;;;AASD,MAAa,iBAAiB,cAC3B,EACC,UACA,aACA,WACA,OACA,cACA,kBACA,gBACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,eACA,aACA,qBACE,iBACF,UACA,qBACA,mBACA,iBACA,sBACD;CAED,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB;GACG,mBACC,oBAAC,qBAAD;IAAqB,GAAI;cACtB;IACmB,CAAA;GAGvB,iBACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,gBACE,QACC,oBAAC,iBAAD;KAAiB,GAAI;eAAa;KAAwB,CAAA,GACxD,OAEL,sBACE,cACC,oBAAC,uBAAD;KAAuB,GAAI;eACxB;KACqB,CAAA,GACtB,MACY;;GAGrB;GACU;;GAGjB,OACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,OACA,YACD,EAAE;AAIH,MAAa,oBAAoB,YAC/B,OACA,UACD,EAAE;AAIH,MAAa,kBAAkB,YAC7B,MACA,QACD,EAAE;AAIH,MAAa,wBAAwB,YAGnC,KAAK,cAAc,EAAE"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmptyState } from \"./empty-state.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { emptyState } from \"./empty-state.style\"\n\nexport interface EmptyStateRootProps\n  extends Omit<HTMLStyledProps, \"title\">, ThemeProps<EmptyState> {\n  /**\n   * The empty state description to use.\n   */\n  description?: ReactNode\n  /**\n   * The empty state indicator to use.\n   */\n  indicator?: ReactNode\n  /**\n   * The empty state title to use.\n   */\n  title?: ReactNode\n  /**\n   * The props for the empty state content component.\n   */\n  contentProps?: EmptyStateContentProps\n  /**\n   * The props for the empty state description component.\n   */\n  descriptionProps?: EmptyStateDescriptionProps\n  /**\n   * The props for the empty state indicator component.\n   */\n  indicatorProps?: EmptyStateIndicatorProps\n  /**\n   * The props for the empty state title component.\n   */\n  titleProps?: EmptyStateTitleProps\n}\n\nconst {\n  PropsContext: EmptyStatePropsContext,\n  usePropsContext: useEmptyStatePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<EmptyStateRootProps, EmptyState>(\n  \"empty-state\",\n  emptyState,\n)\n\nexport { EmptyStatePropsContext, useEmptyStatePropsContext }\n\n/**\n * `EmptyState` is used to display when a resource is empty or not available.\n *\n * @see https://yamada-ui.com/docs/components/empty-state\n */\nexport const EmptyStateRoot = withProvider<\"div\", EmptyStateRootProps>(\n  ({\n    children,\n    description,\n    indicator,\n    title,\n    contentProps,\n    descriptionProps,\n    indicatorProps,\n    titleProps,\n    ...rest\n  }) => {\n    const [\n      omittedChildren,\n      customIndicator,\n      customContent,\n      customTitle,\n      customDescription,\n    ] = useSplitChildren(\n      children,\n      EmptyStateIndicator,\n      EmptyStateContent,\n      EmptyStateTitle,\n      EmptyStateDescription,\n    )\n\n    return (\n      <styled.div {...rest}>\n        {customIndicator ?? (\n          <EmptyStateIndicator {...indicatorProps}>\n            {indicator}\n          </EmptyStateIndicator>\n        )}\n\n        {customContent ?? (\n          <EmptyStateContent {...contentProps}>\n            {customTitle ??\n              (title ? (\n                <EmptyStateTitle {...titleProps}>{title}</EmptyStateTitle>\n              ) : null)}\n\n            {customDescription ??\n              (description ? (\n                <EmptyStateDescription {...descriptionProps}>\n                  {description}\n                </EmptyStateDescription>\n              ) : null)}\n          </EmptyStateContent>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface EmptyStateIndicatorProps extends HTMLStyledProps {}\n\nexport const EmptyStateIndicator = withContext<\"div\", EmptyStateIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\nexport interface EmptyStateContentProps extends HTMLStyledProps {}\n\nexport const EmptyStateContent = withContext<\"div\", EmptyStateContentProps>(\n  \"div\",\n  \"content\",\n)()\n\nexport interface EmptyStateTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const EmptyStateTitle = withContext<\"h3\", EmptyStateTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface EmptyStateDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const EmptyStateDescription = withContext<\n  \"p\",\n  EmptyStateDescriptionProps\n>(\"p\", \"description\")()\n"],"mappings":";;;;;;;AAyCA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,eACA,UACF;;;;;;AASA,MAAa,iBAAiB,cAC3B,EACC,UACA,aACA,WACA,OACA,cACA,kBACA,gBACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,eACA,aACA,qBACE,iBACF,UACA,qBACA,mBACA,iBACA,qBACF;CAEA,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB;GACG,mBACC,oBAAC,qBAAD;IAAqB,GAAI;cACtB;GACkB,CAAA;GAGtB,iBACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,gBACE,QACC,oBAAC,iBAAD;KAAiB,GAAI;eAAa;IAAuB,CAAA,IACvD,OAEL,sBACE,cACC,oBAAC,uBAAD;KAAuB,GAAI;eACxB;IACoB,CAAA,IACrB,KACW;;GAGpB;EACS;;AAEhB,GACA,MACF,EAAE;AAIF,MAAa,sBAAsB,YACjC,OACA,WACF,EAAE;AAIF,MAAa,oBAAoB,YAC/B,OACA,SACF,EAAE;AAIF,MAAa,kBAAkB,YAC7B,MACA,OACF,EAAE;AAIF,MAAa,wBAAwB,YAGnC,KAAK,aAAa,EAAE"}

package/dist/esm/components/empty-state/empty-state.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.style.js","names":[],"sources":["../../../../src/components/empty-state/empty-state.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const emptyState = defineComponentSlotStyle({\n  base: {\n    content: {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n    },\n    description: {\n      color: \"fg.muted\",\n      fontSize: \"sm\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    root: {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n      w: \"full\",\n    },\n    title: {\n      fontWeight: \"semibold\",\n    },\n  },\n\n  sizes: {\n    sm: {\n      content: {\n        gap: \"xs\",\n      },\n      indicator: {\n        fontSize: \"4xl\",\n      },\n      root: {\n        gap: \"sm\",\n        py: \"sm\",\n      },\n      title: {\n        fontSize: \"md\",\n      },\n    },\n    md: {\n      content: {\n        gap: \"sm\",\n      },\n      indicator: {\n        fontSize: \"5xl\",\n      },\n      root: {\n        gap: \"md\",\n        py: \"md\",\n      },\n      title: {\n        fontSize: \"lg\",\n      },\n    },\n    lg: {\n      content: {\n        gap: \"md\",\n      },\n      indicator: {\n        fontSize: \"6xl\",\n      },\n      root: {\n        gap: \"lg\",\n        py: \"lg\",\n      },\n      title: {\n        fontSize: \"xl\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type EmptyState = typeof emptyState\n"],"mappings":";;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,gBAAgB;GACjB;EACD,aAAa;GACX,OAAO;GACP,UAAU;GACX;EACD,WAAW;GACT,YAAY;GACZ,OAAO;GACP,SAAS;GACT,gBAAgB;GACjB;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GACf,gBAAgB;GAChB,GAAG;GACJ;EACD,OAAO,EACL,YAAY,YACb;EACF;CAED,OAAO;EACL,IAAI;GACF,SAAS,EACP,KAAK,MACN;GACD,WAAW,EACT,UAAU,OACX;GACD,MAAM;IACJ,KAAK;IACL,IAAI;IACL;GACD,OAAO,EACL,UAAU,MACX;GACF;EACD,IAAI;GACF,SAAS,EACP,KAAK,MACN;GACD,WAAW,EACT,UAAU,OACX;GACD,MAAM;IACJ,KAAK;IACL,IAAI;IACL;GACD,OAAO,EACL,UAAU,MACX;GACF;EACD,IAAI;GACF,SAAS,EACP,KAAK,MACN;GACD,WAAW,EACT,UAAU,OACX;GACD,MAAM;IACJ,KAAK;IACL,IAAI;IACL;GACD,OAAO,EACL,UAAU,MACX;GACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"empty-state.style.js","names":[],"sources":["../../../../src/components/empty-state/empty-state.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const emptyState = defineComponentSlotStyle({\n  base: {\n    content: {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n    },\n    description: {\n      color: \"fg.muted\",\n      fontSize: \"sm\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    root: {\n      alignItems: \"center\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n      w: \"full\",\n    },\n    title: {\n      fontWeight: \"semibold\",\n    },\n  },\n\n  sizes: {\n    sm: {\n      content: {\n        gap: \"xs\",\n      },\n      indicator: {\n        fontSize: \"4xl\",\n      },\n      root: {\n        gap: \"sm\",\n        py: \"sm\",\n      },\n      title: {\n        fontSize: \"md\",\n      },\n    },\n    md: {\n      content: {\n        gap: \"sm\",\n      },\n      indicator: {\n        fontSize: \"5xl\",\n      },\n      root: {\n        gap: \"md\",\n        py: \"md\",\n      },\n      title: {\n        fontSize: \"lg\",\n      },\n    },\n    lg: {\n      content: {\n        gap: \"md\",\n      },\n      indicator: {\n        fontSize: \"6xl\",\n      },\n      root: {\n        gap: \"lg\",\n        py: \"lg\",\n      },\n      title: {\n        fontSize: \"xl\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type EmptyState = typeof emptyState\n"],"mappings":";;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,gBAAgB;EAClB;EACA,aAAa;GACX,OAAO;GACP,UAAU;EACZ;EACA,WAAW;GACT,YAAY;GACZ,OAAO;GACP,SAAS;GACT,gBAAgB;EAClB;EACA,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GACf,gBAAgB;GAChB,GAAG;EACL;EACA,OAAO,EACL,YAAY,WACd;CACF;CAEA,OAAO;EACL,IAAI;GACF,SAAS,EACP,KAAK,KACP;GACA,WAAW,EACT,UAAU,MACZ;GACA,MAAM;IACJ,KAAK;IACL,IAAI;GACN;GACA,OAAO,EACL,UAAU,KACZ;EACF;EACA,IAAI;GACF,SAAS,EACP,KAAK,KACP;GACA,WAAW,EACT,UAAU,MACZ;GACA,MAAM;IACJ,KAAK;IACL,IAAI;GACN;GACA,OAAO,EACL,UAAU,KACZ;EACF;EACA,IAAI;GACF,SAAS,EACP,KAAK,KACP;GACA,WAAW,EACT,UAAU,MACZ;GACA,MAAM;IACJ,KAAK;IACL,IAAI;GACN;GACA,OAAO,EACL,UAAU,KACZ;EACF;CACF;CAEA,cAAc,EACZ,MAAM,KACR;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"fade.js","names":["motion"],"sources":["../../../../src/components/fade/fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { FadeStyle } from \"./fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeStyle } from \"./fade.style\"\n\nexport const fadeVariants: Variants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n    opacity: 0,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeStyle> {}\n\nconst {\n  PropsContext: FadePropsContext,\n  usePropsContext: useFadePropsContext,\n  withContext,\n} = createComponent<FadeProps, FadeStyle>(\"fade\", fadeStyle)\n\nexport { FadePropsContext, useFadePropsContext }\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see https://yamada-ui.com/docs/components/fade\n */\nexport const Fade = withContext<\"div\", FadeProps>(\n  ({\n    delay,\n    duration,\n    open: openProp,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp && unmountOnExit : true\n\n    const custom = useMemo(\n      () => ({\n        delay,\n        duration,\n        transition,\n        transitionEnd,\n      }),\n      [delay, duration, transition, transitionEnd],\n    )\n\n    return (\n      <AnimatePresence custom={custom}>\n        {open ? (\n          <motion.div\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial=\"exit\"\n            variants={fadeVariants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,eAAyB;CACpC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,MAAM;EACtE,SAAS;EACT,YAAY,iBAAiB,MAAM,YAAY,MAAM,CAAC,OAAO,SAAS;EACtE,eAAe,eAAe;EAC9B,GAAG;EACJ;CACD,OAAO,EAAE,OAAO,UAAU,MAAM,YAAY,kBAAkB,EAAE,MAAM;EACpE,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,KAAK,CAAC,OAAO,SAAS;EACpE,eAAe,eAAe;EAC9B,GAAG;EACJ;CACF;AAKD,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACE,gBAAsC,QAAQ,UAAU;;;;;;AAS5D,MAAa,OAAO,aACjB,EACC,OACA,UACA,MAAM,UACN,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAU;EAAY;EAAc,CAC7C;CAED,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;GACJ,CAAA,GACA;EACY,CAAA;EAGvB,EAAE"}
+{"version":3,"file":"fade.js","names":["motion"],"sources":["../../../../src/components/fade/fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { FadeStyle } from \"./fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeStyle } from \"./fade.style\"\n\nexport const fadeVariants: Variants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n    opacity: 0,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeStyle> {}\n\nconst {\n  PropsContext: FadePropsContext,\n  usePropsContext: useFadePropsContext,\n  withContext,\n} = createComponent<FadeProps, FadeStyle>(\"fade\", fadeStyle)\n\nexport { FadePropsContext, useFadePropsContext }\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see https://yamada-ui.com/docs/components/fade\n */\nexport const Fade = withContext<\"div\", FadeProps>(\n  ({\n    delay,\n    duration,\n    open: openProp,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp && unmountOnExit : true\n\n    const custom = useMemo(\n      () => ({\n        delay,\n        duration,\n        transition,\n        transitionEnd,\n      }),\n      [delay, duration, transition, transitionEnd],\n    )\n\n    return (\n      <AnimatePresence custom={custom}>\n        {open ? (\n          <motion.div\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial=\"exit\"\n            variants={fadeVariants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,eAAyB;CACpC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,YAAY,iBAAiB,MAAM,YAAY,KAAK,EAAE,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EAAE,OAAO,UAAU,MAAM,YAAY,kBAAkB,CAAC,OAAO;EACpE,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,EAAE,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAKA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACE,gBAAsC,QAAQ,SAAS;;;;;;AAS3D,MAAa,OAAO,aACjB,EACC,OACA,UACA,MAAM,UACN,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAY;CAAa,CAC7C;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,EAAE"}

package/dist/esm/components/fade/fade.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade.style.js","names":[],"sources":["../../../../src/components/fade/fade.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const fadeStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type FadeStyle = typeof fadeStyle\n"],"mappings":";;AAEA,MAAa,YAAY,qBAAqB,EAC5C,MAAM,EACJ,GAAG,QACJ,EACF,CAAC"}
+{"version":3,"file":"fade.style.js","names":[],"sources":["../../../../src/components/fade/fade.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const fadeStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type FadeStyle = typeof fadeStyle\n"],"mappings":";;AAEA,MAAa,YAAY,qBAAqB,EAC5C,MAAM,EACJ,GAAG,OACL,EACF,CAAC"}

package/dist/esm/components/fade-scale/fade-scale.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-scale.js","names":["motion"],"sources":["../../../../src/components/fade-scale/fade-scale.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { FadeScaleStyle } from \"./fade-scale.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeScaleStyle } from \"./fade-scale.style\"\n\nexport const fadeScaleVariants: Variants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    scale: 1,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    delay,\n    duration,\n    exit,\n    reverse,\n    scale,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    opacity: 0,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    ...(reverse\n      ? { scale, transitionEnd: transitionEnd?.exit }\n      : { transitionEnd: { scale, ...transitionEnd?.exit } }),\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeScaleProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeScaleStyle> {\n  /**\n   * If `true`, the element will transition back to exit state.\n   *\n   * @default true\n   */\n  reverse?: boolean\n  /**\n   * The initial scale of the element.\n   *\n   * @default 0.95\n   */\n  scale?: number\n}\n\nconst {\n  PropsContext: FadeScalePropsContext,\n  usePropsContext: useFadeScalePropsContext,\n  withContext,\n} = createComponent<FadeScaleProps, FadeScaleStyle>(\n  \"fade-scale\",\n  fadeScaleStyle,\n)\n\nexport { FadeScalePropsContext, useFadeScalePropsContext }\n\n/**\n * `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.\n *\n * @see https://yamada-ui.com/docs/components/fade-scale\n */\nexport const FadeScale = withContext<\"div\", FadeScaleProps>(\n  ({\n    delay,\n    duration,\n    open: openProp,\n    reverse = true,\n    scale = 0.95,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp && unmountOnExit : true\n\n    const custom = useMemo(\n      () => ({\n        delay,\n        duration,\n        reverse,\n        scale,\n        transition,\n        transitionEnd,\n      }),\n      [delay, duration, reverse, scale, transition, transitionEnd],\n    )\n\n    return (\n      <AnimatePresence custom={custom}>\n        {open ? (\n          <motion.div\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial=\"exit\"\n            variants={fadeScaleVariants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,MAAM;EACtE,SAAS;EACT,OAAO;EACP,YAAY,iBAAiB,MAAM,YAAY,MAAM,CAAC,OAAO,SAAS;EACtE,eAAe,eAAe;EAC9B,GAAG;EACJ;CACD,OAAO,EACL,OACA,UACA,MACA,SACA,OACA,YACA,kBACE,EAAE,MAAM;EACV,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,KAAK,CAAC,OAAO,SAAS;EACpE,GAAI,UACA;GAAE;GAAO,eAAe,eAAe;GAAM,GAC7C,EAAE,eAAe;GAAE;GAAO,GAAG,eAAe;GAAM,EAAE;EACxD,GAAG;EACJ;CACF;AAkBD,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAa,YAAY,aACtB,EACC,OACA,UACA,MAAM,UACN,UAAU,MACV,QAAQ,KACR,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAU;EAAS;EAAO;EAAY;EAAc,CAC7D;CAED,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;GACJ,CAAA,GACA;EACY,CAAA;EAGvB,EAAE"}
+{"version":3,"file":"fade-scale.js","names":["motion"],"sources":["../../../../src/components/fade-scale/fade-scale.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { FadeScaleStyle } from \"./fade-scale.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeScaleStyle } from \"./fade-scale.style\"\n\nexport const fadeScaleVariants: Variants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    scale: 1,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({\n    delay,\n    duration,\n    exit,\n    reverse,\n    scale,\n    transition,\n    transitionEnd,\n  } = {}) => ({\n    opacity: 0,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    ...(reverse\n      ? { scale, transitionEnd: transitionEnd?.exit }\n      : { transitionEnd: { scale, ...transitionEnd?.exit } }),\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeScaleProps\n  extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeScaleStyle> {\n  /**\n   * If `true`, the element will transition back to exit state.\n   *\n   * @default true\n   */\n  reverse?: boolean\n  /**\n   * The initial scale of the element.\n   *\n   * @default 0.95\n   */\n  scale?: number\n}\n\nconst {\n  PropsContext: FadeScalePropsContext,\n  usePropsContext: useFadeScalePropsContext,\n  withContext,\n} = createComponent<FadeScaleProps, FadeScaleStyle>(\n  \"fade-scale\",\n  fadeScaleStyle,\n)\n\nexport { FadeScalePropsContext, useFadeScalePropsContext }\n\n/**\n * `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.\n *\n * @see https://yamada-ui.com/docs/components/fade-scale\n */\nexport const FadeScale = withContext<\"div\", FadeScaleProps>(\n  ({\n    delay,\n    duration,\n    open: openProp,\n    reverse = true,\n    scale = 0.95,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp && unmountOnExit : true\n\n    const custom = useMemo(\n      () => ({\n        delay,\n        duration,\n        reverse,\n        scale,\n        transition,\n        transitionEnd,\n      }),\n      [delay, duration, reverse, scale, transition, transitionEnd],\n    )\n\n    return (\n      <AnimatePresence custom={custom}>\n        {open ? (\n          <motion.div\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial=\"exit\"\n            variants={fadeScaleVariants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,OAAO;EACP,YAAY,iBAAiB,MAAM,YAAY,KAAK,EAAE,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,SACA,OACA,YACA,kBACE,CAAC,OAAO;EACV,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,EAAE,OAAO,QAAQ;EACnE,GAAI,UACA;GAAE;GAAO,eAAe,eAAe;EAAK,IAC5C,EAAE,eAAe;GAAE;GAAO,GAAG,eAAe;EAAK,EAAE;EACvD,GAAG;CACL;AACF;AAkBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,aACtB,EACC,OACA,UACA,MAAM,UACN,UAAU,MACV,QAAQ,KACR,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAS;EAAO;EAAY;CAAa,CAC7D;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,EAAE"}

package/dist/esm/components/fade-scale/fade-scale.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-scale.style.js","names":[],"sources":["../../../../src/components/fade-scale/fade-scale.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const fadeScaleStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type FadeScaleStyle = typeof fadeScaleStyle\n"],"mappings":";;AAEA,MAAa,iBAAiB,qBAAqB,EACjD,MAAM,EACJ,GAAG,QACJ,EACF,CAAC"}
+{"version":3,"file":"fade-scale.style.js","names":[],"sources":["../../../../src/components/fade-scale/fade-scale.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const fadeScaleStyle = defineComponentStyle({\n  base: {\n    w: \"full\",\n  },\n})\n\nexport type FadeScaleStyle = typeof fadeScaleStyle\n"],"mappings":";;AAEA,MAAa,iBAAiB,qBAAqB,EACjD,MAAM,EACJ,GAAG,OACL,EACF,CAAC"}