@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/esm/components/box/box.js

@@ -0,0 +1,16 @@
+"use client";
+
+
+import { styled } from "../../core/system/factory.js";
+
+//#region src/components/box/box.tsx
+/**
+* `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.
+*
+* @see https://yamada-ui.com/components/box
+*/
+const Box = styled("div");
+
+//#endregion
+export { Box };
+//# sourceMappingURL=box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","names":[],"sources":["../../../../src/components/box/box.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps } from \"../../core\"\nimport { styled } from \"../../core\"\n\nexport interface BoxProps extends HTMLStyledProps {}\n\n/**\n * `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.\n *\n * @see https://yamada-ui.com/components/box\n */\nexport const Box = styled(\"div\")\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,MAAM,OAAO,MAAM"}

package/dist/esm/components/box/index.js

@@ -0,0 +1,3 @@
+import { Box } from "./box.js";
+
+export { Box };

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,78 @@
+"use client";
+
+
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
+import { EllipsisIcon } from "../icon/icons/ellipsis-icon.js";
+import { useValue } from "../../hooks/use-value/index.js";
+import { breadcrumbStyle } from "./breadcrumb.style.js";
+import { useBreadcrumb } from "./use-breadcrumb.js";
+import { Fragment, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/breadcrumb/breadcrumb.tsx
+const { ComponentContext, PropsContext: BreadcrumbPropsContext, useComponentContext, usePropsContext: useBreadcrumbPropsContext, withContext, withProvider } = createSlotComponent("breadcrumb", breadcrumbStyle);
+/**
+* `Breadcrumb` is a component that helps users understand the hierarchy of a website.
+*
+* @see https://yamada-ui.com/components/breadcrumb
+*/
+const BreadcrumbRoot = withProvider(({ endBoundaries: endBoundariesProp, gap, separator, startBoundaries: startBoundariesProp, itemProps, listProps, separatorProps,...rest }) => {
+	const endBoundaries = useValue(endBoundariesProp);
+	const startBoundaries = useValue(startBoundariesProp);
+	const { children, getEllipsisProps, getLinkProps, getListProps, getRootProps } = useBreadcrumb({
+		ellipsis: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}),
+		endBoundaries,
+		link: /* @__PURE__ */ jsx(BreadcrumbLink, {}),
+		startBoundaries,
+		...rest
+	});
+	const context = useMemo(() => ({
+		getEllipsisProps,
+		getLinkProps
+	}), [getEllipsisProps, getLinkProps]);
+	return /* @__PURE__ */ jsx(ComponentContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(styled.nav, {
+			...getRootProps(),
+			children: /* @__PURE__ */ jsx(BreadcrumbList, {
+				...getListProps({
+					gap,
+					...listProps
+				}),
+				children: children.map((child, index) => {
+					const last = index === children.length - 1;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
+						...itemProps,
+						children: child
+					}), !last ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {
+						...separatorProps,
+						children: separator
+					}) : null] }, index);
+				})
+			})
+		})
+	});
+}, "root")();
+const BreadcrumbList = withContext("ol", "list")();
+const BreadcrumbItem = withContext("li", "item")();
+const BreadcrumbSeparator = withContext(BreadcrumbItem, "separator")({ children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+const BreadcrumbLink = withContext("a", "link")(void 0, ({ currentPage,...rest }) => {
+	const { getLinkProps } = useComponentContext();
+	return {
+		as: !currentPage ? "a" : "span",
+		...getLinkProps({
+			currentPage,
+			...rest
+		})
+	};
+});
+const BreadcrumbEllipsis = withContext(EllipsisIcon, "ellipsis")(void 0, (props) => {
+	const { getEllipsisProps } = useComponentContext();
+	return { ...getEllipsisProps(props) };
+});
+
+//#endregion
+export { BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPropsContext, BreadcrumbRoot, ComponentContext, useBreadcrumbPropsContext, useComponentContext, withContext, withProvider };
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  PropGetter,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { BreadcrumbStyle } from \"./breadcrumb.style\"\nimport type { UseBreadcrumbProps } from \"./use-breadcrumb\"\nimport { Fragment, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { ChevronRightIcon, EllipsisIcon } from \"../icon\"\nimport { breadcrumbStyle } from \"./breadcrumb.style\"\nimport { useBreadcrumb } from \"./use-breadcrumb\"\n\ninterface ComponentContext {\n  getEllipsisProps: PropGetter<\"svg\">\n  getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>\n}\n\nexport interface BreadcrumbRootProps\n  extends HTMLStyledProps<\"nav\">,\n    ThemeProps<BreadcrumbStyle>,\n    Omit<UseBreadcrumbProps, \"endBoundaries\" | \"startBoundaries\"> {\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: StyleValue<number>\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   * @default 0\n   */\n  startBoundaries?: StyleValue<number>\n  /**\n   * Props for item element.\n   */\n  itemProps?: BreadcrumbItemProps\n  /**\n   * Props for ol element.\n   */\n  listProps?: HTMLStyledProps<\"ol\">\n  /**\n   * Props for separator element.\n   */\n  separatorProps?: BreadcrumbSeparatorProps\n}\n\nexport const {\n  ComponentContext,\n  PropsContext: BreadcrumbPropsContext,\n  useComponentContext,\n  usePropsContext: useBreadcrumbPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<BreadcrumbRootProps, BreadcrumbStyle, ComponentContext>(\n  \"breadcrumb\",\n  breadcrumbStyle,\n)\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see https://yamada-ui.com/components/breadcrumb\n */\nexport const BreadcrumbRoot = withProvider<\"nav\", BreadcrumbRootProps>(\n  ({\n    endBoundaries: endBoundariesProp,\n    gap,\n    separator,\n    startBoundaries: startBoundariesProp,\n    itemProps,\n    listProps,\n    separatorProps,\n    ...rest\n  }) => {\n    const endBoundaries = useValue(endBoundariesProp)\n    const startBoundaries = useValue(startBoundariesProp)\n    const {\n      children,\n      getEllipsisProps,\n      getLinkProps,\n      getListProps,\n      getRootProps,\n    } = useBreadcrumb({\n      ellipsis: <BreadcrumbEllipsis />,\n      endBoundaries,\n      link: <BreadcrumbLink />,\n      startBoundaries,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ getEllipsisProps, getLinkProps }),\n      [getEllipsisProps, getLinkProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.nav {...getRootProps()}>\n          <BreadcrumbList {...getListProps({ gap, ...listProps })}>\n            {children.map((child, index) => {\n              const last = index === children.length - 1\n\n              return (\n                <Fragment key={index}>\n                  <BreadcrumbItem {...itemProps}>{child}</BreadcrumbItem>\n\n                  {!last ? (\n                    <BreadcrumbSeparator {...separatorProps}>\n                      {separator}\n                    </BreadcrumbSeparator>\n                  ) : null}\n                </Fragment>\n              )\n            })}\n          </BreadcrumbList>\n        </styled.nav>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\ninterface BreadcrumbListProps extends HTMLStyledProps<\"ol\"> {}\n\nconst BreadcrumbList = withContext<\"ol\", BreadcrumbListProps>(\"ol\", \"list\")()\n\ninterface BreadcrumbItemProps extends HTMLStyledProps<\"li\"> {}\n\nconst BreadcrumbItem = withContext<\"li\", BreadcrumbItemProps>(\"li\", \"item\")()\n\ninterface BreadcrumbSeparatorProps extends HTMLStyledProps<\"li\"> {}\n\nconst BreadcrumbSeparator = withContext<\"li\", BreadcrumbSeparatorProps>(\n  BreadcrumbItem,\n  \"separator\",\n)({ children: <ChevronRightIcon /> })\n\nexport interface BreadcrumbLinkProps extends HTMLStyledProps<\"a\"> {\n  /**\n   * If `true`, change to span element.\n   *\n   * @default false\n   */\n  currentPage?: boolean\n}\n\nexport const BreadcrumbLink = withContext<\"a\", BreadcrumbLinkProps>(\n  \"a\",\n  \"link\",\n)(undefined, ({ currentPage, ...rest }) => {\n  const { getLinkProps } = useComponentContext()\n\n  return {\n    as: !currentPage ? \"a\" : \"span\",\n    ...getLinkProps({ currentPage, ...rest }),\n  }\n})\n\nexport interface BreadcrumbEllipsisProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const BreadcrumbEllipsis = withContext<\"svg\", BreadcrumbEllipsisProps>(\n  EllipsisIcon,\n  \"ellipsis\",\n)(undefined, (props) => {\n  const { getEllipsisProps } = useComponentContext()\n\n  return { ...getEllipsisProps(props) }\n})\n"],"mappings":";;;;;;;;;;;;;;AA2DA,MAAa,EACX,kBACA,cAAc,wBACd,qBACA,iBAAiB,2BACjB,aACA,cACD,GAAG,oBACF,cACA,gBACD;;;;;;AAOD,MAAa,iBAAiB,aAC5B,CAAC,EACC,eAAe,mBACf,KACA,WACA,iBAAiB,qBACjB,WACA,WACA,eACA,GAAG,MACJ,KAAK;CACJ,MAAM,gBAAgB,SAAS,kBAAkB;CACjD,MAAM,kBAAkB,SAAS,oBAAoB;CACrD,MAAM,EACJ,UACA,kBACA,cACA,cACA,cACD,GAAG,cAAc;EAChB,0BAAU,IAAC,uBAAqB;EAChC;EACA,sBAAM,IAAC,mBAAiB;EACxB;EACA,GAAG;CACJ,EAAC;CAEF,MAAM,UAAU,QACd,OAAO;EAAE;EAAkB;CAAc,IACzC,CAAC,kBAAkB,YAAa,EACjC;AAED,wBACE,IAAC;EAAiB,OAAO;4BACvB,IAAC,OAAO;GAAI,GAAI,cAAc;6BAC5B,IAAC;IAAe,GAAI,aAAa;KAAE;KAAK,GAAG;IAAW,EAAC;cACpD,SAAS,IAAI,CAAC,OAAO,UAAU;KAC9B,MAAM,OAAO,UAAU,SAAS,SAAS;AAEzC,4BACE,KAAC,uCACC,IAAC;MAAe,GAAI;gBAAY;OAAuB,GAErD,uBACA,IAAC;MAAoB,GAAI;gBACtB;OACmB,GACpB,SAPS,MAQJ;IAEd,EAAC;KACa;IACN;GACI;AAEtB,GACD,OACD,EAAE;AAIH,MAAM,iBAAiB,YAAuC,MAAM,OAAO,EAAE;AAI7E,MAAM,iBAAiB,YAAuC,MAAM,OAAO,EAAE;AAI7E,MAAM,sBAAsB,YAC1B,gBACA,YACD,CAAC,EAAE,0BAAU,IAAC,qBAAmB,CAAE,EAAC;AAWrC,MAAa,iBAAiB,YAC5B,KACA,OACD,SAAY,CAAC,EAAE,YAAa,GAAG,MAAM,KAAK;CACzC,MAAM,EAAE,cAAc,GAAG,qBAAqB;AAE9C,QAAO;EACL,KAAK,cAAc,MAAM;EACzB,GAAG,aAAa;GAAE;GAAa,GAAG;EAAM,EAAC;CAC1C;AACF,EAAC;AAIF,MAAa,qBAAqB,YAChC,cACA,WACD,SAAY,CAAC,UAAU;CACtB,MAAM,EAAE,kBAAkB,GAAG,qBAAqB;AAElD,QAAO,EAAE,GAAG,iBAAiB,MAAM,CAAE;AACtC,EAAC"}

