@yamada-ui/react 2.3.0-next-20261009073533 → 2.3.1-dev-20261030022105

package/dist/cjs/components/accordion/accordion.cjs

@@ -121,11 +121,12 @@ const AccordionIcon = withContext(({ children = /* @__PURE__ */ (0, react_jsx_ru
 	const { iconHidden } = useComponentContext();
 	const { getIconProps } = require_use_accordion.useAccordionItemContext();
 	if (iconHidden) return null;
-	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, getIconProps({
+	const child = require_children.getResolvedChild(children);
+	if ((0, react.isValidElement)(child)) return (0, react.cloneElement)(child, getIconProps({
 		...rest,
-		...children.props
+		...child.props
 	}));
-	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+	return react.Children.count(child) > 1 ? react.Children.only(null) : null;
 }, "icon")();
 const AccordionPanel = withContext(({ animationOpacity, children, delay, duration, endingHeight, startingHeight, transition, transitionEnd, unmountOnExit, ...rest }) => {
 	const { open, getPanelProps } = require_use_accordion.useAccordionItemContext();

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","useMemo","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","isValidElement","cloneElement","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, isString, runIfFn, useSplitChildren } from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [focusedIndex, index, multiple, setFocusedIndex, setIndex, toggle],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(\n        children,\n        getIconProps({\n          ...rest,\n          ...children.props,\n        }),\n      )\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC,EAClC,MAAM,uBACR,CAAC;AAEH,MAAM,EACJ,kBACA,cAAc,uBACd,qBACA,iBAAiB,0BACjB,aACA,iBACEC,yBAAAA,oBACF,aACAC,wBAAAA,cACF;;;;;;AASA,MAAa,gBAAgB,cAC1B,EAAE,UAAU,MAAM,YAAY,OAAO,GAAG,YAAY;CACnD,MAAM,EACJ,aACA,cACA,OACA,UACA,iBACA,UACA,QACA,iBACEC,sBAAAA,aAAa,KAAK;CACtB,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,OAAO,KAAK,OAAO,UACxB,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;GAAkC;GAAO,GAAI;EAAQ,GAAjC,KAAiC,CACtD;CACH,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,WAAA,GAAUA,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAc;EAAO;EAAU;EAAiB;EAAU;CAAM,CACnE;CACA,MAAM,oBAAA,GAAmBA,MAAAA,QAAAA,QAChB;EAAE;EAAM;CAAW,IAC1B,CAAC,MAAM,UAAU,CACnB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,6BAAD;EAA6B,OAAO;EAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD;GAAkB,OAAO;GACvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;IAAkB,OAAO;IACvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;KAAY,GAAI,aAAa;KAAI,UAAA;IAA6B,CAAA;GAC9C,CAAA;EACF,CAAA;CACS,CAAA;AAEjC,GACA,MACF,CAAC,CAAC;AAoBF,MAAa,gBAAgB,aAC1B,EAAE,QAAQ,UAAU,MAAM,GAAG,WAAW;CACvC,MAAM,EACJ,UACA,MACA,gBACA,cACA,cACA,kBACEC,sBAAAA,iBAAiB,IAAI;CACzB,MAAM,oBAAA,GAAmBJ,MAAAA,QAAAA,QAAAA,GAAAA,oBAAAA,cACjB,QAAA,CAAQ,UAAU;EAAE;EAAU,UAAU;CAAK,CAAC,GACpD;EAAC;EAAU;EAAU;CAAI,CAC3B;CACA,MAAM,CAAC,iBAAiB,uBAAuB,wBAC7CK,iBAAAA,iBAAiB,kBAAkB,iBAAiB,cAAc;CACpE,MAAM,WAAA,GAAUL,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAU;EAAgB;EAAe;EAAc;EAAM;CAAI,CACpE;CACA,MAAM,oBAAA,GAAmBA,MAAAA,QAAAA,QAAe,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;CAEzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACM,sBAAAA,sBAAD;EAAsB,OAAO;EAC3B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACH,gBAAAA,OAAO,KAAR;IAAY,GAAI,aAAa;IAA7B,UAAA,CACG,yBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD,EAAA,WAAA,GAAA,oBAAA,cACG,QAAA,CAAQ,QAAQ;KAAE;KAAU,UAAU;IAAK,CAAC,EAC9B,CAAA,GAElB,wBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAA,UAAiB,gBAAgC,CAAA,CAEzC;;EACQ,CAAA;CACF,CAAA;AAE1B,GACA,MACF,CAAC,CAAC;AAaF,MAAa,kBAAkB,aAC5B,EAAE,UAAU,MAAM,YAAY,gBAAgB,GAAG,WAAW;CAC3D,MAAM,EAAE,MAAM,aAAa,oBAAoB;CAC/C,MAAM,EAAE,MAAM,aAAa,wBAAwB;CACnD,MAAM,EAAE,UAAU,MAAM,mBAAmBI,sBAAAA,wBAAwB;CACnE,MAAM,QAAQ;EAAE;EAAU,UAAU;CAAK;CAEzC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACJ,gBAAAA,OAAO,IAAR;EAAW,GAAI;EACb,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACA,gBAAAA,OAAO,QAAR;GAAe,GAAI,eAAe,IAAI;GAAtC,UAAA,CACG,UAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,EAAA,WAAA,GAAA,oBAAA,cACG,QAAA,CAAQ,YAAY,KAAK,MAAA,GAAA,oBAAA,cACxB,QAAA,CAAQ,UAAU,KAAK,MAAA,GAAA,oBAAA,cACvB,QAAA,CAAQ,UAAU,KAAK,EACZ,CAAA,CACF;;CACN,CAAA;AAEf,GACA,QACF,CAAC,CAAC;AAIF,MAAa,gBAAgB,aAC1B,EAAE,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACK,0BAAAA,iBAAD,CAAkB,CAAA,GAAG,GAAG,WAAW;CAC/C,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,iBAAiBD,sBAAAA,wBAAwB;CAEjD,IAAI,YAAY,OAAO;CAEvB,KAAA,GAAIE,MAAAA,eAAAA,CAAiC,QAAQ,GAC3C,QAAA,GAAOC,MAAAA,aAAAA,CACL,UACA,aAAa;EACX,GAAG;EACH,GAAG,SAAS;CACd,CAAC,CACH;CAEF,OAAOC,MAAAA,SAAS,MAAM,QAAQ,IAAI,IAAIA,MAAAA,SAAS,KAAK,IAAI,IAAI;AAC9D,GACA,MACF,CAAC,CAAC;AAaF,MAAa,iBAAiB,aAC3B,EACC,kBACA,UACA,OACA,UACA,cACA,gBACA,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,kBAAkBJ,sBAAAA,wBAAwB;CAExD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,iBAAAA,UAAD;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACT,gBAAAA,OAAO,KAAR;GAAY,GAAI,cAAc,IAAI;GAC/B,WAAA,GAAA,oBAAA,cAAA,SAAA,CAAS,QAAQ,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,GAAR,EAAW,SAAmB,CAAA,IAAI;EAC9C,CAAA;CACJ,CAAA;AAEd,GACA,OACF,CAAC,CAAC"}
+{"version":3,"file":"accordion.cjs","names":["createContext","createSlotComponent","accordionStyle","useAccordion","useMemo","AccordionDescendantsContext","AccordionContext","styled","useAccordionItem","useSplitChildren","AccordionItemContext","useAccordionItemContext","ChevronDownIcon","getResolvedChild","isValidElement","cloneElement","Children","Collapse"],"sources":["../../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { AccordionStyle } from \"./accordion.style\"\nimport type { UseAccordionItemProps, UseAccordionProps } from \"./use-accordion\"\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  createContext,\n  getResolvedChild,\n  isString,\n  runIfFn,\n  useSplitChildren,\n} from \"../../utils\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronDownIcon } from \"../icon\"\nimport { accordionStyle } from \"./accordion.style\"\nimport {\n  AccordionContext,\n  AccordionDescendantsContext,\n  AccordionItemContext,\n  useAccordion,\n  useAccordionItem,\n  useAccordionItemContext,\n} from \"./use-accordion\"\n\ninterface AccordionCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport interface AccordionItem extends Omit<AccordionItemProps, \"index\"> {}\n\ninterface ComponentContext extends Pick<\n  AccordionRootProps,\n  \"icon\" | \"iconHidden\"\n> {}\n\nexport interface AccordionRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    ThemeProps<AccordionStyle>,\n    UseAccordionProps {\n  /**\n   * The accordion icon for all items to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * If `true`, hide the accordion icon for all items.\n   *\n   * @default false\n   */\n  iconHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: AccordionItem[]\n}\n\ninterface ItemComponentContext extends Pick<AccordionItemProps, \"icon\"> {}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({\n    name: \"ItemComponentContext\",\n  })\n\nconst {\n  ComponentContext,\n  PropsContext: AccordionPropsContext,\n  useComponentContext,\n  usePropsContext: useAccordionPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<AccordionRootProps, AccordionStyle, ComponentContext>(\n  \"accordion\",\n  accordionStyle,\n)\n\nexport { AccordionPropsContext, useAccordionPropsContext }\n\n/**\n * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.\n *\n * @see https://yamada-ui.com/docs/components/accordion\n */\nexport const AccordionRoot = withProvider<\"div\", AccordionRootProps>(\n  ({ children, icon, iconHidden, items, ...props }) => {\n    const {\n      descendants,\n      focusedIndex,\n      index,\n      multiple,\n      setFocusedIndex,\n      setIndex,\n      toggle,\n      getRootProps,\n    } = useAccordion(props)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items?.map((props, index) => (\n        <AccordionItem key={index} index={index} {...props} />\n      ))\n    }, [children, items])\n    const context = useMemo(\n      () => ({\n        focusedIndex,\n        index,\n        multiple,\n        setFocusedIndex,\n        setIndex,\n        toggle,\n      }),\n      [focusedIndex, index, multiple, setFocusedIndex, setIndex, toggle],\n    )\n    const componentContext = useMemo(\n      () => ({ icon, iconHidden }),\n      [icon, iconHidden],\n    )\n\n    return (\n      <AccordionDescendantsContext value={descendants}>\n        <AccordionContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n          </ComponentContext>\n        </AccordionContext>\n      </AccordionDescendantsContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface AccordionItemProps\n  extends\n    Omit<HTMLStyledProps, \"children\">,\n    Omit<UseAccordionItemProps, \"children\"> {\n  /**\n   * The accordion button to use.\n   */\n  button?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion children to use.\n   */\n  children?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n}\n\nexport const AccordionItem = withContext<\"div\", AccordionItemProps>(\n  ({ button, children, icon, ...rest }) => {\n    const {\n      disabled,\n      open,\n      getButtonProps,\n      getIconProps,\n      getItemProps,\n      getPanelProps,\n    } = useAccordionItem(rest)\n    const computedChildren = useMemo(\n      () => runIfFn(children, { disabled, expanded: open }),\n      [children, disabled, open],\n    )\n    const [omittedChildren, customAccordionButton, customAccordionPanel] =\n      useSplitChildren(computedChildren, AccordionButton, AccordionPanel)\n    const context = useMemo(\n      () => ({\n        disabled,\n        icon,\n        open,\n        getButtonProps,\n        getIconProps,\n        getPanelProps,\n      }),\n      [disabled, getButtonProps, getPanelProps, getIconProps, icon, open],\n    )\n    const componentContext = useMemo(() => ({ icon }), [icon])\n\n    return (\n      <AccordionItemContext value={context}>\n        <ItemComponentContext value={componentContext}>\n          <styled.div {...getItemProps()}>\n            {customAccordionButton ?? (\n              <AccordionButton>\n                {runIfFn(button, { disabled, expanded: open })}\n              </AccordionButton>\n            )}\n            {customAccordionPanel ?? (\n              <AccordionPanel>{omittedChildren}</AccordionPanel>\n            )}\n          </styled.div>\n        </ItemComponentContext>\n      </AccordionItemContext>\n    )\n  },\n  \"item\",\n)()\n\nexport interface AccordionButtonProps extends HTMLStyledProps<\"button\"> {\n  /**\n   * The accordion icon to use.\n   */\n  icon?: ReactNodeOrFunction<AccordionCallBackProps>\n  /**\n   * Props the container element.\n   */\n  containerProps?: HTMLStyledProps\n}\n\nexport const AccordionButton = withContext<\"button\", AccordionButtonProps>(\n  ({ children, icon: customIcon, containerProps, ...rest }) => {\n    const { icon: rootIcon } = useComponentContext()\n    const { icon: itemIcon } = useItemComponentContext()\n    const { disabled, open, getButtonProps } = useAccordionItemContext()\n    const props = { disabled, expanded: open }\n\n    return (\n      <styled.h3 {...containerProps}>\n        <styled.button {...getButtonProps(rest)}>\n          {children}\n\n          <AccordionIcon>\n            {runIfFn(customIcon, props) ??\n              runIfFn(itemIcon, props) ??\n              runIfFn(rootIcon, props)}\n          </AccordionIcon>\n        </styled.button>\n      </styled.h3>\n    )\n  },\n  \"button\",\n)()\n\ninterface AccordionIconProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const AccordionIcon = withContext<\"svg\", AccordionIconProps>(\n  ({ children = <ChevronDownIcon />, ...rest }) => {\n    const { iconHidden } = useComponentContext()\n    const { getIconProps } = useAccordionItemContext()\n\n    if (iconHidden) return null\n\n    const child = getResolvedChild(children)\n\n    if (isValidElement<HTMLProps<\"svg\">>(child))\n      return cloneElement(child, getIconProps({ ...rest, ...child.props }))\n\n    return Children.count(child) > 1 ? Children.only(null) : null\n  },\n  \"icon\",\n)()\n\nexport interface AccordionPanelProps\n  extends\n    Omit<HTMLStyledProps, \"transition\">,\n    Pick<\n      CollapseProps,\n      | \"animationOpacity\"\n      | \"endingHeight\"\n      | \"startingHeight\"\n      | keyof WithTransitionProps\n    > {}\n\nexport const AccordionPanel = withContext<\"div\", AccordionPanelProps>(\n  ({\n    animationOpacity,\n    children,\n    delay,\n    duration,\n    endingHeight,\n    startingHeight,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const { open, getPanelProps } = useAccordionItemContext()\n\n    return (\n      <Collapse\n        {...{\n          animationOpacity,\n          delay,\n          duration,\n          endingHeight,\n          open,\n          startingHeight,\n          transition,\n          transitionEnd,\n          unmountOnExit,\n        }}\n      >\n        <styled.div {...getPanelProps(rest)}>\n          {isString(children) ? <styled.p>{children}</styled.p> : children}\n        </styled.div>\n      </Collapse>\n    )\n  },\n  \"panel\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/aspect-ratio/aspect-ratio.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_aspect_ratio_style = require("./aspect-ratio.style.cjs");
@@ -11,10 +12,9 @@ const { PropsContext: AspectRatioPropsContext, usePropsContext: useAspectRatioPr
 * @see https://yamada-ui.com/docs/components/aspect-ratio
 */
 const AspectRatio = withContext("div")(void 0, ({ children, ratio = 4 / 3, ...rest }) => {
-	const child = react.Children.only(children);
 	return {
 		...rest,
-		children: child,
+		children: react.Children.only(require_children.getResolvedChild(children)),
 		_before: {
 			display: "block",
 			h: 0,

package/dist/cjs/components/aspect-ratio/aspect-ratio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.cjs","names":["createComponent","aspectRatioStyle","Children"],"sources":["../../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { AspectRatioStyle } from \"./aspect-ratio.style\"\nimport { Children } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { replaceObject } from \"../../utils\"\nimport { aspectRatioStyle } from \"./aspect-ratio.style\"\n\nexport interface AspectRatioProps extends HTMLStyledProps {\n  /**\n   * The aspect ratio of the Box.\n   *\n   * @default '4 / 3'\n   */\n  ratio?: StyleValue<number>\n}\n\nconst {\n  PropsContext: AspectRatioPropsContext,\n  usePropsContext: useAspectRatioPropsContext,\n  withContext,\n} = createComponent<AspectRatioProps, AspectRatioStyle>(\n  \"aspect-ratio\",\n  aspectRatioStyle,\n)\n\nexport { AspectRatioPropsContext, useAspectRatioPropsContext }\n\n/**\n * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.\n *\n * @see https://yamada-ui.com/docs/components/aspect-ratio\n */\nexport const AspectRatio = withContext(\"div\")(\n  undefined,\n  ({ children, ratio = 4 / 3, ...rest }) => {\n    const child = Children.only(children)\n\n    return {\n      ...rest,\n      children: child,\n      _before: {\n        display: \"block\",\n        h: 0,\n        pb: replaceObject(ratio, (r) => `${(1 / r) * 100}%`),\n      },\n    }\n  },\n)\n"],"mappings":";;;;;;AAkBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,gBACEA,yBAAAA,gBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,YAAY,KAAK,CAAC,CAC3C,KAAA,IACC,EAAE,UAAU,QAAQ,IAAI,GAAG,GAAG,WAAW;CACxC,MAAM,QAAQC,MAAAA,SAAS,KAAK,QAAQ;CAEpC,OAAO;EACL,GAAG;EACH,UAAU;EACV,SAAS;GACP,SAAS;GACT,GAAG;GACH,KAAA,GAAA,oBAAA,cAAI,cAAA,CAAc,QAAQ,MAAM,GAAI,IAAI,IAAK,IAAI,EAAE;EACrD;CACF;AACF,CACF"}
+{"version":3,"file":"aspect-ratio.cjs","names":["createComponent","aspectRatioStyle","Children","getResolvedChild"],"sources":["../../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, StyleValue } from \"../../core\"\nimport type { AspectRatioStyle } from \"./aspect-ratio.style\"\nimport { Children } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { getResolvedChild, replaceObject } from \"../../utils\"\nimport { aspectRatioStyle } from \"./aspect-ratio.style\"\n\nexport interface AspectRatioProps extends HTMLStyledProps {\n  /**\n   * The aspect ratio of the Box.\n   *\n   * @default '4 / 3'\n   */\n  ratio?: StyleValue<number>\n}\n\nconst {\n  PropsContext: AspectRatioPropsContext,\n  usePropsContext: useAspectRatioPropsContext,\n  withContext,\n} = createComponent<AspectRatioProps, AspectRatioStyle>(\n  \"aspect-ratio\",\n  aspectRatioStyle,\n)\n\nexport { AspectRatioPropsContext, useAspectRatioPropsContext }\n\n/**\n * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.\n *\n * @see https://yamada-ui.com/docs/components/aspect-ratio\n */\nexport const AspectRatio = withContext(\"div\")(\n  undefined,\n  ({ children, ratio = 4 / 3, ...rest }) => {\n    return {\n      ...rest,\n      children: Children.only(getResolvedChild(children)),\n      _before: {\n        display: \"block\",\n        h: 0,\n        pb: replaceObject(ratio, (r) => `${(1 / r) * 100}%`),\n      },\n    }\n  },\n)\n"],"mappings":";;;;;;;AAkBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,gBACEA,yBAAAA,gBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,YAAY,KAAK,CAAC,CAC3C,KAAA,IACC,EAAE,UAAU,QAAQ,IAAI,GAAG,GAAG,WAAW;CACxC,OAAO;EACL,GAAG;EACH,UAAUC,MAAAA,SAAS,KAAKC,iBAAAA,iBAAiB,QAAQ,CAAC;EAClD,SAAS;GACP,SAAS;GACT,GAAG;GACH,KAAA,GAAA,oBAAA,cAAI,cAAA,CAAc,QAAQ,MAAM,GAAI,IAAI,IAAK,IAAI,EAAE;EACrD;CACF;AACF,CACF"}

package/dist/cjs/components/blockquote/blockquote.style.cjs

@@ -2,7 +2,7 @@
 const blockquoteStyle = require("../../core/system/config.cjs").defineComponentSlotStyle({
 	base: {
 		caption: {
-			color: "muted",
+			color: "fg.muted",
 			fontSize: "sm"
 		},
 		cite: {},

package/dist/cjs/components/blockquote/blockquote.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"blockquote.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/blockquote/blockquote.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const blockquoteStyle = defineComponentSlotStyle({\n  base: {\n    caption: {\n      color: \"muted\",\n      fontSize: \"sm\",\n    },\n    cite: {},\n    content: {},\n    icon: {\n      fontSize: \"xl\",\n      left: \"0\",\n      position: \"absolute\",\n      top: \"0.5\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"sm\",\n      position: \"relative\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the blockquote.\n     *\n     * @default 'start'\n     */\n    justify: {\n      center: {\n        root: {\n          alignItems: \"center\",\n          textAlign: \"center\",\n        },\n      },\n      end: {\n        root: {\n          alignItems: \"end\",\n          textAlign: \"end\",\n        },\n      },\n      start: {\n        root: {\n          alignItems: \"start\",\n          textAlign: \"start\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    plain: {\n      icon: {\n        color: \"colorScheme.solid\",\n      },\n      root: {\n        _hasIcon: {\n          ps: \"lg\",\n        },\n      },\n    },\n    solid: {\n      icon: {\n        color: \"colorScheme.solid\",\n      },\n      root: {\n        borderStart: \"4px solid {colorScheme.solid}\",\n        px: \"md\",\n      },\n    },\n    subtle: {\n      icon: {\n        color: \"colorScheme.fg\",\n      },\n      root: {\n        borderStart: \"4px solid {colorScheme.muted}\",\n        px: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    variant: \"subtle\",\n    justify: \"start\",\n  },\n})\n\nexport type BlockquoteStyle = typeof blockquoteStyle\n"],"mappings":";AAEA,MAAa,wDAAkBA,CAAAA,CAAAA,yBAAyB;CACtD,MAAM;EACJ,SAAS;GACP,OAAO;GACP,UAAU;EACZ;EACA,MAAM,CAAC;EACP,SAAS,CAAC;EACV,MAAM;GACJ,UAAU;GACV,MAAM;GACN,UAAU;GACV,KAAK;EACP;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;EACZ;CACF;CAEA,OAAO;;;;;;AAML,SAAS;EACP,QAAQ,EACN,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;EACA,KAAK,EACH,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;EACA,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;CACF,EACF;CAEA,UAAU;EACR,OAAO;GACL,MAAM,EACJ,OAAO,oBACT;GACA,MAAM,EACJ,UAAU,EACR,IAAI,KACN,EACF;EACF;EACA,OAAO;GACL,MAAM,EACJ,OAAO,oBACT;GACA,MAAM;IACJ,aAAa;IACb,IAAI;GACN;EACF;EACA,QAAQ;GACN,MAAM,EACJ,OAAO,iBACT;GACA,MAAM;IACJ,aAAa;IACb,IAAI;GACN;EACF;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"blockquote.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/blockquote/blockquote.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const blockquoteStyle = defineComponentSlotStyle({\n  base: {\n    caption: {\n      color: \"fg.muted\",\n      fontSize: \"sm\",\n    },\n    cite: {},\n    content: {},\n    icon: {\n      fontSize: \"xl\",\n      left: \"0\",\n      position: \"absolute\",\n      top: \"0.5\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"sm\",\n      position: \"relative\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the blockquote.\n     *\n     * @default 'start'\n     */\n    justify: {\n      center: {\n        root: {\n          alignItems: \"center\",\n          textAlign: \"center\",\n        },\n      },\n      end: {\n        root: {\n          alignItems: \"end\",\n          textAlign: \"end\",\n        },\n      },\n      start: {\n        root: {\n          alignItems: \"start\",\n          textAlign: \"start\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    plain: {\n      icon: {\n        color: \"colorScheme.solid\",\n      },\n      root: {\n        _hasIcon: {\n          ps: \"lg\",\n        },\n      },\n    },\n    solid: {\n      icon: {\n        color: \"colorScheme.solid\",\n      },\n      root: {\n        borderStart: \"4px solid {colorScheme.solid}\",\n        px: \"md\",\n      },\n    },\n    subtle: {\n      icon: {\n        color: \"colorScheme.fg\",\n      },\n      root: {\n        borderStart: \"4px solid {colorScheme.muted}\",\n        px: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    variant: \"subtle\",\n    justify: \"start\",\n  },\n})\n\nexport type BlockquoteStyle = typeof blockquoteStyle\n"],"mappings":";AAEA,MAAa,wDAAkBA,CAAAA,CAAAA,yBAAyB;CACtD,MAAM;EACJ,SAAS;GACP,OAAO;GACP,UAAU;EACZ;EACA,MAAM,CAAC;EACP,SAAS,CAAC;EACV,MAAM;GACJ,UAAU;GACV,MAAM;GACN,UAAU;GACV,KAAK;EACP;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;EACZ;CACF;CAEA,OAAO;;;;;;AAML,SAAS;EACP,QAAQ,EACN,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;EACA,KAAK,EACH,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;EACA,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,WAAW;EACb,EACF;CACF,EACF;CAEA,UAAU;EACR,OAAO;GACL,MAAM,EACJ,OAAO,oBACT;GACA,MAAM,EACJ,UAAU,EACR,IAAI,KACN,EACF;EACF;EACA,OAAO;GACL,MAAM,EACJ,OAAO,oBACT;GACA,MAAM;IACJ,aAAa;IACb,IAAI;GACN;EACF;EACA,QAAQ;GACN,MAAM,EACJ,OAAO,iBACT;GACA,MAAM;IACJ,aAAa;IACb,IAAI;GACN;EACF;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}

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

@@ -5,8 +5,9 @@ const require_props = require("../../core/components/props.cjs");
 const require_i18n_provider = require("../../providers/i18n-provider/i18n-provider.cjs");
 let react = require("react");
 //#region src/components/breadcrumb/use-breadcrumb.tsx
-const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link, startBoundaries = 0, ...rest } = {}) => {
+const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link: linkProp, startBoundaries = 0, ...rest } = {}) => {
 	const validChildren = require_children.useValidChildren(children);
+	const [link] = require_children.useValidChildren(linkProp);
 	const length = validChildren.length || items.length;
 	const { t } = require_i18n_provider.useI18n("breadcrumb");
 	const hasBoundaries = startBoundaries + endBoundaries > 0 && length > startBoundaries + endBoundaries;

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

@@ -1 +1 @@
-{"version":3,"file":"use-breadcrumb.cjs","names":["useValidChildren","useI18n","useCallback","cloneElement","useMemo","mergeProps"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = useValidChildren(children)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => mergeProps({ \"aria-label\": t(\"Breadcrumb\") }, rest, props)(),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;AA0CA,MAAa,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,CAAC,GACT,MACA,kBAAkB,GAClB,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,gBAAgBA,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAMC,sBAAAA,QAAQ,YAAY;CAElC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,cAAA,GAAaC,MAAAA,YAAAA,EAChB,UAA4B;EAC3B,IAAI,CAAC,MAAM,OAAO,CAAC;EAEnB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,YAAA,GAC5BC,MAAAA,aAAAA,CAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAG;EAAK,CAAC,CACrE;CACF,GACA,CAAC,IAAI,CACP;CAEA,MAAM,kBAAA,GAAiBD,MAAAA,YAAAA,EACpB,UAA4B;EAC3B,IAAI,CAAC,UAAU,OAAO;EAEtB,QAAA,GAAA,oBAAA,cAAO,QAAA,CAAQ,UAAU,EAAE,MAAM,CAAC;CACpC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,cAAA,GAAaA,MAAAA,YAAAA,EAChB,UAA4B;EAC3B,MAAM,SAAS,MAAM;EAKrB,OAAO;GAJY,MAAM,MAAM,GAAG,eAIjB;GAHK,MAAM,MAAM,iBAAiB,SAAS,aAG5B;GAFd,MAAM,MAAM,SAAS,aAEI;EAAC;CAC9C,GACA,CAAC,iBAAiB,aAAa,CACjC;CAEA,MAAM,iBAAA,GAAgBE,MAAAA,QAAAA,OAAc;EAGlC,IAAI,CAFiB,CAAC,cAAc,QAGlC,OAAO;OACF,IAAI,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,KAAK;GAE/D,OAAO;IACL,GAAG,WAAW,UAAU;IACxB,eAAe,aAAa;IAC5B,GAAG,WAAW,SAAS;GACzB;EACF,OACE,OAAO,WAAW,KAAK;CAE3B,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAA,GAAkCF,MAAAA,YAAAA,EACrC,UAAUG,cAAAA,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,MAAM,KAAK,CAAC,CAAC,GACtE,CAAC,MAAM,CAAC,CACV;CAEA,MAAM,gBAAA,GAAiCH,MAAAA,YAAAA,EACpC,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CACH;CAEA,MAAM,gBAAA,GAA2DA,MAAAA,YAAAA,EAC9D,EAAE,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO;EACzC,MAAM,CAAC,cAAc,OAAO,KAAA;EAC5B,gBAAgB,cAAc,SAAS,KAAA;EACvC,GAAG;CACL,IACA,CAAC,CACH;CAWA,OAAO;EACL,UAAU;EACV,mBAAA,GAX0CA,MAAAA,YAAAA,EACzC,WAAW;GACV,cAAc,EAAE,UAAU;GAC1B,MAAM;GACN,GAAG;EACL,IACA,CAAC,CAAC,CAKa;EACf;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-breadcrumb.cjs","names":["useValidChildren","useI18n","useCallback","cloneElement","useMemo","mergeProps"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link: linkProp,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = useValidChildren(children)\n  const [link] = useValidChildren(linkProp)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => mergeProps({ \"aria-label\": t(\"Breadcrumb\") }, rest, props)(),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;AA0CA,MAAa,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,CAAC,GACT,MAAM,UACN,kBAAkB,GAClB,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,gBAAgBA,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,CAAC,QAAQA,iBAAAA,iBAAiB,QAAQ;CACxC,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAMC,sBAAAA,QAAQ,YAAY;CAElC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,cAAA,GAAaC,MAAAA,YAAAA,EAChB,UAA4B;EAC3B,IAAI,CAAC,MAAM,OAAO,CAAC;EAEnB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,YAAA,GAC5BC,MAAAA,aAAAA,CAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAG;EAAK,CAAC,CACrE;CACF,GACA,CAAC,IAAI,CACP;CAEA,MAAM,kBAAA,GAAiBD,MAAAA,YAAAA,EACpB,UAA4B;EAC3B,IAAI,CAAC,UAAU,OAAO;EAEtB,QAAA,GAAA,oBAAA,cAAO,QAAA,CAAQ,UAAU,EAAE,MAAM,CAAC;CACpC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,cAAA,GAAaA,MAAAA,YAAAA,EAChB,UAA4B;EAC3B,MAAM,SAAS,MAAM;EAKrB,OAAO;GAJY,MAAM,MAAM,GAAG,eAIjB;GAHK,MAAM,MAAM,iBAAiB,SAAS,aAG5B;GAFd,MAAM,MAAM,SAAS,aAEI;EAAC;CAC9C,GACA,CAAC,iBAAiB,aAAa,CACjC;CAEA,MAAM,iBAAA,GAAgBE,MAAAA,QAAAA,OAAc;EAGlC,IAAI,CAFiB,CAAC,cAAc,QAGlC,OAAO;OACF,IAAI,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,KAAK;GAE/D,OAAO;IACL,GAAG,WAAW,UAAU;IACxB,eAAe,aAAa;IAC5B,GAAG,WAAW,SAAS;GACzB;EACF,OACE,OAAO,WAAW,KAAK;CAE3B,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAA,GAAkCF,MAAAA,YAAAA,EACrC,UAAUG,cAAAA,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,MAAM,KAAK,CAAC,CAAC,GACtE,CAAC,MAAM,CAAC,CACV;CAEA,MAAM,gBAAA,GAAiCH,MAAAA,YAAAA,EACpC,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CACH;CAEA,MAAM,gBAAA,GAA2DA,MAAAA,YAAAA,EAC9D,EAAE,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO;EACzC,MAAM,CAAC,cAAc,OAAO,KAAA;EAC5B,gBAAgB,cAAc,SAAS,KAAA;EACvC,GAAG;CACL,IACA,CAAC,CACH;CAWA,OAAO;EACL,UAAU;EACV,mBAAA,GAX0CA,MAAAA,YAAAA,EACzC,WAAW;GACV,cAAc,EAAE,UAAU;GAC1B,MAAM;GACN,GAAG;EACL,IACA,CAAC,CAAC,CAKa;EACf;EACA;EACA;CACF;AACF"}

package/dist/cjs/components/bubble/bubble.cjs

@@ -0,0 +1,163 @@
+"use client";
+const require_children = require("../../utils/children.cjs");
+const require_factory = require("../../core/system/factory.cjs");
+const require_props = require("../../core/components/props.cjs");
+const require_create_component = require("../../core/components/create-component.cjs");
+const require_bubble_style = require("./bubble.style.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/bubble/bubble.tsx
+const { component, ComponentContext, PropsContext: BubblePropsContext, useComponentContext, usePropsContext: useBubblePropsContext, withContext, withProvider, useRootComponentProps } = require_create_component.createSlotComponent("bubble", require_bubble_style.bubbleStyle);
+/**
+* `Bubble` is a component that displays conversational content in a message bubble.
+*
+* @see https://yamada-ui.com/docs/components/bubble
+*/
+const BubbleRoot = component((props) => {
+	const [, { colorScheme, size, variant, children, items, contentProps, endGroupProps, endItemProps, groupProps, itemProps, reactionsProps, startGroupProps, startItemProps, ...rest }] = useRootComponentProps(props, "root", { transferProps: [
+		"variant",
+		"colorScheme",
+		"size"
+	] });
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return items?.map((props, index) => {
+			if ("children" in props) {
+				const { children, reactions, contentProps, reactionsProps, ...rest } = props;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleItem, {
+					...rest,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleContent, {
+						...contentProps,
+						children
+					}), reactions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleReactions, {
+						...reactionsProps,
+						children: reactions
+					}) : null]
+				}, index);
+			} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleGroup, { ...props }, index);
+		});
+	}, [children, items]);
+	const context = (0, react.useMemo)(() => ({
+		colorScheme,
+		size,
+		variant
+	}), [
+		colorScheme,
+		size,
+		variant
+	]);
+	const componentContext = (0, react.useMemo)(() => ({
+		contentProps,
+		endGroupProps,
+		endItemProps,
+		groupProps,
+		itemProps,
+		reactionsProps,
+		startGroupProps,
+		startItemProps
+	}), [
+		groupProps,
+		itemProps,
+		contentProps,
+		reactionsProps,
+		startItemProps,
+		endItemProps,
+		startGroupProps,
+		endGroupProps
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubblePropsContext, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+			value: componentContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+				...rest,
+				children: computedChildren
+			})
+		})
+	});
+}, "root")();
+const BubbleGroup = component((props) => {
+	const [, { colorScheme, size, variant, children, direction, items, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
+		"variant",
+		"colorScheme",
+		"size"
+	] });
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return items?.map(({ children, reactions, contentProps, reactionsProps, ...rest }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleItem, {
+			...rest,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleContent, {
+				...contentProps,
+				children
+			}), reactions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleReactions, {
+				...reactionsProps,
+				children: reactions
+			}) : null]
+		}, index));
+	}, [children, items]);
+	const context = (0, react.useMemo)(() => ({
+		colorScheme,
+		size,
+		variant,
+		direction
+	}), [
+		colorScheme,
+		size,
+		variant,
+		direction
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubblePropsContext, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+			...rest,
+			children: computedChildren
+		})
+	});
+}, "group")(({ direction = "start", ...rest }) => {
+	const { endGroupProps, groupProps, startGroupProps } = useComponentContext();
+	return require_props.mergeProps(groupProps, direction === "start" ? startGroupProps : endGroupProps, {
+		direction,
+		...rest
+	})();
+});
+const BubbleItem = withProvider(({ children, direction, contentProps, ...rest }) => {
+	const [content, customContent, reactions] = require_children.useSplitChildren(children, BubbleContent, BubbleReactions);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
+		"data-direction": direction,
+		...rest,
+		children: [customContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleContent, {
+			...contentProps,
+			children: content
+		}), reactions]
+	});
+}, "item")((props) => {
+	const contextProps = useBubblePropsContext();
+	const { endItemProps, itemProps, startItemProps } = useComponentContext();
+	const direction = props.direction ?? contextProps?.direction ?? "start";
+	return require_props.mergeProps(contextProps, itemProps, direction === "start" ? startItemProps : endItemProps, {
+		...props,
+		direction
+	})();
+});
+const BubbleContent = withContext("div", "content")(void 0, (props) => {
+	const { contentProps } = useComponentContext();
+	return require_props.mergeProps(contentProps, props)();
+});
+const BubbleReactions = withContext("div", "reactions")(void 0, (props) => {
+	const { reactionsProps } = useComponentContext();
+	const { placement = "end-end", ...rest } = require_props.mergeProps(reactionsProps, props)();
+	return {
+		"data-placement": placement,
+		...rest
+	};
+});
+//#endregion
+exports.BubbleContent = BubbleContent;
+exports.BubbleGroup = BubbleGroup;
+exports.BubbleItem = BubbleItem;
+exports.BubblePropsContext = BubblePropsContext;
+exports.BubbleReactions = BubbleReactions;
+exports.BubbleRoot = BubbleRoot;
+exports.useBubblePropsContext = useBubblePropsContext;
+
+//# sourceMappingURL=bubble.cjs.map

