@yamada-ui/react 2.1.4-dev-20260323182837 → 2.1.4-dev-20260324195723

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n  PaginationContext,\n  usePagination,\n  usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n  extends\n    WithoutThemeProps<\n      Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n      PaginationStyle\n    >,\n    ThemeProps<PaginationStyle>,\n    Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * If `true`, display the control buttons.\n   *\n   * @default true\n   */\n  withControls?: boolean\n  /**\n   * If `true`, display the edge buttons.\n   *\n   * @default false\n   */\n  withEdges?: boolean\n  /**\n   * Props for next of the control button element.\n   */\n  controlNextProps?: PaginationItemProps\n  /**\n   * Props for previous of the control button element.\n   */\n  controlPrevProps?: PaginationItemProps\n  /**\n   * Props for control button element.\n   */\n  controlProps?: PaginationItemProps\n  /**\n   * Props for end of the edge button element.\n   */\n  edgeEndProps?: PaginationItemProps\n  /**\n   * Props for edge button element.\n   */\n  edgeProps?: PaginationItemProps\n  /**\n   * Props for start of the edge button element.\n   */\n  edgeStartProps?: PaginationItemProps\n  /**\n   * Props for ellipsis of the element.\n   */\n  ellipsisProps?: PaginationItemProps\n  /**\n   * Props for item of the button element.\n   */\n  itemProps?: PaginationItemProps\n}\n\nconst {\n  PropsContext: PaginationPropsContext,\n  usePropsContext: usePaginationPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n  \"pagination\",\n  paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n  \"nav\",\n  PaginationRootProps,\n  \"size\" | \"variant\"\n>(\n  ({\n    size,\n    variant,\n    children,\n    withControls = true,\n    withEdges = false,\n    controlNextProps,\n    controlPrevProps,\n    controlProps,\n    edgeEndProps,\n    edgeProps,\n    edgeStartProps,\n    ellipsisProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      currentPage,\n      disabled,\n      range,\n      total,\n      getEndTriggerProps,\n      getItemProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      getStartTriggerProps,\n      onChange,\n      onChangeEnd,\n      onChangeNext,\n      onChangePrev,\n      onChangeStart,\n    } = usePagination(rest)\n    const context = useMemo(\n      () => ({\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      }),\n      [\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      ],\n    )\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        const children: ReactNode[] = []\n\n        if (withEdges)\n          children.push(\n            <PaginationStartTrigger>\n              <PaginationItem\n                icon={<ChevronsLeftIcon />}\n                {...edgeProps}\n                {...edgeStartProps}\n              />\n            </PaginationStartTrigger>,\n          )\n        if (withControls)\n          children.push(\n            <PaginationPrevTrigger>\n              <PaginationItem\n                icon={<ChevronLeftIcon />}\n                {...controlProps}\n                {...controlPrevProps}\n              />\n            </PaginationPrevTrigger>,\n          )\n\n        children.push(\n          <PaginationItems\n            render={(page) =>\n              isNumber(page) ? (\n                <PaginationItem {...itemProps}>\n                  <styled.span role=\"presentation\">{page}</styled.span>\n                </PaginationItem>\n              ) : (\n                <PaginationItem\n                  as=\"span\"\n                  icon={<EllipsisIcon />}\n                  {...ellipsisProps}\n                />\n              )\n            }\n          />,\n        )\n\n        if (withControls)\n          children.push(\n            <PaginationNextTrigger>\n              <PaginationItem\n                icon={<ChevronRightIcon />}\n                {...controlProps}\n                {...controlNextProps}\n              />\n            </PaginationNextTrigger>,\n          )\n        if (withEdges)\n          children.push(\n            <PaginationEndTrigger>\n              <PaginationItem\n                icon={<ChevronsRightIcon />}\n                {...edgeProps}\n                {...edgeEndProps}\n              />\n            </PaginationEndTrigger>,\n          )\n\n        return children\n      }\n    }, [\n      children,\n      withEdges,\n      withControls,\n      itemProps,\n      ellipsisProps,\n      edgeProps,\n      edgeStartProps,\n      edgeEndProps,\n      controlProps,\n      controlPrevProps,\n      controlNextProps,\n    ])\n\n    return (\n      <PaginationContext value={context}>\n        <ButtonGroup.Root\n          as=\"nav\"\n          size={size}\n          variant={variant}\n          {...getRootProps()}\n        >\n          {computedChildren}\n        </ButtonGroup.Root>\n      </PaginationContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  children?: (page: Page) => ReactNode\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n  children,\n  render,\n}) => {\n  const { range, getItemProps } = usePaginationContext()\n\n  return useMemo(\n    () =>\n      range.map((page, index) => {\n        const component = children?.(page) ?? render?.(page)\n\n        if (isValidElement<HTMLProps<\"button\">>(component)) {\n          return cloneElement(component, {\n            ...getItemProps({ key: index, page, ...component.props }),\n          })\n        } else {\n          return component\n        }\n      }),\n    [children, getItemProps, range, render],\n  )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n  ButtonGroup.IconItem,\n  \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n  HTMLStyledProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The children of the text.\n   * if function, it will be called with `{ page: number; total: number }`.\n   */\n  children?: ReactNodeOrFunction<{ page: number; total: number }>\n  /**\n   * The format of the text.\n   *\n   * @default 'compact'\n   */\n  format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n  \"span\",\n  \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n  const { currentPage, total } = usePaginationContext()\n  const { t } = useI18n(\"pagination\")\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return runIfFn(children, { page: currentPage, total })\n    } else if (format === \"short\") {\n      return t(\"{value} / {total}\", {\n        total,\n        value: currentPage,\n      })\n    } else {\n      return t(\"{value} of {total}\", {\n        total,\n        value: currentPage,\n      })\n    }\n  }, [children, currentPage, format, total, t])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n  \"button\",\n  PaginationStartTriggerProps\n>(\"button\", { name: \"startTrigger\", slot: [\"trigger\", \"start\"] })(\n  undefined,\n  (props) => {\n    const { getStartTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getStartTriggerProps(props) }\n  },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n  \"button\",\n  PaginationEndTriggerProps\n>(\"button\", { name: \"endTrigger\", slot: [\"trigger\", \"end\"] })(\n  undefined,\n  (props) => {\n    const { getEndTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getEndTriggerProps(props) }\n  },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n  \"button\",\n  PaginationPrevTriggerProps\n>(\"button\", { name: \"prevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getPrevTriggerProps(props) }\n  },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n  \"button\",\n  PaginationNextTriggerProps\n>(\"button\", { name: \"nextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getNextTriggerProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
+{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n  WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n  EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n  PaginationContext,\n  usePagination,\n  usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n  extends\n    WithoutThemeProps<\n      Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n      PaginationStyle\n    >,\n    ThemeProps<PaginationStyle>,\n    Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n  /**\n   * Number of elements visible on the left/right edges.\n   *\n   * @default 1\n   */\n  boundaries?: number\n  /** Number of siblings displayed on the left/right side of selected page.\n   *\n   * @default 1\n   */\n  siblings?: number\n  /**\n   * If `true`, display the control buttons.\n   *\n   * @default true\n   */\n  withControls?: boolean\n  /**\n   * If `true`, display the edge buttons.\n   *\n   * @default false\n   */\n  withEdges?: boolean\n  /**\n   * Props for next of the control button element.\n   */\n  controlNextProps?: PaginationItemProps\n  /**\n   * Props for previous of the control button element.\n   */\n  controlPrevProps?: PaginationItemProps\n  /**\n   * Props for control button element.\n   */\n  controlProps?: PaginationItemProps\n  /**\n   * Props for end of the edge button element.\n   */\n  edgeEndProps?: PaginationItemProps\n  /**\n   * Props for edge button element.\n   */\n  edgeProps?: PaginationItemProps\n  /**\n   * Props for start of the edge button element.\n   */\n  edgeStartProps?: PaginationItemProps\n  /**\n   * Props for ellipsis of the element.\n   */\n  ellipsisProps?: PaginationItemProps\n  /**\n   * Props for item of the button element.\n   */\n  itemProps?: PaginationItemProps\n}\n\nconst {\n  PropsContext: PaginationPropsContext,\n  usePropsContext: usePaginationPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n  \"pagination\",\n  paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n  \"nav\",\n  PaginationRootProps,\n  \"size\" | \"variant\"\n>(\n  ({\n    size,\n    variant,\n    children,\n    withControls = true,\n    withEdges = false,\n    controlNextProps,\n    controlPrevProps,\n    controlProps,\n    edgeEndProps,\n    edgeProps,\n    edgeStartProps,\n    ellipsisProps,\n    itemProps,\n    ...rest\n  }) => {\n    const {\n      currentPage,\n      disabled,\n      range,\n      total,\n      getEndTriggerProps,\n      getItemProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      getStartTriggerProps,\n      onChange,\n      onChangeEnd,\n      onChangeNext,\n      onChangePrev,\n      onChangeStart,\n    } = usePagination(rest)\n    const context = useMemo(\n      () => ({\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      }),\n      [\n        currentPage,\n        disabled,\n        range,\n        total,\n        getEndTriggerProps,\n        getItemProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getStartTriggerProps,\n        onChange,\n        onChangeEnd,\n        onChangeNext,\n        onChangePrev,\n        onChangeStart,\n      ],\n    )\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        const children: ReactNode[] = []\n\n        if (withEdges)\n          children.push(\n            <PaginationStartTrigger>\n              <PaginationItem\n                icon={<ChevronsLeftIcon />}\n                {...edgeProps}\n                {...edgeStartProps}\n              />\n            </PaginationStartTrigger>,\n          )\n        if (withControls)\n          children.push(\n            <PaginationPrevTrigger>\n              <PaginationItem\n                icon={<ChevronLeftIcon />}\n                {...controlProps}\n                {...controlPrevProps}\n              />\n            </PaginationPrevTrigger>,\n          )\n\n        children.push(\n          <PaginationItems\n            render={(page) =>\n              isNumber(page) ? (\n                <PaginationItem {...itemProps}>\n                  <styled.span role=\"presentation\">{page}</styled.span>\n                </PaginationItem>\n              ) : (\n                <PaginationItem\n                  as=\"span\"\n                  icon={<EllipsisIcon />}\n                  {...ellipsisProps}\n                />\n              )\n            }\n          />,\n        )\n\n        if (withControls)\n          children.push(\n            <PaginationNextTrigger>\n              <PaginationItem\n                icon={<ChevronRightIcon />}\n                {...controlProps}\n                {...controlNextProps}\n              />\n            </PaginationNextTrigger>,\n          )\n        if (withEdges)\n          children.push(\n            <PaginationEndTrigger>\n              <PaginationItem\n                icon={<ChevronsRightIcon />}\n                {...edgeProps}\n                {...edgeEndProps}\n              />\n            </PaginationEndTrigger>,\n          )\n\n        return children\n      }\n    }, [\n      children,\n      withEdges,\n      withControls,\n      itemProps,\n      ellipsisProps,\n      edgeProps,\n      edgeStartProps,\n      edgeEndProps,\n      controlProps,\n      controlPrevProps,\n      controlNextProps,\n    ])\n\n    return (\n      <PaginationContext value={context}>\n        <ButtonGroup.Root\n          as=\"nav\"\n          size={size}\n          variant={variant}\n          {...getRootProps()}\n        >\n          {computedChildren}\n        </ButtonGroup.Root>\n      </PaginationContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  children?: (page: Page) => ReactNode\n  /**\n   * The function used to generate children.\n   * it will be called with page number or `\"ellipsis\"`.\n   */\n  render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n  children,\n  render,\n}) => {\n  const { range, getItemProps } = usePaginationContext()\n\n  return useMemo(\n    () =>\n      range.map((page, index) => {\n        const component = children?.(page) ?? render?.(page)\n\n        if (isValidElement<HTMLProps<\"button\">>(component)) {\n          return cloneElement(component, {\n            ...getItemProps({ key: index, page, ...component.props }),\n          })\n        } else {\n          return component\n        }\n      }),\n    [children, getItemProps, range, render],\n  )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n  ButtonGroup.IconItem,\n  \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n  HTMLStyledProps<\"span\">,\n  \"children\"\n> {\n  /**\n   * The children of the text.\n   * if function, it will be called with `{ page: number; total: number }`.\n   */\n  children?: ReactNodeOrFunction<{ page: number; total: number }>\n  /**\n   * The format of the text.\n   *\n   * @default 'compact'\n   */\n  format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n  \"span\",\n  \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n  const { currentPage, total } = usePaginationContext()\n  const { t } = useI18n(\"pagination\")\n  const computedChildren = useMemo(() => {\n    if (children) {\n      return runIfFn(children, { page: currentPage, total })\n    } else if (format === \"short\") {\n      return t(\"{value} / {total}\", {\n        total,\n        value: currentPage,\n      })\n    } else {\n      return t(\"{value} of {total}\", {\n        total,\n        value: currentPage,\n      })\n    }\n  }, [children, currentPage, format, total, t])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n  \"button\",\n  PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n  undefined,\n  (props) => {\n    const { getStartTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getStartTriggerProps(props) }\n  },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n  \"button\",\n  PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n  undefined,\n  (props) => {\n    const { getEndTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getEndTriggerProps(props) }\n  },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n  \"button\",\n  PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n  undefined,\n  (props) => {\n    const { getPrevTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getPrevTriggerProps(props) }\n  },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n  \"button\",\n  PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n  undefined,\n  (props) => {\n    const { getNextTriggerProps } = usePaginationContext()\n\n    return { asChild: true, ...getNextTriggerProps(props) }\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}

package/dist/types/components/accordion/accordion.d.ts

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react977 from "react";
+import * as react93 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react977.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react93.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react965 from "react";
+import * as react94 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react965.Context<{
+declare const AccordionDescendantsContext: react94.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react965.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react965.RefCallback<HTMLButtonElement>;
+    } | undefined) => react94.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react965.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react965.RefCallback<HTMLButtonElement>;
+      } | undefined) => react94.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react965.RefCallback<HTMLButtonElement>;
+    register: react94.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react965.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react965.RefCallback<HTMLButtonElement>;
+    } | undefined) => react94.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react965.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react94.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react965.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react94.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react965.RefCallback<HTMLButtonElement>;
+    } | undefined) => react94.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react965.Dispatch<react965.SetStateAction<number>>;
-  setIndex: react965.Dispatch<react965.SetStateAction<number | number[]>>;
+  setFocusedIndex: react94.Dispatch<react94.SetStateAction<number>>;
+  setIndex: react94.Dispatch<react94.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/airy/airy.d.ts