package/dist/esm/components/breadcrumb/breadcrumb.style.js

@@ -0,0 +1,54 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+
+//#region src/components/breadcrumb/breadcrumb.style.ts
+const breadcrumbStyle = defineComponentSlotStyle({
+	base: {
+		ellipsis: { color: "fg.muted" },
+		item: {
+			alignItems: "center",
+			display: "inline-flex"
+		},
+		link: {
+			rounded: "l1",
+			textDecoration: "none",
+			transitionDuration: "moderate",
+			transitionProperty: "common"
+		},
+		list: {
+			alignItems: "center",
+			display: "flex",
+			wordBreak: "break-word"
+		},
+		root: {},
+		separator: { color: "fg.muted" }
+	},
+	variants: {
+		plain: { link: { _notCurrent: {
+			color: "fg.muted",
+			_hover: { color: "fg" }
+		} } },
+		underline: { link: { _notCurrent: { _hover: { textDecoration: "underline" } } } }
+	},
+	sizes: {
+		sm: { list: {
+			fontSize: "sm",
+			gap: "1"
+		} },
+		md: { list: {
+			fontSize: "md",
+			gap: "1.5"
+		} },
+		lg: { list: {
+			fontSize: "lg",
+			gap: "2"
+		} }
+	},
+	defaultProps: {
+		size: "md",
+		variant: "plain"
+	}
+});
+
+//#endregion
+export { breadcrumbStyle };
+//# sourceMappingURL=breadcrumb.style.js.map

