@yamada-ui/react 2.2.5-dev-20260727071034 → 2.2.5-dev-20260727072934

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/components/popover/popover.cjs +8 -5
  2. package/dist/cjs/components/popover/popover.cjs.map +1 -1
  3. package/dist/esm/components/popover/popover.js +8 -5
  4. package/dist/esm/components/popover/popover.js.map +1 -1
  5. package/dist/types/components/carousel/carousel.style.d.ts +2 -2
  6. package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
  7. package/dist/types/components/menu/menu.style.d.ts +2 -2
  8. package/dist/types/components/number-input/number-input.style.d.ts +1 -1
  9. package/dist/types/components/popover/popover.d.ts +5 -0
  10. package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
  11. package/dist/types/components/steps/steps.style.d.ts +1 -1
  12. package/dist/types/components/timeline/timeline.d.ts +1 -1
  13. package/dist/types/components/timeline/timeline.style.d.ts +1 -1
  14. package/dist/types/components/tree/tree.style.d.ts +1 -1
  15. package/package.json +1 -1
package/dist/cjs/components/popover/popover.cjs CHANGED
@@ -157,7 +157,7 @@ const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
157
157
  const { getPositionerProps } = useComponentContext();
158
158
  return getPositionerProps(props);
159
159
  });
160
- const PopoverContent = withContext(({ portalProps, ...rest }) => {
160
+ const PopoverContent = withContext(({ portalProps, positionerProps, ...rest }) => {
161
161
  const { animationScheme, duration, open, getContentProps } = useComponentContext();
162
162
  const popupAnimationProps = usePopupAnimationProps({
163
163
  animationScheme,
@@ -165,10 +165,13 @@ const PopoverContent = withContext(({ portalProps, ...rest }) => {
165
165
  });
166
166
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
167
167
  ...portalProps,
168
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
169
- ...popupAnimationProps,
170
- ...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest)))
171
- }) })
168
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPositioner, {
169
+ ...positionerProps,
170
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
171
+ ...popupAnimationProps,
172
+ ...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest)))
173
+ })
174
+ })
172
175
  }) : null });
173
176
  }, "content")();
