@yamada-ui/breadcrumb 1.1.0 → 1.2.0-dev-20240522144008

package/dist/breadcrumb.d.mts

@@ -1,7 +1,13 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps, ThemeProps, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps, Token, CSSUIObject } from '@yamada-ui/core';
 import { IconProps } from '@yamada-ui/icon';
+import { ReactNode } from 'react';
 
+type BreadcrumbGenerateItem = BreadcrumbLinkProps & {
+    name?: ReactNode;
+    containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
+    isEllipsisPage?: boolean;
+};
 type BreadcrumbOptions = {
     /**
      * The visual separator between each breadcrumb item.
@@ -19,6 +25,24 @@ type BreadcrumbOptions = {
      * Props for ol element.
      */
     listProps?: HTMLUIProps<"ol">;
+    /**
+     * If provided, generate breadcrumb items based on items.
+     */
+    items?: BreadcrumbGenerateItem[];
+    /**
+     * Number of elements visible on the start(left) edges.
+     */
+    startBoundaries?: Token<number>;
+    /**
+     * Number of elements visible on the end(right) edges.
+     */
+    endBoundaries?: Token<number>;
+    /**
+     * The icon to be used in the ellipsis.
+     */
+    ellipsis?: ReactNode | ((props: {
+        items: BreadcrumbGenerateItem[];
+    }) => ReactNode);
 };
 type BreadcrumbProps = Omit<HTMLUIProps<"nav">, "gap"> & ThemeProps<"Breadcrumb"> & BreadcrumbOptions;
 /**
@@ -65,4 +89,4 @@ type BreadcrumbEllipsisOptions = {};
 type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions;
 declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
 
-export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, type BreadcrumbGenerateItem, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };

package/dist/breadcrumb.d.ts

@@ -1,7 +1,13 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps, ThemeProps, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps, Token, CSSUIObject } from '@yamada-ui/core';
 import { IconProps } from '@yamada-ui/icon';
+import { ReactNode } from 'react';
 
+type BreadcrumbGenerateItem = BreadcrumbLinkProps & {
+    name?: ReactNode;
+    containerProps?: Omit<BreadcrumbItemProps, "isLastChild">;
+    isEllipsisPage?: boolean;
+};
 type BreadcrumbOptions = {
     /**
      * The visual separator between each breadcrumb item.
@@ -19,6 +25,24 @@ type BreadcrumbOptions = {
      * Props for ol element.
      */
     listProps?: HTMLUIProps<"ol">;
