@yamada-ui/breadcrumb 1.3.20 → 1.4.0-dev-20241205150741

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/breadcrumb.d.mts +5 -1
  2. package/dist/breadcrumb.d.ts +5 -1
  3. package/dist/breadcrumb.js +19 -7
  4. package/dist/breadcrumb.js.map +1 -1
  5. package/dist/breadcrumb.mjs +1 -1
  6. package/dist/{chunk-656NBCTV.mjs → chunk-SURY6IPI.mjs} +20 -8
  7. package/dist/chunk-SURY6IPI.mjs.map +1 -0
  8. package/dist/index.js +19 -7
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +1 -1
  11. package/package.json +5 -5
  12. package/dist/chunk-656NBCTV.mjs.map +0 -1
package/dist/breadcrumb.d.mts CHANGED
@@ -48,6 +48,10 @@ interface BreadcrumbOptions {
48
48
  * Props for ol element.
49
49
  */
50
50
  listProps?: HTMLUIProps<"ol">;
51
+ /**
52
+ * Props for separator element.
53
+ */
54
+ separatorProps?: BreadcrumbSeparatorProps;
51
55
  }
52
56
  interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
53
57
  }
@@ -57,7 +61,7 @@ interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"B
57
61
  * @see Docs https://yamada-ui.com/components/navigation/breadcrumb
58
62
  */
59
63
  declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
60
- interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator"> {
64
+ interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator" | "separatorProps"> {
61
65
  /**
62
66
  * If `true`, change to span element.
63
67
  *
package/dist/breadcrumb.d.ts CHANGED
@@ -48,6 +48,10 @@ interface BreadcrumbOptions {
48
48
  * Props for ol element.
49
49
  */
50
50
  listProps?: HTMLUIProps<"ol">;
51
+ /**
52
+ * Props for separator element.
53
+ */
54
+ separatorProps?: BreadcrumbSeparatorProps;
51
55
  }
52
56
  interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"Breadcrumb">, BreadcrumbOptions {
53
57
  }
@@ -57,7 +61,7 @@ interface BreadcrumbProps extends Omit<HTMLUIProps<"nav">, "gap">, ThemeProps<"B
57
61
  * @see Docs https://yamada-ui.com/components/navigation/breadcrumb
58
62
  */
59
63
  declare const Breadcrumb: _yamada_ui_core.Component<"nav", BreadcrumbProps>;