package/dist/cjs/components/bubble/bubble.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.cjs","names":["createSlotComponent","bubbleStyle","useMemo","styled","mergeProps","useSplitChildren"],"sources":["../../../../src/components/bubble/bubble.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  Direction,\n  HTMLStyledProps,\n  SimpleDirection,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { BubbleStyle } from \"./bubble.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { bubbleStyle } from \"./bubble.style\"\n\nexport interface BubbleItemWithContent extends Omit<\n  BubbleItemProps,\n  \"children\"\n> {\n  children: ReactNode\n  reactions?: ReactNode\n  reactionsProps?: Omit<BubbleReactionsProps, \"children\">\n}\n\nexport interface BubbleItemWithGroup\n  extends\n    Required<Pick<BubbleGroupProps, \"items\">>,\n    Omit<BubbleGroupProps, \"children\" | \"items\"> {}\n\nexport type BubbleItem =\n  | BubbleItemWithContent\n  | Omit<BubbleGroupProps, \"children\" | \"direction\">\n\ninterface ComponentContext extends Pick<\n  BubbleRootProps,\n  | \"contentProps\"\n  | \"endGroupProps\"\n  | \"endItemProps\"\n  | \"groupProps\"\n  | \"itemProps\"\n  | \"reactionsProps\"\n  | \"startGroupProps\"\n  | \"startItemProps\"\n> {}\n\nexport interface BubbleRootProps extends Merge<\n  HTMLStyledProps,\n  ThemeProps<BubbleStyle>\n> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: BubbleItem[]\n  /**\n   * The props for content component.\n   */\n  contentProps?: Omit<BubbleContentProps, \"children\">\n  /**\n   * The theme props for group component in end direction.\n   */\n  endGroupProps?: Omit<BubbleGroupProps, \"children\" | \"direction\" | \"items\">\n  /**\n   * The theme props for item component in end direction.\n   */\n  endItemProps?: Omit<BubbleItemProps, \"children\" | \"direction\">\n  /**\n   * The props for group component.\n   */\n  groupProps?: Omit<BubbleGroupProps, \"children\" | \"direction\" | \"items\">\n  /**\n   * The props for item component.\n   */\n  itemProps?: Omit<BubbleItemProps, \"children\" | \"direction\">\n  /**\n   * The props for reactions component.\n   */\n  reactionsProps?: Omit<BubbleReactionsProps, \"children\">\n  /**\n   * The theme props for group component in start direction.\n   */\n  startGroupProps?: Omit<BubbleGroupProps, \"children\" | \"direction\" | \"items\">\n  /**\n   * The theme props for item component in start direction.\n   */\n  startItemProps?: Omit<BubbleItemProps, \"children\" | \"direction\">\n}\n\nconst {\n  component,\n  ComponentContext,\n  PropsContext: BubblePropsContext,\n  useComponentContext,\n  usePropsContext: useBubblePropsContext,\n  withContext,\n  withProvider,\n  useRootComponentProps,\n} = createSlotComponent<BubbleItemProps, BubbleStyle, ComponentContext>(\n  \"bubble\",\n  bubbleStyle,\n)\n\nexport { BubblePropsContext, useBubblePropsContext }\n\n/**\n * `Bubble` is a component that displays conversational content in a message bubble.\n *\n * @see https://yamada-ui.com/docs/components/bubble\n */\nexport const BubbleRoot = component<\"div\", BubbleRootProps>((props) => {\n  const [\n    ,\n    {\n      colorScheme,\n      size,\n      variant,\n      children,\n      items,\n      contentProps,\n      endGroupProps,\n      endItemProps,\n      groupProps,\n      itemProps,\n      reactionsProps,\n      startGroupProps,\n      startItemProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props, \"root\", {\n    transferProps: [\"variant\", \"colorScheme\", \"size\"],\n  })\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items?.map((props, index) => {\n      if (\"children\" in props) {\n        const { children, reactions, contentProps, reactionsProps, ...rest } =\n          props\n\n        return (\n          <BubbleItem key={index} {...rest}>\n            <BubbleContent {...contentProps}>{children}</BubbleContent>\n            {reactions ? (\n              <BubbleReactions {...reactionsProps}>{reactions}</BubbleReactions>\n            ) : null}\n          </BubbleItem>\n        )\n      } else {\n        return <BubbleGroup key={index} {...props} />\n      }\n    })\n  }, [children, items])\n  const context = useMemo(\n    () => ({ colorScheme, size, variant }),\n    [colorScheme, size, variant],\n  )\n  const componentContext = useMemo(\n    () => ({\n      contentProps,\n      endGroupProps,\n      endItemProps,\n      groupProps,\n      itemProps,\n      reactionsProps,\n      startGroupProps,\n      startItemProps,\n    }),\n    [\n      groupProps,\n      itemProps,\n      contentProps,\n      reactionsProps,\n      startItemProps,\n      endItemProps,\n      startGroupProps,\n      endGroupProps,\n    ],\n  )\n\n  return (\n    <BubblePropsContext value={context}>\n      <ComponentContext value={componentContext}>\n        <styled.div {...rest}>{computedChildren}</styled.div>\n      </ComponentContext>\n    </BubblePropsContext>\n  )\n}, \"root\")()\n\nexport interface BubbleGroupProps\n  extends\n    Merge<HTMLStyledProps, Pick<BubbleItemProps, \"direction\">>,\n    ThemeProps<BubbleStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: BubbleItemWithContent[]\n}\n\nexport const BubbleGroup = component<\"div\", BubbleGroupProps>((props) => {\n  const [\n    ,\n    { colorScheme, size, variant, children, direction, items, ...rest },\n  ] = useRootComponentProps(props, \"group\", {\n    transferProps: [\"variant\", \"colorScheme\", \"size\"],\n  })\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return items?.map(\n      (\n        { children, reactions, contentProps, reactionsProps, ...rest },\n        index,\n      ) => (\n        <BubbleItem key={index} {...rest}>\n          <BubbleContent {...contentProps}>{children}</BubbleContent>\n          {reactions ? (\n            <BubbleReactions {...reactionsProps}>{reactions}</BubbleReactions>\n          ) : null}\n        </BubbleItem>\n      ),\n    )\n  }, [children, items])\n\n  const context = useMemo(\n    () => ({ colorScheme, size, variant, direction }),\n    [colorScheme, size, variant, direction],\n  )\n\n  return (\n    <BubblePropsContext value={context}>\n      <styled.div {...rest}>{computedChildren}</styled.div>\n    </BubblePropsContext>\n  )\n}, \"group\")(({ direction = \"start\", ...rest }) => {\n  const { endGroupProps, groupProps, startGroupProps } = useComponentContext()\n  const directionProps = direction === \"start\" ? startGroupProps : endGroupProps\n\n  return mergeProps(groupProps, directionProps, { direction, ...rest })()\n})\n\nexport interface BubbleItemProps\n  extends\n    Omit<HTMLStyledProps, \"direction\">,\n    Pick<BubbleRootProps, \"contentProps\">,\n    ThemeProps<BubbleStyle> {\n  /**\n   * The inline direction of the bubble.\n   *\n   * @default 'start'\n   */\n  direction?: SimpleDirection\n}\n\nexport const BubbleItem = withProvider<\"div\", BubbleItemProps>(\n  ({ children, direction, contentProps, ...rest }) => {\n    const [content, customContent, reactions] = useSplitChildren(\n      children,\n      BubbleContent,\n      BubbleReactions,\n    )\n\n    return (\n      <styled.div data-direction={direction} {...rest}>\n        {customContent ?? (\n          <BubbleContent {...contentProps}>{content}</BubbleContent>\n        )}\n\n        {reactions}\n      </styled.div>\n    )\n  },\n  \"item\",\n)((props) => {\n  const contextProps = useBubblePropsContext()\n  const { endItemProps, itemProps, startItemProps } = useComponentContext()\n  const direction = props.direction ?? contextProps?.direction ?? \"start\"\n  const directionProps = direction === \"start\" ? startItemProps : endItemProps\n\n  return mergeProps(contextProps, itemProps, directionProps, {\n    ...props,\n    direction,\n  })()\n})\n\nexport interface BubbleContentProps extends HTMLStyledProps {}\n\nexport const BubbleContent = withContext<\"div\", BubbleContentProps>(\n  \"div\",\n  \"content\",\n)(undefined, (props) => {\n  const { contentProps } = useComponentContext()\n\n  return mergeProps(contentProps, props)()\n})\n\nexport interface BubbleReactionsProps extends HTMLStyledProps {\n  /**\n   * The placement of the reactions.\n   *\n   * @default 'end-end'\n   */\n  placement?: Exclude<Direction, \"end\" | \"start\" | `center-${string}`>\n}\n\nexport const BubbleReactions = withContext<\"div\", BubbleReactionsProps>(\n  \"div\",\n  \"reactions\",\n)(undefined, (props) => {\n  const { reactionsProps } = useComponentContext()\n  const { placement = \"end-end\", ...rest } = mergeProps(reactionsProps, props)()\n\n  return { \"data-placement\": placement, ...rest }\n})\n"],"mappings":"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"}