package/dist/esm/components/breadcrumb/breadcrumb.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.style.js","names":[],"sources":["../../../../src/components/breadcrumb/breadcrumb.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const breadcrumbStyle = defineComponentSlotStyle({\n  base: {\n    ellipsis: {\n      color: \"fg.muted\",\n    },\n    item: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n    },\n    link: {\n      rounded: \"l1\",\n      textDecoration: \"none\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n    },\n    list: {\n      alignItems: \"center\",\n      display: \"flex\",\n      wordBreak: \"break-word\",\n    },\n    root: {},\n    separator: {\n      color: \"fg.muted\",\n    },\n  },\n\n  variants: {\n    plain: {\n      link: {\n        _notCurrent: {\n          color: \"fg.muted\",\n          _hover: {\n            color: \"fg\",\n          },\n        },\n      },\n    },\n    underline: {\n      link: {\n        _notCurrent: {\n          _hover: {\n            textDecoration: \"underline\",\n          },\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      list: {\n        fontSize: \"sm\",\n        gap: \"1\",\n      },\n    },\n    md: {\n      list: {\n        fontSize: \"md\",\n        gap: \"1.5\",\n      },\n    },\n    lg: {\n      list: {\n        fontSize: \"lg\",\n        gap: \"2\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type BreadcrumbStyle = typeof breadcrumbStyle\n"],"mappings":";;;AAEA,MAAa,kBAAkB,yBAAyB;CACtD,MAAM;EACJ,UAAU,EACR,OAAO,WACR;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;EACV;EACD,MAAM;GACJ,SAAS;GACT,gBAAgB;GAChB,oBAAoB;GACpB,oBAAoB;EACrB;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,WAAW;EACZ;EACD,MAAM,CAAE;EACR,WAAW,EACT,OAAO,WACR;CACF;CAED,UAAU;EACR,OAAO,EACL,MAAM,EACJ,aAAa;GACX,OAAO;GACP,QAAQ,EACN,OAAO,KACR;EACF,EACF,EACF;EACD,WAAW,EACT,MAAM,EACJ,aAAa,EACX,QAAQ,EACN,gBAAgB,YACjB,EACF,EACF,EACF;CACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GACJ,UAAU;GACV,KAAK;EACN,EACF;EACD,IAAI,EACF,MAAM;GACJ,UAAU;GACV,KAAK;EACN,EACF;EACD,IAAI,EACF,MAAM;GACJ,UAAU;GACV,KAAK;EACN,EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}

package/dist/esm/components/breadcrumb/index.js

@@ -0,0 +1,6 @@
+import { breadcrumbStyle } from "./breadcrumb.style.js";
+import { useBreadcrumb } from "./use-breadcrumb.js";
+import { BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPropsContext, BreadcrumbRoot, useBreadcrumbPropsContext } from "./breadcrumb.js";
+import { namespace_exports } from "./namespace.js";
+
+export { namespace_exports as Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPropsContext, BreadcrumbRoot, breadcrumbStyle, useBreadcrumb, useBreadcrumbPropsContext };

package/dist/esm/components/breadcrumb/namespace.js

@@ -0,0 +1,16 @@
+import { __export } from "../../_virtual/rolldown_runtime.js";
+import { BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPropsContext, BreadcrumbRoot, useBreadcrumbPropsContext } from "./breadcrumb.js";
+
+//#region src/components/breadcrumb/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+	Ellipsis: () => BreadcrumbEllipsis,
+	Link: () => BreadcrumbLink,
+	PropsContext: () => BreadcrumbPropsContext,
+	Root: () => BreadcrumbRoot,
+	usePropsContext: () => useBreadcrumbPropsContext
+});
+
+//#endregion
+export { BreadcrumbEllipsis as Ellipsis, BreadcrumbLink as Link, BreadcrumbPropsContext as PropsContext, BreadcrumbRoot as Root, namespace_exports, useBreadcrumbPropsContext as usePropsContext };
+//# sourceMappingURL=namespace.js.map

package/dist/esm/components/breadcrumb/namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/breadcrumb/namespace.ts"],"sourcesContent":["export {\n  BreadcrumbEllipsis as Ellipsis,\n  BreadcrumbLink as Link,\n  BreadcrumbPropsContext as PropsContext,\n  BreadcrumbRoot as Root,\n  useBreadcrumbPropsContext as usePropsContext,\n} from \"./breadcrumb\"\n\nexport type {\n  BreadcrumbEllipsisProps as EllipsisProps,\n  BreadcrumbLinkProps as LinkProps,\n  BreadcrumbRootProps as RootProps,\n} from \"./breadcrumb\"\n"],"mappings":""}

