@yamada-ui/breadcrumb 1.0.24-dev-20240428102406 → 1.0.24-dev-20240428212808

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.
@@ -1,5 +1,6 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
3
+ import { IconProps } from '@yamada-ui/icon';
3
4
 
4
5
  type BreadcrumbOptions = {
5
6
  /**
@@ -60,5 +61,8 @@ type BreadcrumbSeparatorOptions = {
60
61
  };
61
62
  type BreadcrumbSeparatorProps = HTMLUIProps<"span"> & BreadcrumbSeparatorOptions;
62
63
  declare const BreadcrumbSeparator: _yamada_ui_core.Component<"span", BreadcrumbSeparatorProps>;
64
+ type BreadcrumbEllipsisOptions = {};
65
+ type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions;
66
+ declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
63
67
 
64
- export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
68
+ export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
@@ -1,5 +1,6 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps, CSSUIObject } from '@yamada-ui/core';
3
+ import { IconProps } from '@yamada-ui/icon';
3
4
 
4
5
  type BreadcrumbOptions = {
5
6
  /**
@@ -60,5 +61,8 @@ type BreadcrumbSeparatorOptions = {
60
61
  };
61
62
  type BreadcrumbSeparatorProps = HTMLUIProps<"span"> & BreadcrumbSeparatorOptions;
62
63
  declare const BreadcrumbSeparator: _yamada_ui_core.Component<"span", BreadcrumbSeparatorProps>;
64
+ type BreadcrumbEllipsisOptions = {};
65
+ type BreadcrumbEllipsisProps = IconProps & BreadcrumbEllipsisOptions;
66
+ declare const BreadcrumbEllipsis: _yamada_ui_core.Component<"span", BreadcrumbEllipsisProps>;
63
67
 
64
- export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
68
+ export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
@@ -22,17 +22,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
22
22
  var breadcrumb_exports = {};
23
23
  __export(breadcrumb_exports, {
24
24
  Breadcrumb: () => Breadcrumb,
25
+ BreadcrumbEllipsis: () => BreadcrumbEllipsis,
25
26
  BreadcrumbItem: () => BreadcrumbItem,
26
27
  BreadcrumbLink: () => BreadcrumbLink,
27
28
  BreadcrumbSeparator: () => BreadcrumbSeparator
28
29
  });
29
30
  module.exports = __toCommonJS(breadcrumb_exports);
30
31
  var import_core = require("@yamada-ui/core");
32
+ var import_icon = require("@yamada-ui/icon");
31
33
  var import_utils = require("@yamada-ui/utils");
32
34
  var import_react = require("react");
33
35
  var import_jsx_runtime = require("react/jsx-runtime");
34
36
  var [BreadcrumbProvider, useBreadcrumb] = (0, import_utils.createContext)({
35
- name: `BreadcrumbContext`,
37
+ name: "BreadcrumbContext",
36
38
  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
37
39
  });
38
40
  var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
@@ -153,9 +155,39 @@ var BreadcrumbSeparator = (0, import_core.forwardRef)(
153
155
  );
154
156
  }
155
157
  );
158
+ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
159
+ ({ className, ...rest }, ref) => {
160
+ const styles = useBreadcrumb();
161
+ const css = {
162
+ ...styles.ellipsis
163
+ };
164
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
165
+ import_icon.Icon,
166
+ {
167
+ ref,
168
+ title: "ellipsis",
169
+ className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
170
+ __css: css,
171
+ xmlns: "http://www.w3.org/2000/svg",
172
+ viewBox: "0 0 36 24",
173
+ stroke: "currentColor",
174
+ strokeWidth: "1.5",
175
+ strokeLinecap: "round",
176
+ strokeLinejoin: "round",
177
+ ...rest,
178
+ children: [
179
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12", r: "2", fill: "currentColor" }),
180
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor" }),
181
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12", r: "2", fill: "currentColor" })
182
+ ]
183
+ }
184
+ );
185
+ }
186
+ );
156
187
  // Annotate the CommonJS export names for ESM import in node:
157
188
  0 && (module.exports = {
158
189
  Breadcrumb,
190
+ BreadcrumbEllipsis,
159
191
  BreadcrumbItem,
160
192
  BreadcrumbLink,
161
193
  BreadcrumbSeparator
@@ -1 +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 { 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"],"mappings":"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","names":[]}
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 ({ className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\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"],"mappings":"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","names":[]}
@@ -1,12 +1,14 @@
1
1
  "use client"
2
2
  import {
3
3
  Breadcrumb,
4
+ BreadcrumbEllipsis,
4
5
  BreadcrumbItem,
5
6
  BreadcrumbLink,
6
7
  BreadcrumbSeparator
7
- } from "./chunk-3VNSG7KI.mjs";
8
+ } from "./chunk-UCKPBNFY.mjs";
8
9
  export {
9
10
  Breadcrumb,
11
+ BreadcrumbEllipsis,
10
12
  BreadcrumbItem,
11
13
  BreadcrumbLink,
12
14
  BreadcrumbSeparator
@@ -7,11 +7,12 @@ import {
7
7
  omitThemeProps,
8
8
  useMultiComponentStyle
9
9
  } from "@yamada-ui/core";
10
+ import { Icon } from "@yamada-ui/icon";
10
11
  import { cx, createContext, getValidChildren } from "@yamada-ui/utils";
11
12
  import { cloneElement } from "react";
12
13
  import { jsx, jsxs } from "react/jsx-runtime";
13
14
  var [BreadcrumbProvider, useBreadcrumb] = createContext({
14
- name: `BreadcrumbContext`,
15
+ name: "BreadcrumbContext",
15
16
  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
16
17
  });
17
18
  var Breadcrumb = forwardRef((props, ref) => {
@@ -132,11 +133,41 @@ var BreadcrumbSeparator = forwardRef(
132
133
  );
133
134
  }
134
135
  );
136
+ var BreadcrumbEllipsis = forwardRef(
137
+ ({ className, ...rest }, ref) => {
138
+ const styles = useBreadcrumb();
139
+ const css = {
140
+ ...styles.ellipsis
141
+ };
142
+ return /* @__PURE__ */ jsxs(
143
+ Icon,
144
+ {
145
+ ref,
146
+ title: "ellipsis",
147
+ className: cx("ui-breadcrumb__item__ellipsis", className),
148
+ __css: css,
149
+ xmlns: "http://www.w3.org/2000/svg",
150
+ viewBox: "0 0 36 24",
151
+ stroke: "currentColor",
152
+ strokeWidth: "1.5",
153
+ strokeLinecap: "round",
154
+ strokeLinejoin: "round",
155
+ ...rest,
156
+ children: [
157
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", r: "2", fill: "currentColor" }),
158
+ /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor" }),
159
+ /* @__PURE__ */ jsx("circle", { cx: "30", cy: "12", r: "2", fill: "currentColor" })
160
+ ]
161
+ }
162
+ );
163
+ }
164
+ );
135
165
 
