npm - @yamada-ui/react - Versions diffs - 2.3.0-next-20260412095035 → 2.3.0-next-20260412105801 - Mend

@yamada-ui/react 2.3.0-next-20260412095035 → 2.3.0-next-20260412105801

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 (241) hide show

package/dist/cjs/components/picture/picture.cjs CHANGED Viewed

@@ -67,7 +67,10 @@ const Picture = ({ children, enableSorting = true, sources: sourcesProp = [], pi
 		searchValue,
 		compareSources
 	]);
-	const sourceElements = (0, react.useMemo)(() => sources.map(({ maxW: _maxW, minW: _minW, ...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.source, { ...rest$1 }, index)), [sources]);
+	const sourceElements = (0, react.useMemo)(() => sources.map(({ maxW: _maxW, minW: _minW, ...sourceRest }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.source, {
+		suppressHydrationWarning: rest.suppressHydrationWarning,
+		...sourceRest
+	}, index)), [sources, rest.suppressHydrationWarning]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.picture, {
 		...pictureProps,
 		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [sourceElements, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_image.Image, { ...rest })] })

package/dist/cjs/components/picture/picture.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picture.cjs","names":["Picture: FC<PictureProps>","useSystem","rest","tokenToValue","styled","Image","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) {\n return computedSources.sort(compareSources)\n } else {\n return computedSources\n }\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...~~rest~~ }, index) => (\n <styled.source key={index} {~~...~~rest} />\n )),\n [sources],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,cACA,GAAG,WACC;CACJ,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,yCACH,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,yDAAgB,EAAE,GAAG,IAAI,oDAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,oDAAa,EAAE,GAAG,uDAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,mCAAwB;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,qDAAaC,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,qDAAaA,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGD;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,0CAEF,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,~~GAAGA~~,~~UAAQ~~,~~UAClD~~,2CAACE,uBAAO,~~UAAmB~~,~~GAAIF~~,~~UAAX~~,~~MAAmB~~,~~CACvC~~,EACJ,CAAC,~~QAAQ~~,~~CACV~~;AAED,QACE,~~2CAACE~~,uBAAO;EAAQ,GAAI;YACjB,YACC,qFACG,gBAED,2CAACC,uBAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAWL,mCAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,2CAACG,uBAAO;EAAc;EAAO,GAAI;GAAQ"}
1	+ {"version":3,"file":"picture.cjs","names":["Picture: FC<PictureProps>","useSystem","rest","tokenToValue","styled","Image","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) {\n return computedSources.sort(compareSources)\n } else {\n return computedSources\n }\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...sourceRest }, index) => (\n <styled.source\n key={index}\n suppressHydrationWarning={rest.suppressHydrationWarning}\n {...sourceRest}\n />\n )),\n [sources, rest.suppressHydrationWarning],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,cACA,GAAG,WACC;CACJ,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,yCACH,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,yDAAgB,EAAE,GAAG,IAAI,oDAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,oDAAa,EAAE,GAAG,uDAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,mCAAwB;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,qDAAaC,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,qDAAaA,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGD;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,0CAEF,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAG,cAAc,UACxD,2CAACE,uBAAO;EAEN,0BAA0B,KAAK;EAC/B,GAAI;IAFC,MAGL,CACF,EACJ,CAAC,SAAS,KAAK,yBAAyB,CACzC;AAED,QACE,2CAACA,uBAAO;EAAQ,GAAI;YACjB,YACC,qFACG,gBAED,2CAACC,uBAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAWL,mCAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,2CAACG,uBAAO;EAAc;EAAO,GAAI;GAAQ"}

package/dist/cjs/components/rating/rating.cjs CHANGED Viewed

@@ -104,7 +104,7 @@ const RatingGroup = withContext(({ value, ...rest }) => {
 		}, index))
 	});
 }, "group")();