package/dist/esm/components/breadcrumb/use-breadcrumb.js

@@ -0,0 +1,84 @@
+"use client";
+
+
+import { getValidChildren } from "../../utils/children.js";
+import { utils_exports } from "../../utils/index.js";
+import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
+import { cloneElement, useCallback, useMemo } from "react";
+
+//#region src/components/breadcrumb/use-breadcrumb.tsx
+const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link, startBoundaries = 0,...rest } = {}) => {
+	const validChildren = getValidChildren(children);
+	const length = validChildren.length || items.length;
+	const { t } = useI18n("breadcrumb");
+	const hasBoundaries = startBoundaries + endBoundaries > 0 && length > startBoundaries + endBoundaries;
+	const renderLink = useCallback((items$1) => {
+		if (!link) return [];
+		return items$1.map(({ label,...rest$1 }) => cloneElement(link, {
+			...link.props,
+			children: label,
+			...rest$1
+		}));
+	}, [link]);
+	const renderEllipsis = useCallback((items$1) => {
+		if (!ellipsis) return null;
+		return (0, utils_exports.runIfFn)(ellipsis, { items: items$1 });
+	}, [ellipsis]);
+	const splitItems = useCallback((items$1) => {
+		const length$1 = items$1.length;
+		const firstItems = items$1.slice(0, startBoundaries);
+		const ellipsisItems = items$1.slice(startBoundaries, length$1 - endBoundaries);
+		const lastItems = items$1.slice(length$1 - endBoundaries);
+		return [
+			firstItems,
+			ellipsisItems,
+			lastItems
+		];
+	}, [startBoundaries, endBoundaries]);
+	const cloneChildren = useMemo(() => {
+		const hasChildren = !!validChildren.length;
+		if (hasChildren) return validChildren;
+		else if (hasBoundaries) {
+			const [firstItems, ellipsisItems, lastItems] = splitItems(items);
+			return [
+				...renderLink(firstItems),
+				renderEllipsis(ellipsisItems),
+				...renderLink(lastItems)
+			];
+		} else return renderLink(items);
+	}, [
+		validChildren,
+		items,
+		hasBoundaries,
+		renderEllipsis,
+		renderLink,
+		splitItems
+	]);
+	const getRootProps = useCallback((props) => ({
+		"aria-label": t("Breadcrumb"),
+		...rest,
+		...props
+	}), [rest, t]);
+	const getListProps = useCallback((props) => ({ ...props }), []);
+	const getLinkProps = useCallback(({ href, currentPage,...props } = {}) => ({
+		href: !currentPage ? href : void 0,
+		"aria-current": currentPage ? "page" : void 0,
+		...props
+	}), []);
+	const getEllipsisProps = useCallback((props) => ({
+		"aria-label": t("Ellipsis"),
+		role: "presentation",
+		...props
+	}), [t]);
+	return {
+		children: cloneChildren,
+		getEllipsisProps,
+		getLinkProps,
+		getListProps,
+		getRootProps
+	};
+};
+
+//#endregion
+export { useBreadcrumb };
+//# sourceMappingURL=use-breadcrumb.js.map

package/dist/esm/components/breadcrumb/use-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breadcrumb.js","names":["items: BreadcrumbItem[]","rest","length","items","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>","getEllipsisProps: PropGetter<\"svg\">"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { getValidChildren, runIfFn } from \"../../utils\"\n\ninterface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = getValidChildren(children)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Breadcrumb\"),\n      ...rest,\n      ...props,\n    }),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;;;AAyCA,MAAa,gBAAgB,CAAC,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,CAAE,GACV,MACA,kBAAkB,EAClB,GAAG,MACgB,GAAG,CAAE,MAAK;CAC7B,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,GAAG,GAAG,QAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,aAAa,YACjB,CAACA,YAA4B;AAC3B,OAAK,KAAM,QAAO,CAAE;AAEpB,SAAO,QAAM,IAAI,CAAC,EAAE,MAAO,GAAGC,QAAM,KAClC,aAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;EAAM,EAAC,CACrE;CACF,GACD,CAAC,IAAK,EACP;CAED,MAAM,iBAAiB,YACrB,CAACD,YAA4B;AAC3B,OAAK,SAAU,QAAO;AAEtB,SAAO,2BAAQ,UAAU,EAAE,eAAO,EAAC;CACpC,GACD,CAAC,QAAS,EACX;CAED,MAAM,aAAa,YACjB,CAACA,YAA4B;EAC3B,MAAME,WAASC,QAAM;EACrB,MAAM,aAAa,QAAM,MAAM,GAAG,gBAAgB;EAClD,MAAM,gBAAgB,QAAM,MAAM,iBAAiBD,WAAS,cAAc;EAC1E,MAAM,YAAY,QAAM,MAAMA,WAAS,cAAc;AAErD,SAAO;GAAC;GAAY;GAAe;EAAU;CAC9C,GACD,CAAC,iBAAiB,aAAc,EACjC;CAED,MAAM,gBAAgB,QAAQ,MAAM;EAClC,MAAM,gBAAgB,cAAc;AAEpC,MAAI,YACF,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,UAAU,GAAG,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;GACzB;EACF,MACC,QAAO,WAAW,MAAM;CAE3B,GAAE;EACD;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;CAEF,MAAME,eAAkC,YACtC,CAAC,WAAW;EACV,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,GAAG;CACJ,IACD,CAAC,MAAM,CAAE,EACV;CAED,MAAMC,eAAiC,YACrC,CAAC,WAAW,EAAE,GAAG,MAAO,IACxB,CAAE,EACH;CAED,MAAMC,eAA2D,YAC/D,CAAC,EAAE,MAAM,YAAa,GAAG,OAAO,GAAG,CAAE,OAAM;EACzC,OAAO,cAAc;EACrB,gBAAgB,cAAc;EAC9B,GAAG;CACJ,IACD,CAAE,EACH;CAED,MAAMC,mBAAsC,YAC1C,CAAC,WAAW;EACV,cAAc,EAAE,WAAW;EAC3B,MAAM;EACN,GAAG;CACJ,IACD,CAAC,CAAE,EACJ;AAED,QAAO;EACL,UAAU;EACV;EACA;EACA;EACA;CACD;AACF"}