+    /**
+     * If provided, generate breadcrumb items based on items.
+     */
+    items?: BreadcrumbGenerateItem[];
+    /**
+     * Number of elements visible on the start(left) edges.
+     */
+    startBoundaries?: Token<number>;
+    /**
+     * Number of elements visible on the end(right) edges.
+     */
+    endBoundaries?: Token<number>;
+    /**
+     * The icon to be used in the ellipsis.
+     */
+    ellipsis?: ReactNode | ((props: {
+        items: BreadcrumbGenerateItem[];
+    }) => ReactNode);
 };
 type BreadcrumbProps = Omit<HTMLUIProps<"nav">, "gap"> & ThemeProps<"Breadcrumb"> & BreadcrumbOptions;
 /**
@@ -65,4 +89,4 @@ type BreadcrumbEllipsisOptions = {};
 type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions;
 declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
 
-export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, type BreadcrumbGenerateItem, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };

package/dist/breadcrumb.js

@@ -30,6 +30,7 @@ __export(breadcrumb_exports, {
 module.exports = __toCommonJS(breadcrumb_exports);
 var import_core = require("@yamada-ui/core");
 var import_icon = require("@yamada-ui/icon");
+var import_use_value = require("@yamada-ui/use-value");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -45,22 +46,99 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
     separator = "/",
     gap = "fallback(2, 0.5rem)",
     listProps,
+    items = [],
+    startBoundaries: _startBoundaries,
+    endBoundaries: _endBoundaries,
+    ellipsis,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
+  let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
+  let endBoundaries = (0, import_use_value.useValue)(_endBoundaries);
+  if (startBoundaries === 0)
+    startBoundaries = 1;
+  if (endBoundaries === 0)
+    endBoundaries = 1;
+  if (startBoundaries)
+    endBoundaries != null ? endBoundaries : endBoundaries = 1;
+  if (endBoundaries)
+    startBoundaries != null ? startBoundaries : startBoundaries = 1;
+  const hasBoundaries = (0, import_utils.isNumber)(startBoundaries) && (0, import_utils.isNumber)(endBoundaries);
+  const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
   const css = {
     display: "flex",
     alignItems: "center",
     ...styles.list
   };
   const validChildren = (0, import_utils.getValidChildren)(children);
-  const count = validChildren.length;
-  const cloneChildren = validChildren.map(
-    (child, index) => (0, import_react.cloneElement)(child, {
-      separator,
-      gap,
-      isLastChild: count === index + 1
-    })
+  const hasChildren = validChildren.length;
+  const customEllipsis = (0, import_react.useCallback)(
+    (providedItems) => {
+      if (!ellipsis)
+        return null;
+      const resolvedItems = providedItems != null ? providedItems : items.slice(startBoundaries, items.length - endBoundaries);
+      return (0, import_utils.runIfFunc)(ellipsis, { items: resolvedItems });
+    },
+    [ellipsis, endBoundaries, items, startBoundaries]
   );
+  const cloneChildren = (0, import_react.useMemo)(() => {
+    if (hasChildren) {
+      return validChildren.map(
+        (child, index) => (0, import_react.cloneElement)(child, {
+          separator,
+          gap,
+          isLastChild: validChildren.length === index + 1
+        })
+      );
+    } else {
+      let hiddenEllipsis = [];
+      return items.map((item, index) => {
+        var _a, _b, _c;
+        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest2 } = item;
+        const isLastChild = items.length === index + 1;
+        const props2 = {
+          separator,
+          gap,
+          isCurrentPage,
+          ...containerProps
+        };
+        if (!hasBoundaries && isEllipsisPage) {
+          hiddenEllipsis.push(item);
+          return isLastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild: true, children: (_a = customEllipsis([item])) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index) : null;
+        }
+        if (hasBoundaries && isExceed) {
+          const lastIndex = items.length - index - 1;
+          if (startBoundaries <= index && endBoundaries <= lastIndex) {
+            if (startBoundaries === index) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: (_b = customEllipsis()) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index);
+            } else {
+              return null;
+            }
+          }
+        }
+        if (hiddenEllipsis.length) {
+          const resolvedEllipsis = (_c = customEllipsis(hiddenEllipsis)) != null ? _c : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {});
+          hiddenEllipsis = [];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: resolvedEllipsis }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) })
+          ] }, index);
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) }, index);
+        }
+      });
+    }
+  }, [
+    hasChildren,
+    validChildren,
+    separator,
+    gap,
+    items,
+    hasBoundaries,
+    isExceed,
+    startBoundaries,
+    endBoundaries,
+    customEllipsis
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.nav,
     {
@@ -165,7 +243,7 @@ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
       import_icon.Icon,
       {
         ref,
-        title: "ellipsis",
+        "aria-label": "ellipsis",
         className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
         __css: css,
         xmlns: "http://www.w3.org/2000/svg",

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} 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 { cx, createContext, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement } 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\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\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    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const count = validChildren.length\n\n  const cloneChildren = validChildren.map((child, index) =>\n    cloneElement(child, {\n      separator,\n      gap,\n      isLastChild: count === index + 1,\n    }),\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__item__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          title=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__item__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":[]}
+{"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__item__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__item__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-WW46WLRE.mjs";
+} from "./chunk-IYGYNO65.mjs";
 export {
   Breadcrumb,
   BreadcrumbEllipsis,

package/dist/{chunk-WW46WLRE.mjs → chunk-IYGYNO65.mjs}

@@ -8,8 +8,15 @@ import {
   useMultiComponentStyle
 } from "@yamada-ui/core";
 import { Icon } from "@yamada-ui/icon";
-import { cx, createContext, getValidChildren } from "@yamada-ui/utils";
-import { cloneElement } from "react";
+import { useValue } from "@yamada-ui/use-value";
+import {
+  cx,
+  createContext,
+  getValidChildren,
+  isNumber,
+  runIfFunc
+} from "@yamada-ui/utils";
+import { Fragment, cloneElement, useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var [BreadcrumbProvider, useBreadcrumb] = createContext({
   name: "BreadcrumbContext",
@@ -23,22 +30,99 @@ var Breadcrumb = forwardRef((props, ref) => {
     separator = "/",
     gap = "fallback(2, 0.5rem)",
     listProps,
+    items = [],
+    startBoundaries: _startBoundaries,
+    endBoundaries: _endBoundaries,
+    ellipsis,
     ...rest
   } = omitThemeProps(mergedProps);
+  let startBoundaries = useValue(_startBoundaries);
+  let endBoundaries = useValue(_endBoundaries);
+  if (startBoundaries === 0)
+    startBoundaries = 1;
+  if (endBoundaries === 0)
+    endBoundaries = 1;
+  if (startBoundaries)
+    endBoundaries != null ? endBoundaries : endBoundaries = 1;
+  if (endBoundaries)
+    startBoundaries != null ? startBoundaries : startBoundaries = 1;
+  const hasBoundaries = isNumber(startBoundaries) && isNumber(endBoundaries);
+  const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
   const css = {
     display: "flex",
     alignItems: "center",
     ...styles.list
   };
   const validChildren = getValidChildren(children);
-  const count = validChildren.length;
-  const cloneChildren = validChildren.map(
-    (child, index) => cloneElement(child, {
-      separator,
-      gap,
-      isLastChild: count === index + 1
-    })
+  const hasChildren = validChildren.length;
+  const customEllipsis = useCallback(
+    (providedItems) => {
+      if (!ellipsis)
+        return null;
+      const resolvedItems = providedItems != null ? providedItems : items.slice(startBoundaries, items.length - endBoundaries);
+      return runIfFunc(ellipsis, { items: resolvedItems });
+    },
+    [ellipsis, endBoundaries, items, startBoundaries]
   );
+  const cloneChildren = useMemo(() => {
+    if (hasChildren) {
+      return validChildren.map(
+        (child, index) => cloneElement(child, {
+          separator,
+          gap,
+          isLastChild: validChildren.length === index + 1
+        })
+      );
+    } else {
+      let hiddenEllipsis = [];
+      return items.map((item, index) => {
+        var _a, _b, _c;
+        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest2 } = item;
+        const isLastChild = items.length === index + 1;
+        const props2 = {
+          separator,
+          gap,
+          isCurrentPage,
+          ...containerProps
+        };
+        if (!hasBoundaries && isEllipsisPage) {
+          hiddenEllipsis.push(item);
+          return isLastChild ? /* @__PURE__ */ jsx(BreadcrumbItem, { ...props2, isLastChild: true, children: (_a = customEllipsis([item])) != null ? _a : /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }, index) : null;
+        }
+        if (hasBoundaries && isExceed) {
+          const lastIndex = items.length - index - 1;
+          if (startBoundaries <= index && endBoundaries <= lastIndex) {
+            if (startBoundaries === index) {
+              return /* @__PURE__ */ jsx(BreadcrumbItem, { ...props2, children: (_b = customEllipsis()) != null ? _b : /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }, index);
+            } else {
+              return null;
+            }
+          }
+        }
+        if (hiddenEllipsis.length) {
+          const resolvedEllipsis = (_c = customEllipsis(hiddenEllipsis)) != null ? _c : /* @__PURE__ */ jsx(BreadcrumbEllipsis, {});
+          hiddenEllipsis = [];
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(BreadcrumbItem, { ...props2, children: resolvedEllipsis }),
+            /* @__PURE__ */ jsx(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ jsx(BreadcrumbLink, { ...rest2, children: name }) })
+          ] }, index);
+        } else {
+          return /* @__PURE__ */ jsx(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ jsx(BreadcrumbLink, { ...rest2, children: name }) }, index);
+        }
+      });
+    }
+  }, [
+    hasChildren,
+    validChildren,
+    separator,
+    gap,
+    items,
+    hasBoundaries,
+    isExceed,
+    startBoundaries,
+    endBoundaries,
+    customEllipsis
+  ]);
   return /* @__PURE__ */ jsx(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ jsx(
     ui.nav,
     {
@@ -143,7 +227,7 @@ var BreadcrumbEllipsis = forwardRef(
       Icon,
       {
         ref,
-        title: "ellipsis",
+        "aria-label": "ellipsis",
         className: cx("ui-breadcrumb__item__ellipsis", className),
         __css: css,
         xmlns: "http://www.w3.org/2000/svg",
@@ -170,4 +254,4 @@ export {
   BreadcrumbSeparator,
   BreadcrumbEllipsis
 };
-//# sourceMappingURL=chunk-WW46WLRE.mjs.map
+//# sourceMappingURL=chunk-IYGYNO65.mjs.map

package/dist/chunk-IYGYNO65.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.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__item__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__item__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":";;;AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU,cAAc,aAAa,eAAe;AA2IpB,cA6B7B,YA7B6B;AAzIzC,IAAM,CAAC,oBAAoB,aAAa,IAAI,cAE1C;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,aAAa,WAAmC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,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,IAAI,eAAe,WAAW;AAC9B,MAAI,kBAAkB,SAAS,gBAAgB;AAC/C,MAAI,gBAAgB,SAAS,cAAc;AAE3C,MAAI,oBAAoB;AAAG,sBAAkB;AAC7C,MAAI,kBAAkB;AAAG,oBAAgB;AAEzC,MAAI;AAAiB,4DAAkB;AACvC,MAAI;AAAe,kEAAoB;AAEvC,QAAM,gBAAgB,SAAS,eAAe,KAAK,SAAS,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,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,cAAc,cAAc;AAElC,QAAM,iBAAiB;AAAA,IACrB,CAAC,kBAA6C;AAC5C,UAAI,CAAC;AAAU,eAAO;AAEtB,YAAM,gBACJ,wCACA,MAAM,MAAM,iBAAkB,MAAM,SAAS,aAAc;AAE7D,aAAO,UAAU,UAAU,EAAE,OAAO,cAAc,CAAC;AAAA,IACrD;AAAA,IACA,CAAC,UAAU,eAAe,OAAO,eAAe;AAAA,EAClD;AAEA,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,aAAa;AACf,aAAO,cAAc;AAAA,QAAI,CAAC,OAAO,UAC/B,aAAa,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,oBAAC,kBAA4B,GAAGA,QAAO,aAAW,MAC/C,+BAAe,CAAC,IAAI,CAAC,MAArB,YAA0B,oBAAC,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,oBAAC,kBAA4B,GAAGA,QAC7B,+BAAe,MAAf,YAAoB,oBAAC,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,oBAAC,sBAAmB;AAGtB,2BAAiB,CAAC;AAElB,iBACE,qBAAC,YACC;AAAA,gCAAC,kBAAgB,GAAGA,QAAQ,4BAAiB;AAAA,YAE7C,oBAAC,kBAAgB,GAAGA,QAAO,aACzB,8BAAC,kBAAgB,GAAGD,OAAO,gBAAK,GAClC;AAAA,eALa,KAMf;AAAA,QAEJ,OAAO;AACL,iBACE,oBAAC,kBAA4B,GAAGC,QAAO,aACrC,8BAAC,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,oBAAC,sBAAmB,OAAO,QACzB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACxC,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEJ,8BAAC,GAAG,IAAH,EAAM,WAAU,uBAAuB,GAAG,WAAW,OAAO,KAC1D,yBACH;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAmBM,IAAM,iBAAiB;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,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,gBAAgB;AACjC,eAAO,aAAa,OAAO;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UAAI,MAAM,SAAS,qBAAqB;AACtC,eAAO,aAAa,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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,UAEA,CAAC,cACA,oBAAC,uBAAoB,KAAW,qBAAU,IACxC;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAaO,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,eAAe,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC9D,UAAM,SAAS,cAAc;AAE7B,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,IAAI,CAAC,gBAAgB,MAAM;AAAA,QAC3B,MAAM,CAAC,gBAAgB,OAAO;AAAA,QAC9B,gBAAc,gBAAgB,SAAS;AAAA,QACvC,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAYO,IAAM,sBAAsB;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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMO,IAAM,qBAAqB;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,WAAW,GAAG,iCAAiC,SAAS;AAAA,QACxD,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,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA,UAClD,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe;AAAA;AAAA;AAAA,IACpD;AAAA,EAGN;AACF;","names":["rest","props"]}

package/dist/index.d.mts

@@ -1,3 +1,4 @@
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.mjs';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbGenerateItem, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.mjs';
 import '@yamada-ui/core';
 import '@yamada-ui/icon';
+import 'react';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.js';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbGenerateItem, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.js';
 import '@yamada-ui/core';
 import '@yamada-ui/icon';
+import 'react';

package/dist/index.js

@@ -32,6 +32,7 @@ module.exports = __toCommonJS(src_exports);
 // src/breadcrumb.tsx
 var import_core = require("@yamada-ui/core");
 var import_icon = require("@yamada-ui/icon");
+var import_use_value = require("@yamada-ui/use-value");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -47,22 +48,99 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
     separator = "/",
     gap = "fallback(2, 0.5rem)",
     listProps,
+    items = [],
+    startBoundaries: _startBoundaries,
+    endBoundaries: _endBoundaries,
+    ellipsis,
     ...rest
   } = (0, import_core.omitThemeProps)(mergedProps);
+  let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
+  let endBoundaries = (0, import_use_value.useValue)(_endBoundaries);
+  if (startBoundaries === 0)
+    startBoundaries = 1;
+  if (endBoundaries === 0)
+    endBoundaries = 1;
+  if (startBoundaries)
+    endBoundaries != null ? endBoundaries : endBoundaries = 1;
+  if (endBoundaries)
+    startBoundaries != null ? startBoundaries : startBoundaries = 1;
+  const hasBoundaries = (0, import_utils.isNumber)(startBoundaries) && (0, import_utils.isNumber)(endBoundaries);
+  const isExceed = hasBoundaries && startBoundaries + endBoundaries < items.length;
   const css = {
     display: "flex",
     alignItems: "center",
     ...styles.list
   };
   const validChildren = (0, import_utils.getValidChildren)(children);
-  const count = validChildren.length;
-  const cloneChildren = validChildren.map(
-    (child, index) => (0, import_react.cloneElement)(child, {
-      separator,
-      gap,
-      isLastChild: count === index + 1
-    })
+  const hasChildren = validChildren.length;
+  const customEllipsis = (0, import_react.useCallback)(
+    (providedItems) => {
+      if (!ellipsis)
+        return null;
+      const resolvedItems = providedItems != null ? providedItems : items.slice(startBoundaries, items.length - endBoundaries);
+      return (0, import_utils.runIfFunc)(ellipsis, { items: resolvedItems });
+    },
+    [ellipsis, endBoundaries, items, startBoundaries]
   );
+  const cloneChildren = (0, import_react.useMemo)(() => {
+    if (hasChildren) {
+      return validChildren.map(
+        (child, index) => (0, import_react.cloneElement)(child, {
+          separator,
+          gap,
+          isLastChild: validChildren.length === index + 1
+        })
+      );
+    } else {
+      let hiddenEllipsis = [];
+      return items.map((item, index) => {
+        var _a, _b, _c;
+        const { containerProps, name, isCurrentPage, isEllipsisPage, ...rest2 } = item;
+        const isLastChild = items.length === index + 1;
+        const props2 = {
+          separator,
+          gap,
+          isCurrentPage,
+          ...containerProps
+        };
+        if (!hasBoundaries && isEllipsisPage) {
+          hiddenEllipsis.push(item);
+          return isLastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild: true, children: (_a = customEllipsis([item])) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index) : null;
+        }
+        if (hasBoundaries && isExceed) {
+          const lastIndex = items.length - index - 1;
+          if (startBoundaries <= index && endBoundaries <= lastIndex) {
+            if (startBoundaries === index) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: (_b = customEllipsis()) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, index);
+            } else {
+              return null;
+            }
+          }
+        }
+        if (hiddenEllipsis.length) {
+          const resolvedEllipsis = (_c = customEllipsis(hiddenEllipsis)) != null ? _c : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {});
+          hiddenEllipsis = [];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, children: resolvedEllipsis }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) })
+          ] }, index);
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { ...props2, isLastChild, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { ...rest2, children: name }) }, index);
+        }
+      });
+    }
+  }, [
+    hasChildren,
+    validChildren,
+    separator,
+    gap,
+    items,
+    hasBoundaries,
+    isExceed,
+    startBoundaries,
+    endBoundaries,
+    customEllipsis
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_core.ui.nav,
     {
@@ -167,7 +245,7 @@ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
       import_icon.Icon,
       {
         ref,
-        title: "ellipsis",
+        "aria-label": "ellipsis",
         className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
         __css: css,
         xmlns: "http://www.w3.org/2000/svg",

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} from \"./breadcrumb\"\n","import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\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 { cx, createContext, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement } 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\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\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    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const count = validChildren.length\n\n  const cloneChildren = validChildren.map((child, index) =>\n    cloneElement(child, {\n      separator,\n      gap,\n      isLastChild: count === index + 1,\n    }),\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__item__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          title=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__item__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":[]}
+{"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__item__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__item__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.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/breadcrumb",
-  "version": "1.1.0",
+  "version": "1.2.0-dev-20240522144008",
   "description": "Yamada UI breadcrumb component",
   "keywords": [
     "yamada",
@@ -37,8 +37,9 @@
   },
   "dependencies": {
     "@yamada-ui/core": "1.6.7",
+    "@yamada-ui/icon": "1.0.25",
     "@yamada-ui/utils": "1.2.0",
-    "@yamada-ui/icon": "1.0.25"
+    "@yamada-ui/use-value": "1.1.13"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-WW46WLRE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n  HTMLUIProps,\n  ThemeProps,\n  CSSUIObject,\n  CSSUIProps,\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 { cx, createContext, getValidChildren } from \"@yamada-ui/utils\"\nimport { cloneElement } 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\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\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    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...styles.list,\n  }\n\n  const validChildren = getValidChildren(children)\n  const count = validChildren.length\n\n  const cloneChildren = validChildren.map((child, index) =>\n    cloneElement(child, {\n      separator,\n      gap,\n      isLastChild: count === index + 1,\n    }),\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__item__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          title=\"ellipsis\"\n          className={cx(\"ui-breadcrumb__item__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":[]}