@@ -5,7 +5,7 @@ import { AiryStyle } from "./airy.style.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import "../../index.js";
-import * as react964 from "react";
+import * as react106 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react964.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react106.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react963 from "react";
+import * as react90 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react963.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react90.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alert/alert.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/alpha-slider/alpha-slider.d.ts

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react961 from "react";
+import * as react107 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react961.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react107.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react962 from "react";
+import * as react54 from "react";
 
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react962.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react54.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts

@@ -11,7 +11,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react960 from "react";
+import * as react52 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -67,7 +67,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react960.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react52.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "field" | "root" | "indicator" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "field" | "root" | "indicator" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts

@@ -8,7 +8,7 @@ import { UsePopoverProps } from "../popover/use-popover.js";
 import "../popover/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react954 from "react";
+import * as react46 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react954.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react46.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react954.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react46.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react954.Dispatch<react954.SetStateAction<string>>;
-  setValue: react954.Dispatch<react954.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react46.Dispatch<react46.SetStateAction<string>>;
+  setValue: react46.Dispatch<react46.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react951 from "react";
+import * as react30 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils18 from "@yamada-ui/utils";
+import * as _yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react951.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react30.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react951.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react951.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react30.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react30.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react949 from "react";
+import * as react33 from "react";
 
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react949.ReactElement<any, string | react949.JSXElementConstructor<any>>[];
+  children: react33.ReactElement<any, string | react33.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/badge/badge.d.ts

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react948 from "react";
+import * as react44 from "react";
 
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react948.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react44.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