package/dist/cjs/components/bubble/bubble.style.cjs

@@ -0,0 +1,143 @@
+//#region src/components/bubble/bubble.style.ts
+const bubbleStyle = require("../../core/system/config.cjs").defineComponentSlotStyle({
+	base: {
+		content: {
+			maxW: "full",
+			minW: "0",
+			overflowWrap: "anywhere",
+			py: "{space-y}",
+			rounded: "calc(0.5lh + {space-y} + 1px)",
+			textAlign: "start",
+			whiteSpace: "pre-wrap"
+		},
+		group: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "sm",
+			minW: "0",
+			w: "full"
+		},
+		item: {
+			display: "flex",
+			flexDirection: "column",
+			maxW: "4/5",
+			minW: "0",
+			position: "relative",
+			w: "fit-content",
+			_end: {
+				alignSelf: "flex-end",
+				me: "0",
+				ms: "auto"
+			},
+			_start: {
+				alignSelf: "flex-start",
+				me: "auto",
+				ms: "0"
+			}
+		},
+		reactions: {
+			"&[data-placement$=center]": {
+				insetInline: "0",
+				mx: "auto"
+			},
+			"&[data-placement$=end]": { insetInlineEnd: "3" },
+			"&[data-placement$=start]": { insetInlineStart: "3" },
+			"&[data-placement^=end]": {
+				insetBlockEnd: "-2",
+				translateY: "50%"
+			},
+			"&[data-placement^=start]": {
+				insetBlockStart: "-2",
+				translateY: "-50%"
+			},
+			alignItems: "center",
+			bg: "bg.panel",
+			borderColor: "bg",
+			display: "flex",
+			gap: "xs",
+			lineHeight: "normal",
+			position: "absolute",
+			px: "1.5",
+			py: "0.5",
+			rounded: "full",
+			w: "max-content",
+			zIndex: "1"
+		},
+		root: {
+			alignItems: "flex-start",
+			display: "flex",
+			flexDirection: "column",
+			gap: "xl",
+			minW: "0",
+			w: "full"
+		}
+	},
+	variants: {
+		ghost: {
+			content: {
+				bg: "transparent",
+				borderColor: "transparent",
+				rounded: "0"
+			},
+			item: {
+				maxW: "full",
+				w: "full"
+			}
+		},
+		outline: { content: { layerStyle: "outline" } },
+		panel: { content: { bg: "bg.panel" } },
+		solid: { content: { layerStyle: "solid" } },
+		subtle: { content: { layerStyle: "subtle" } },
+		surface: { content: { layerStyle: "surface" } }
+	},
+	sizes: {
+		sm: {
+			content: {
+				"--space-y": "spaces.2",
+				fontSize: "sm",
+				px: "3"
+			},
+			reactions: {
+				borderWidth: "3px",
+				fontSize: "xs"
+			}
+		},
+		md: {
+			content: {
+				"--space-y": "spaces.3",
+				fontSize: "md",
+				px: "4"
+			},
+			reactions: {
+				borderWidth: "5px",
+				fontSize: "sm"
+			}
+		},
+		lg: {
+			content: {
+				"--space-y": "spaces.4",
+				fontSize: "lg",
+				px: "5"
+			},
+			reactions: {
+				borderWidth: "5px",
+				fontSize: "md"
+			}
+		}
+	},
+	compounds: [{
+		css: { content: {
+			px: "0",
+			py: "0"
+		} },
+		variant: "ghost"
+	}],
+	defaultProps: {
+		size: "md",
+		variant: "panel"
+	}
+});
+//#endregion
+exports.bubbleStyle = bubbleStyle;
+
+//# sourceMappingURL=bubble.style.cjs.map