174
177
  const PopoverHeader = withContext("div", "header")(void 0, (props) => {
package/dist/cjs/components/popover/popover.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n StyleValue,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n /**\n * The animation of the element.\n *\n * @default 'scale'\n */\n animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n /**\n * The animation duration.\n *\n * @default 0.1\n */\n duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n const animationScheme = useValue(props.animationScheme ?? \"scale\")\n const duration = useValue(props.duration ?? 0.1)\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\nexport interface UsePopoverStyleProps {\n /**\n * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n *\n * @default true\n */\n flip?: StyleValue<UsePopoverProps[\"flip\"]>\n /**\n * The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n *\n * @default 8\n */\n gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n /**\n * If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n *\n * @default false\n */\n matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end'\n */\n placement?: StyleValue<UsePopoverProps[\"placement\"]>\n /**\n * The CSS positioning strategy to use.\n *\n * @default 'absolute'\n */\n strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n const placement = useValue(props.placement)\n const gutter = useValue(props.gutter)\n const matchWidth = useValue(props.matchWidth)\n const strategy = useValue(props.strategy)\n const flip = useValue(props.flip)\n\n return useMemo(\n () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n [flip, gutter, matchWidth, placement, strategy],\n )\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n | \"getAnchorProps\"\n | \"getBodyProps\"\n | \"getCloseTriggerProps\"\n | \"getContentProps\"\n | \"getFooterProps\"\n | \"getHeaderProps\"\n | \"getPositionerProps\"\n | \"getTriggerProps\"\n | \"open\"\n >,\n UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends\n Merge<UsePopoverProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<PopoverStyle> {\n /**\n * The children of the popover.\n */\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const styleProps = usePopoverStyleProps(props)\n const [styleContext, { animationScheme, children, duration, ...rest }] =\n useRootComponentProps({ ...props, ...styleProps })\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /**\n * Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner>\n <motion.div\n {...popupAnimationProps}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return getFooterProps(props)\n})\n"],"mappings":"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"}
1
+ {"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n StyleValue,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n /**\n * The animation of the element.\n *\n * @default 'scale'\n */\n animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n /**\n * The animation duration.\n *\n * @default 0.1\n */\n duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n const animationScheme = useValue(props.animationScheme ?? \"scale\")\n const duration = useValue(props.duration ?? 0.1)\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\nexport interface UsePopoverStyleProps {\n /**\n * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n *\n * @default true\n */\n flip?: StyleValue<UsePopoverProps[\"flip\"]>\n /**\n * The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n *\n * @default 8\n */\n gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n /**\n * If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n *\n * @default false\n */\n matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end'\n */\n placement?: StyleValue<UsePopoverProps[\"placement\"]>\n /**\n * The CSS positioning strategy to use.\n *\n * @default 'absolute'\n */\n strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n const placement = useValue(props.placement)\n const gutter = useValue(props.gutter)\n const matchWidth = useValue(props.matchWidth)\n const strategy = useValue(props.strategy)\n const flip = useValue(props.flip)\n\n return useMemo(\n () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n [flip, gutter, matchWidth, placement, strategy],\n )\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n | \"getAnchorProps\"\n | \"getBodyProps\"\n | \"getCloseTriggerProps\"\n | \"getContentProps\"\n | \"getFooterProps\"\n | \"getHeaderProps\"\n | \"getPositionerProps\"\n | \"getTriggerProps\"\n | \"open\"\n >,\n UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends\n Merge<UsePopoverProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<PopoverStyle> {\n /**\n * The children of the popover.\n */\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const styleProps = usePopoverStyleProps(props)\n const [styleContext, { animationScheme, children, duration, ...rest }] =\n useRootComponentProps({ ...props, ...styleProps })\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /**\n * Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for positioner component.\n */\n positionerProps?: Omit<PopoverPositionerProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, positionerProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner {...positionerProps}>\n <motion.div\n {...popupAnimationProps}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\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/popover/popover.js CHANGED
@@ -157,7 +157,7 @@ const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
157
157
  const { getPositionerProps } = useComponentContext();
158
158
  return getPositionerProps(props);
159
159
  });
160
- const PopoverContent = withContext(({ portalProps, ...rest }) => {
160
+ const PopoverContent = withContext(({ portalProps, positionerProps, ...rest }) => {
161
161
  const { animationScheme, duration, open, getContentProps } = useComponentContext();
162
162
  const popupAnimationProps = usePopupAnimationProps({
163
163
  animationScheme,
@@ -165,10 +165,13 @@ const PopoverContent = withContext(({ portalProps, ...rest }) => {
165
165
  });
166
166
  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal, {
167
167
  ...portalProps,
168
- children: /* @__PURE__ */ jsx(PopoverPositioner, { children: /* @__PURE__ */ jsx(motion$1.div, {
169
- ...popupAnimationProps,
170
- ...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest)))
171
- }) })
168
+ children: /* @__PURE__ */ jsx(PopoverPositioner, {
169
+ ...positionerProps,
170
+ children: /* @__PURE__ */ jsx(motion$1.div, {
171
+ ...popupAnimationProps,
172
+ ...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest)))
173
+ })
174
+ })
172
175
  }) : null });
173
176
  }, "content")();