package/dist/types/components/bleed/bleed.d.ts

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react946 from "react";
+import * as react45 from "react";
 
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react946.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react45.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

package/dist/types/components/blockquote/blockquote.d.ts

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react947 from "react";
+import * as react43 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react947.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react43.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { BreadcrumbStyle } from "./breadcrumb.style.js";
 import { UseBreadcrumbProps } from "./use-breadcrumb.js";
 import "../../index.js";
-import * as react945 from "react";
+import * as react193 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/breadcrumb/breadcrumb.d.ts
@@ -40,7 +40,7 @@ interface BreadcrumbRootProps extends HTMLStyledProps<"nav">, ThemeProps<Breadcr
    */
   separatorProps?: BreadcrumbSeparatorProps;
 }
-declare const BreadcrumbPropsContext: react945.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
+declare const BreadcrumbPropsContext: react193.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
 /**
  * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
  *

package/dist/types/components/breadcrumb/breadcrumb.style.d.ts

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/breadcrumb/breadcrumb.style.d.ts
-declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "item" | "root", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "item" | "root">>, {
+declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "root" | "item", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "root" | "item">>, {
   sm: {
     list: {
       fontSize: "sm";

package/dist/types/components/breadcrumb/use-breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import { ReactNodeOrFunction } from "../../utils/index.types.js";
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react942 from "react";
+import * as react190 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/breadcrumb/use-breadcrumb.d.ts
@@ -46,7 +46,7 @@ declare const useBreadcrumb: ({
   startBoundaries,
   ...rest
 }?: UseBreadcrumbProps) => {
-  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react942.ReactPortal | ReactElement<unknown, string | react942.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react942.JSXElementConstructor<any>> | null | undefined)[];
+  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react190.ReactPortal | ReactElement<unknown, string | react190.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react190.JSXElementConstructor<any>> | null | undefined)[];
   getEllipsisProps: PropGetter<"svg", undefined, undefined>;
   getLinkProps: PropGetter<"a", {
     currentPage?: boolean;

package/dist/types/components/button/button.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import "../loading/index.js";
 import { ButtonStyle } from "./button.style.js";
 import "../../index.js";
-import * as react980 from "react";
+import * as react963 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/button/button.d.ts
@@ -72,7 +72,7 @@ interface ButtonProps extends HTMLStyledProps<"button">, ThemeProps<ButtonStyle>
    */
   loadingProps?: ButtonLoadingProps;
 }