136
166
  export {
137
167
  Breadcrumb,
138
168
  BreadcrumbItem,
139
169
  BreadcrumbLink,
140
- BreadcrumbSeparator
170
+ BreadcrumbSeparator,
171
+ BreadcrumbEllipsis
141
172
  };
142
- //# sourceMappingURL=chunk-3VNSG7KI.mjs.map
173
+ //# sourceMappingURL=chunk-UCKPBNFY.mjs.map
@@ -0,0 +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 ({ className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\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"],"mappings":"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","names":[]}
package/dist/index.d.mts CHANGED
@@ -1,2 +1,3 @@
1
- export { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.mjs';
1
+ export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.mjs';
2
2
  import '@yamada-ui/core';
3
+ import '@yamada-ui/icon';
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.js';
1
+ export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from './breadcrumb.js';
2
2
  import '@yamada-ui/core';
3
+ import '@yamada-ui/icon';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
22
22
  var src_exports = {};
23
23
  __export(src_exports, {
24
24
  Breadcrumb: () => Breadcrumb,
25
+ BreadcrumbEllipsis: () => BreadcrumbEllipsis,
25
26
  BreadcrumbItem: () => BreadcrumbItem,
26
27
  BreadcrumbLink: () => BreadcrumbLink,
27
28
  BreadcrumbSeparator: () => BreadcrumbSeparator
@@ -30,11 +31,12 @@ module.exports = __toCommonJS(src_exports);
30
31
 
31
32
  // src/breadcrumb.tsx
32
33
  var import_core = require("@yamada-ui/core");
34
+ var import_icon = require("@yamada-ui/icon");
33
35
  var import_utils = require("@yamada-ui/utils");
34
36
  var import_react = require("react");
35
37
  var import_jsx_runtime = require("react/jsx-runtime");
36
38
  var [BreadcrumbProvider, useBreadcrumb] = (0, import_utils.createContext)({
37
- name: `BreadcrumbContext`,
39
+ name: "BreadcrumbContext",
38
40
  errorMessage: `useBreadcrumb returned is 'undefined'. Seems you forgot to wrap the components in "<Breadcrumb />" `
39
41
  });
40
42
  var Breadcrumb = (0, import_core.forwardRef)((props, ref) => {
@@ -155,9 +157,39 @@ var BreadcrumbSeparator = (0, import_core.forwardRef)(
155
157
  );
156
158
  }
157
159
  );
160
+ var BreadcrumbEllipsis = (0, import_core.forwardRef)(
161
+ ({ className, ...rest }, ref) => {
162
+ const styles = useBreadcrumb();
163
+ const css = {
164
+ ...styles.ellipsis
165
+ };
166
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
167
+ import_icon.Icon,
168
+ {
169
+ ref,
170
+ title: "ellipsis",
171
+ className: (0, import_utils.cx)("ui-breadcrumb__item__ellipsis", className),
172
+ __css: css,
173
+ xmlns: "http://www.w3.org/2000/svg",
174
+ viewBox: "0 0 36 24",
175
+ stroke: "currentColor",
176
+ strokeWidth: "1.5",
177
+ strokeLinecap: "round",
178
+ strokeLinejoin: "round",
179
+ ...rest,
180
+ children: [
181
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "12", r: "2", fill: "currentColor" }),
182
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor" }),
183
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "30", cy: "12", r: "2", fill: "currentColor" })
184
+ ]
185
+ }
186
+ );
187
+ }
188
+ );
158
189
  // Annotate the CommonJS export names for ESM import in node:
159
190
  0 && (module.exports = {
160
191
  Breadcrumb,
192
+ BreadcrumbEllipsis,
161
193
  BreadcrumbItem,
162
194
  BreadcrumbLink,
163
195
  BreadcrumbSeparator
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/breadcrumb.tsx"],"sourcesContent":["export {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n} from \"./breadcrumb\"\nexport type {\n BreadcrumbProps,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbSeparatorProps,\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 { 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"],"mappings":"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","names":[]}
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 ({ className, ...rest }, ref) => {\n const styles = useBreadcrumb()\n\n const css: CSSUIObject = {\n ...styles.ellipsis,\n }\n\n return (\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"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -1,12 +1,14 @@
1
1
  "use client"
2
2
  import {
3
3
  Breadcrumb,
4
+ BreadcrumbEllipsis,
4
5
  BreadcrumbItem,
5
6
  BreadcrumbLink,
6
7
  BreadcrumbSeparator
7
- } from "./chunk-3VNSG7KI.mjs";
8
+ } from "./chunk-UCKPBNFY.mjs";
8
9
  export {
9
10
  Breadcrumb,
11
+ BreadcrumbEllipsis,
10
12
  BreadcrumbItem,
11
13
  BreadcrumbLink,
12
14
  BreadcrumbSeparator
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/breadcrumb",
3
- "version": "1.0.24-dev-20240428102406",
3
+ "version": "1.0.24-dev-20240428212808",
4
4
  "description": "Yamada UI breadcrumb component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,8 +36,9 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.6.6-dev-20240428102406",
40
- "@yamada-ui/utils": "1.2.0-dev-20240428102406"
39
+ "@yamada-ui/core": "1.6.6-dev-20240428212808",
40
+ "@yamada-ui/utils": "1.2.0-dev-20240428212808",
41
+ "@yamada-ui/icon": "1.0.24-dev-20240428212808"
41
42
  },
42
43
  "devDependencies": {
43
44
  "react": "^18.0.0",
@@ -1 +0,0 @@
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 { 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"],"mappings":"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","names":[]}