package/dist/cjs/components/bubble/bubble.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/bubble/bubble.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const bubbleStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      maxW: \"full\",\n      minW: \"0\",\n      overflowWrap: \"anywhere\",\n      py: \"{space-y}\",\n      rounded: \"calc(0.5lh + {space-y} + 1px)\",\n      textAlign: \"start\",\n      whiteSpace: \"pre-wrap\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"sm\",\n      minW: \"0\",\n      w: \"full\",\n    },\n    item: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      maxW: \"4/5\",\n      minW: \"0\",\n      position: \"relative\",\n      w: \"fit-content\",\n      _end: {\n        alignSelf: \"flex-end\",\n        me: \"0\",\n        ms: \"auto\",\n      },\n      _start: {\n        alignSelf: \"flex-start\",\n        me: \"auto\",\n        ms: \"0\",\n      },\n    },\n    reactions: {\n      \"&[data-placement$=center]\": {\n        insetInline: \"0\",\n        mx: \"auto\",\n      },\n      \"&[data-placement$=end]\": {\n        insetInlineEnd: \"3\",\n      },\n      \"&[data-placement$=start]\": {\n        insetInlineStart: \"3\",\n      },\n      \"&[data-placement^=end]\": {\n        insetBlockEnd: \"-2\",\n        translateY: \"50%\",\n      },\n      \"&[data-placement^=start]\": {\n        insetBlockStart: \"-2\",\n        translateY: \"-50%\",\n      },\n      alignItems: \"center\",\n      bg: \"bg.panel\",\n      borderColor: \"bg\",\n      display: \"flex\",\n      gap: \"xs\",\n      lineHeight: \"normal\",\n      position: \"absolute\",\n      px: \"1.5\",\n      py: \"0.5\",\n      rounded: \"full\",\n      w: \"max-content\",\n      zIndex: \"1\",\n    },\n    root: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xl\",\n      minW: \"0\",\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    ghost: {\n      content: {\n        bg: \"transparent\",\n        borderColor: \"transparent\",\n        rounded: \"0\",\n      },\n      item: { maxW: \"full\", w: \"full\" },\n    },\n    outline: { content: { layerStyle: \"outline\" } },\n    panel: { content: { bg: \"bg.panel\" } },\n    solid: { content: { layerStyle: \"solid\" } },\n    subtle: { content: { layerStyle: \"subtle\" } },\n    surface: { content: { layerStyle: \"surface\" } },\n  },\n\n  sizes: {\n    sm: {\n      content: { \"--space-y\": \"spaces.2\", fontSize: \"sm\", px: \"3\" },\n      reactions: { borderWidth: \"3px\", fontSize: \"xs\" },\n    },\n    md: {\n      content: { \"--space-y\": \"spaces.3\", fontSize: \"md\", px: \"4\" },\n      reactions: { borderWidth: \"5px\", fontSize: \"sm\" },\n    },\n    lg: {\n      content: { \"--space-y\": \"spaces.4\", fontSize: \"lg\", px: \"5\" },\n      reactions: { borderWidth: \"5px\", fontSize: \"md\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { content: { px: \"0\", py: \"0\" } },\n      variant: \"ghost\",\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"panel\",\n  },\n})\n\nexport type BubbleStyle = typeof bubbleStyle\n"],"mappings":";AAEA,MAAa,oDAAcA,CAAAA,CAAAA,yBAAyB;CAClD,MAAM;EACJ,SAAS;GACP,MAAM;GACN,MAAM;GACN,cAAc;GACd,IAAI;GACJ,SAAS;GACT,WAAW;GACX,YAAY;EACd;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK;GACL,MAAM;GACN,GAAG;EACL;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,MAAM;GACN,MAAM;GACN,UAAU;GACV,GAAG;GACH,MAAM;IACJ,WAAW;IACX,IAAI;IACJ,IAAI;GACN;GACA,QAAQ;IACN,WAAW;IACX,IAAI;IACJ,IAAI;GACN;EACF;EACA,WAAW;GACT,6BAA6B;IAC3B,aAAa;IACb,IAAI;GACN;GACA,0BAA0B,EACxB,gBAAgB,IAClB;GACA,4BAA4B,EAC1B,kBAAkB,IACpB;GACA,0BAA0B;IACxB,eAAe;IACf,YAAY;GACd;GACA,4BAA4B;IAC1B,iBAAiB;IACjB,YAAY;GACd;GACA,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,SAAS;GACT,KAAK;GACL,YAAY;GACZ,UAAU;GACV,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,GAAG;GACH,QAAQ;EACV;EACA,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;GACL,MAAM;GACN,GAAG;EACL;CACF;CAEA,UAAU;EACR,OAAO;GACL,SAAS;IACP,IAAI;IACJ,aAAa;IACb,SAAS;GACX;GACA,MAAM;IAAE,MAAM;IAAQ,GAAG;GAAO;EAClC;EACA,SAAS,EAAE,SAAS,EAAE,YAAY,UAAU,EAAE;EAC9C,OAAO,EAAE,SAAS,EAAE,IAAI,WAAW,EAAE;EACrC,OAAO,EAAE,SAAS,EAAE,YAAY,QAAQ,EAAE;EAC1C,QAAQ,EAAE,SAAS,EAAE,YAAY,SAAS,EAAE;EAC5C,SAAS,EAAE,SAAS,EAAE,YAAY,UAAU,EAAE;CAChD;CAEA,OAAO;EACL,IAAI;GACF,SAAS;IAAE,aAAa;IAAY,UAAU;IAAM,IAAI;GAAI;GAC5D,WAAW;IAAE,aAAa;IAAO,UAAU;GAAK;EAClD;EACA,IAAI;GACF,SAAS;IAAE,aAAa;IAAY,UAAU;IAAM,IAAI;GAAI;GAC5D,WAAW;IAAE,aAAa;IAAO,UAAU;GAAK;EAClD;EACA,IAAI;GACF,SAAS;IAAE,aAAa;IAAY,UAAU;IAAM,IAAI;GAAI;GAC5D,WAAW;IAAE,aAAa;IAAO,UAAU;GAAK;EAClD;CACF;CAEA,WAAW,CACT;EACE,KAAK,EAAE,SAAS;GAAE,IAAI;GAAK,IAAI;EAAI,EAAE;EACrC,SAAS;CACX,CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