-declare const ButtonPropsContext: react980.Context<Partial<ButtonProps> | undefined>, useButtonPropsContext: () => Partial<ButtonProps> | undefined;
+declare const ButtonPropsContext: react963.Context<Partial<ButtonProps> | undefined>, useButtonPropsContext: () => Partial<ButtonProps> | undefined;
 /**
  * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
  *

package/dist/types/components/button/icon-button.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { IconButtonStyle } from "./icon-button.style.js";
 import { ButtonProps } from "./button.js";
 import "../../index.js";
-import * as react981 from "react";
+import * as react964 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/button/icon-button.d.ts
@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<WithoutThemeProps<ButtonProps, IconButton
    */
   icon?: ReactNode;
 }
-declare const IconButtonPropsContext: react981.Context<Partial<IconButtonProps> | undefined>, useIconButtonPropsContext: () => Partial<IconButtonProps> | undefined;
+declare const IconButtonPropsContext: react964.Context<Partial<IconButtonProps> | undefined>, useIconButtonPropsContext: () => Partial<IconButtonProps> | undefined;
 /**
  * `IconButton` is a component that displays an icon within a button.
  *

package/dist/types/components/calendar/calendar.d.ts

@@ -7,7 +7,7 @@ import { UseCalendarDayProps, UseCalendarProps } from "./use-calendar.js";
 import { SelectRootProps } from "../select/select.js";
 import "../select/index.js";
 import "../../index.js";
-import * as react941 from "react";
+import * as react185 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/calendar/calendar.d.ts
@@ -69,7 +69,7 @@ interface CalendarRootProps<Multiple extends boolean = false, Range extends bool
    */
   yearSelectProps?: CalendarYearSelectProps;
 }
-declare const CalendarPropsContext: react941.Context<Partial<CalendarRootProps<false, false>> | undefined>, useCalendarPropsContext: () => Partial<CalendarRootProps<false, false>> | undefined;
+declare const CalendarPropsContext: react185.Context<Partial<CalendarRootProps<false, false>> | undefined>, useCalendarPropsContext: () => Partial<CalendarRootProps<false, false>> | undefined;
 /**
  * `Calendar` is a component for displaying or selecting dates in a calendar.
  *

package/dist/types/components/calendar/calendar.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js"
 import "../../index.js";
 
 //#region src/components/calendar/calendar.style.d.ts
-declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "weekday" | "month" | "day" | "control" | "root" | "week" | "prev" | "months" | "years" | "weeks", {
+declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "weekday" | "month" | "day" | "week" | "prev" | "control" | "months" | "years" | "weeks", {
   /**
    * If `true`, the calendar will be fixed rows.
    *
@@ -75,7 +75,7 @@ declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "
       "--font-size": "fontSizes.xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "weekday" | "month" | "day" | "control" | "root" | "week" | "prev" | "months" | "years" | "weeks">>>;
+}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "weekday" | "month" | "day" | "week" | "prev" | "control" | "months" | "years" | "weeks">>>;
 type CalendarStyle = typeof calendarStyle;
 //#endregion
 export { CalendarStyle, calendarStyle };