174
177
  const PopoverHeader = withContext("div", "header")(void 0, (props) => {
package/dist/esm/components/popover/popover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","names":["motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n StyleValue,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n /**\n * The animation of the element.\n *\n * @default 'scale'\n */\n animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n /**\n * The animation duration.\n *\n * @default 0.1\n */\n duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n const animationScheme = useValue(props.animationScheme ?? \"scale\")\n const duration = useValue(props.duration ?? 0.1)\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\nexport interface UsePopoverStyleProps {\n /**\n * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n *\n * @default true\n */\n flip?: StyleValue<UsePopoverProps[\"flip\"]>\n /**\n * The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n *\n * @default 8\n */\n gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n /**\n * If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n *\n * @default false\n */\n matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end'\n */\n placement?: StyleValue<UsePopoverProps[\"placement\"]>\n /**\n * The CSS positioning strategy to use.\n *\n * @default 'absolute'\n */\n strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n const placement = useValue(props.placement)\n const gutter = useValue(props.gutter)\n const matchWidth = useValue(props.matchWidth)\n const strategy = useValue(props.strategy)\n const flip = useValue(props.flip)\n\n return useMemo(\n () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n [flip, gutter, matchWidth, placement, strategy],\n )\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n | \"getAnchorProps\"\n | \"getBodyProps\"\n | \"getCloseTriggerProps\"\n | \"getContentProps\"\n | \"getFooterProps\"\n | \"getHeaderProps\"\n | \"getPositionerProps\"\n | \"getTriggerProps\"\n | \"open\"\n >,\n UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends\n Merge<UsePopoverProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<PopoverStyle> {\n /**\n * The children of the popover.\n */\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const styleProps = usePopoverStyleProps(props)\n const [styleContext, { animationScheme, children, duration, ...rest }] =\n useRootComponentProps({ ...props, ...styleProps })\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /**\n * Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner>\n <motion.div\n {...popupAnimationProps}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return getFooterProps(props)\n})\n"],"mappings":"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"}
1
+ {"version":3,"file":"popover.js","names":["motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n StyleValue,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n /**\n * The animation of the element.\n *\n * @default 'scale'\n */\n animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n /**\n * The animation duration.\n *\n * @default 0.1\n */\n duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n const animationScheme = useValue(props.animationScheme ?? \"scale\")\n const duration = useValue(props.duration ?? 0.1)\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\nexport interface UsePopoverStyleProps {\n /**\n * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n *\n * @default true\n */\n flip?: StyleValue<UsePopoverProps[\"flip\"]>\n /**\n * The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n *\n * @default 8\n */\n gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n /**\n * If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n *\n * @default false\n */\n matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end'\n */\n placement?: StyleValue<UsePopoverProps[\"placement\"]>\n /**\n * The CSS positioning strategy to use.\n *\n * @default 'absolute'\n */\n strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n const placement = useValue(props.placement)\n const gutter = useValue(props.gutter)\n const matchWidth = useValue(props.matchWidth)\n const strategy = useValue(props.strategy)\n const flip = useValue(props.flip)\n\n return useMemo(\n () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n [flip, gutter, matchWidth, placement, strategy],\n )\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n | \"getAnchorProps\"\n | \"getBodyProps\"\n | \"getCloseTriggerProps\"\n | \"getContentProps\"\n | \"getFooterProps\"\n | \"getHeaderProps\"\n | \"getPositionerProps\"\n | \"getTriggerProps\"\n | \"open\"\n >,\n UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends\n Merge<UsePopoverProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<PopoverStyle> {\n /**\n * The children of the popover.\n */\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const styleProps = usePopoverStyleProps(props)\n const [styleContext, { animationScheme, children, duration, ...rest }] =\n useRootComponentProps({ ...props, ...styleProps })\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /**\n * Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for positioner component.\n */\n positionerProps?: Omit<PopoverPositionerProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, positionerProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner {...positionerProps}>\n <motion.div\n {...popupAnimationProps}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return getFooterProps(props)\n})\n"],"mappings":"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"}
package/dist/types/components/carousel/carousel.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
  //#region src/components/carousel/carousel.style.d.ts
5
- declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>, {
5
+ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>, {
6
6
  sm: {
7
7
  root: {
8
8
  h: "sm";
@@ -18,7 +18,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "indi
18
18
  h: "lg";
19
19
  };
20
20
  };
21
- }, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>>;
21
+ }, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>>;
22
22
  type CarouselStyle = typeof carouselStyle;
23
23
  //#endregion
24
24
  export { CarouselStyle, carouselStyle };
package/dist/types/components/chart/polar-chart.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
  //#region src/components/chart/polar-chart.style.d.ts
5
- declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
5
+ declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
6
6
  type PolarChartStyle = typeof polarChartStyle;
7
7
  //#endregion
8
8
  export { PolarChartStyle, polarChartStyle };
package/dist/types/components/menu/menu.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
  //#region src/components/menu/menu.style.d.ts
5
- declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
5
+ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
6
6
  sm: {
7
7
  command: {
8
8
  fontSize: "2xs";
@@ -87,7 +87,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
87
87
  px: "2";
88
88
  };
89
89
  };
90
- }, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
90
+ }, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
91
91
  type MenuStyle = typeof menuStyle;