60
- interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator"> {
64
+ interface BreadcrumbItemOptions extends Pick<BreadcrumbProps, "gap" | "separator" | "separatorProps"> {
61
65
  /**
62
66
  * If `true`, change to span element.
63
67
  *
package/dist/breadcrumb.js CHANGED
@@ -50,6 +50,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
50
50
  separator = "/",
51
51
  startBoundaries: _startBoundaries,
52
52
  listProps,
53
+ separatorProps,
53
54
  ...rest
54
55
  } = (0, import_core.omitThemeProps)(mergedProps);
55
56
  let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
@@ -144,7 +145,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
144
145
  endBoundaries,
145
146
  customEllipsis
146
147
  ]);
147
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: { styles, separatorProps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
149
  import_core.ui.nav,
149
150
  {
150
151
  ref,
@@ -168,11 +169,12 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
168
169
  isLastChild,
169
170
  lastChild,
170
171
  separator,
172
+ separatorProps,
171
173
  ...rest
172
174
  }, ref) => {
175
+ const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb();
173
176
  currentPage != null ? currentPage : currentPage = isCurrentPage;
174
177
  lastChild != null ? lastChild : lastChild = isLastChild;
175
- const styles = useBreadcrumb();
176
178
  const validChildren = (0, import_utils.getValidChildren)(children);
177
179
  const cloneChildren = validChildren.map((child) => {
178
180
  if (child.type === BreadcrumbLink) {
@@ -183,7 +185,9 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
183
185
  if (child.type === BreadcrumbSeparator) {
184
186
  return (0, import_react.cloneElement)(child, {
185
187
  children: child.props.children || separator,
186
- gap
188
+ gap,
189
+ ...groupSeparatorProps,
190
+ ...separatorProps
187
191
  });
188
192
  }
189
193
  return child;
@@ -202,7 +206,15 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
202
206
  ...rest,
203
207
  children: [
204
208
  cloneChildren,
205
- !lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbSeparator, { gap, children: separator }) : null
209
+ !lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
210
+ BreadcrumbSeparator,
211
+ {
212
+ gap,
213
+ ...groupSeparatorProps,
214
+ ...separatorProps,
215
+ children: separator
216
+ }
217
+ ) : null
206
218
  ]
207
219
  }
208
220
  );
@@ -212,8 +224,8 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
212
224
  BreadcrumbItem.__ui__ = "BreadcrumbItem";
213
225
  var BreadcrumbLink = (0, import_core.forwardRef)(
214
226
  ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {
227
+ const { styles } = useBreadcrumb();
215
228
  currentPage != null ? currentPage : currentPage = isCurrentPage;
216
- const styles = useBreadcrumb();
217
229
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
218
230
  import_core.ui.a,
219
231
  {
@@ -233,7 +245,7 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
233
245
  BreadcrumbLink.__ui__ = "BreadcrumbLink";
234
246
  var BreadcrumbSeparator = (0, import_core.forwardRef)(
235
247
  ({ children, gap: mx, ...rest }, ref) => {
236
- const styles = useBreadcrumb();
248
+ const { styles } = useBreadcrumb();
237
249
  const css = {
238
250
  mx,
239
251
  ...styles.separator
@@ -254,7 +266,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
254
266
  BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
255
267
  var BreadcrumbEllipsis = (0, import_core.forwardRef)(
256
268
  ({ className, children, ...rest }, ref) => {
257
- const styles = useBreadcrumb();
269
+ const { styles } = useBreadcrumb();
258
270
  const css = {
259
271
  ...styles.ellipsis
260
272
  };
package/dist/breadcrumb.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\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 aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\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 currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n currentPage ??= isCurrentPage\n\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
1
+ {"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\ninterface BreadcrumbContext {\n styles: { [key: string]: CSSUIObject | undefined }\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<BreadcrumbContext>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * Props for separator element.\n */\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n separatorProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={{ styles, separatorProps }}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\" | \"separatorProps\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n separatorProps,\n ...rest\n },\n ref,\n ) => {\n const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n ...groupSeparatorProps,\n ...separatorProps,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator\n gap={gap}\n {...groupSeparatorProps}\n {...separatorProps}\n >\n {separator}\n </BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
package/dist/breadcrumb.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  BreadcrumbItem,
6
6
  BreadcrumbLink,
7
7
  BreadcrumbSeparator
8
- } from "./chunk-656NBCTV.mjs";
8
+ } from "./chunk-SURY6IPI.mjs";
9
9
  export {
10
10
  Breadcrumb,
11
11
  BreadcrumbEllipsis,
package/dist/{chunk-656NBCTV.mjs → chunk-SURY6IPI.mjs} RENAMED
@@ -34,6 +34,7 @@ var Breadcrumb = forwardRef((props, ref) => {
34
34
  separator = "/",
35
35
  startBoundaries: _startBoundaries,
36
36
  listProps,
37
+ separatorProps,
37
38
  ...rest
38
39
  } = omitThemeProps(mergedProps);
39
40
  let startBoundaries = useValue(_startBoundaries);
@@ -128,7 +129,7 @@ var Breadcrumb = forwardRef((props, ref) => {
128
129
  endBoundaries,
129
130
  customEllipsis
130
131
  ]);
131
- return /* @__PURE__ */ jsx(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ jsx(
132
+ return /* @__PURE__ */ jsx(BreadcrumbProvider, { value: { styles, separatorProps }, children: /* @__PURE__ */ jsx(
132
133
  ui.nav,
133
134
  {
134
135
  ref,
@@ -152,11 +153,12 @@ var BreadcrumbItem = forwardRef(
152
153
  isLastChild,
153
154
  lastChild,
154
155
  separator,
156
+ separatorProps,
155
157
  ...rest
156
158
  }, ref) => {
159
+ const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb();
157
160
  currentPage != null ? currentPage : currentPage = isCurrentPage;
158
161
  lastChild != null ? lastChild : lastChild = isLastChild;
159
- const styles = useBreadcrumb();
160
162
  const validChildren = getValidChildren(children);
161
163
  const cloneChildren = validChildren.map((child) => {
162
164
  if (child.type === BreadcrumbLink) {
@@ -167,7 +169,9 @@ var BreadcrumbItem = forwardRef(
167
169
  if (child.type === BreadcrumbSeparator) {
168
170
  return cloneElement(child, {
169
171
  children: child.props.children || separator,
170
- gap
172
+ gap,
173
+ ...groupSeparatorProps,
174
+ ...separatorProps
171
175
  });
172
176
  }
173
177
  return child;
@@ -186,7 +190,15 @@ var BreadcrumbItem = forwardRef(
186
190
  ...rest,
187
191
  children: [
188
192
  cloneChildren,
189
- !lastChild ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { gap, children: separator }) : null
193
+ !lastChild ? /* @__PURE__ */ jsx(
194
+ BreadcrumbSeparator,
195
+ {
196
+ gap,
197
+ ...groupSeparatorProps,
198
+ ...separatorProps,
199
+ children: separator
200
+ }
201
+ ) : null
190
202
  ]
191
203
  }
192
204
  );
@@ -196,8 +208,8 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
196
208
  BreadcrumbItem.__ui__ = "BreadcrumbItem";
197
209
  var BreadcrumbLink = forwardRef(
198
210
  ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {
211
+ const { styles } = useBreadcrumb();
199
212
  currentPage != null ? currentPage : currentPage = isCurrentPage;
200
- const styles = useBreadcrumb();
201
213
  return /* @__PURE__ */ jsx(
202
214
  ui.a,
203
215
  {
@@ -217,7 +229,7 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
217
229
  BreadcrumbLink.__ui__ = "BreadcrumbLink";
218
230
  var BreadcrumbSeparator = forwardRef(
219
231
  ({ children, gap: mx, ...rest }, ref) => {
220
- const styles = useBreadcrumb();
232
+ const { styles } = useBreadcrumb();
221
233
  const css = {
222
234
  mx,
223
235
  ...styles.separator
@@ -238,7 +250,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
238
250
  BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
239
251
  var BreadcrumbEllipsis = forwardRef(
240
252
  ({ className, children, ...rest }, ref) => {
241
- const styles = useBreadcrumb();
253
+ const { styles } = useBreadcrumb();
242
254
  const css = {
243
255
  ...styles.ellipsis
244
256
  };
@@ -275,4 +287,4 @@ export {
275
287
  BreadcrumbSeparator,
276
288
  BreadcrumbEllipsis
277
289
  };
278
- //# sourceMappingURL=chunk-656NBCTV.mjs.map
290
+ //# sourceMappingURL=chunk-SURY6IPI.mjs.map
package/dist/chunk-SURY6IPI.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\ninterface BreadcrumbContext {\n styles: { [key: string]: CSSUIObject | undefined }\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<BreadcrumbContext>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * Props for separator element.\n */\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n separatorProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={{ styles, separatorProps }}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\" | \"separatorProps\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n separatorProps,\n ...rest\n },\n ref,\n ) => {\n const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n ...groupSeparatorProps,\n ...separatorProps,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator\n gap={gap}\n {...groupSeparatorProps}\n {...separatorProps}\n >\n {separator}\n </BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
package/dist/index.js CHANGED
@@ -52,6 +52,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
52
52
  separator = "/",
53
53
  startBoundaries: _startBoundaries,
54
54
  listProps,
55
+ separatorProps,
55
56
  ...rest
56
57
  } = (0, import_core.omitThemeProps)(mergedProps);
57
58
  let startBoundaries = (0, import_use_value.useValue)(_startBoundaries);
@@ -146,7 +147,7 @@ var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
146
147
  endBoundaries,
147
148
  customEllipsis
148
149
  ]);
149
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
150
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbProvider, { value: { styles, separatorProps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
150
151
  import_core.ui.nav,
151
152
  {
152
153
  ref,
@@ -170,11 +171,12 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
170
171
  isLastChild,
171
172
  lastChild,
172
173
  separator,
174
+ separatorProps,
173
175
  ...rest
174
176
  }, ref) => {
177
+ const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb();
175
178
  currentPage != null ? currentPage : currentPage = isCurrentPage;
176
179
  lastChild != null ? lastChild : lastChild = isLastChild;
177
- const styles = useBreadcrumb();
178
180
  const validChildren = (0, import_utils.getValidChildren)(children);
179
181
  const cloneChildren = validChildren.map((child) => {
180
182
  if (child.type === BreadcrumbLink) {
@@ -185,7 +187,9 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
185
187
  if (child.type === BreadcrumbSeparator) {
186
188
  return (0, import_react.cloneElement)(child, {
187
189
  children: child.props.children || separator,
188
- gap
190
+ gap,
191
+ ...groupSeparatorProps,
192
+ ...separatorProps
189
193
  });
190
194
  }
191
195
  return child;
@@ -204,7 +208,15 @@ var BreadcrumbItem = (0, import_core.forwardRef)(
204
208
  ...rest,
205
209
  children: [
206
210
  cloneChildren,
207
- !lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbSeparator, { gap, children: separator }) : null
211
+ !lastChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
212
+ BreadcrumbSeparator,
213
+ {
214
+ gap,
215
+ ...groupSeparatorProps,
216
+ ...separatorProps,
217
+ children: separator
218
+ }
219
+ ) : null
208
220
  ]
209
221
  }
210
222
  );
@@ -214,8 +226,8 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
214
226
  BreadcrumbItem.__ui__ = "BreadcrumbItem";
215
227
  var BreadcrumbLink = (0, import_core.forwardRef)(
216
228
  ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {
229
+ const { styles } = useBreadcrumb();
217
230
  currentPage != null ? currentPage : currentPage = isCurrentPage;
218
- const styles = useBreadcrumb();
219
231
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
220
232
  import_core.ui.a,
221
233
  {
@@ -235,7 +247,7 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
235
247
  BreadcrumbLink.__ui__ = "BreadcrumbLink";
236
248
  var BreadcrumbSeparator = (0, import_core.forwardRef)(
237
249
  ({ children, gap: mx, ...rest }, ref) => {
238
- const styles = useBreadcrumb();
250
+ const { styles } = useBreadcrumb();
239
251
  const css = {
240
252
  mx,
241
253
  ...styles.separator
@@ -256,7 +268,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
256
268
  BreadcrumbSeparator.__ui__ = "BreadcrumbSeparator";
257
269
  var BreadcrumbEllipsis = (0, import_core.forwardRef)(
258
270
  ({ className, children, ...rest }, ref) => {
259
- const styles = useBreadcrumb();
271
+ const { styles } = useBreadcrumb();
260
272
  const css = {
261
273
  ...styles.ellipsis
262
274
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n} from \"./breadcrumb\"\nexport type {\n BreadcrumbEllipsisProps,\n BreadcrumbGenerateItem,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbProps,\n BreadcrumbSeparatorProps,\n} from \"./breadcrumb\"\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\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 aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\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 currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n currentPage ??= isCurrentPage\n\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n} from \"./breadcrumb\"\nexport type {\n BreadcrumbEllipsisProps,\n BreadcrumbGenerateItem,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbProps,\n BreadcrumbSeparatorProps,\n} from \"./breadcrumb\"\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\ninterface BreadcrumbContext {\n styles: { [key: string]: CSSUIObject | undefined }\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<BreadcrumbContext>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n /**\n * Props for separator element.\n */\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\n separatorProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\n startBoundaries,\n endBoundaries,\n customEllipsis,\n ])\n\n return (\n <BreadcrumbProvider value={{ styles, separatorProps }}>\n <ui.nav\n ref={ref}\n className={cx(\"ui-breadcrumb\", className)}\n aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\" | \"separatorProps\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n separatorProps,\n ...rest\n },\n ref,\n ) => {\n const { styles, separatorProps: groupSeparatorProps } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type === BreadcrumbLink) {\n return cloneElement(child, {\n currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n ...groupSeparatorProps,\n ...separatorProps,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator\n gap={gap}\n {...groupSeparatorProps}\n {...separatorProps}\n >\n {separator}\n </BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\n currentPage ??= isCurrentPage\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\n BreadcrumbSeparatorOptions {}\n\nexport const BreadcrumbSeparator = forwardRef<BreadcrumbSeparatorProps, \"span\">(\n ({ children, gap: mx, ...rest }, ref) => {\n const { styles } = useBreadcrumb()\n\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}
package/dist/index.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  BreadcrumbItem,
6
6
  BreadcrumbLink,
7
7
  BreadcrumbSeparator
8
- } from "./chunk-656NBCTV.mjs";
8
+ } from "./chunk-SURY6IPI.mjs";
9
9
  export {
10
10
  Breadcrumb,
11
11
  BreadcrumbEllipsis,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/breadcrumb",
3
- "version": "1.3.20",
3
+ "version": "1.4.0-dev-20241205150741",
4
4
  "description": "Yamada UI breadcrumb component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,10 +36,10 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.16.0",
40
- "@yamada-ui/icon": "1.1.15",
41
- "@yamada-ui/use-value": "1.1.32",
42
- "@yamada-ui/utils": "1.6.0"
39
+ "@yamada-ui/core": "1.16.1-dev-20241205150741",
40
+ "@yamada-ui/icon": "1.1.16-dev-20241205150741",
41
+ "@yamada-ui/use-value": "1.1.33-dev-20241205150741",
42
+ "@yamada-ui/utils": "1.6.1-dev-20241205150741"
43
43
  },
44
44
  "devDependencies": {
45
45
  "clean-package": "2.2.0",
package/dist/chunk-656NBCTV.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/breadcrumb.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { ReactElement, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport {\n createContext,\n cx,\n getValidChildren,\n isNumber,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, Fragment, useCallback, useMemo } from \"react\"\n\nconst [BreadcrumbProvider, useBreadcrumb] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: \"BreadcrumbContext\",\n errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in \"<Breadcrumb />\" `,\n})\n\nexport interface BreadcrumbGenerateItem extends BreadcrumbLinkProps {\n name?: ReactNode\n ellipsisPage?: boolean\n /**\n *\n * @deprecated Use `ellipsisPage` instead.\n */\n isEllipsisPage?: boolean\n containerProps?: Omit<BreadcrumbItemProps, \"isLastChild\" | \"lastChild\">\n}\n\ninterface BreadcrumbOptions {\n /**\n * The icon to be used in the ellipsis.\n */\n ellipsis?:\n | ((props: { items: BreadcrumbGenerateItem[] }) => ReactNode)\n | ReactNode\n /**\n * Number of elements visible on the end(right) edges.\n */\n endBoundaries?: Token<number>\n /**\n * The left and right margin applied to the separator.\n *\n * @default '2'\n */\n gap?: CSSUIProps[\"mx\"]\n /**\n * If provided, generate breadcrumb items based on items.\n */\n items?: BreadcrumbGenerateItem[]\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n */\n startBoundaries?: Token<number>\n /**\n * Props for ol element.\n */\n listProps?: HTMLUIProps<\"ol\">\n}\n\nexport interface BreadcrumbProps\n extends 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] = useComponentMultiStyle(\"Breadcrumb\", props)\n\n const {\n className,\n children,\n ellipsis,\n endBoundaries: _endBoundaries,\n gap = \"fallback(2, 0.5rem)\",\n items = [],\n separator = \"/\",\n startBoundaries: _startBoundaries,\n listProps,\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 exceed =\n hasBoundaries && startBoundaries! + endBoundaries! < items.length\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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 gap,\n lastChild: validChildren.length === index + 1,\n separator,\n }),\n )\n } else {\n let hiddenEllipsis: BreadcrumbGenerateItem[] = []\n\n return items.map((item, index) => {\n let {\n name,\n currentPage,\n ellipsisPage,\n isCurrentPage,\n isEllipsisPage,\n containerProps,\n ...rest\n } = item\n const lastChild = items.length === index + 1\n\n currentPage ??= isCurrentPage\n ellipsisPage ??= isEllipsisPage\n\n const props: BreadcrumbItemProps = {\n currentPage,\n gap,\n separator,\n ...containerProps,\n }\n\n if (!hasBoundaries && ellipsisPage) {\n hiddenEllipsis.push(item)\n\n return lastChild ? (\n <BreadcrumbItem key={index} {...props} lastChild>\n {customEllipsis([item]) ?? <BreadcrumbEllipsis />}\n </BreadcrumbItem>\n ) : null\n }\n\n if (hasBoundaries && exceed) {\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} lastChild={lastChild}>\n <BreadcrumbLink {...rest}>{name}</BreadcrumbLink>\n </BreadcrumbItem>\n </Fragment>\n )\n } else {\n return (\n <BreadcrumbItem key={index} {...props} lastChild={lastChild}>\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 exceed,\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 aria-label=\"Breadcrumb\"\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\nBreadcrumb.displayName = \"Breadcrumb\"\nBreadcrumb.__ui__ = \"Breadcrumb\"\n\ninterface BreadcrumbItemOptions\n extends Pick<BreadcrumbProps, \"gap\" | \"separator\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n *\n * @deprecated Use `lastChild` instead.\n */\n isLastChild?: boolean\n /**\n * If `true`, not show separator.\n *\n * @default false\n */\n lastChild?: boolean\n}\n\nexport interface BreadcrumbItemProps\n extends Omit<HTMLUIProps<\"li\">, \"gap\">,\n BreadcrumbItemOptions {}\n\nexport const BreadcrumbItem = forwardRef<BreadcrumbItemProps, \"li\">(\n (\n {\n className,\n children,\n currentPage,\n gap,\n isCurrentPage,\n isLastChild,\n lastChild,\n separator,\n ...rest\n },\n ref,\n ) => {\n currentPage ??= isCurrentPage\n lastChild ??= isLastChild\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 currentPage,\n })\n }\n\n if (child.type === BreadcrumbSeparator) {\n return cloneElement(child, {\n children: child.props.children || separator,\n gap,\n })\n }\n\n return child\n })\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\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 {!lastChild ? (\n <BreadcrumbSeparator gap={gap}>{separator}</BreadcrumbSeparator>\n ) : null}\n </ui.li>\n )\n },\n)\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\nBreadcrumbItem.__ui__ = \"BreadcrumbItem\"\n\ninterface BreadcrumbLinkOptions {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n /**\n * If `true`, change to span element.\n *\n * @default false\n *\n * @deprecated Use `currentPage` instead.\n */\n isCurrentPage?: boolean\n}\n\nexport interface BreadcrumbLinkProps\n extends HTMLUIProps<\"a\">,\n BreadcrumbLinkOptions {}\n\nexport const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, \"a\">(\n ({ href, className, children, currentPage, isCurrentPage, ...rest }, ref) => {\n currentPage ??= isCurrentPage\n\n const styles = useBreadcrumb()\n\n return (\n <ui.a\n ref={ref}\n as={!currentPage ? \"a\" : \"span\"}\n href={!currentPage ? href : undefined}\n className={cx(\"ui-breadcrumb__link\", className)}\n aria-current={currentPage ? \"page\" : undefined}\n __css={styles.link}\n {...rest}\n >\n {children}\n </ui.a>\n )\n },\n)\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\nBreadcrumbLink.__ui__ = \"BreadcrumbLink\"\n\ninterface BreadcrumbSeparatorOptions {\n /**\n * The CSS `margin-inline-start`, and `margin-inline-end` property.\n */\n gap?: CSSUIObject[\"mx\"]\n}\n\nexport interface BreadcrumbSeparatorProps\n extends Omit<HTMLUIProps<\"span\">, \"gap\">,\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\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\nBreadcrumbSeparator.__ui__ = \"BreadcrumbSeparator\"\n\ninterface BreadcrumbEllipsisOptions {}\n\nexport interface BreadcrumbEllipsisProps\n extends IconProps,\n BreadcrumbEllipsisOptions {}\n\nexport const BreadcrumbEllipsis = forwardRef<BreadcrumbEllipsisProps, \"span\">(\n ({ className, children, ...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 className={cx(\"ui-breadcrumb__item__ellipsis\", className)}\n aria-label=\"ellipsis\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n viewBox=\"0 0 36 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n __css={css}\n {...rest}\n >\n <circle cx=\"10\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n <circle cx=\"30\" cy=\"12\" fill=\"currentColor\" r=\"2\" />\n </Icon>\n )\n )\n },\n)\n\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\nBreadcrumbEllipsis.__ui__ = \"BreadcrumbEllipsis\"\n"],"mappings":"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","names":["rest","props"]}