package/dist/esm/components/button/button-group.js

@@ -0,0 +1,37 @@
+"use client";
+
+
+import { ButtonPropsContext } from "./button.js";
+import { Group } from "../group/group.js";
+import { IconButtonPropsContext } from "./icon-button.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/button/button-group.tsx
+const ButtonGroup = ({ size, variant, attached, disabled,...rest }) => {
+	const context = useMemo(() => ({
+		size,
+		variant,
+		disabled,
+		focusVisibleRing: attached ? "inside" : void 0
+	}), [
+		size,
+		variant,
+		disabled,
+		attached
+	]);
+	return /* @__PURE__ */ jsx(ButtonPropsContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(IconButtonPropsContext, {
+			value: context,
+			children: /* @__PURE__ */ jsx(Group, {
+				attached,
+				...rest
+			})
+		})
+	});
+};
+
+//#endregion
+export { ButtonGroup };
+//# sourceMappingURL=button-group.js.map

package/dist/esm/components/button/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":["ButtonGroup: FC<ButtonGroupProps>"],"sources":["../../../../src/components/button/button-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC } from \"react\"\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ButtonProps } from \"./button\"\nimport type { ButtonStyle } from \"./button.style\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport { ButtonPropsContext } from \"./button\"\nimport { IconButtonPropsContext } from \"./icon-button\"\n\nexport interface ButtonGroupProps\n  extends WithoutThemeProps<GroupProps, ButtonStyle>,\n    ThemeProps<ButtonStyle> {\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const ButtonGroup: FC<ButtonGroupProps> = ({\n  size,\n  variant,\n  attached,\n  disabled,\n  ...rest\n}) => {\n  const context = useMemo<ButtonProps>(\n    () => ({\n      size,\n      variant,\n      disabled,\n      focusVisibleRing: attached ? \"inside\" : undefined,\n    }),\n    [size, variant, disabled, attached],\n  )\n\n  return (\n    <ButtonPropsContext value={context}>\n      <IconButtonPropsContext value={context}>\n        <Group attached={attached} {...rest} />\n      </IconButtonPropsContext>\n    </ButtonPropsContext>\n  )\n}\n"],"mappings":";;;;;;;;;;AAuBA,MAAaA,cAAoC,CAAC,EAChD,MACA,SACA,UACA,SACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,QACd,OAAO;EACL;EACA;EACA;EACA,kBAAkB,WAAW;CAC9B,IACD;EAAC;EAAM;EAAS;EAAU;CAAS,EACpC;AAED,wBACE,IAAC;EAAmB,OAAO;4BACzB,IAAC;GAAuB,OAAO;6BAC7B,IAAC;IAAgB;IAAU,GAAI;KAAQ;IAChB;GACN;AAExB"}

package/dist/esm/components/button/button.js