92
92
  //#endregion
93
93
  export { MenuStyle, menuStyle };
package/dist/types/components/number-input/number-input.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
  //#region src/components/number-input/number-input.style.d.ts
5
- declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "control" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "control" | "decrement" | "increment">>, {
5
+ declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "decrement" | "increment" | "field" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "decrement" | "increment" | "field" | "control">>, {
6
6
  xs: {
7
7
  control: {
8
8
  boxSize: "calc({--height} - {spaces.2})";
package/dist/types/components/popover/popover.d.ts CHANGED
@@ -91,11 +91,16 @@ interface PopoverCloseTriggerProps extends HTMLStyledProps<"button"> {}
91
91
  declare const PopoverCloseTrigger: Component<"button", PopoverCloseTriggerProps>;
92
92
  interface PopoverAnchorProps extends HTMLStyledProps {}
93
93
  declare const PopoverAnchor: Component<"div", PopoverAnchorProps>;
94
+ interface PopoverPositionerProps extends HTMLStyledProps {}
94
95
  interface PopoverContentProps extends Omit<HTMLMotionProps, "children">, PropsWithChildren {
95
96
  /**
96
97
  * Props for portal component.
97
98
  */
98
99
  portalProps?: Omit<PortalProps, "children">;
100
+ /**
101
+ * Props for positioner component.
102
+ */
103
+ positionerProps?: Omit<PopoverPositionerProps, "children">;
99
104
  }
100
105
  declare const PopoverContent: Component<"div", PopoverContentProps>;
101
106
  interface PopoverHeaderProps extends HTMLStyledProps {}
package/dist/types/components/segmented-control/segmented-control.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
  //#region src/components/segmented-control/segmented-control.style.d.ts
5
- declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
5
+ declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indicator", {
6
6
  /**
7
7
  * If `true`, the segmented control will be full rounded.
8
8
  *
@@ -114,7 +114,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "
114
114
  };
115
115
  };
116
116
  };
117
- }, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
117
+ }, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
118
118
  type SegmentedControlStyle = typeof segmentedControlStyle;
119
119
  //#endregion
120
120
  export { SegmentedControlStyle, segmentedControlStyle };
package/dist/types/components/steps/steps.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import "../../index.js";
3
3
  //#region src/components/steps/steps.style.d.ts
4
- declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "indicator" | "item" | "description", {
4
+ declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "indicator" | "description", {
5
5
  /**
6
6
  * The orientation of the steps.
7
7
  *
package/dist/types/components/timeline/timeline.d.ts CHANGED
@@ -62,7 +62,7 @@ declare const TimelinePropsContext: import("react").Context<Partial<TimelineRoot
62
62
  *
63
63
  * @see https://yamada-ui.com/docs/components/timeline
64
64
  */
65
- declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
65
+ declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
66
66
  align: {
67
67
  center: {
68
68
  content: {
package/dist/types/components/timeline/timeline.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import "../../index.js";
3
3
  //#region src/components/timeline/timeline.style.d.ts
4
- declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
4
+ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
5
5
  /**
6
6
  * The alignment of the timeline.
7
7
  *
package/dist/types/components/tree/tree.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentSlotStyle } from "../../core/system/index.types.js";
2
2
  import "../../index.js";
3
3
  //#region src/components/tree/tree.style.d.ts
4
- declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "indicator" | "item", {
4
+ declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
5
5
  /**
6
6
  * The shape of the component
7
7
  *
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@yamada-ui/react",
3
3
  "type": "module",
4
- "version": "2.2.5-dev-20260727071034",
4
+ "version": "2.2.5-dev-20260727072934",
5
5
  "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
6
6
  "keywords": [
7
7
  "yamada",