package/dist/cjs/components/bubble/index.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_bubble_style = require("./bubble.style.cjs");
+const require_bubble = require("./bubble.cjs");
+const require_namespace = require("./namespace.cjs");
+Object.defineProperty(exports, "Bubble", {
+	enumerable: true,
+	get: function() {
+		return require_namespace.namespace_exports;
+	}
+});
+exports.BubbleContent = require_bubble.BubbleContent;
+exports.BubbleGroup = require_bubble.BubbleGroup;
+exports.BubbleItem = require_bubble.BubbleItem;
+exports.BubblePropsContext = require_bubble.BubblePropsContext;
+exports.BubbleReactions = require_bubble.BubbleReactions;
+exports.BubbleRoot = require_bubble.BubbleRoot;
+exports.bubbleStyle = require_bubble_style.bubbleStyle;
+exports.useBubblePropsContext = require_bubble.useBubblePropsContext;

package/dist/cjs/components/bubble/namespace.cjs

@@ -0,0 +1,28 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_bubble = require("./bubble.cjs");
+//#region src/components/bubble/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
+	Content: () => require_bubble.BubbleContent,
+	Group: () => require_bubble.BubbleGroup,
+	Item: () => require_bubble.BubbleItem,
+	PropsContext: () => require_bubble.BubblePropsContext,
+	Reactions: () => require_bubble.BubbleReactions,
+	Root: () => require_bubble.BubbleRoot,
+	usePropsContext: () => require_bubble.useBubblePropsContext
+});
+//#endregion
+exports.Content = require_bubble.BubbleContent;
+exports.Group = require_bubble.BubbleGroup;
+exports.Item = require_bubble.BubbleItem;
+exports.PropsContext = require_bubble.BubblePropsContext;
+exports.Reactions = require_bubble.BubbleReactions;
+exports.Root = require_bubble.BubbleRoot;
+Object.defineProperty(exports, "namespace_exports", {
+	enumerable: true,
+	get: function() {
+		return namespace_exports;
+	}
+});
+exports.usePropsContext = require_bubble.useBubblePropsContext;
+
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/bubble/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/bubble/namespace.ts"],"sourcesContent":["export type {\n  BubbleContentProps as ContentProps,\n  BubbleGroupProps as GroupProps,\n  BubbleItemProps as ItemProps,\n  BubbleItem as ItemType,\n  BubbleReactionsProps as ReactionsProps,\n  BubbleRootProps as RootProps,\n} from \"./bubble\"\nexport {\n  BubbleContent as Content,\n  BubbleGroup as Group,\n  BubbleItem as Item,\n  BubblePropsContext as PropsContext,\n  BubbleReactions as Reactions,\n  BubbleRoot as Root,\n  useBubblePropsContext as usePropsContext,\n} from \"./bubble\"\n"],"mappings":""}

package/dist/cjs/components/button/button.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_children = require("../../utils/children.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
@@ -92,18 +93,19 @@ const ButtonContent = component(({ children }) => {
 const ButtonLoading = component((props) => {
 	const { loadingIcon, loadingMessage } = useComponentContext();
 	const css = (0, react.useMemo)(() => ({ position: loadingMessage ? "relative" : "absolute" }), [loadingMessage]);
-	if (require_use_loading_component.isLoadingScheme(loadingIcon)) {
-		const Component = require_use_loading_component.getLoadingComponent(loadingIcon);
+	const child = require_children.getResolvedChild(loadingIcon);
+	if (require_use_loading_component.isLoadingScheme(child)) {
+		const Component = require_use_loading_component.getLoadingComponent(child);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 			color: "currentColor",
 			...props,
 			css: require_merge_css.mergeCSS(css, props.css)
 		});
 	}
-	if ((0, react.isValidElement)(loadingIcon)) return (0, react.cloneElement)(loadingIcon, {
+	if ((0, react.isValidElement)(child)) return (0, react.cloneElement)(child, {
 		...props,
-		...loadingIcon.props,
-		css: require_merge_css.mergeCSS(css, props.css, loadingIcon.props.css)
+		...child.props,
+		css: require_merge_css.mergeCSS(css, props.css, child.props.css)
 	});
 	return null;
 }, {
@@ -119,13 +121,14 @@ const ButtonEndLoading = component(ButtonLoading, {
 	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "loading", "end"))
 })();
 const ButtonIcon = component(({ children, ...rest }) => {
-	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
+	const child = require_children.getResolvedChild(children);
+	if ((0, react.isValidElement)(child)) return (0, react.cloneElement)(child, {
 		"aria-hidden": true,
 		role: "img",
 		...rest,
-		...children.props
+		...child.props
 	});
-	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+	return react.Children.count(child) > 1 ? react.Children.only(null) : null;
 }, {
 	name: "ButtonIcon",
 	className: require_utils.getClassName((0, require_utils_index.utils_exports.bem)("button", "icon"))