npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260428154124 → 2.2.1-dev-20260428160818 - Mend

@yamada-ui/react 2.2.1-dev-20260428154124 → 2.2.1-dev-20260428160818

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/dist/cjs/components/avatar/use-avatar.cjs CHANGED Viewed

@@ -3,6 +3,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
 let react = require("react");
@@ -26,8 +28,7 @@ const useAvatar = ({ name, src, srcSet, alt, crossOrigin, fallback: fallbackMess
 	}, []);
 	const getGroupProps = (0, react.useCallback)((props) => ({ ...props }), []);
 	const getRootProps = (0, react.useCallback)((props) => ({
-		...rest,
-		...props,
+		...require_props.mergeProps(rest, props)(),
 		"data-fallback": (0, require_utils_index.utils_exports.dataAttr)(!!fallbackMessage),
 		"data-loaded": (0, require_utils_index.utils_exports.dataAttr)(loaded)
 	}), [

package/dist/cjs/components/avatar/use-avatar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-avatar.cjs","names":["useI18n","getGroupProps: PropGetter","getRootProps: PropGetter","getImageProps: PropGetter<\"img\">","mergeRefs"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport ~~type~~ { ~~HTMLProps~~, ~~PropGetter~~ } from \"~~../../core~~\"\nimport { ~~useCallback,~~ ~~useEffect~~, ~~useRef~~, ~~useState~~ } from \"~~react~~\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n const names = name.trim().split(\" \")\n const firstName = names[0] ?? \"\"\n const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n /*\n The `HTMLImageElement` property `alt`.\n /\n alt?: HTMLProps<\"img\">[\"alt\"]\n /\n The `HTMLImageElement` property `crossOrigin`.\n /\n crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n /\n The fallback text to display if the image is not provided.\n /\n fallback?: ReactNode\n /\n The avatar icon to use.\n /\n icon?: ReactElement\n /\n Defines loading strategy.\n /\n loading?: HTMLProps<\"img\">[\"loading\"]\n /\n The name of the person in the avatar.\n \n - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n * - If `src` is not loaded, the name will be used to create the initials\n /\n name?: string\n /\n Defining which referrer is sent when fetching the resource.\n \n @default 'no-referrer'\n /\n referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n /\n The image url of the avatar.\n /\n src?: HTMLProps<\"img\">[\"src\"]\n /\n List of sources to use for different screen resolutions.\n /\n srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n /\n Function to get the initials to display.\n */\n format?: (name: string) => string\n}\n\nexport const useAvatar = ({\n name,\n src,\n srcSet,\n alt,\n crossOrigin,\n fallback: fallbackMessage,\n format = defaultFormat,\n icon,\n loading,\n referrerPolicy = \"no-referrer\",\n ...rest\n}: UseAvatarProps = {}) => {\n const imageRef = useRef<HTMLImageElement>(null)\n const initials = name ? format(name) : undefined\n const [loaded, setLoaded] = useState<boolean>(false)\n const fallback = !src \|\| !loaded\n const { t } = useI18n(\"avatar\")\n\n useEffect(() => {\n if (!imageRef.current) return\n\n if (!!imageRef.current.src && imageRef.current.complete) setLoaded(true)\n }, [])\n\n const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest~~,\n ...~~props,\n \"data-fallback\": dataAttr(!!fallbackMessage),\n \"data-loaded\": dataAttr(loaded),\n }),\n [loaded, fallbackMessage, rest],\n )\n\n const getImageProps: PropGetter<\"img\"> = useCallback(\n ({ ref, onLoad, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, imageRef),\n src,\n srcSet,\n alt: name \|\| alt,\n crossOrigin,\n draggable: false,\n hidden: fallback,\n loading,\n referrerPolicy,\n onLoad: handlerAll(onLoad, () => setLoaded(true)),\n }),\n [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n )\n\n const getFallbackProps: PropGetter = useCallback(\n (props) => ({\n ...props,\n \"aria-label\": !fallbackMessage\n ? name \|\| alt \|\| t(\"Avatar Icon\")\n : undefined,\n children: fallbackMessage \|\| initials \|\| icon,\n hidden: !fallback,\n role: !fallbackMessage ? \"img\" : undefined,\n }),\n [name, initials, fallback, icon, fallbackMessage, alt, t],\n )\n\n return {\n name,\n loaded,\n getFallbackProps,\n getGroupProps,\n getImageProps,\n getRootProps,\n }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":"~~;;;;;;;;;;~~AAQA,MAAM,iBAAiB,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,WAChB,GAAG,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;;AAmDzB,MAAa,aAAa,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,eACjB,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,6BAAoC,KAAK;CAC/C,MAAM,WAAW,OAAO,OAAO,KAAK,GAAG;CACvC,MAAM,CAAC,QAAQ,iCAA+B,MAAM;CACpD,MAAM,WAAW,CAAC,OAAO,CAAC;CAC1B,MAAM,EAAE,MAAMA,8BAAQ,SAAS;AAE/B,4BAAgB;AACd,MAAI,CAAC,SAAS,QAAS;AAEvB,MAAI,CAAC,CAAC,SAAS,QAAQ,OAAO,SAAS,QAAQ,SAAU,WAAU,KAAK;IACvE,EAAE,CAAC;CAEN,MAAMC,wCAAyC,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;CAE5E,MAAMC,uCACH,WAAW;EACV,~~GAAG;EACH~~,~~GAAG~~;~~EACH~~,iEAA0B,CAAC,CAAC,gBAAgB;EAC5C,+DAAwB,OAAO;EAChC,GACD;EAAC;EAAQ;EAAiB;EAAK,CAChC;CAED,MAAMC,wCACH,EAAE,KAAK,QAAQ,GAAG,UAAU,EAAE,MAAM;EACnC,GAAG;EACH,KAAKC,sBAAU,KAAK,SAAS;EAC7B;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,0DAAmB,cAAc,UAAU,KAAK,CAAC;EAClD,GACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;EAAK,CACzE;AAeD,QAAO;EACL;EACA;EACA,0CAfC,WAAW;GACV,GAAG;GACH,cAAc,CAAC,kBACX,QAAQ,OAAO,EAAE,cAAc,GAC/B;GACJ,UAAU,mBAAmB,YAAY;GACzC,QAAQ,CAAC;GACT,MAAM,CAAC,kBAAkB,QAAQ;GAClC,GACD;GAAC;GAAM;GAAU;GAAU;GAAM;GAAiB;GAAK;GAAE,CAC1D;EAMC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-avatar.cjs","names":["useI18n","getGroupProps: PropGetter","getRootProps: PropGetter","mergeProps","getImageProps: PropGetter<\"img\">","mergeRefs"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { type HTMLProps, mergeProps, type PropGetter } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n const names = name.trim().split(\" \")\n const firstName = names[0] ?? \"\"\n const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n /*\n The `HTMLImageElement` property `alt`.\n /\n alt?: HTMLProps<\"img\">[\"alt\"]\n /\n The `HTMLImageElement` property `crossOrigin`.\n /\n crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n /\n The fallback text to display if the image is not provided.\n /\n fallback?: ReactNode\n /\n The avatar icon to use.\n /\n icon?: ReactElement\n /\n Defines loading strategy.\n /\n loading?: HTMLProps<\"img\">[\"loading\"]\n /\n The name of the person in the avatar.\n \n - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n * - If `src` is not loaded, the name will be used to create the initials\n /\n name?: string\n /\n Defining which referrer is sent when fetching the resource.\n \n @default 'no-referrer'\n /\n referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n /\n The image url of the avatar.\n /\n src?: HTMLProps<\"img\">[\"src\"]\n /\n List of sources to use for different screen resolutions.\n /\n srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n /\n Function to get the initials to display.\n */\n format?: (name: string) => string\n}\n\nexport const useAvatar = ({\n name,\n src,\n srcSet,\n alt,\n crossOrigin,\n fallback: fallbackMessage,\n format = defaultFormat,\n icon,\n loading,\n referrerPolicy = \"no-referrer\",\n ...rest\n}: UseAvatarProps = {}) => {\n const imageRef = useRef<HTMLImageElement>(null)\n const initials = name ? format(name) : undefined\n const [loaded, setLoaded] = useState<boolean>(false)\n const fallback = !src \|\| !loaded\n const { t } = useI18n(\"avatar\")\n\n useEffect(() => {\n if (!imageRef.current) return\n\n if (!!imageRef.current.src && imageRef.current.complete) setLoaded(true)\n }, [])\n\n const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...mergeProps(rest, props)(),\n \"data-fallback\": dataAttr(!!fallbackMessage),\n \"data-loaded\": dataAttr(loaded),\n }),\n [loaded, fallbackMessage, rest],\n )\n\n const getImageProps: PropGetter<\"img\"> = useCallback(\n ({ ref, onLoad, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, imageRef),\n src,\n srcSet,\n alt: name \|\| alt,\n crossOrigin,\n draggable: false,\n hidden: fallback,\n loading,\n referrerPolicy,\n onLoad: handlerAll(onLoad, () => setLoaded(true)),\n }),\n [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n )\n\n const getFallbackProps: PropGetter = useCallback(\n (props) => ({\n ...props,\n \"aria-label\": !fallbackMessage\n ? name \|\| alt \|\| t(\"Avatar Icon\")\n : undefined,\n children: fallbackMessage \|\| initials \|\| icon,\n hidden: !fallback,\n role: !fallbackMessage ? \"img\" : undefined,\n }),\n [name, initials, fallback, icon, fallbackMessage, alt, t],\n )\n\n return {\n name,\n loaded,\n getFallbackProps,\n getGroupProps,\n getImageProps,\n getRootProps,\n }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,iBAAiB,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,WAChB,GAAG,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;;AAmDzB,MAAa,aAAa,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,eACjB,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,6BAAoC,KAAK;CAC/C,MAAM,WAAW,OAAO,OAAO,KAAK,GAAG;CACvC,MAAM,CAAC,QAAQ,iCAA+B,MAAM;CACpD,MAAM,WAAW,CAAC,OAAO,CAAC;CAC1B,MAAM,EAAE,MAAMA,8BAAQ,SAAS;AAE/B,4BAAgB;AACd,MAAI,CAAC,SAAS,QAAS;AAEvB,MAAI,CAAC,CAAC,SAAS,QAAQ,OAAO,SAAS,QAAQ,SAAU,WAAU,KAAK;IACvE,EAAE,CAAC;CAEN,MAAMC,wCAAyC,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;CAE5E,MAAMC,uCACH,WAAW;EACV,GAAGC,yBAAW,MAAM,MAAM,EAAE;EAC5B,iEAA0B,CAAC,CAAC,gBAAgB;EAC5C,+DAAwB,OAAO;EAChC,GACD;EAAC;EAAQ;EAAiB;EAAK,CAChC;CAED,MAAMC,wCACH,EAAE,KAAK,QAAQ,GAAG,UAAU,EAAE,MAAM;EACnC,GAAG;EACH,KAAKC,sBAAU,KAAK,SAAS;EAC7B;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,0DAAmB,cAAc,UAAU,KAAK,CAAC;EAClD,GACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;EAAK,CACzE;AAeD,QAAO;EACL;EACA;EACA,0CAfC,WAAW;GACV,GAAG;GACH,cAAc,CAAC,kBACX,QAAQ,OAAO,EAAE,cAAc,GAC/B;GACJ,UAAU,mBAAmB,YAAY;GACzC,QAAQ,CAAC;GACT,MAAM,CAAC,kBAAkB,QAAQ;GAClC,GACD;GAAC;GAAM;GAAU;GAAU;GAAM;GAAiB;GAAK;GAAE,CAC1D;EAMC;EACA;EACA;EACD"}

package/dist/cjs/components/breadcrumb/use-breadcrumb.cjs CHANGED Viewed

@@ -3,6 +3,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_children = require('../../utils/children.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
 let react = require("react");
@@ -51,11 +53,7 @@ const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link
 		renderLink,
 		splitItems
 	]);
-	const getRootProps = (0, react.useCallback)((props) => ({
-		"aria-label": t("Breadcrumb"),
-		...rest,
-		...props
-	}), [rest, t]);
+	const getRootProps = (0, react.useCallback)((props) => require_props.mergeProps({ "aria-label": t("Breadcrumb") }, rest, props)(), [rest, t]);
 	const getListProps = (0, react.useCallback)((props) => ({ ...props }), []);
 	const getLinkProps = (0, react.useCallback)(({ href, currentPage, ...props } = {}) => ({
 		href: !currentPage ? href : void 0,

package/dist/cjs/components/breadcrumb/use-breadcrumb.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-breadcrumb.cjs","names":["useValidChildren","useI18n","items","rest","length","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>"],"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 { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface 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 = useValidChildren(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,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,EAAE,EACV,MACA,kBAAkB,GAClB,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,gBAAgBA,kCAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,qCACH,YAA4B;AAC3B,MAAI,CAAC,KAAM,QAAO,EAAE;AAEpB,SAAOC,QAAM,KAAK,EAAE,OAAO,GAAGC,qCACV,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;GAAM,CAAC,CACrE;IAEH,CAAC,KAAK,CACP;CAED,MAAM,yCACH,YAA4B;AAC3B,MAAI,CAAC,SAAU,QAAO;AAEtB,wDAAe,UAAU,EAAE,gBAAO,CAAC;IAErC,CAAC,SAAS,CACX;CAED,MAAM,qCACH,YAA4B;EAC3B,MAAMC,WAASF,QAAM;AAKrB,SAAO;GAJYA,QAAM,MAAM,GAAG,gBAAgB;GAC5BA,QAAM,MAAM,iBAAiBE,WAAS,cAAc;GACxDF,QAAM,MAAME,WAAS,cAAc;GAER;IAE/C,CAAC,iBAAiB,cAAc,CACjC;CAED,MAAM,yCAA8B;AAGlC,MAFoB,CAAC,CAAC,cAAc,OAGlC,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;IACzB;QAED,QAAO,WAAW,MAAM;IAEzB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMC,uCACH,~~WAAW;EACV~~,cAAc,EAAE,aAAa~~;EAC7B~~,~~GAAG;EACH~~,~~GAAG;EACJ~~,~~GACD~~,CAAC,MAAM,EAAE,CACV;CAED,MAAMC,uCACH,WAAW,EAAE,GAAG,OAAO,GACxB,EAAE,CACH;CAED,MAAMC,uCACH,EAAE,MAAM,aAAa,GAAG,UAAU,EAAE,MAAM;EACzC,MAAM,CAAC,cAAc,OAAO;EAC5B,gBAAgB,cAAc,SAAS;EACvC,GAAG;EACJ,GACD,EAAE,CACH;AAWD,QAAO;EACL,UAAU;EACV,0CAVC,WAAW;GACV,cAAc,EAAE,WAAW;GAC3B,MAAM;GACN,GAAG;GACJ,GACD,CAAC,EAAE,CACJ;EAKC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-breadcrumb.cjs","names":["useValidChildren","useI18n","items","rest","length","getRootProps: PropGetter<\"nav\">","mergeProps","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>"],"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 { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface 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 = useValidChildren(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) => mergeProps({ \"aria-label\": t(\"Breadcrumb\") }, rest, props)(),\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":";;;;;;;;;;;;AA0CA,MAAa,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,EAAE,EACV,MACA,kBAAkB,GAClB,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,gBAAgBA,kCAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,qCACH,YAA4B;AAC3B,MAAI,CAAC,KAAM,QAAO,EAAE;AAEpB,SAAOC,QAAM,KAAK,EAAE,OAAO,GAAGC,qCACV,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;GAAM,CAAC,CACrE;IAEH,CAAC,KAAK,CACP;CAED,MAAM,yCACH,YAA4B;AAC3B,MAAI,CAAC,SAAU,QAAO;AAEtB,wDAAe,UAAU,EAAE,gBAAO,CAAC;IAErC,CAAC,SAAS,CACX;CAED,MAAM,qCACH,YAA4B;EAC3B,MAAMC,WAASF,QAAM;AAKrB,SAAO;GAJYA,QAAM,MAAM,GAAG,gBAAgB;GAC5BA,QAAM,MAAM,iBAAiBE,WAAS,cAAc;GACxDF,QAAM,MAAME,WAAS,cAAc;GAER;IAE/C,CAAC,iBAAiB,cAAc,CACjC;CAED,MAAM,yCAA8B;AAGlC,MAFoB,CAAC,CAAC,cAAc,OAGlC,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;IACzB;QAED,QAAO,WAAW,MAAM;IAEzB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMC,uCACH,UAAUC,yBAAW,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,MAAM,MAAM,EAAE,EACvE,CAAC,MAAM,EAAE,CACV;CAED,MAAMC,uCACH,WAAW,EAAE,GAAG,OAAO,GACxB,EAAE,CACH;CAED,MAAMC,uCACH,EAAE,MAAM,aAAa,GAAG,UAAU,EAAE,MAAM;EACzC,MAAM,CAAC,cAAc,OAAO;EAC5B,gBAAgB,cAAc,SAAS;EACvC,GAAG;EACJ,GACD,EAAE,CACH;AAWD,QAAO;EACL,UAAU;EACV,0CAVC,WAAW;GACV,cAAc,EAAE,WAAW;GAC3B,MAAM;GACN,GAAG;GACJ,GACD,CAAC,EAAE,CACJ;EAKC;EACA;EACA;EACD"}

package/dist/esm/components/avatar/use-avatar.js CHANGED Viewed

@@ -2,6 +2,8 @@
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -25,8 +27,7 @@ const useAvatar = ({ name, src, srcSet, alt, crossOrigin, fallback: fallbackMess
 	}, []);
 	const getGroupProps = useCallback((props) => ({ ...props }), []);
 	const getRootProps = useCallback((props) => ({
-		...rest,
-		...props,
+		...mergeProps(rest, props)(),
 		"data-fallback": (0, utils_exports.dataAttr)(!!fallbackMessage),
 		"data-loaded": (0, utils_exports.dataAttr)(loaded)
 	}), [

package/dist/esm/components/avatar/use-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-avatar.js","names":["getGroupProps: PropGetter","getRootProps: PropGetter","getImageProps: PropGetter<\"img\">"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport ~~type~~ { ~~HTMLProps~~, ~~PropGetter~~ } from \"~~../../core~~\"\nimport { ~~useCallback,~~ ~~useEffect~~, ~~useRef~~, ~~useState~~ } from \"~~react~~\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n const names = name.trim().split(\" \")\n const firstName = names[0] ?? \"\"\n const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n /*\n The `HTMLImageElement` property `alt`.\n /\n alt?: HTMLProps<\"img\">[\"alt\"]\n /\n The `HTMLImageElement` property `crossOrigin`.\n /\n crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n /\n The fallback text to display if the image is not provided.\n /\n fallback?: ReactNode\n /\n The avatar icon to use.\n /\n icon?: ReactElement\n /\n Defines loading strategy.\n /\n loading?: HTMLProps<\"img\">[\"loading\"]\n /\n The name of the person in the avatar.\n \n - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n * - If `src` is not loaded, the name will be used to create the initials\n /\n name?: string\n /\n Defining which referrer is sent when fetching the resource.\n \n @default 'no-referrer'\n /\n referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n /\n The image url of the avatar.\n /\n src?: HTMLProps<\"img\">[\"src\"]\n /\n List of sources to use for different screen resolutions.\n /\n srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n /\n Function to get the initials to display.\n */\n format?: (name: string) => string\n}\n\nexport const useAvatar = ({\n name,\n src,\n srcSet,\n alt,\n crossOrigin,\n fallback: fallbackMessage,\n format = defaultFormat,\n icon,\n loading,\n referrerPolicy = \"no-referrer\",\n ...rest\n}: UseAvatarProps = {}) => {\n const imageRef = useRef<HTMLImageElement>(null)\n const initials = name ? format(name) : undefined\n const [loaded, setLoaded] = useState<boolean>(false)\n const fallback = !src \|\| !loaded\n const { t } = useI18n(\"avatar\")\n\n useEffect(() => {\n if (!imageRef.current) return\n\n if (!!imageRef.current.src && imageRef.current.complete) setLoaded(true)\n }, [])\n\n const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest~~,\n ...~~props,\n \"data-fallback\": dataAttr(!!fallbackMessage),\n \"data-loaded\": dataAttr(loaded),\n }),\n [loaded, fallbackMessage, rest],\n )\n\n const getImageProps: PropGetter<\"img\"> = useCallback(\n ({ ref, onLoad, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, imageRef),\n src,\n srcSet,\n alt: name \|\| alt,\n crossOrigin,\n draggable: false,\n hidden: fallback,\n loading,\n referrerPolicy,\n onLoad: handlerAll(onLoad, () => setLoaded(true)),\n }),\n [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n )\n\n const getFallbackProps: PropGetter = useCallback(\n (props) => ({\n ...props,\n \"aria-label\": !fallbackMessage\n ? name \|\| alt \|\| t(\"Avatar Icon\")\n : undefined,\n children: fallbackMessage \|\| initials \|\| icon,\n hidden: !fallback,\n role: !fallbackMessage ? \"img\" : undefined,\n }),\n [name, initials, fallback, icon, fallbackMessage, alt, t],\n )\n\n return {\n name,\n loaded,\n getFallbackProps,\n getGroupProps,\n getImageProps,\n getRootProps,\n }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":"~~;;;;;;;;;~~AAQA,MAAM,iBAAiB,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,WAChB,GAAG,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;;AAmDzB,MAAa,aAAa,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,eACjB,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,WAAW,OAAO,OAAO,KAAK,GAAG;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAkB,MAAM;CACpD,MAAM,WAAW,CAAC,OAAO,CAAC;CAC1B,MAAM,EAAE,MAAM,QAAQ,SAAS;AAE/B,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;AAEvB,MAAI,CAAC,CAAC,SAAS,QAAQ,OAAO,SAAS,QAAQ,SAAU,WAAU,KAAK;IACvE,EAAE,CAAC;CAEN,MAAMA,gBAA4B,aAAa,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;CAE5E,MAAMC,eAA2B,aAC9B,WAAW;EACV,GAAG~~;EACH~~,~~GAAG~~;~~EACH~~,6CAA0B,CAAC,CAAC,gBAAgB;EAC5C,2CAAwB,OAAO;EAChC,GACD;EAAC;EAAQ;EAAiB;EAAK,CAChC;CAED,MAAMC,gBAAmC,aACtC,EAAE,KAAK,QAAQ,GAAG,UAAU,EAAE,MAAM;EACnC,GAAG;EACH,KAAK,UAAU,KAAK,SAAS;EAC7B;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,sCAAmB,cAAc,UAAU,KAAK,CAAC;EAClD,GACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;EAAK,CACzE;AAeD,QAAO;EACL;EACA;EACA,kBAhBmC,aAClC,WAAW;GACV,GAAG;GACH,cAAc,CAAC,kBACX,QAAQ,OAAO,EAAE,cAAc,GAC/B;GACJ,UAAU,mBAAmB,YAAY;GACzC,QAAQ,CAAC;GACT,MAAM,CAAC,kBAAkB,QAAQ;GAClC,GACD;GAAC;GAAM;GAAU;GAAU;GAAM;GAAiB;GAAK;GAAE,CAC1D;EAMC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-avatar.js","names":["getGroupProps: PropGetter","getRootProps: PropGetter","getImageProps: PropGetter<\"img\">"],"sources":["../../../../src/components/avatar/use-avatar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { type HTMLProps, mergeProps, type PropGetter } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr, handlerAll, mergeRefs } from \"../../utils\"\n\nconst defaultFormat = (name: string) => {\n const names = name.trim().split(\" \")\n const firstName = names[0] ?? \"\"\n const lastName = names.length > 1 ? names[names.length - 1] : \"\"\n\n return firstName && lastName\n ? `${firstName.charAt(0)}${lastName.charAt(0)}`\n : firstName.charAt(0)\n}\n\nexport interface UseAvatarProps extends HTMLProps {\n /*\n The `HTMLImageElement` property `alt`.\n /\n alt?: HTMLProps<\"img\">[\"alt\"]\n /\n The `HTMLImageElement` property `crossOrigin`.\n /\n crossOrigin?: HTMLProps<\"img\">[\"crossOrigin\"]\n /\n The fallback text to display if the image is not provided.\n /\n fallback?: ReactNode\n /\n The avatar icon to use.\n /\n icon?: ReactElement\n /\n Defines loading strategy.\n /\n loading?: HTMLProps<\"img\">[\"loading\"]\n /\n The name of the person in the avatar.\n \n - If `src` has loaded, the name will be used as the `alt` attribute of the `img`\n * - If `src` is not loaded, the name will be used to create the initials\n /\n name?: string\n /\n Defining which referrer is sent when fetching the resource.\n \n @default 'no-referrer'\n /\n referrerPolicy?: HTMLProps<\"img\">[\"referrerPolicy\"]\n /\n The image url of the avatar.\n /\n src?: HTMLProps<\"img\">[\"src\"]\n /\n List of sources to use for different screen resolutions.\n /\n srcSet?: HTMLProps<\"img\">[\"srcSet\"]\n /\n Function to get the initials to display.\n */\n format?: (name: string) => string\n}\n\nexport const useAvatar = ({\n name,\n src,\n srcSet,\n alt,\n crossOrigin,\n fallback: fallbackMessage,\n format = defaultFormat,\n icon,\n loading,\n referrerPolicy = \"no-referrer\",\n ...rest\n}: UseAvatarProps = {}) => {\n const imageRef = useRef<HTMLImageElement>(null)\n const initials = name ? format(name) : undefined\n const [loaded, setLoaded] = useState<boolean>(false)\n const fallback = !src \|\| !loaded\n const { t } = useI18n(\"avatar\")\n\n useEffect(() => {\n if (!imageRef.current) return\n\n if (!!imageRef.current.src && imageRef.current.complete) setLoaded(true)\n }, [])\n\n const getGroupProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...mergeProps(rest, props)(),\n \"data-fallback\": dataAttr(!!fallbackMessage),\n \"data-loaded\": dataAttr(loaded),\n }),\n [loaded, fallbackMessage, rest],\n )\n\n const getImageProps: PropGetter<\"img\"> = useCallback(\n ({ ref, onLoad, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, imageRef),\n src,\n srcSet,\n alt: name \|\| alt,\n crossOrigin,\n draggable: false,\n hidden: fallback,\n loading,\n referrerPolicy,\n onLoad: handlerAll(onLoad, () => setLoaded(true)),\n }),\n [src, srcSet, alt, crossOrigin, loading, referrerPolicy, fallback, name],\n )\n\n const getFallbackProps: PropGetter = useCallback(\n (props) => ({\n ...props,\n \"aria-label\": !fallbackMessage\n ? name \|\| alt \|\| t(\"Avatar Icon\")\n : undefined,\n children: fallbackMessage \|\| initials \|\| icon,\n hidden: !fallback,\n role: !fallbackMessage ? \"img\" : undefined,\n }),\n [name, initials, fallback, icon, fallbackMessage, alt, t],\n )\n\n return {\n name,\n loaded,\n getFallbackProps,\n getGroupProps,\n getImageProps,\n getRootProps,\n }\n}\n\nexport type UseAvatarReturn = ReturnType<typeof useAvatar>\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,iBAAiB,SAAiB;CACtC,MAAM,QAAQ,KAAK,MAAM,CAAC,MAAM,IAAI;CACpC,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,WAAW,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,KAAK;AAE9D,QAAO,aAAa,WAChB,GAAG,UAAU,OAAO,EAAE,GAAG,SAAS,OAAO,EAAE,KAC3C,UAAU,OAAO,EAAE;;AAmDzB,MAAa,aAAa,EACxB,MACA,KACA,QACA,KACA,aACA,UAAU,iBACV,SAAS,eACT,MACA,SACA,iBAAiB,eACjB,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,WAAW,OAAO,OAAO,KAAK,GAAG;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAkB,MAAM;CACpD,MAAM,WAAW,CAAC,OAAO,CAAC;CAC1B,MAAM,EAAE,MAAM,QAAQ,SAAS;AAE/B,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;AAEvB,MAAI,CAAC,CAAC,SAAS,QAAQ,OAAO,SAAS,QAAQ,SAAU,WAAU,KAAK;IACvE,EAAE,CAAC;CAEN,MAAMA,gBAA4B,aAAa,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;CAE5E,MAAMC,eAA2B,aAC9B,WAAW;EACV,GAAG,WAAW,MAAM,MAAM,EAAE;EAC5B,6CAA0B,CAAC,CAAC,gBAAgB;EAC5C,2CAAwB,OAAO;EAChC,GACD;EAAC;EAAQ;EAAiB;EAAK,CAChC;CAED,MAAMC,gBAAmC,aACtC,EAAE,KAAK,QAAQ,GAAG,UAAU,EAAE,MAAM;EACnC,GAAG;EACH,KAAK,UAAU,KAAK,SAAS;EAC7B;EACA;EACA,KAAK,QAAQ;EACb;EACA,WAAW;EACX,QAAQ;EACR;EACA;EACA,sCAAmB,cAAc,UAAU,KAAK,CAAC;EAClD,GACD;EAAC;EAAK;EAAQ;EAAK;EAAa;EAAS;EAAgB;EAAU;EAAK,CACzE;AAeD,QAAO;EACL;EACA;EACA,kBAhBmC,aAClC,WAAW;GACV,GAAG;GACH,cAAc,CAAC,kBACX,QAAQ,OAAO,EAAE,cAAc,GAC/B;GACJ,UAAU,mBAAmB,YAAY;GACzC,QAAQ,CAAC;GACT,MAAM,CAAC,kBAAkB,QAAQ;GAClC,GACD;GAAC;GAAM;GAAU;GAAU;GAAM;GAAiB;GAAK;GAAE,CAC1D;EAMC;EACA;EACA;EACD"}

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

@@ -2,6 +2,8 @@
 import { useValidChildren } from "../../utils/children.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
 import { cloneElement, useCallback, useMemo } from "react";
@@ -50,11 +52,7 @@ const useBreadcrumb = ({ children, ellipsis, endBoundaries = 0, items = [], link
 		renderLink,
 		splitItems
 	]);
-	const getRootProps = useCallback((props) => ({
-		"aria-label": t("Breadcrumb"),
-		...rest,
-		...props
-	}), [rest, t]);
+	const getRootProps = useCallback((props) => mergeProps({ "aria-label": t("Breadcrumb") }, rest, props)(), [rest, t]);
 	const getListProps = useCallback((props) => ({ ...props }), []);
 	const getLinkProps = useCallback(({ href, currentPage, ...props } = {}) => ({
 		href: !currentPage ? href : void 0,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-breadcrumb.js","names":["items","rest","length","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>"],"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 { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface 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 = useValidChildren(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,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,EAAE,EACV,MACA,kBAAkB,GAClB,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAM,QAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,aAAa,aAChB,YAA4B;AAC3B,MAAI,CAAC,KAAM,QAAO,EAAE;AAEpB,SAAOA,QAAM,KAAK,EAAE,OAAO,GAAGC,aAC5B,aAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;GAAM,CAAC,CACrE;IAEH,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,aACpB,YAA4B;AAC3B,MAAI,CAAC,SAAU,QAAO;AAEtB,oCAAe,UAAU,EAAE,gBAAO,CAAC;IAErC,CAAC,SAAS,CACX;CAED,MAAM,aAAa,aAChB,YAA4B;EAC3B,MAAMC,WAASF,QAAM;AAKrB,SAAO;GAJYA,QAAM,MAAM,GAAG,gBAAgB;GAC5BA,QAAM,MAAM,iBAAiBE,WAAS,cAAc;GACxDF,QAAM,MAAME,WAAS,cAAc;GAER;IAE/C,CAAC,iBAAiB,cAAc,CACjC;CAED,MAAM,gBAAgB,cAAc;AAGlC,MAFoB,CAAC,CAAC,cAAc,OAGlC,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;IACzB;QAED,QAAO,WAAW,MAAM;IAEzB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMC,eAAkC,aACrC,WAAW~~;EACV~~,cAAc,EAAE,aAAa~~;EAC7B~~,~~GAAG;EACH~~,~~GAAG;EACJ~~,~~GACD~~,CAAC,MAAM,EAAE,CACV;CAED,MAAMC,eAAiC,aACpC,WAAW,EAAE,GAAG,OAAO,GACxB,EAAE,CACH;CAED,MAAMC,eAA2D,aAC9D,EAAE,MAAM,aAAa,GAAG,UAAU,EAAE,MAAM;EACzC,MAAM,CAAC,cAAc,OAAO;EAC5B,gBAAgB,cAAc,SAAS;EACvC,GAAG;EACJ,GACD,EAAE,CACH;AAWD,QAAO;EACL,UAAU;EACV,kBAX0C,aACzC,WAAW;GACV,cAAc,EAAE,WAAW;GAC3B,MAAM;GACN,GAAG;GACJ,GACD,CAAC,EAAE,CACJ;EAKC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-breadcrumb.js","names":["items","rest","length","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>"],"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 { mergeProps } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface 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 = useValidChildren(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) => mergeProps({ \"aria-label\": t(\"Breadcrumb\") }, rest, props)(),\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":";;;;;;;;;;;AA0CA,MAAa,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,EAAE,EACV,MACA,kBAAkB,GAClB,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAM,QAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,aAAa,aAChB,YAA4B;AAC3B,MAAI,CAAC,KAAM,QAAO,EAAE;AAEpB,SAAOA,QAAM,KAAK,EAAE,OAAO,GAAGC,aAC5B,aAAkB,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;GAAM,CAAC,CACrE;IAEH,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,aACpB,YAA4B;AAC3B,MAAI,CAAC,SAAU,QAAO;AAEtB,oCAAe,UAAU,EAAE,gBAAO,CAAC;IAErC,CAAC,SAAS,CACX;CAED,MAAM,aAAa,aAChB,YAA4B;EAC3B,MAAMC,WAASF,QAAM;AAKrB,SAAO;GAJYA,QAAM,MAAM,GAAG,gBAAgB;GAC5BA,QAAM,MAAM,iBAAiBE,WAAS,cAAc;GACxDF,QAAM,MAAME,WAAS,cAAc;GAER;IAE/C,CAAC,iBAAiB,cAAc,CACjC;CAED,MAAM,gBAAgB,cAAc;AAGlC,MAFoB,CAAC,CAAC,cAAc,OAGlC,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;IACzB;QAED,QAAO,WAAW,MAAM;IAEzB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMC,eAAkC,aACrC,UAAU,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,MAAM,MAAM,EAAE,EACvE,CAAC,MAAM,EAAE,CACV;CAED,MAAMC,eAAiC,aACpC,WAAW,EAAE,GAAG,OAAO,GACxB,EAAE,CACH;CAED,MAAMC,eAA2D,aAC9D,EAAE,MAAM,aAAa,GAAG,UAAU,EAAE,MAAM;EACzC,MAAM,CAAC,cAAc,OAAO;EAC5B,gBAAgB,cAAc,SAAS;EACvC,GAAG;EACJ,GACD,EAAE,CACH;AAWD,QAAO;EACL,UAAU;EACV,kBAX0C,aACzC,WAAW;GACV,cAAc,EAAE,WAAW;GAC3B,MAAM;GACN,GAAG;GACJ,GACD,CAAC,EAAE,CACJ;EAKC;EACA;EACA;EACD"}

package/dist/types/components/accordion/accordion.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1231 from "react";
+import * as react1033 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1231.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1033.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react1219 from "react";
+import * as react1021 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1219.Context<{
+declare const AccordionDescendantsContext: react1021.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1219.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1219.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1219.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react1219.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1021.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1219.RefCallback<HTMLButtonElement>;
+    register: react1021.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1219.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1219.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react1219.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1021.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1219.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1021.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1219.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react1219.Dispatch<react1219.SetStateAction<number>>;
-  setIndex: react1219.Dispatch<react1219.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1021.Dispatch<react1021.SetStateAction<number>>;
+  setIndex: react1021.Dispatch<react1021.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1218 from "react";
+import * as react1020 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1218.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react1020.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/airy/airy.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1210 from "react";
+import * as react92 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1210.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react92.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react1209 from "react";
+import * as react91 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1209.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react91.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alpha-slider/alpha-slider.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react1202 from "react";
+import * as react90 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1202.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react90.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1200 from "react";
+import * as react89 from "react";
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react1200.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react89.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1201 from "react";
+import * as react69 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1201.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react69.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1203 from "react";
+import * as react70 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1203.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react70.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1203.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react70.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1203.Dispatch<react1203.SetStateAction<string>>;
-  setValue: react1203.Dispatch<react1203.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react70.Dispatch<react70.SetStateAction<string>>;
+  setValue: react70.Dispatch<react70.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts CHANGED Viewed

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react1197 from "react";
+import * as react66 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils18 from "@yamada-ui/utils";
+import * as _yamada_ui_utils2 from "@yamada-ui/utils";
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react1197.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils2.Dict = _yamada_ui_utils2.Dict<any>>(el: H | react66.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1197.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1197.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react66.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react66.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils2.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils2.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react1195 from "react";
+import * as react62 from "react";
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react1195.ReactElement<any, string | react1195.JSXElementConstructor<any>>[];
+  children: react62.ReactElement<any, string | react62.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/badge/badge.d.ts CHANGED Viewed

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react1194 from "react";
+import * as react60 from "react";
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react1194.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react60.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

package/dist/types/components/bleed/bleed.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1193 from "react";
+import * as react86 from "react";
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react1193.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react86.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

package/dist/types/components/blockquote/blockquote.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react1192 from "react";
+import * as react77 from "react";
 import { ReactNode } from "react";
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react1192.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react77.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *

package/dist/types/components/breadcrumb/breadcrumb.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { BreadcrumbStyle } from "./breadcrumb.style.js";
 import { UseBreadcrumbProps } from "./use-breadcrumb.js";
 import "../../index.js";
-import * as react1191 from "react";
+import * as react76 from "react";
 import { ReactElement } from "react";
 //#region src/components/breadcrumb/breadcrumb.d.ts
@@ -40,7 +40,7 @@ interface BreadcrumbRootProps extends HTMLStyledProps<"nav">, ThemeProps<Breadcr
    */
   separatorProps?: BreadcrumbSeparatorProps;
 }
-declare const BreadcrumbPropsContext: react1191.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
+declare const BreadcrumbPropsContext: react76.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
 /**
  * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
  *