@yamada-ui/breadcrumb 2.0.0-next-20240607120206 → 2.0.0-next-20240607165557

package/dist/breadcrumb.js

@@ -67,7 +67,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
   const css = {
     display: "flex",
     alignItems: "center",
-    ...styles.list
+    ...styles.container
   };
   const validChildren = (0, import_utils.getValidChildren)(children);
   const hasChildren = validChildren.length;

package/dist/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,kBAKO;AACP,kBAAqB;AAErB,uBAAyB;AACzB,mBAMO;AAEP,mBAA6D;AA2IpB;AAzIzC,IAAM,CAAC,oBAAoB,aAAa,QAAI,4BAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,iBAAa,wBAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,cAAc,KAAK;AAExE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA,QAAQ,CAAC;AAAA,IACT,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,MAAI,sBAAkB,2BAAS,gBAAgB;AAC/C,MAAI,oBAAgB,2BAAS,cAAc;AAE3C,MAAI,oBAAoB;AAAG,sBAAkB;AAC7C,MAAI,kBAAkB;AAAG,oBAAgB;AAEzC,MAAI;AAAiB,4DAAkB;AACvC,MAAI;AAAe,kEAAoB;AAEvC,QAAM,oBAAgB,uBAAS,eAAe,SAAK,uBAAS,aAAa;AACzE,QAAM,WACJ,iBAAiB,kBAAmB,gBAAiB,MAAM;AAE7D,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,qBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC;AAAU,eAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,iBAAO,wBAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,cAC/B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA,aAAa,cAAc,WAAW,QAAQ;AAAA,QAChD,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,UAAI,iBAA2C,CAAC;AAEhD,aAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AAnJxC;AAoJQ,cAAM,EAAE,gBAAgB,MAAM,eAAe,gBAAgB,GAAGA,MAAK,IACnE;AACF,cAAM,cAAc,MAAM,WAAW,QAAQ;AAC7C,cAAMC,SAA6B;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL;AAEA,YAAI,CAAC,iBAAiB,gBAAgB;AACpC,yBAAe,KAAK,IAAI;AAExB,iBAAO,cACL,4CAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,4CAAC,sBAAmB,KAD5B,KAErB,IACE;AAAA,QACN;AAEA,YAAI,iBAAiB,UAAU;AAC7B,gBAAM,YAAY,MAAM,SAAS,QAAQ;AAEzC,cAAI,mBAAoB,SAAS,iBAAkB,WAAW;AAC5D,gBAAI,oBAAoB,OAAO;AAC7B,qBACE,4CAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,4CAAC,sBAAmB,KADtB,KAErB;AAAA,YAEJ,OAAO;AACL,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAEA,YAAI,eAAe,QAAQ;AACzB,gBAAM,oBAAmB,oBAAe,cAAc,MAA7B,YACvB,4CAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,6CAAC,yBACC;AAAA,wDAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,4CAAC,kBAAgB,GAAGA,QAAO,aACzB,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,4CAAC,kBAA4B,GAAGC,QAAO,aACrC,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,KADb,KAErB;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEJ,sDAAC,eAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAmBM,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,cAAc;AAE7B,UAAM,oBAAgB,+BAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,UACA,UAAU,MAAM,MAAM,YAAY;AAAA,QACpC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,4CAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAaO,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAYO,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ;AACvC,UAAM,SAAS,cAAc;AAC7B,UAAM,MAAmB;AAAA,MACvB;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMO,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,SAAS,cAAc;AAE7B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,8BACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAW;AAAA,QACX,eAAW,iBAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACP,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,sDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;","names":["rest","props"]}
+{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.container,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":"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","names":["rest","props"]}

package/dist/breadcrumb.mjs

@@ -5,7 +5,7 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator
-} from "./chunk-H44BIQOU.mjs";
+} from "./chunk-DAOABI2S.mjs";
 export {
   Breadcrumb,
   BreadcrumbEllipsis,

package/dist/{chunk-H44BIQOU.mjs → chunk-DAOABI2S.mjs}

@@ -51,7 +51,7 @@ var Breadcrumb = forwardRef((props, ref) => {
   const css = {
     display: "flex",
     alignItems: "center",
-    ...styles.list
+    ...styles.container
   };
   const validChildren = getValidChildren(children);
   const hasChildren = validChildren.length;
@@ -254,4 +254,4 @@ export {
   BreadcrumbSeparator,
   BreadcrumbEllipsis
 };
-//# sourceMappingURL=chunk-H44BIQOU.mjs.map
+//# sourceMappingURL=chunk-DAOABI2S.mjs.map

package/dist/chunk-DAOABI2S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.container,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":"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","names":["rest","props"]}

package/dist/index.js

@@ -69,7 +69,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
   const css = {
     display: "flex",
     alignItems: "center",
-    ...styles.list
+    ...styles.container
   };
   const validChildren = (0, import_utils.getValidChildren)(children);
   const hasChildren = validChildren.length;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n} from \"./breadcrumb\"\nexport type {\n  BreadcrumbProps,\n  BreadcrumbItemProps,\n  BreadcrumbLinkProps,\n  BreadcrumbSeparatorProps,\n  BreadcrumbEllipsisProps,\n  BreadcrumbGenerateItem,\n} from \"./breadcrumb\"\n","import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,kBAKO;AACP,kBAAqB;AAErB,uBAAyB;AACzB,mBAMO;AAEP,mBAA6D;AA2IpB;AAzIzC,IAAM,CAAC,oBAAoB,aAAa,QAAI,4BAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,iBAAa,wBAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,cAAc,KAAK;AAExE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA,QAAQ,CAAC;AAAA,IACT,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,MAAI,sBAAkB,2BAAS,gBAAgB;AAC/C,MAAI,oBAAgB,2BAAS,cAAc;AAE3C,MAAI,oBAAoB;AAAG,sBAAkB;AAC7C,MAAI,kBAAkB;AAAG,oBAAgB;AAEzC,MAAI;AAAiB,4DAAkB;AACvC,MAAI;AAAe,kEAAoB;AAEvC,QAAM,oBAAgB,uBAAS,eAAe,SAAK,uBAAS,aAAa;AACzE,QAAM,WACJ,iBAAiB,kBAAmB,gBAAiB,MAAM;AAE7D,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,qBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC;AAAU,eAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,iBAAO,wBAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,cAC/B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA,aAAa,cAAc,WAAW,QAAQ;AAAA,QAChD,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,UAAI,iBAA2C,CAAC;AAEhD,aAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AAnJxC;AAoJQ,cAAM,EAAE,gBAAgB,MAAM,eAAe,gBAAgB,GAAGA,MAAK,IACnE;AACF,cAAM,cAAc,MAAM,WAAW,QAAQ;AAC7C,cAAMC,SAA6B;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL;AAEA,YAAI,CAAC,iBAAiB,gBAAgB;AACpC,yBAAe,KAAK,IAAI;AAExB,iBAAO,cACL,4CAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,4CAAC,sBAAmB,KAD5B,KAErB,IACE;AAAA,QACN;AAEA,YAAI,iBAAiB,UAAU;AAC7B,gBAAM,YAAY,MAAM,SAAS,QAAQ;AAEzC,cAAI,mBAAoB,SAAS,iBAAkB,WAAW;AAC5D,gBAAI,oBAAoB,OAAO;AAC7B,qBACE,4CAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,4CAAC,sBAAmB,KADtB,KAErB;AAAA,YAEJ,OAAO;AACL,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAEA,YAAI,eAAe,QAAQ;AACzB,gBAAM,oBAAmB,oBAAe,cAAc,MAA7B,YACvB,4CAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,6CAAC,yBACC;AAAA,wDAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,4CAAC,kBAAgB,GAAGA,QAAO,aACzB,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,4CAAC,kBAA4B,GAAGC,QAAO,aACrC,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,KADb,KAErB;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEJ,sDAAC,eAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAmBM,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,cAAc;AAE7B,UAAM,oBAAgB,+BAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,UACA,UAAU,MAAM,MAAM,YAAY;AAAA,QACpC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,4CAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAaO,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAYO,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ;AACvC,UAAM,SAAS,cAAc;AAC7B,UAAM,MAAmB;AAAA,MACvB;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMO,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,SAAS,cAAc;AAE7B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,8BACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAW;AAAA,QACX,eAAW,iBAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACP,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,sDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;","names":["rest","props"]}
+{"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n} from \"./breadcrumb\"\nexport type {\n  BreadcrumbProps,\n  BreadcrumbItemProps,\n  BreadcrumbLinkProps,\n  BreadcrumbSeparatorProps,\n  BreadcrumbEllipsisProps,\n  BreadcrumbGenerateItem,\n} from \"./breadcrumb\"\n","import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.container,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,kBAKO;AACP,kBAAqB;AAErB,uBAAyB;AACzB,mBAMO;AAEP,mBAA6D;AA2IpB;AAzIzC,IAAM,CAAC,oBAAoB,aAAa,QAAI,4BAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,iBAAa,wBAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,cAAc,KAAK;AAExE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA,QAAQ,CAAC;AAAA,IACT,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAC9B,MAAI,sBAAkB,2BAAS,gBAAgB;AAC/C,MAAI,oBAAgB,2BAAS,cAAc;AAE3C,MAAI,oBAAoB;AAAG,sBAAkB;AAC7C,MAAI,kBAAkB;AAAG,oBAAgB;AAEzC,MAAI;AAAiB,4DAAkB;AACvC,MAAI;AAAe,kEAAoB;AAEvC,QAAM,oBAAgB,uBAAS,eAAe,SAAK,uBAAS,aAAa;AACzE,QAAM,WACJ,iBAAiB,kBAAmB,gBAAiB,MAAM;AAE7D,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,qBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC;AAAU,eAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,iBAAO,wBAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,cAC/B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA,aAAa,cAAc,WAAW,QAAQ;AAAA,QAChD,CAAC;AAAA,MACH;AAAA,IACF,OAAO;AACL,UAAI,iBAA2C,CAAC;AAEhD,aAAO,MAAM,IAAI,CAAC,MAAM,UAAU;AAnJxC;AAoJQ,cAAM,EAAE,gBAAgB,MAAM,eAAe,gBAAgB,GAAGA,MAAK,IACnE;AACF,cAAM,cAAc,MAAM,WAAW,QAAQ;AAC7C,cAAMC,SAA6B;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL;AAEA,YAAI,CAAC,iBAAiB,gBAAgB;AACpC,yBAAe,KAAK,IAAI;AAExB,iBAAO,cACL,4CAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,4CAAC,sBAAmB,KAD5B,KAErB,IACE;AAAA,QACN;AAEA,YAAI,iBAAiB,UAAU;AAC7B,gBAAM,YAAY,MAAM,SAAS,QAAQ;AAEzC,cAAI,mBAAoB,SAAS,iBAAkB,WAAW;AAC5D,gBAAI,oBAAoB,OAAO;AAC7B,qBACE,4CAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,4CAAC,sBAAmB,KADtB,KAErB;AAAA,YAEJ,OAAO;AACL,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAEA,YAAI,eAAe,QAAQ;AACzB,gBAAM,oBAAmB,oBAAe,cAAc,MAA7B,YACvB,4CAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,6CAAC,yBACC;AAAA,wDAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,4CAAC,kBAAgB,GAAGA,QAAO,aACzB,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,4CAAC,kBAA4B,GAAGC,QAAO,aACrC,sDAAC,kBAAgB,GAAGD,OAAO,gBAAK,KADb,KAErB;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,4CAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEJ,sDAAC,eAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAmBM,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,cAAc;AAE7B,UAAM,oBAAgB,+BAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,mBAAO,2BAAa,OAAO;AAAA,UACzB;AAAA,UACA,UAAU,MAAM,MAAM,YAAY;AAAA,QACpC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,4CAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAaO,IAAM,qBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAYO,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ;AACvC,UAAM,SAAS,cAAc;AAC7B,UAAM,MAAmB;AAAA,MACvB;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMO,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,SAAS,cAAc;AAE7B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,8BACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAW;AAAA,QACX,eAAW,iBAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACP,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,sDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;","names":["rest","props"]}

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator
-} from "./chunk-H44BIQOU.mjs";
+} from "./chunk-DAOABI2S.mjs";
 export {
   Breadcrumb,
   BreadcrumbEllipsis,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/breadcrumb",
-  "version": "2.0.0-next-20240607120206",
+  "version": "2.0.0-next-20240607165557",
   "description": "Yamada UI breadcrumb component",
   "keywords": [
     "yamada",
@@ -36,10 +36,10 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.7.1-next-20240607120206",
-    "@yamada-ui/utils": "1.2.1-next-20240607120206",
-    "@yamada-ui/icon": "1.0.27-next-20240607120206",
-    "@yamada-ui/use-value": "1.1.15-next-20240607120206"
+    "@yamada-ui/core": "1.7.1-next-20240607165557",
+    "@yamada-ui/utils": "1.2.1-next-20240607165557",
+    "@yamada-ui/icon": "1.0.27-next-20240607165557",
+    "@yamada-ui/use-value": "1.1.15-next-20240607165557"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-H44BIQOU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\n  Token,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n  cx,\n  createContext,\n  getValidChildren,\n  isNumber,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, cloneElement, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<\n  Record<string, CSSUIObject>\n>({\n  name: \"BreadcrumbContext\",\n  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport type BreadcrumbGenerateItem = BreadcrumbLinkProps & {\n  name?: ReactNode\n  containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\">\n  isEllipsisPage?: boolean\n}\n\ntype BreadcrumbOptions = {\n  /**\n   * The visual separator between each breadcrumb item.\n   *\n   * @default '/'\n   */\n  separator?: string | JSX.Element\n  /**\n   * The left and right margin applied to the separator.\n   *\n   * @default '2'\n   */\n  gap?: CSSUIProps[\"mx\"]\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLUIProps<\"ol\">\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbGenerateItem[]\n  /**\n   * Number of elements visible on the start(left) edges.\n   */\n  startBoundaries?: Token<number>\n  /**\n   * Number of elements visible on the end(right) edges.\n   */\n  endBoundaries?: Token<number>\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?:\n    | ReactNode\n    | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n}\n\nexport type BreadcrumbProps = Omit<HTMLUIProps<\"nav\">, \"gap\"> &\n  ThemeProps<\"Breadcrumb\"> &\n  BreadcrumbOptions\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see Docs https://yamada-ui.com/components/navigation/breadcrumb\n */\nexport const Breadcrumb = forwardRef<BreadcrumbProps, \"nav\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"Breadcrumb\", props)\n\n  const {\n    className,\n    children,\n    separator = \"/\",\n    gap = \"fallback(2, 0.5rem)\",\n    listProps,\n    items = [],\n    startBoundaries: _startBoundaries,\n    endBoundaries: _endBoundaries,\n    ellipsis,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  let startBoundaries = useValue(_startBoundaries)\n  let endBoundaries = useValue(_endBoundaries)\n\n  if (startBoundaries === 0) startBoundaries = 1\n  if (endBoundaries === 0) endBoundaries = 1\n\n  if (startBoundaries) endBoundaries ??= 1\n  if (endBoundaries) startBoundaries ??= 1\n\n  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries)\n  const isExceed =\n    hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const hasChildren = validChildren.length\n\n  const customEllipsis = useCallback(\n    (providedItems?: BreadcrumbGenerateItem[]) => {\n      if (!ellipsis) return null\n\n      const resolvedItems =\n        providedItems ??\n        items.slice(startBoundaries!, items.length - endBoundaries!)\n\n      return runIfFunc(ellipsis, { items: resolvedItems })\n    },\n    [ellipsis, endBoundaries, items, startBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    if (hasChildren) {\n      return validChildren.map((child, index) =>\n        cloneElement(child, {\n          separator,\n          gap,\n          isLastChild: validChildren.length === index + 1,\n        }),\n      )\n    } else {\n      let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n      return items.map((item, index) => {\n        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest } =\n          item\n        const isLastChild = items.length === index + 1\n        const props: BreadcrumbItemProps = {\n          separator,\n          gap,\n          isCurrentPage,\n          ...containerProps,\n        }\n\n        if (!hasBoundaries && isEllipsisPage) {\n          hiddenEllipsis.push(item)\n\n          return isLastChild ? (\n            <BreadcrumbItem key={index} {...props} isLastChild>\n              {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n            </BreadcrumbItem>\n          ) : null\n        }\n\n        if (hasBoundaries && isExceed) {\n          const lastIndex = items.length - index - 1\n\n          if (startBoundaries! <= index && endBoundaries! <= lastIndex) {\n            if (startBoundaries === index) {\n              return (\n                <BreadcrumbItem key={index} {...props}>\n                  {customEllipsis() ?? <BreadcrumbEllipsis />}\n                </BreadcrumbItem>\n              )\n            } else {\n              return null\n            }\n          }\n        }\n\n        if (hiddenEllipsis.length) {\n          const resolvedEllipsis = customEllipsis(hiddenEllipsis) ?? (\n            <BreadcrumbEllipsis />\n          )\n\n          hiddenEllipsis = []\n\n          return (\n            <Fragment key={index}>\n              <BreadcrumbItem {...props}>{resolvedEllipsis}</BreadcrumbItem>\n\n              <BreadcrumbItem {...props} isLastChild={isLastChild}>\n                <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n              </BreadcrumbItem>\n            </Fragment>\n          )\n        } else {\n          return (\n            <BreadcrumbItem key={index} {...props} isLastChild={isLastChild}>\n              <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n            </BreadcrumbItem>\n          )\n        }\n      })\n    }\n  }, [\n    hasChildren,\n    validChildren,\n    separator,\n    gap,\n    items,\n    hasBoundaries,\n    isExceed,\n    startBoundaries,\n    endBoundaries,\n    customEllipsis,\n  ])\n\n  return (\n    <BreadcrumbProvider value={styles}>\n      <ui.nav\n        ref={ref}\n        className={cx(\"ui-breadcrumb\", className)}\n        __css={styles.container}\n        {...rest}\n      >\n        <ui.ol className=\"ui-breadcrumb__list\" {...listProps} __css={css}>\n          {cloneChildren}\n        </ui.ol>\n      </ui.nav>\n    </BreadcrumbProvider>\n  )\n})\n\ntype BreadcrumbItemOptions = Pick<BreadcrumbProps, \"separator\" | \"gap\"> & {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n  /**\n   * If `true`, not show separator.\n   *\n   * @default false\n   */\n  isLastChild?: boolean\n}\n\nexport type BreadcrumbItemProps = HTMLUIProps<\"li\"> & BreadcrumbItemOptions\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemOptions, \"li\">(\n  (\n    {\n      className,\n      children,\n      separator,\n      isCurrentPage,\n      isLastChild,\n      gap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useBreadcrumb()\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) => {\n      if (child.type === BreadcrumbLink) {\n        return cloneElement(child, {\n          isCurrentPage,\n        })\n      }\n\n      if (child.type === BreadcrumbSeparator) {\n        return cloneElement(child, {\n          gap,\n          children: child.props.children || separator,\n        })\n      }\n\n      return child\n    })\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.item,\n    }\n\n    return (\n      <ui.li\n        ref={ref}\n        className={cx(\"ui-breadcrumb__item\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n\n        {!isLastChild ? (\n          <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n        ) : null}\n      </ui.li>\n    )\n  },\n)\n\ntype BreadcrumbLinkOptions = {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  isCurrentPage?: boolean\n}\n\nexport type BreadcrumbLinkProps = HTMLUIProps<\"a\"> & BreadcrumbLinkOptions\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n  ({ className, children, isCurrentPage, href, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    return (\n      <ui.a\n        ref={ref}\n        as={!isCurrentPage ? \"a\" : \"span\"}\n        href={!isCurrentPage ? href : undefined}\n        aria-current={isCurrentPage ? \"page\" : undefined}\n        className={cx(\"ui-breadcrumb__link\", className)}\n        __css={styles.link}\n        {...rest}\n      >\n        {children}\n      </ui.a>\n    )\n  },\n)\n\ntype BreadcrumbSeparatorOptions = {\n  /**\n   * The CSS `margin-inline-start`, and `margin-inline-end` property.\n   */\n  gap?: CSSUIObject[\"mx\"]\n}\n\nexport type BreadcrumbSeparatorProps = HTMLUIProps<\"span\"> &\n  BreadcrumbSeparatorOptions\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n  ({ children, gap: mx, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n    const css: CSSUIObject = {\n      mx,\n      ...styles.separator,\n    }\n\n    return (\n      <ui.span\n        ref={ref}\n        className=\"ui-breadcrumb__separator\"\n        __css={css}\n        {...rest}\n      >\n        {children}\n      </ui.span>\n    )\n  },\n)\n\ntype BreadcrumbEllipsisOptions = {}\n\nexport type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n  ({ children, className, ...rest }, ref) => {\n    const styles = useBreadcrumb()\n\n    const css: CSSUIObject = {\n      ...styles.ellipsis,\n    }\n\n    return (\n      children ?? (\n        <Icon\n          ref={ref}\n          aria-label=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__ellipsis\", className)}\n          __css={css}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 36 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          {...rest}\n        >\n          <circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n          <circle cx=\"30\" cy=\"12\" r=\"2\" fill=\"currentColor\" />\n        </Icon>\n      )\n    )\n  },\n)\n"],"mappings":"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","names":["rest","props"]}