@@ -0,0 +1,151 @@
+"use client";
+
+
+import { createContext } from "../../utils/context.js";
+import { mergeRefs } from "../../utils/ref.js";
+import { utils_exports } from "../../utils/index.js";
+import { mergeCSS } from "../../core/css/merge-css.js";
+import { styled } from "../../core/system/factory.js";
+import { getClassName } from "../../core/components/utils.js";
+import { createComponent } from "../../core/components/create-component.js";
+import { getLoadingComponent, isLoadingScheme } from "../loading/use-loading-component.js";
+import { Ripple } from "../ripple/ripple.js";
+import { useRipple } from "../ripple/use-ripple.js";
+import { buttonStyle } from "./button.style.js";
+import { Children, cloneElement, isValidElement, useCallback, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/button/button.tsx
+const [ButtonContext, useButtonContext] = createContext({ name: "ButtonContext" });
+const useButtonType = (value) => {
+	const buttonRef = useRef(!value);
+	const ref = useCallback((node) => {
+		if (node) buttonRef.current = node.tagName === "BUTTON";
+	}, []);
+	const type = buttonRef.current ? "button" : void 0;
+	return {
+		ref,
+		type
+	};
+};
+const { component, PropsContext: ButtonPropsContext, usePropsContext: useButtonPropsContext, withContext } = createComponent("button", buttonStyle);
+/**
+* `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
+*
+* @see https://yamada-ui.com/components/button
+*/
+const Button = withContext(({ ref, as, active, children, disabled, disableRipple, endIcon = null, loading, loadingIcon = "oval", loadingMessage, loadingPlacement = "start", startIcon = null, iconProps, loadingProps,...rest }) => {
+	const trulyDisabled = disabled || loading;
+	const { ref: buttonRef, type } = useButtonType(as);
+	const { onClick,...rippleProps } = useRipple({
+		...rest,
+		disabled: disableRipple || trulyDisabled
+	});
+	const startLoading = loading && loadingPlacement === "start";
+	const endLoading = loading && loadingPlacement === "end";
+	const context = useMemo(() => ({
+		endIcon,
+		loadingIcon,
+		loadingMessage,
+		startIcon,
+		iconProps
+	}), [
+		loadingIcon,
+		loadingMessage,
+		startIcon,
+		endIcon,
+		iconProps
+	]);
+	return /* @__PURE__ */ jsx(ButtonContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(styled.button, {
+			ref: mergeRefs(ref, buttonRef),
+			as,
+			type,
+			"data-active": (0, utils_exports.dataAttr)(active),
+			"data-loading": (0, utils_exports.dataAttr)(loading),
+			disabled: trulyDisabled,
+			...rest,
+			onClick,
+			children: [
+				startLoading ? /* @__PURE__ */ jsx(ButtonStartLoading, { ...loadingProps }) : null,
+				loading ? loadingMessage || /* @__PURE__ */ jsx(styled.span, {
+					opacity: 0,
+					children: /* @__PURE__ */ jsx(ButtonContent, { children })
+				}) : /* @__PURE__ */ jsx(ButtonContent, { children }),
+				endLoading ? /* @__PURE__ */ jsx(ButtonEndLoading, { ...loadingProps }) : null,
+				/* @__PURE__ */ jsx(Ripple, { ...rippleProps })
+			]
+		})
+	});
+})();
+const ButtonContent = component(({ children }) => {
+	const { endIcon, startIcon, iconProps } = useButtonContext();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		startIcon ? /* @__PURE__ */ jsx(ButtonStartIcon, {
+			...iconProps,
+			children: startIcon
+		}) : null,
+		children,
+		endIcon ? /* @__PURE__ */ jsx(ButtonEndIcon, {
+			...iconProps,
+			children: endIcon
+		}) : null
+	] });
+}, {
+	name: "ButtonContent",
+	className: getClassName((0, utils_exports.bem)("button", "content"))
+})();
+const ButtonLoading = component((props) => {
+	const { loadingIcon, loadingMessage } = useButtonContext();
+	const css = useMemo(() => ({ position: loadingMessage ? "relative" : "absolute" }), [loadingMessage]);
+	if (isLoadingScheme(loadingIcon)) {
+		const Component = getLoadingComponent(loadingIcon);
+		return /* @__PURE__ */ jsx(Component, {
+			color: "currentColor",
+			...props,
+			css: mergeCSS(css, props.css)
+		});
+	}
+	if (isValidElement(loadingIcon)) return cloneElement(loadingIcon, {
+		...props,
+		...loadingIcon.props,
+		css: mergeCSS(css, props.css, loadingIcon.props.css)
+	});
+	return null;
+}, {
+	name: "ButtonLoading",
+	className: getClassName((0, utils_exports.bem)("button", "loading"))
+})();
+const ButtonStartLoading = component(ButtonLoading, {
+	name: "ButtonStartLoading",
+	className: getClassName((0, utils_exports.bem)("button", "loading", "start"))
+})();
+const ButtonEndLoading = component(ButtonLoading, {
+	name: "ButtonEndLoading",
+	className: getClassName((0, utils_exports.bem)("button", "loading", "end"))
+})();
+const ButtonIcon = component(({ children,...rest }) => {
+	if (isValidElement(children)) return cloneElement(children, {
+		"aria-hidden": true,
+		role: "img",
+		...rest,
+		...children.props
+	});
+	return Children.count(children) > 1 ? Children.only(null) : null;
+}, {
+	name: "ButtonIcon",
+	className: getClassName((0, utils_exports.bem)("button", "icon"))
+})();
+const ButtonStartIcon = component(ButtonIcon, {
+	name: "ButtonStartIcon",
+	className: getClassName((0, utils_exports.bem)("button", "icon", "start"))
+})();
+const ButtonEndIcon = component(ButtonIcon, {
+	name: "ButtonEndIcon",
+	className: getClassName((0, utils_exports.bem)("button", "icon", "end"))
+})();
+
+//#endregion
+export { Button, ButtonPropsContext, component, useButtonPropsContext, withContext };
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["value?: ElementType","node: HTMLElement | null"],"sources":["../../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ElementType, ReactNode } from \"react\"\nimport type {\n  CSSObject,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Loading } from \"../loading\"\nimport type { ButtonStyle } from \"./button.style\"\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\"\nimport { createComponent, getClassName, mergeCSS, styled } from \"../../core\"\nimport { bem, createContext, dataAttr, mergeRefs } from \"../../utils\"\nimport { getLoadingComponent, isLoadingScheme } from \"../loading\"\nimport { Ripple, useRipple } from \"../ripple\"\nimport { buttonStyle } from \"./button.style\"\n\ninterface ButtonContext\n  extends Pick<\n    ButtonProps,\n    \"endIcon\" | \"iconProps\" | \"loadingIcon\" | \"loadingMessage\" | \"startIcon\"\n  > {}\n\nconst [ButtonContext, useButtonContext] = createContext<ButtonContext>({\n  name: \"ButtonContext\",\n})\n\nconst useButtonType = (value?: ElementType) => {\n  const buttonRef = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) buttonRef.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = buttonRef.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n\nexport interface ButtonProps\n  extends HTMLStyledProps<\"button\">,\n    ThemeProps<ButtonStyle> {\n  /**\n   * The type of button. Accepts `button`, `reset`, or `submit`.\n   *\n   * @default 'button'\n   */\n  type?: HTMLProps<\"button\">[\"type\"]\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * The icon to display at the end side of the button.\n   */\n  endIcon?: ReactNode\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * The icon to display when the button is loading.\n   *\n   * @default 'oval'\n   */\n  loadingIcon?: Loading.Scheme | ReactNode\n  /**\n   * The message to display when the button is loading.\n   */\n  loadingMessage?: ReactNode\n  /**\n   * The placement of the loading indicator. Accepts `start` or `end`.\n   *\n   * @default 'start'\n   */\n  loadingPlacement?: \"end\" | \"start\"\n  /**\n   * The icon to display at the start side of the button.\n   */\n  startIcon?: ReactNode\n  /**\n   * The props of the icon element.\n   */\n  iconProps?: ButtonIconProps\n  /**\n   * The props of the loading icon element.\n   */\n  loadingProps?: ButtonLoadingProps\n}\n\nexport const {\n  component,\n  PropsContext: ButtonPropsContext,\n  usePropsContext: useButtonPropsContext,\n  withContext,\n} = createComponent<ButtonProps, ButtonStyle>(\"button\", buttonStyle)\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see https://yamada-ui.com/components/button\n */\nexport const Button = withContext(\n  ({\n    ref,\n    as,\n    active,\n    children,\n    disabled,\n    disableRipple,\n    endIcon = null,\n    loading,\n    loadingIcon = \"oval\",\n    loadingMessage,\n    loadingPlacement = \"start\",\n    startIcon = null,\n    iconProps,\n    loadingProps,\n    ...rest\n  }) => {\n    const trulyDisabled = disabled || loading\n    const { ref: buttonRef, type } = useButtonType(as)\n    const { onClick, ...rippleProps } = useRipple({\n      ...rest,\n      disabled: disableRipple || trulyDisabled,\n    })\n    const startLoading = loading && loadingPlacement === \"start\"\n    const endLoading = loading && loadingPlacement === \"end\"\n\n    const context = useMemo(\n      () => ({ endIcon, loadingIcon, loadingMessage, startIcon, iconProps }),\n      [loadingIcon, loadingMessage, startIcon, endIcon, iconProps],\n    )\n\n    return (\n      <ButtonContext.Provider value={context}>\n        <styled.button\n          ref={mergeRefs(ref, buttonRef)}\n          as={as}\n          type={type}\n          data-active={dataAttr(active)}\n          data-loading={dataAttr(loading)}\n          disabled={trulyDisabled}\n          {...rest}\n          onClick={onClick}\n        >\n          {startLoading ? <ButtonStartLoading {...loadingProps} /> : null}\n\n          {loading ? (\n            loadingMessage || (\n              <styled.span opacity={0}>\n                <ButtonContent>{children}</ButtonContent>\n              </styled.span>\n            )\n          ) : (\n            <ButtonContent>{children}</ButtonContent>\n          )}\n\n          {endLoading ? <ButtonEndLoading {...loadingProps} /> : null}\n\n          <Ripple {...rippleProps} />\n        </styled.button>\n      </ButtonContext.Provider>\n    )\n  },\n)()\n\nconst ButtonContent = component(\n  ({ children }) => {\n    const { endIcon, startIcon, iconProps } = useButtonContext()\n\n    return (\n      <>\n        {startIcon ? (\n          <ButtonStartIcon {...iconProps}>{startIcon}</ButtonStartIcon>\n        ) : null}\n        {children}\n        {endIcon ? (\n          <ButtonEndIcon {...iconProps}>{endIcon}</ButtonEndIcon>\n        ) : null}\n      </>\n    )\n  },\n  { name: \"ButtonContent\", className: getClassName(bem(\"button\", \"content\")) },\n)()\n\ninterface ButtonLoadingProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonLoading = component<\"svg\", ButtonLoadingProps>(\n  (props) => {\n    const { loadingIcon, loadingMessage } = useButtonContext()\n\n    const css = useMemo<CSSObject>(\n      () => ({\n        position: loadingMessage ? \"relative\" : \"absolute\",\n      }),\n      [loadingMessage],\n    )\n\n    if (isLoadingScheme(loadingIcon)) {\n      const Component = getLoadingComponent(loadingIcon)\n\n      return (\n        <Component\n          color=\"currentColor\"\n          {...props}\n          css={mergeCSS(css, props.css)}\n        />\n      )\n    }\n\n    if (isValidElement<HTMLStyledProps<\"svg\">>(loadingIcon))\n      return cloneElement(loadingIcon, {\n        ...props,\n        ...loadingIcon.props,\n        css: mergeCSS(css, props.css, loadingIcon.props.css),\n      })\n\n    return null\n  },\n  { name: \"ButtonLoading\", className: getClassName(bem(\"button\", \"loading\")) },\n)()\n\nconst ButtonStartLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonStartLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"start\")),\n})()\n\nconst ButtonEndLoading = component<\"svg\", ButtonLoadingProps>(ButtonLoading, {\n  name: \"ButtonEndLoading\",\n  className: getClassName(bem(\"button\", \"loading\", \"end\")),\n})()\n\ninterface ButtonIconProps extends HTMLStyledProps<\"svg\"> {}\n\nconst ButtonIcon = component<\"svg\", ButtonIconProps>(\n  ({ children, ...rest }) => {\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, {\n        \"aria-hidden\": true,\n        role: \"img\",\n        ...rest,\n        ...children.props,\n      })\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  { name: \"ButtonIcon\", className: getClassName(bem(\"button\", \"icon\")) },\n)()\n\nconst ButtonStartIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonStartIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"start\")),\n})()\n\nconst ButtonEndIcon = component<\"svg\", ButtonIconProps>(ButtonIcon, {\n  name: \"ButtonEndIcon\",\n  className: getClassName(bem(\"button\", \"icon\", \"end\")),\n})()\n"],"mappings":"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"}

package/dist/esm/components/button/button.style.js

@@ -0,0 +1,110 @@
+import { defineComponentStyle } from "../../core/system/config.js";
+
+//#region src/components/button/button.style.ts
+const buttonStyle = defineComponentStyle({
+	base: {
+		alignItems: "center",
+		appearance: "none",
+		cursor: "pointer",
+		display: "inline-flex",
+		fontWeight: "medium",
+		justifyContent: "center",
+		overflow: "hidden",
+		position: "relative",
+		rounded: "l2",
+		transitionDuration: "moderate",
+		transitionProperty: "common",
+		userSelect: "none",
+		verticalAlign: "middle",
+		whiteSpace: "nowrap",
+		_readOnly: { layerStyle: "readOnly" },
+		_disabled: { layerStyle: "disabled" }
+	},
+	props: { fullRounded: { true: { rounded: "full" } } },
+	variants: {
+		ghost: {
+			layerStyle: "ghost",
+			_hover: { layerStyle: "ghost.hover" }
+		},
+		outline: {
+			layerStyle: "outline",
+			_hover: { layerStyle: "outline.hover" }
+		},
+		solid: {
+			layerStyle: "solid",
+			_hover: { layerStyle: "solid.hover" }
+		},
+		subtle: {
+			layerStyle: "subtle",
+			_hover: { layerStyle: "subtle.hover" }
+		},
+		surface: {
+			layerStyle: "surface",
+			_hover: { layerStyle: "surface.hover" }
+		}
+	},
+	sizes: {
+		xs: {
+			fontSize: "xs",
+			gap: "1",
+			h: "8",
+			lineHeight: "{sizes.8}",
+			minW: "8",
+			px: "2",
+			_icon: { fontSize: "md" }
+		},
+		sm: {
+			fontSize: "sm",
+			gap: "2",
+			h: "9",
+			lineHeight: "{sizes.9}",
+			minW: "9",
+			px: "3",
+			_icon: { fontSize: "md" }
+		},
+		md: {
+			fontSize: "md",
+			gap: "2",
+			h: "10",
+			lineHeight: "{sizes.10}",
+			minW: "10",
+			px: "3",
+			_icon: { fontSize: "lg" }
+		},
+		lg: {
+			fontSize: "lg",
+			gap: "2.5",
+			h: "11",
+			lineHeight: "{sizes.11}",
+			minW: "11",
+			px: "4",
+			_icon: { fontSize: "2xl" }
+		},
+		xl: {
+			fontSize: "xl",
+			gap: "3",
+			h: "12",
+			lineHeight: "{sizes.12}",
+			minW: "12",
+			px: "5",
+			_icon: { fontSize: "2xl" }
+		},
+		"2xl": {
+			fontSize: "xl",
+			gap: "3",
+			h: "14",
+			lineHeight: "{sizes.14}",
+			minW: "14",
+			px: "5",
+			_icon: { fontSize: "2xl" }
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "solid"
+	}
+});
+
+//#endregion
+export { buttonStyle };
+//# sourceMappingURL=button.style.js.map

package/dist/esm/components/button/button.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.js","names":[],"sources":["../../../../src/components/button/button.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const buttonStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontWeight: \"medium\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    rounded: \"l2\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"common\",\n    userSelect: \"none\",\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n    _readOnly: {\n      layerStyle: \"readOnly\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the button is full rounded. Else, it'll be slightly round.\n     *\n     * @default false\n     */\n    fullRounded: {\n      true: {\n        rounded: \"full\",\n      },\n    },\n  },\n\n  variants: {\n    ghost: {\n      layerStyle: \"ghost\",\n      _hover: {\n        layerStyle: \"ghost.hover\",\n      },\n    },\n    outline: {\n      layerStyle: \"outline\",\n      _hover: {\n        layerStyle: \"outline.hover\",\n      },\n    },\n    solid: {\n      layerStyle: \"solid\",\n      _hover: {\n        layerStyle: \"solid.hover\",\n      },\n    },\n    subtle: {\n      layerStyle: \"subtle\",\n      _hover: {\n        layerStyle: \"subtle.hover\",\n      },\n    },\n    surface: {\n      layerStyle: \"surface\",\n      _hover: {\n        layerStyle: \"surface.hover\",\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      fontSize: \"xs\",\n      gap: \"1\",\n      h: \"8\",\n      lineHeight: \"{sizes.8}\",\n      minW: \"8\",\n      px: \"2\",\n      _icon: {\n        fontSize: \"md\",\n      },\n    },\n    sm: {\n      fontSize: \"sm\",\n      gap: \"2\",\n      h: \"9\",\n      lineHeight: \"{sizes.9}\",\n      minW: \"9\",\n      px: \"3\",\n      _icon: {\n        fontSize: \"md\",\n      },\n    },\n    md: {\n      fontSize: \"md\",\n      gap: \"2\",\n      h: \"10\",\n      lineHeight: \"{sizes.10}\",\n      minW: \"10\",\n      px: \"3\",\n      _icon: {\n        fontSize: \"lg\",\n      },\n    },\n    lg: {\n      fontSize: \"lg\",\n      gap: \"2.5\",\n      h: \"11\",\n      lineHeight: \"{sizes.11}\",\n      minW: \"11\",\n      px: \"4\",\n      _icon: {\n        fontSize: \"2xl\",\n      },\n    },\n    xl: {\n      fontSize: \"xl\",\n      gap: \"3\",\n      h: \"12\",\n      lineHeight: \"{sizes.12}\",\n      minW: \"12\",\n      px: \"5\",\n      _icon: {\n        fontSize: \"2xl\",\n      },\n    },\n    \"2xl\": {\n      fontSize: \"xl\",\n      gap: \"3\",\n      h: \"14\",\n      lineHeight: \"{sizes.14}\",\n      minW: \"14\",\n      px: \"5\",\n      _icon: {\n        fontSize: \"2xl\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n})\n\nexport type ButtonStyle = typeof buttonStyle\n"],"mappings":";;;AAEA,MAAa,cAAc,qBAAqB;CAC9C,MAAM;EACJ,YAAY;EACZ,YAAY;EACZ,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,UAAU;EACV,SAAS;EACT,oBAAoB;EACpB,oBAAoB;EACpB,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,WAAW,EACT,YAAY,WACb;EACD,WAAW,EACT,YAAY,WACb;CACF;CAED,OAAO,EAML,aAAa,EACX,MAAM,EACJ,SAAS,OACV,EACF,EACF;CAED,UAAU;EACR,OAAO;GACL,YAAY;GACZ,QAAQ,EACN,YAAY,cACb;EACF;EACD,SAAS;GACP,YAAY;GACZ,QAAQ,EACN,YAAY,gBACb;EACF;EACD,OAAO;GACL,YAAY;GACZ,QAAQ,EACN,YAAY,cACb;EACF;EACD,QAAQ;GACN,YAAY;GACZ,QAAQ,EACN,YAAY,eACb;EACF;EACD,SAAS;GACP,YAAY;GACZ,QAAQ,EACN,YAAY,gBACb;EACF;CACF;CAED,OAAO;EACL,IAAI;GACF,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,KACX;EACF;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,KACX;EACF;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,KACX;EACF;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,MACX;EACF;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,MACX;EACF;EACD,OAAO;GACL,UAAU;GACV,KAAK;GACL,GAAG;GACH,YAAY;GACZ,MAAM;GACN,IAAI;GACJ,OAAO,EACL,UAAU,MACX;EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;CACV;AACF,EAAC"}