-const RatingItem = withContext((props) => {
+const RatingItem = withContext(({ suppressHydrationWarning, ...props }) => {
 	const { active, filled, fractionValue, groupValue, getInputProps, getLabelProps } = require_use_rating.useRatingItem(props);
 	const { emptyIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_star_icon.StarIcon, {
 		fill: "currentColor",
@@ -115,8 +115,14 @@ const RatingItem = withContext((props) => {
 	}), iconProps, inputProps, itemProps } = useComponentContext();
 	const clipPath = fractionValue !== 1 ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
-		...getLabelProps((0, require_utils_index.utils_exports.runIfFn)(itemProps, groupValue)),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps((0, require_utils_index.utils_exports.runIfFn)(inputProps, groupValue)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingIcon, {
+		...getLabelProps({
+			suppressHydrationWarning,
+			...(0, require_utils_index.utils_exports.runIfFn)(itemProps, groupValue)
+		}),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps({
+			suppressHydrationWarning,
+			...(0, require_utils_index.utils_exports.runIfFn)(inputProps, groupValue)
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingIcon, {
 			"--clip-path": clipPath,
 			...(0, require_utils_index.utils_exports.runIfFn)(iconProps, groupValue),
 			children: filled ? (0, require_utils_index.utils_exports.runIfFn)(filledIcon, groupValue) : (0, require_utils_index.utils_exports.runIfFn)(emptyIcon, groupValue)

package/dist/cjs/components/rating/rating.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.cjs","names":["createSlotComponent","ratingStyle","useRating","RatingContext","styled","useRatingContext","useRatingItem","StarIcon","varAttr"],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n RatingContext,\n useRating,\n useRatingContext,\n useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n RatingProps,\n \| \"color\"\n \| \"emptyIcon\"\n \| \"filledIcon\"\n \| \"groupProps\"\n \| \"iconProps\"\n \| \"inputProps\"\n \| \"itemProps\"\n> {}\n\nexport interface RatingProps\n extends\n Merge<Omit<HTMLStyledProps, \"children\" \| \"color\">, UseRatingProps>,\n ThemeProps<RatingStyle> {\n /*\n The color of the filled icons.\n /\n color?: FunctionOrValue<number, CSSProps[\"color\"]>\n /\n The empty icon for the rating.\n /\n emptyIcon?: ReactNodeOrFunction<number>\n /\n The filled icon for the rating.\n /\n filledIcon?: ReactNodeOrFunction<number>\n /\n Props for the rating group.\n /\n groupProps?: FunctionOrValue<number, RatingGroupProps>\n /\n Props for the rating item.\n /\n iconProps?: FunctionOrValue<number, RatingIconProps>\n /\n Props for the input element.\n /\n inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n /\n Props for the rating item.\n /\n itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n ComponentContext,\n PropsContext: RatingPropsContext,\n useComponentContext,\n usePropsContext: useRatingPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n \"rating\",\n ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/\n `Rating` is a component used to allow users to provide ratings.\n \n @see https://yamada-ui.com/docs/components/rating\n /\nexport const Rating = withProvider<\"div\", RatingProps>(\n ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ...rest\n }) => {\n const {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n } = useRating(rest)\n const ratingContext = useMemo(\n () => ({\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n }),\n [\n id,\n name,\n count,\n decimal,\n disabled,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n displayValue,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n ],\n )\n const componentContext = useMemo(\n () => ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n }),\n [\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ],\n )\n\n return (\n <RatingContext value={ratingContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingGroup key={index} value={index + 1} />\n ))}\n </styled.div>\n </ComponentContext>\n </RatingContext>\n )\n },\n \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n ({ value, ...rest }) => {\n const { fractions } = useRatingContext()\n const { groupProps } = useComponentContext()\n const count = useMemo(\n () => (value === 1 ? fractions + 1 : fractions),\n [value, fractions],\n )\n\n return (\n <styled.div {...runIfFn(groupProps, value)} {...rest}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingItem key={index} groupValue={value} index={index} />\n ))}\n </styled.div>\n )\n },\n \"group\",\n)()\n\ninterface RatingItemProps\n extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>((props) => {\n const {\n active,\n filled,\n fractionValue,\n groupValue,\n getInputProps,\n getLabelProps,\n } = useRatingItem(props)\n const {\n emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n iconProps,\n inputProps,\n itemProps,\n } = useComponentContext()\n const clipPath =\n fractionValue !== 1\n ? `inset(0 ${active ? 100 - fractionValue 100 : 100}% 0 0)`\n : undefined\n\n return (\n <styled.label {...getLabelProps(runIfFn(itemProps, groupValue))}>\n <styled.input {...getInputProps(runIfFn(inputProps, groupValue))} />\n\n <RatingIcon\n {...{ \"--clip-path\": clipPath }}\n {...runIfFn(iconProps, groupValue)}\n >\n {filled\n ? runIfFn(filledIcon, groupValue)\n : runIfFn(emptyIcon, groupValue)}\n </RatingIcon>\n </styled.label>\n )\n}, \"item\")(undefined, ({ groupValue, ...rest }) => {\n const { color } = useComponentContext()\n\n return {\n \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n groupValue,\n ...rest,\n }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACEA,6CACF,UACAC,iCACD;;;;;;AASD,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACEC,6BAAU,KAAK;AAoEnB,QACE,2CAACC;EAAc,iCAnER;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAwBG,2CAAC;GAAiB,iCAtBb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAKK,2CAACC,uBAAO;IAAI,GAAI,cAAc;cAC3B,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,2CAAC,eAAwB,OAAO,QAAQ,KAAtB,MAA2B,CAC7C;KACS;IACI;GACL;GAGpB,OACD,EAAE;AAMH,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAcC,qCAAkB;CACxC,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,iCACG,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,UAAU,CACnB;AAED,QACE,2CAACD,uBAAO;EAAI,kDAAY,YAAY,MAAM;EAAE,GAAI;YAC7C,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,2CAAC;GAAuB,YAAY;GAAc;KAAjC,MAA0C,CAC3D;GACS;GAGjB,QACD,EAAE;AAKH,MAAM,aAAa,~~aAAuC~~,~~UAAU~~;~~CAClE~~,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACEE,iCAAc,MAAM;CACxB,MAAM,EACJ,YAAY,2CAACC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACvE,aAAa,2CAACA;EAAS,MAAK;EAAe,aAAY;GAAiB,EACxE,WACA,YACA,cACE,qBAAqB;CACzB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD;AAEN,QACE,4CAACH,uBAAO;~~EAAM~~,GAAI,~~6DAAsB~~,WAAW,WAAW,CAAC;~~aAC7D~~,2CAACA,uBAAO,~~SAAM~~,GAAI,~~6DAAsB~~,YAAY,WAAW,CAAC,~~GAAI~~,~~EAEpE~~,2CAAC;GACO,eAAe;GACrB,kDAAY,WAAW,WAAW;aAEjC,wDACW,YAAY,WAAW,kDACvB,WAAW,WAAW;IACvB;GACA;~~GAEhB~~,~~OAAO~~,CAAC,SAAY,EAAE,YAAY,GAAG,WAAW;~~CACjD~~,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EACL,kBAAkBI,mEAAgB,OAAO,WAAW,EAAE,SAAS;EAC/D;EACA,GAAG;EACJ;EACD;AAIF,MAAM,aAAa,YAAoC,OAAO,OAAO,EAAE"}
1	+ {"version":3,"file":"rating.cjs","names":["createSlotComponent","ratingStyle","useRating","RatingContext","styled","useRatingContext","useRatingItem","StarIcon","varAttr"],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n RatingContext,\n useRating,\n useRatingContext,\n useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n RatingProps,\n \| \"color\"\n \| \"emptyIcon\"\n \| \"filledIcon\"\n \| \"groupProps\"\n \| \"iconProps\"\n \| \"inputProps\"\n \| \"itemProps\"\n> {}\n\nexport interface RatingProps\n extends\n Merge<Omit<HTMLStyledProps, \"children\" \| \"color\">, UseRatingProps>,\n ThemeProps<RatingStyle> {\n /*\n The color of the filled icons.\n /\n color?: FunctionOrValue<number, CSSProps[\"color\"]>\n /\n The empty icon for the rating.\n /\n emptyIcon?: ReactNodeOrFunction<number>\n /\n The filled icon for the rating.\n /\n filledIcon?: ReactNodeOrFunction<number>\n /\n Props for the rating group.\n /\n groupProps?: FunctionOrValue<number, RatingGroupProps>\n /\n Props for the rating item.\n /\n iconProps?: FunctionOrValue<number, RatingIconProps>\n /\n Props for the input element.\n /\n inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n /\n Props for the rating item.\n /\n itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n ComponentContext,\n PropsContext: RatingPropsContext,\n useComponentContext,\n usePropsContext: useRatingPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n \"rating\",\n ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/\n `Rating` is a component used to allow users to provide ratings.\n \n @see https://yamada-ui.com/docs/components/rating\n /\nexport const Rating = withProvider<\"div\", RatingProps>(\n ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ...rest\n }) => {\n const {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n } = useRating(rest)\n const ratingContext = useMemo(\n () => ({\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n }),\n [\n id,\n name,\n count,\n decimal,\n disabled,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n displayValue,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n ],\n )\n const componentContext = useMemo(\n () => ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n }),\n [\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ],\n )\n\n return (\n <RatingContext value={ratingContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingGroup key={index} value={index + 1} />\n ))}\n </styled.div>\n </ComponentContext>\n </RatingContext>\n )\n },\n \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n ({ value, ...rest }) => {\n const { fractions } = useRatingContext()\n const { groupProps } = useComponentContext()\n const count = useMemo(\n () => (value === 1 ? fractions + 1 : fractions),\n [value, fractions],\n )\n\n return (\n <styled.div {...runIfFn(groupProps, value)} {...rest}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingItem key={index} groupValue={value} index={index} />\n ))}\n </styled.div>\n )\n },\n \"group\",\n)()\n\ninterface RatingItemProps\n extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>(\n ({ suppressHydrationWarning, ...props }) => {\n const {\n active,\n filled,\n fractionValue,\n groupValue,\n getInputProps,\n getLabelProps,\n } = useRatingItem(props)\n const {\n emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n iconProps,\n inputProps,\n itemProps,\n } = useComponentContext()\n const clipPath =\n fractionValue !== 1\n ? `inset(0 ${active ? 100 - fractionValue 100 : 100}% 0 0)`\n : undefined\n\n return (\n <styled.label\n {...getLabelProps({\n suppressHydrationWarning,\n ...runIfFn(itemProps, groupValue),\n })}\n >\n <styled.input\n {...getInputProps({\n suppressHydrationWarning,\n ...runIfFn(inputProps, groupValue),\n })}\n />\n\n <RatingIcon\n {...{ \"--clip-path\": clipPath }}\n {...runIfFn(iconProps, groupValue)}\n >\n {filled\n ? runIfFn(filledIcon, groupValue)\n : runIfFn(emptyIcon, groupValue)}\n </RatingIcon>\n </styled.label>\n )\n },\n \"item\",\n)(undefined, ({ groupValue, ...rest }) => {\n const { color } = useComponentContext()\n\n return {\n \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n groupValue,\n ...rest,\n }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACEA,6CACF,UACAC,iCACD;;;;;;AASD,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACEC,6BAAU,KAAK;AAoEnB,QACE,2CAACC;EAAc,iCAnER;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAwBG,2CAAC;GAAiB,iCAtBb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAKK,2CAACC,uBAAO;IAAI,GAAI,cAAc;cAC3B,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,2CAAC,eAAwB,OAAO,QAAQ,KAAtB,MAA2B,CAC7C;KACS;IACI;GACL;GAGpB,OACD,EAAE;AAMH,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAcC,qCAAkB;CACxC,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,iCACG,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,UAAU,CACnB;AAED,QACE,2CAACD,uBAAO;EAAI,kDAAY,YAAY,MAAM;EAAE,GAAI;YAC7C,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,2CAAC;GAAuB,YAAY;GAAc;KAAjC,MAA0C,CAC3D;GACS;GAGjB,QACD,EAAE;AAKH,MAAM,aAAa,aAChB,EAAE,0BAA0B,GAAG,YAAY;CAC1C,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACEE,iCAAc,MAAM;CACxB,MAAM,EACJ,YAAY,2CAACC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACvE,aAAa,2CAACA;EAAS,MAAK;EAAe,aAAY;GAAiB,EACxE,WACA,YACA,cACE,qBAAqB;CACzB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD;AAEN,QACE,4CAACH,uBAAO;EACN,GAAI,cAAc;GAChB;GACA,kDAAW,WAAW,WAAW;GAClC,CAAC;aAEF,2CAACA,uBAAO,SACN,GAAI,cAAc;GAChB;GACA,kDAAW,YAAY,WAAW;GACnC,CAAC,GACF,EAEF,2CAAC;GACO,eAAe;GACrB,kDAAY,WAAW,WAAW;aAEjC,wDACW,YAAY,WAAW,kDACvB,WAAW,WAAW;IACvB;GACA;GAGnB,OACD,CAAC,SAAY,EAAE,YAAY,GAAG,WAAW;CACxC,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EACL,kBAAkBI,mEAAgB,OAAO,WAAW,EAAE,SAAS;EAC/D;EACA,GAAG;EACJ;EACD;AAIF,MAAM,aAAa,YAAoC,OAAO,OAAO,EAAE"}

package/dist/esm/components/picture/picture.js CHANGED Viewed

@@ -66,7 +66,10 @@ const Picture = ({ children, enableSorting = true, sources: sourcesProp = [], pi
 		searchValue,
 		compareSources
 	]);
-	const sourceElements = useMemo(() => sources.map(({ maxW: _maxW, minW: _minW, ...rest$1 }, index) => /* @__PURE__ */ jsx(styled.source, { ...rest$1 }, index)), [sources]);
+	const sourceElements = useMemo(() => sources.map(({ maxW: _maxW, minW: _minW, ...sourceRest }, index) => /* @__PURE__ */ jsx(styled.source, {
+		suppressHydrationWarning: rest.suppressHydrationWarning,
+		...sourceRest
+	}, index)), [sources, rest.suppressHydrationWarning]);
 	return /* @__PURE__ */ jsx(styled.picture, {
 		...pictureProps,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [sourceElements, /* @__PURE__ */ jsx(Image, { ...rest })] })

package/dist/esm/components/picture/picture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picture.js","names":["Picture: FC<PictureProps>","rest","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) {\n return computedSources.sort(compareSources)\n } else {\n return computedSources\n }\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...~~rest~~ }, index) => (\n <styled.source key={index} {~~...~~rest} />\n )),\n [sources],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,cACA,GAAG,WACC;CACJ,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,iBAAiB,aACpB,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,qCAAgB,EAAE,GAAG,IAAI,gCAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,gCAAa,EAAE,GAAG,mCAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,UAAU,cAAc;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,iCAAa,aAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,iCAAa,aAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,cAEnB,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,~~GAAGA~~,~~UAAQ~~,~~UAClD~~,oBAAC,OAAO,~~UAAmB~~,~~GAAIA~~,~~UAAX~~,~~MAAmB~~,~~CACvC~~,EACJ,CAAC,~~QAAQ~~,~~CACV~~;AAED,QACE,oBAAC,OAAO;EAAQ,GAAI;YACjB,YACC,8CACG,gBAED,oBAAC,SAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAW,WAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,oBAAC,OAAO;EAAc;EAAO,GAAI;GAAQ"}
1	+ {"version":3,"file":"picture.js","names":["Picture: FC<PictureProps>","rest","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number \| string \| undefined,\n maxW: number \| string \| undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /*\n The maximum width for the source.\n \n If media is set, media takes precedence.\n /\n maxW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The minimum width for the source.\n \n If media is set, media takes precedence.\n /\n minW?: AnyString \| number \| ThemeTokens[\"sizes\"]\n /\n The source set for the source element.\n /\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /\n If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n \n @default true\n /\n enableSorting?: boolean\n /\n The sources for the picture element.\n /\n sources?: PictureSource[]\n /\n The props for the picture element.\n /\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/\n `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n \n @see https://yamada-ui.com/docs/components/picture\n /\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) {\n return computedSources.sort(compareSources)\n } else {\n return computedSources\n }\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...sourceRest }, index) => (\n <styled.source\n key={index}\n suppressHydrationWarning={rest.suppressHydrationWarning}\n {...sourceRest}\n />\n )),\n [sources, rest.suppressHydrationWarning],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /\n The media query for the source.\n */\n media?: AnyString \| ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,cACA,GAAG,WACC;CACJ,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,iBAAiB,aACpB,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,qCAAgB,EAAE,GAAG,IAAI,gCAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,gCAAa,EAAE,GAAG,mCAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,UAAU,cAAc;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,iCAAa,aAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,iCAAa,aAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,cAEnB,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAG,cAAc,UACxD,oBAAC,OAAO;EAEN,0BAA0B,KAAK;EAC/B,GAAI;IAFC,MAGL,CACF,EACJ,CAAC,SAAS,KAAK,yBAAyB,CACzC;AAED,QACE,oBAAC,OAAO;EAAQ,GAAI;YACjB,YACC,8CACG,gBAED,oBAAC,SAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAW,WAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,oBAAC,OAAO;EAAc;EAAO,GAAI;GAAQ"}

package/dist/esm/components/rating/rating.js CHANGED Viewed

@@ -103,7 +103,7 @@ const RatingGroup = withContext(({ value, ...rest }) => {
 		}, index))
 	});
 }, "group")();
-const RatingItem = withContext((props) => {
+const RatingItem = withContext(({ suppressHydrationWarning, ...props }) => {
 	const { active, filled, fractionValue, groupValue, getInputProps, getLabelProps } = useRatingItem(props);
 	const { emptyIcon = /* @__PURE__ */ jsx(StarIcon, {
 		fill: "currentColor",
@@ -114,8 +114,14 @@ const RatingItem = withContext((props) => {
 	}), iconProps, inputProps, itemProps } = useComponentContext();
 	const clipPath = fractionValue !== 1 ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : void 0;
 	return /* @__PURE__ */ jsxs(styled.label, {
-		...getLabelProps((0, utils_exports.runIfFn)(itemProps, groupValue)),
-		children: [/* @__PURE__ */ jsx(styled.input, { ...getInputProps((0, utils_exports.runIfFn)(inputProps, groupValue)) }), /* @__PURE__ */ jsx(RatingIcon, {
+		...getLabelProps({
+			suppressHydrationWarning,
+			...(0, utils_exports.runIfFn)(itemProps, groupValue)
+		}),
+		children: [/* @__PURE__ */ jsx(styled.input, { ...getInputProps({
+			suppressHydrationWarning,
+			...(0, utils_exports.runIfFn)(inputProps, groupValue)
+		}) }), /* @__PURE__ */ jsx(RatingIcon, {
 			"--clip-path": clipPath,
 			...(0, utils_exports.runIfFn)(iconProps, groupValue),
 			children: filled ? (0, utils_exports.runIfFn)(filledIcon, groupValue) : (0, utils_exports.runIfFn)(emptyIcon, groupValue)

package/dist/esm/components/rating/rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.js","names":[],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n RatingContext,\n useRating,\n useRatingContext,\n useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n RatingProps,\n \| \"color\"\n \| \"emptyIcon\"\n \| \"filledIcon\"\n \| \"groupProps\"\n \| \"iconProps\"\n \| \"inputProps\"\n \| \"itemProps\"\n> {}\n\nexport interface RatingProps\n extends\n Merge<Omit<HTMLStyledProps, \"children\" \| \"color\">, UseRatingProps>,\n ThemeProps<RatingStyle> {\n /*\n The color of the filled icons.\n /\n color?: FunctionOrValue<number, CSSProps[\"color\"]>\n /\n The empty icon for the rating.\n /\n emptyIcon?: ReactNodeOrFunction<number>\n /\n The filled icon for the rating.\n /\n filledIcon?: ReactNodeOrFunction<number>\n /\n Props for the rating group.\n /\n groupProps?: FunctionOrValue<number, RatingGroupProps>\n /\n Props for the rating item.\n /\n iconProps?: FunctionOrValue<number, RatingIconProps>\n /\n Props for the input element.\n /\n inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n /\n Props for the rating item.\n /\n itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n ComponentContext,\n PropsContext: RatingPropsContext,\n useComponentContext,\n usePropsContext: useRatingPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n \"rating\",\n ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/\n `Rating` is a component used to allow users to provide ratings.\n \n @see https://yamada-ui.com/docs/components/rating\n /\nexport const Rating = withProvider<\"div\", RatingProps>(\n ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ...rest\n }) => {\n const {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n } = useRating(rest)\n const ratingContext = useMemo(\n () => ({\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n }),\n [\n id,\n name,\n count,\n decimal,\n disabled,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n displayValue,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n ],\n )\n const componentContext = useMemo(\n () => ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n }),\n [\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ],\n )\n\n return (\n <RatingContext value={ratingContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingGroup key={index} value={index + 1} />\n ))}\n </styled.div>\n </ComponentContext>\n </RatingContext>\n )\n },\n \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n ({ value, ...rest }) => {\n const { fractions } = useRatingContext()\n const { groupProps } = useComponentContext()\n const count = useMemo(\n () => (value === 1 ? fractions + 1 : fractions),\n [value, fractions],\n )\n\n return (\n <styled.div {...runIfFn(groupProps, value)} {...rest}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingItem key={index} groupValue={value} index={index} />\n ))}\n </styled.div>\n )\n },\n \"group\",\n)()\n\ninterface RatingItemProps\n extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>((props) => {\n const {\n active,\n filled,\n fractionValue,\n groupValue,\n getInputProps,\n getLabelProps,\n } = useRatingItem(props)\n const {\n emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n iconProps,\n inputProps,\n itemProps,\n } = useComponentContext()\n const clipPath =\n fractionValue !== 1\n ? `inset(0 ${active ? 100 - fractionValue 100 : 100}% 0 0)`\n : undefined\n\n return (\n <styled.label {...getLabelProps(runIfFn(itemProps, groupValue))}>\n <styled.input {...getInputProps(runIfFn(inputProps, groupValue))} />\n\n <RatingIcon\n {...{ \"--clip-path\": clipPath }}\n {...runIfFn(iconProps, groupValue)}\n >\n {filled\n ? runIfFn(filledIcon, groupValue)\n : runIfFn(emptyIcon, groupValue)}\n </RatingIcon>\n </styled.label>\n )\n}, \"item\")(undefined, ({ groupValue, ...rest }) => {\n const { color } = useComponentContext()\n\n return {\n \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n groupValue,\n ...rest,\n }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,YACD;;;;;;AASD,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACE,UAAU,KAAK;AAoEnB,QACE,oBAAC;EAAc,OApEK,eACb;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAwBG,oBAAC;GAAiB,OAvBG,eAChB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAKK,oBAAC,OAAO;IAAI,GAAI,cAAc;cAC3B,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,eAAwB,OAAO,QAAQ,KAAtB,MAA2B,CAC7C;KACS;IACI;GACL;GAGpB,OACD,EAAE;AAMH,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,QAAQ,cACL,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,UAAU,CACnB;AAED,QACE,oBAAC,OAAO;EAAI,8BAAY,YAAY,MAAM;EAAE,GAAI;YAC7C,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC;GAAuB,YAAY;GAAc;KAAjC,MAA0C,CAC3D;GACS;GAGjB,QACD,EAAE;AAKH,MAAM,aAAa,~~aAAuC~~,~~UAAU~~;~~CAClE~~,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACE,cAAc,MAAM;CACxB,MAAM,EACJ,YAAY,oBAAC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACvE,aAAa,oBAAC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACxE,WACA,YACA,cACE,qBAAqB;CACzB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD;AAEN,QACE,qBAAC,OAAO;~~EAAM~~,GAAI,~~yCAAsB~~,WAAW,WAAW,CAAC;~~aAC7D~~,oBAAC,OAAO,~~SAAM~~,GAAI,~~yCAAsB~~,YAAY,WAAW,CAAC,~~GAAI~~,~~EAEpE~~,oBAAC;GACO,eAAe;GACrB,8BAAY,WAAW,WAAW;aAEjC,oCACW,YAAY,WAAW,8BACvB,WAAW,WAAW;IACvB;GACA;~~GAEhB~~,~~OAAO~~,CAAC,SAAY,EAAE,YAAY,GAAG,WAAW;~~CACjD~~,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EACL,kBAAkB,mCAAgB,OAAO,WAAW,EAAE,SAAS;EAC/D;EACA,GAAG;EACJ;EACD;AAIF,MAAM,aAAa,YAAoC,OAAO,OAAO,EAAE"}
1	+ {"version":3,"file":"rating.js","names":[],"sources":["../../../../src/components/rating/rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FunctionOrValue, Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { RatingStyle } from \"./rating.style\"\nimport type { UseRatingItemProps, UseRatingProps } from \"./use-rating\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { StarIcon } from \"../icon\"\nimport { ratingStyle } from \"./rating.style\"\nimport {\n RatingContext,\n useRating,\n useRatingContext,\n useRatingItem,\n} from \"./use-rating\"\n\ninterface ComponentContext extends Pick<\n RatingProps,\n \| \"color\"\n \| \"emptyIcon\"\n \| \"filledIcon\"\n \| \"groupProps\"\n \| \"iconProps\"\n \| \"inputProps\"\n \| \"itemProps\"\n> {}\n\nexport interface RatingProps\n extends\n Merge<Omit<HTMLStyledProps, \"children\" \| \"color\">, UseRatingProps>,\n ThemeProps<RatingStyle> {\n /*\n The color of the filled icons.\n /\n color?: FunctionOrValue<number, CSSProps[\"color\"]>\n /\n The empty icon for the rating.\n /\n emptyIcon?: ReactNodeOrFunction<number>\n /\n The filled icon for the rating.\n /\n filledIcon?: ReactNodeOrFunction<number>\n /\n Props for the rating group.\n /\n groupProps?: FunctionOrValue<number, RatingGroupProps>\n /\n Props for the rating item.\n /\n iconProps?: FunctionOrValue<number, RatingIconProps>\n /\n Props for the input element.\n /\n inputProps?: FunctionOrValue<number, HTMLStyledProps<\"input\">>\n /\n Props for the rating item.\n /\n itemProps?: FunctionOrValue<number, RatingItemProps>\n}\n\nconst {\n ComponentContext,\n PropsContext: RatingPropsContext,\n useComponentContext,\n usePropsContext: useRatingPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<RatingProps, RatingStyle, ComponentContext>(\n \"rating\",\n ratingStyle,\n)\n\nexport { RatingPropsContext, useRatingPropsContext }\n\n/\n `Rating` is a component used to allow users to provide ratings.\n \n @see https://yamada-ui.com/docs/components/rating\n /\nexport const Rating = withProvider<\"div\", RatingProps>(\n ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ...rest\n }) => {\n const {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n } = useRating(rest)\n const ratingContext = useMemo(\n () => ({\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n }),\n [\n id,\n name,\n count,\n decimal,\n disabled,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n displayValue,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n ],\n )\n const componentContext = useMemo(\n () => ({\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n }),\n [\n color,\n emptyIcon,\n filledIcon,\n groupProps,\n iconProps,\n inputProps,\n itemProps,\n ],\n )\n\n return (\n <RatingContext value={ratingContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingGroup key={index} value={index + 1} />\n ))}\n </styled.div>\n </ComponentContext>\n </RatingContext>\n )\n },\n \"root\",\n)()\n\ninterface RatingGroupProps extends HTMLStyledProps {\n value: number\n}\n\nconst RatingGroup = withContext<\"div\", RatingGroupProps>(\n ({ value, ...rest }) => {\n const { fractions } = useRatingContext()\n const { groupProps } = useComponentContext()\n const count = useMemo(\n () => (value === 1 ? fractions + 1 : fractions),\n [value, fractions],\n )\n\n return (\n <styled.div {...runIfFn(groupProps, value)} {...rest}>\n {Array.from({ length: count }).map((_, index) => (\n <RatingItem key={index} groupValue={value} index={index} />\n ))}\n </styled.div>\n )\n },\n \"group\",\n)()\n\ninterface RatingItemProps\n extends HTMLStyledProps<\"label\">, UseRatingItemProps {}\n\nconst RatingItem = withContext<\"label\", RatingItemProps>(\n ({ suppressHydrationWarning, ...props }) => {\n const {\n active,\n filled,\n fractionValue,\n groupValue,\n getInputProps,\n getLabelProps,\n } = useRatingItem(props)\n const {\n emptyIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n filledIcon = <StarIcon fill=\"currentColor\" strokeColor=\"currentColor\" />,\n iconProps,\n inputProps,\n itemProps,\n } = useComponentContext()\n const clipPath =\n fractionValue !== 1\n ? `inset(0 ${active ? 100 - fractionValue 100 : 100}% 0 0)`\n : undefined\n\n return (\n <styled.label\n {...getLabelProps({\n suppressHydrationWarning,\n ...runIfFn(itemProps, groupValue),\n })}\n >\n <styled.input\n {...getInputProps({\n suppressHydrationWarning,\n ...runIfFn(inputProps, groupValue),\n })}\n />\n\n <RatingIcon\n {...{ \"--clip-path\": clipPath }}\n {...runIfFn(iconProps, groupValue)}\n >\n {filled\n ? runIfFn(filledIcon, groupValue)\n : runIfFn(emptyIcon, groupValue)}\n </RatingIcon>\n </styled.label>\n )\n },\n \"item\",\n)(undefined, ({ groupValue, ...rest }) => {\n const { color } = useComponentContext()\n\n return {\n \"--filled-color\": varAttr(runIfFn(color, groupValue), \"colors\"),\n groupValue,\n ...rest,\n }\n})\n\ninterface RatingIconProps extends HTMLStyledProps {}\n\nconst RatingIcon = withContext<\"div\", RatingIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;;;AA+DA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,YACD;;;;;;AASD,MAAa,SAAS,cACnB,EACC,OACA,WACA,YACA,YACA,WACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,IACA,MACA,OACA,SACA,UACA,cACA,WACA,uBACA,cACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,OACA,WACA,WACA,YACA,iBACE,UAAU,KAAK;AAoEnB,QACE,oBAAC;EAAc,OApEK,eACb;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAwBG,oBAAC;GAAiB,OAvBG,eAChB;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAKK,oBAAC,OAAO;IAAI,GAAI,cAAc;cAC3B,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,eAAwB,OAAO,QAAQ,KAAtB,MAA2B,CAC7C;KACS;IACI;GACL;GAGpB,OACD,EAAE;AAMH,MAAM,cAAc,aACjB,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,cAAc,kBAAkB;CACxC,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,QAAQ,cACL,UAAU,IAAI,YAAY,IAAI,WACrC,CAAC,OAAO,UAAU,CACnB;AAED,QACE,oBAAC,OAAO;EAAI,8BAAY,YAAY,MAAM;EAAE,GAAI;YAC7C,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC;GAAuB,YAAY;GAAc;KAAjC,MAA0C,CAC3D;GACS;GAGjB,QACD,EAAE;AAKH,MAAM,aAAa,aAChB,EAAE,0BAA0B,GAAG,YAAY;CAC1C,MAAM,EACJ,QACA,QACA,eACA,YACA,eACA,kBACE,cAAc,MAAM;CACxB,MAAM,EACJ,YAAY,oBAAC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACvE,aAAa,oBAAC;EAAS,MAAK;EAAe,aAAY;GAAiB,EACxE,WACA,YACA,cACE,qBAAqB;CACzB,MAAM,WACJ,kBAAkB,IACd,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD;AAEN,QACE,qBAAC,OAAO;EACN,GAAI,cAAc;GAChB;GACA,8BAAW,WAAW,WAAW;GAClC,CAAC;aAEF,oBAAC,OAAO,SACN,GAAI,cAAc;GAChB;GACA,8BAAW,YAAY,WAAW;GACnC,CAAC,GACF,EAEF,oBAAC;GACO,eAAe;GACrB,8BAAY,WAAW,WAAW;aAEjC,oCACW,YAAY,WAAW,8BACvB,WAAW,WAAW;IACvB;GACA;GAGnB,OACD,CAAC,SAAY,EAAE,YAAY,GAAG,WAAW;CACxC,MAAM,EAAE,UAAU,qBAAqB;AAEvC,QAAO;EACL,kBAAkB,mCAAgB,OAAO,WAAW,EAAE,SAAS;EAC/D;EACA,GAAG;EACJ;EACD;AAIF,MAAM,aAAa,YAAoC,OAAO,OAAO,EAAE"}

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

@@ -3,11 +3,13 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { WithTransitionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { CollapseProps } from "../collapse/collapse.js";
+import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react145 from "react";
+import * as react45 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react145.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react45.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 react133 from "react";
+import * as react46 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react133.Context<{
+declare const AccordionDescendantsContext: react46.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: react133.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) => react133.RefCallback<HTMLButtonElement>;
+    } | undefined) => react46.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: react133.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) => react133.RefCallback<HTMLButtonElement>;
+      } | undefined) => react46.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react133.RefCallback<HTMLButtonElement>;
+    register: react46.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: react133.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) => react133.RefCallback<HTMLButtonElement>;
+    } | undefined) => react46.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: react133.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react46.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react133.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react46.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) => react133.RefCallback<HTMLButtonElement>;
+    } | undefined) => react46.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: react133.Dispatch<react133.SetStateAction<number>>;
-  setIndex: react133.Dispatch<react133.SetStateAction<number | number[]>>;
+  setFocusedIndex: react46.Dispatch<react46.SetStateAction<number>>;
+  setIndex: react46.Dispatch<react46.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -4,9 +4,10 @@ import "../../core/index.js";
 import { ActionBarStyle } from "./action-bar.style.js";
 import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react130 from "react";
+import * as react28 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react130.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react28.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

@@ -2,9 +2,10 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react129 from "react";
+import * as react215 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -56,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react129.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react215.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

@@ -3,10 +3,13 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { AlertStyle } from "./alert.style.js";
 import { IconProps } from "../icon/icon.js";
+import "../icon/index.js";
 import { LoadingProps } from "../loading/loading.js";
+import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
+import "../status/index.js";
 import "../../index.js";
-import * as react128 from "react";
+import * as react27 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -17,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react128.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react27.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

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

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"loading" | "title" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
   island: {
     description: {
       color: "fg.muted";

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

@@ -3,8 +3,9 @@ import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 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 react127 from "react";
+import * as react26 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react127.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react26.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 react126 from "react";
+import * as react35 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: react126.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react35.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

@@ -3,14 +3,16 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { AutocompleteStyle } from "./autocomplete.style.js";
 import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
+import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react120 from "react";
+import * as react141 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react120.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react141.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" | "root" | "field" | "indicator" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

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

@@ -2,11 +2,13 @@ import { index_d_exports } from "../../utils/index.js";
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { UsePopoverProps } from "../popover/use-popover.js";
+import "../popover/index.js";
 import { FieldProps } from "../field/field.js";
+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 react114 from "react";
+import * as react135 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react114.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react135.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.
@@ -154,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) => react114.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react135.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>[];
@@ -164,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react114.Dispatch<react114.SetStateAction<string>>;
-  setValue: react114.Dispatch<react114.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react135.Dispatch<react135.SetStateAction<string>>;
+  setValue: react135.Dispatch<react135.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 react123 from "react";
+import * as react131 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils8 from "@yamada-ui/utils";
+import * as _yamada_ui_utils6 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_utils8.Dict = _yamada_ui_utils8.Dict<any>>(el: H | react123.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils6.Dict = _yamada_ui_utils6.Dict<any>>(el: H | react131.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" ? react123.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react123.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils8.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" ? react131.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react131.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils6.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_utils8.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils6.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {