npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.9 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.9 → 1.5.0

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

package/dist/js/packages/components/src/components/Badge/Badge.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n display: flex;\n width: fit-content;\n max-width: 100%;\n\n --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n .content,\n .button {\n border-radius: var(--badge--corner-radius);\n border-width: var(--badge--border-width);\n border-style: var(--badge--border-style);\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n padding: 0;\n display: flex;\n overflow: hidden;\n align-items: center;\n height: var(--badge-size);\n line-height: var(--content-size);\n padding-inline: var(--badge--padding-x);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include ellipsis.ellipsis();\n }\n\n .button,\n .action,\n .close {\n @include focus.focus;\n }\n\n @extend .neutral;\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n }\n }\n\n &:has(.scope) {\n .content,\n .button {\n padding: 0;\n }\n\n .value {\n padding-inline: var(--badge--spacing) var(--badge--padding-x);\n }\n\n .scope {\n padding-inline: var(--badge--padding-x) var(--badge--spacing);\n height: 100%;\n flex-shrink: 0;\n }\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: var(--content-size);\n\n .value {\n padding-inline-end: var(--badge--spacing);\n }\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2);\n }\n }\n }\n\n .action,\n .close {\n height: var(--content-size);\n padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n border-radius: 0;\n margin-inline-start: calc(\n (var(--content-size) + var(--badge--border-width)) * -1\n );\n margin-top: var(--badge--border-width);\n }\n\n /* The trailing button rounds off the badge /\n .close,\n &:not(:has(.close)) .action {\n border-end-end-radius: var(--badge-size);\n border-start-end-radius: var(--badge-size);\n }\n\n &:has(.action):has(.close) {\n .action {\n margin-inline-start: calc(\n (var(--content-size) 2 + var(--badge--border-width)) * -1\n );\n }\n\n .close {\n margin-inline-start: 0;\n }\n }\n\n /* Colors /\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .content,\n .button {\n border-color: var(--badge--#{$color}-border-color);\n background-color: var(--badge--#{$color}-background-color--default);\n color: var(--badge--#{$color}-content-color);\n }\n\n &:not(.disabled) {\n .button {\n &:hover {\n background-color: var(--badge--#{$color}-background-color--hover);\n }\n\n &[data-pressed] {\n background-color: var(--badge--#{$color}-background-color--pressed);\n }\n }\n }\n\n .scope {\n background-color: var(--badge--#{$color}-scope-background-color);\n color: var(--badge--#{$color}-scope-content-color);\n }\n }\n }\n\n @include color(\"neutral\");\n @include color(\"blue\");\n @include color(\"navy\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"green\");\n @include color(\"orange\");\n @include color(\"red\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n &.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-border-color);\n background-color: var(--badge--disabled-background-color);\n color: var(--badge--disabled-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-content-color);\n }\n\n .scope {\n background-color: var(--badge--disabled-scope-background-color);\n color: var(--badge--disabled-scope-content-color);\n }\n }\n\n / Alpha Colors Disabled */\n\n @mixin alphaColor($color) {\n &.#{$color}.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-#{$color}-border-color);\n background-color: var(--badge--disabled-#{$color}-background-color);\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .scope {\n background-color: var(\n --badge--disabled-#{$color}-scope-background-color\n );\n color: var(--badge--disabled-#{$color}-scope-content-color);\n }\n }\n }\n\n @include alphaColor(\"dark\");\n @include alphaColor(\"light\");\n @include alphaColor(\"dark-static\");\n @include alphaColor(\"light-static\");\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.badge {\n display: flex;\n width: fit-content;\n max-width: 100%;\n\n --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n .content,\n .button {\n border-radius: var(--badge--corner-radius);\n border-width: var(--badge--border-width);\n border-style: var(--badge--border-style);\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n padding: 0;\n display: flex;\n overflow: hidden;\n align-items: center;\n height: var(--badge-size);\n line-height: var(--content-size);\n padding-inline: var(--badge--padding-x);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include ellipsis.ellipsis();\n }\n\n .button,\n .action,\n .close {\n @include focus.focus;\n }\n\n @extend .neutral;\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n }\n }\n\n &:has(.scope) {\n .content,\n .button {\n padding: 0;\n }\n\n .value {\n padding-inline: var(--badge--spacing) var(--badge--padding-x);\n }\n\n .scope {\n padding-inline: var(--badge--padding-x) var(--badge--spacing);\n height: 100%;\n flex-shrink: 0;\n }\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: var(--content-size);\n\n .value {\n padding-inline-end: var(--badge--spacing);\n }\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2);\n }\n }\n }\n\n .action,\n .close {\n height: var(--content-size);\n padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n border-radius: 0;\n margin-inline-start: calc(\n (var(--content-size) + var(--badge--border-width)) * -1\n );\n margin-top: var(--badge--border-width);\n }\n\n /* The trailing button rounds off the badge /\n .close,\n &:not(:has(.close)) .action {\n border-end-end-radius: var(--badge-size);\n border-start-end-radius: var(--badge-size);\n }\n\n &:has(.action):has(.close) {\n .action {\n margin-inline-start: calc(\n (var(--content-size) 2 + var(--badge--border-width)) * -1\n );\n }\n\n .close {\n margin-inline-start: 0;\n }\n }\n\n /* Colors /\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .content,\n .button {\n border-color: var(--badge--#{$color}-border-color);\n background-color: var(--badge--#{$color}-background-color--default);\n color: var(--badge--#{$color}-content-color);\n }\n\n &:not(.disabled) {\n .button {\n &:hover {\n background-color: var(--badge--#{$color}-background-color--hover);\n }\n\n &[data-pressed] {\n background-color: var(--badge--#{$color}-background-color--pressed);\n }\n }\n }\n\n .scope {\n background-color: var(--badge--#{$color}-scope-background-color);\n color: var(--badge--#{$color}-scope-content-color);\n }\n }\n }\n\n @include color(\"neutral\");\n @include color(\"blue\");\n @include color(\"navy\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"green\");\n @include color(\"orange\");\n @include color(\"red\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n &.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-border-color);\n background-color: var(--badge--disabled-background-color);\n color: var(--badge--disabled-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-content-color);\n }\n\n .scope {\n background-color: var(--badge--disabled-scope-background-color);\n color: var(--badge--disabled-scope-content-color);\n }\n }\n\n / Alpha Colors Disabled /\n\n @mixin alphaColor($color) {\n &.#{$color}.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-#{$color}-border-color);\n background-color: var(--badge--disabled-#{$color}-background-color);\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .scope {\n background-color: var(\n --badge--disabled-#{$color}-scope-background-color\n );\n color: var(--badge--disabled-#{$color}-scope-content-color);\n }\n }\n }\n\n @include alphaColor(\"dark\");\n @include alphaColor(\"light\");\n @include alphaColor(\"dark-static\");\n @include alphaColor(\"light-static\");\n\n / SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--badge--corner-radius);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/BigNumber/BigNumber.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BigNumber.mjs","names":[],"sources":["../../../../../../../src/components/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./BigNumber.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type BigNumberProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const BigNumber: FC<BigNumberProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.bigNumber, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.text,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <span className={rootClassName}>{children}</span>\n </PropsContextProvider>\n );\n};\n\nexport default BigNumber;\n"],"mappings":";;;;;;;;AASA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,~~KAAK~~,yBAAO,WAAW,SAAS;CAEtD,MAAM,eAA6B,EACjC,MAAM,EACJ,~~WAAW~~,yBAAO,KACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAgB;EAAe,CAAA;CAC5B,CAAA;AAE1B"}
1	+ {"version":3,"file":"BigNumber.mjs","names":["styles"],"sources":["../../../../../../../src/components/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./BigNumber.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type BigNumberProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const BigNumber: FC<BigNumberProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.bigNumber, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.text,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <span className={rootClassName}>{children}</span>\n </PropsContextProvider>\n );\n};\n\nexport default BigNumber;\n"],"mappings":";;;;;;;;AASA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,yBAAO,WAAW,SAAS;CAEtD,MAAM,eAA6B,EACjC,MAAM,EACJ,WAAWA,yBAAO,KACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAgB;EAAe,CAAA;CAC5B,CAAA;AAE1B"}

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import Breadcrumb_module_default from "./Breadcrumb.module.mjs";
 import { BreadcrumbItem } from "./components/BreadcrumbItem/BreadcrumbItem.mjs";
 import clsx from "clsx";
@@ -11,7 +12,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Breadcrumb = (props) => {
 	const { children, className, color = "default", size = "m", ...rest } = props;
-	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], isSkeleton && Breadcrumb_module_default.skeleton, className);
 	const propsContext = { Link: {
 		unstyled: true,
 		className: Breadcrumb_module_default.link,

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface BreadcrumbProps\n extends\n Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n PropsWithChildren {\n /** The color of the breadcrumb. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* The size of the element. @default \"m\" /\n size?: \"s\" \| \"m\";\n}\n\n/* @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.breadcrumb,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n unstyled: true,\n className: styles.link,\n wrapWith: <BreadcrumbItem />,\n },\n };\n\n return (\n <Aria.Breadcrumbs {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Breadcrumbs>\n );\n};\n\nexport default Breadcrumb;\n"],"mappings":"~~;;;;;;;;;;;AAqBA~~,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,gBAAgB,~~KACpB~~,0BAAO,YACP,aAAa,KAAK,~~KAAK~~,0BAAO,QAC9B,SAAS,~~OAAO~~,0BAAO,WACvB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,~~WAAW~~,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}
1	+ {"version":3,"file":"Breadcrumb.mjs","names":["styles"],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface BreadcrumbProps\n extends\n Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n PropsWithChildren {\n /** The color of the breadcrumb. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* The size of the element. @default \"m\" /\n size?: \"s\" \| \"m\";\n}\n\n/* @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.breadcrumb,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n isSkeleton && styles.skeleton,\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n unstyled: true,\n className: styles.link,\n wrapWith: <BreadcrumbItem />,\n },\n };\n\n return (\n <Aria.Breadcrumbs {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Aria.Breadcrumbs>\n );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SAAS,OAAOA,0BAAO,WACvB,cAAcA,0BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,WAAWA,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.module.mjs CHANGED Viewed

@@ -5,6 +5,7 @@ var breadcrumb = "flow--breadcrumb";
 var link = "flow--breadcrumb--link";
 var breadcrumbItem = "flow--breadcrumb--breadcrumb-item";
 var icon = "flow--breadcrumb--icon";
+var skeleton = "flow--breadcrumb--skeleton";
 var dark = "flow--breadcrumb--dark";
 var light = "flow--breadcrumb--light";
 var Breadcrumb_module_default = {
@@ -12,6 +13,7 @@ var Breadcrumb_module_default = {
 	link,
 	breadcrumbItem,
 	icon,
+	skeleton,
 	"size-s": "flow--breadcrumb--size-s",
 	dark,
 	light,
@@ -19,6 +21,6 @@ var Breadcrumb_module_default = {
 	"light-static": "flow--breadcrumb--light-static"
 };
 //#endregion
-export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link };
+export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link, skeleton };
 //# sourceMappingURL=Breadcrumb.module.mjs.map

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n display: flex;\n list-style: none;\n padding: 0;\n align-items: center;\n\n .link {\n padding-inline: var(--breadcrumb--spacing);\n font-weight: var(--breadcrumb--font-weight--default);\n text-decoration: underline;\n cursor: pointer;\n\n @include focus.focus;\n\n & {\n @include ellipsis.ellipsis;\n }\n }\n\n .breadcrumbItem {\n display: flex;\n align-items: center;\n min-width: 0;\n color: var(--breadcrumb--color--default);\n\n &:last-child {\n .icon {\n display: none;\n }\n\n .link {\n text-decoration: none;\n font-weight: var(--breadcrumb--font-weight--current);\n }\n }\n\n &:first-child .link {\n padding-inline-start: 0;\n }\n\n &[data-disabled=\"true\"] {\n .link {\n cursor: unset;\n }\n }\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color--pressed);\n }\n }\n }\n }\n\n /* Size s /\n\n &.size-s {\n .link {\n font-size: var(--font-size-text--s);\n }\n\n .icon {\n width: var(--font-size-text--s);\n height: var(--font-size-text--s);\n }\n }\n\n / Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .breadcrumbItem {\n color: var(--breadcrumb--color-#{$color}--default);\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color-#{$color}--pressed);\n }\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n display: flex;\n list-style: none;\n padding: 0;\n align-items: center;\n\n .link {\n padding-inline: var(--breadcrumb--spacing);\n font-weight: var(--breadcrumb--font-weight--default);\n text-decoration: underline;\n cursor: pointer;\n\n @include focus.focus;\n\n & {\n @include ellipsis.ellipsis;\n }\n }\n\n .breadcrumbItem {\n display: flex;\n align-items: center;\n min-width: 0;\n color: var(--breadcrumb--color--default);\n\n &:last-child {\n .icon {\n display: none;\n }\n\n .link {\n text-decoration: none;\n font-weight: var(--breadcrumb--font-weight--current);\n }\n }\n\n &:first-child .link {\n padding-inline-start: 0;\n }\n\n &[data-disabled=\"true\"] {\n .link {\n cursor: unset;\n }\n }\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color--pressed);\n }\n }\n }\n }\n\n /* SkeletonMode: no underline over the bars, no current item /\n &.skeleton .breadcrumbItem .link {\n text-decoration: none;\n font-weight: var(--breadcrumb--font-weight--default);\n }\n\n / Size s /\n\n &.size-s {\n .link {\n font-size: var(--font-size-text--s);\n }\n\n .icon {\n width: var(--font-size-text--s);\n height: var(--font-size-text--s);\n }\n }\n\n / Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .breadcrumbItem {\n color: var(--breadcrumb--color-#{$color}--default);\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color-#{$color}--pressed);\n }\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.mjs","names":[],"sources":["../../../../../../../../../src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronRight } from \"@/components/Icon/components/icons\";\n\nexport type BreadcrumbItemProps = PropsWithChildren;\n\nexport const BreadcrumbItem: FC<BreadcrumbItemProps> = (props) => {\n const { children } = props;\n\n const rootClassName = clsx(styles.breadcrumbItem);\n\n return (\n <Aria.Breadcrumb className={rootClassName}>\n {children}\n <IconChevronRight size=\"s\" className={styles.icon} />\n </Aria.Breadcrumb>\n );\n};\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;AAQA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,aAAa;CAErB,MAAM,gBAAgB,~~KAAK~~,0BAAO,cAAc;CAEhD,OACE,qBAAC,KAAK,YAAN;EAAiB,WAAW;EAA5B,UAAA,CACG,UACD,oBAAC,kBAAD;GAAkB,MAAK;GAAI,~~WAAW~~,0BAAO;EAAO,CAAA,CACrC;;AAErB"}
1	+ {"version":3,"file":"BreadcrumbItem.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronRight } from \"@/components/Icon/components/icons\";\n\nexport type BreadcrumbItemProps = PropsWithChildren;\n\nexport const BreadcrumbItem: FC<BreadcrumbItemProps> = (props) => {\n const { children } = props;\n\n const rootClassName = clsx(styles.breadcrumbItem);\n\n return (\n <Aria.Breadcrumb className={rootClassName}>\n {children}\n <IconChevronRight size=\"s\" className={styles.icon} />\n </Aria.Breadcrumb>\n );\n};\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;AAQA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,aAAa;CAErB,MAAM,gBAAgB,KAAKA,0BAAO,cAAc;CAEhD,OACE,qBAAC,KAAK,YAAN;EAAiB,WAAW;EAA5B,UAAA,CACG,UACD,oBAAC,kBAAD;GAAkB,MAAK;GAAI,WAAWA,0BAAO;EAAO,CAAA,CACrC;;AAErB"}

package/dist/js/packages/components/src/components/Button/Button.mjs CHANGED Viewed

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import Button_module_default from "./Button.module.mjs";
 import { containsTextChild } from "../../lib/react/remote.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
 import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
@@ -42,6 +43,7 @@ var Button = flowComponent("Button", (props) => {
 	const muted = isMuted(props);
 	props = disablePendingProps(props);
 	const warnDeprecation = useWarnDeprecation();
+	const isSkeleton = useSkeletonMode();
 	const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
 	if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
 	const color = colorFromProps === "accent" ? "success" : colorFromProps;
@@ -50,7 +52,7 @@ var Button = flowComponent("Button", (props) => {
 	* carries the marker. An explicit `Text` child is matched by `:has(.text)`.
 	*/
 	const hasText = containsTextChild(children);
-	const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, className);
+	const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, isSkeleton && Button_module_default.skeleton, className);
 	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
 	const propsContext = {
 		Icon: {
@@ -75,7 +77,7 @@ var Button = flowComponent("Button", (props) => {
 		size,
 		className: Button_module_default.stateIcon
 	}) : void 0;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: !unstyled,
@@ -85,10 +87,15 @@ var Button = flowComponent("Button", (props) => {
 			})
 		})
 	}), stateIcon] });
+	const content = /* @__PURE__ */ jsx(Wrap, {
+		if: !unstyled,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: buttonContent })
+	});
 	if (elementType === "span") {
 		const spanProps = filterDOMProps(restProps, { global: true });
 		return /* @__PURE__ */ jsx("span", {
 			...spanProps,
+			inert: isSkeleton || void 0,
 			"data-disabled": restProps.isDisabled || void 0,
 			className: typeof rootClassName === "string" ? rootClassName : void 0,
 			children: content
@@ -101,6 +108,7 @@ var Button = flowComponent("Button", (props) => {
 		...isReadOnly === true ? { "data-readonly": true } : {},
 		...restProps,
 		"aria-disabled": muted || void 0,
+		inert: isSkeleton || void 0,
 		children: content
 	});
 });

package/dist/js/packages/components/src/components/Button/Button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /** Slot for button placement in action groups. /\n slot?: string;\n /\n The color of the button.\n \n @default \"primary\"\n * @deprecatedValues accent\n /\n color?:\n \"primary\" \| \"success\" \| \"secondary\" \| \"danger\" \| AlphaColor \| \"accent\";\n /* The visual variant of the button. @default \"solid\" /\n variant?: \"plain\" \| \"solid\" \| \"soft\" \| \"outline\";\n /* The size of the button. @default \"m\" /\n size?: \"m\" \| \"s\";\n /* Disables button but keeps it focusable. /\n \"aria-disabled\"?: boolean;\n /* Whether the button is in a pending state. /\n isPending?: boolean;\n /* Whether the button is in a succeeded state. /\n isSucceeded?: boolean;\n /* Whether the button is in a failed state. /\n isFailed?: boolean;\n /* Whether the button is in a read only state. /\n isReadOnly?: boolean;\n /* @internal /\n unstyled?: boolean;\n /* @internal /\n ariaSlot?: string \| null;\n /* @internal /\n elementType?: \"button\" \| \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n !!(\n props.isPending \|\|\n props.isSucceeded \|\|\n props.isFailed \|\|\n props[\"aria-disabled\"] \|\|\n props.isReadOnly\n );\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (isMuted(props)) {\n props = { ...props };\n\n const mutedActionHandler = (e: unknown) => {\n if (e && typeof e === \"object\") {\n // stopPropagation is the default behavior in React Aria\n const isReactAriaEvent =\n \"continuePropagation\" in e &&\n typeof e.continuePropagation === \"function\";\n\n if (\n !isReactAriaEvent &&\n \"stopPropagation\" in e &&\n typeof e.stopPropagation === \"function\"\n ) {\n e.stopPropagation();\n }\n if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n e.preventDefault();\n }\n }\n\n return false;\n };\n\n props.onClick = mutedActionHandler;\n props.onPress = mutedActionHandler;\n props.onPressStart = mutedActionHandler;\n props.onPressEnd = mutedActionHandler;\n props.onPressChange = mutedActionHandler;\n props.onPressUp = mutedActionHandler;\n props.onKeyDown = mutedActionHandler;\n props.onKeyUp = mutedActionHandler;\n }\n\n return props;\n};\n\n/* @flr-generate all /\nexport const Button = flowComponent(\"Button\", (props) => {\n const muted = isMuted(props);\n props = disablePendingProps(props);\n\n const warnDeprecation = useWarnDeprecation();\n\n const {\n color: colorFromProps = \"primary\",\n variant = \"solid\",\n children,\n className,\n size = \"m\",\n isPending,\n isSucceeded,\n isFailed,\n \"aria-disabled\": ariaDisabled,\n ref,\n slot: ignoredSlotProp,\n ariaSlot: slot,\n unstyled,\n isReadOnly,\n elementType,\n ...restProps\n } = props;\n\n if (colorFromProps === \"accent\") {\n warnDeprecation(\n \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n );\n }\n\n const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n /\n A string child renders no element the CSS could match, so the button itself\n * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n */\n const hasText = containsTextChild(children);\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.button,\n isPending && styles.isPending,\n isSucceeded && styles.isSucceeded,\n isFailed && styles.isFailed,\n size === \"s\" && styles[\"size-s\"],\n styles[color],\n styles[variant],\n ariaDisabled && styles.ariaDisabled,\n hasText && styles.hasText,\n className,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n \"aria-hidden\": true,\n size,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n CounterBadge: {\n className: styles.counterBadge,\n },\n Image: {\n className: styles.image,\n },\n };\n\n const stateIcon = isSucceeded ? (\n <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n ) : isFailed ? (\n <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner size={size} className={styles.stateIcon} />\n ) : undefined;\n\n const content = (\n <>\n <PropsContextProvider props={propsContext}>\n <Wrap if={!unstyled}>\n <span className={styles.content}>{children}</span>\n </Wrap>\n </PropsContextProvider>\n {stateIcon}\n </>\n );\n\n if (elementType === \"span\") {\n const spanProps = filterDOMProps(restProps, { global: true });\n\n return (\n <span\n {...spanProps}\n data-disabled={restProps.isDisabled \|\| undefined}\n className={\n typeof rootClassName === \"string\" ? rootClassName : undefined\n }\n >\n {content}\n </span>\n );\n }\n\n return (\n <Aria.Button\n className={rootClassName}\n ref={ref}\n slot={slot}\n {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n {...restProps}\n aria-disabled={muted \|\| undefined}\n >\n {content}\n </Aria.Button>\n );\n});\n\nexport default Button;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /*\n Slot for button placement in action groups: `primary` (at the end),\n * `secondary` (before the primary action) or `abort` (at the start). Without\n * a slot, an action group places the colors primary, success and danger in\n * `primary` and every other color in `abort`. A secondary-colored button that\n * does not abort therefore needs `slot=\"secondary\"`.\n /\n slot?: string;\n /\n The color of the button.\n \n @default \"primary\"\n * @deprecatedValues accent\n /\n color?:\n \"primary\" \| \"success\" \| \"secondary\" \| \"danger\" \| AlphaColor \| \"accent\";\n /* The visual variant of the button. @default \"solid\" /\n variant?: \"plain\" \| \"solid\" \| \"soft\" \| \"outline\";\n /* The size of the button. @default \"m\" /\n size?: \"m\" \| \"s\";\n /* Disables button but keeps it focusable. /\n \"aria-disabled\"?: boolean;\n /* Whether the button is in a pending state. /\n isPending?: boolean;\n /* Whether the button is in a succeeded state. /\n isSucceeded?: boolean;\n /* Whether the button is in a failed state. /\n isFailed?: boolean;\n /* Whether the button is in a read only state. /\n isReadOnly?: boolean;\n /* @internal /\n unstyled?: boolean;\n /* @internal /\n ariaSlot?: string \| null;\n /* @internal /\n elementType?: \"button\" \| \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n !!(\n props.isPending \|\|\n props.isSucceeded \|\|\n props.isFailed \|\|\n props[\"aria-disabled\"] \|\|\n props.isReadOnly\n );\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (isMuted(props)) {\n props = { ...props };\n\n const mutedActionHandler = (e: unknown) => {\n if (e && typeof e === \"object\") {\n // stopPropagation is the default behavior in React Aria\n const isReactAriaEvent =\n \"continuePropagation\" in e &&\n typeof e.continuePropagation === \"function\";\n\n if (\n !isReactAriaEvent &&\n \"stopPropagation\" in e &&\n typeof e.stopPropagation === \"function\"\n ) {\n e.stopPropagation();\n }\n if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n e.preventDefault();\n }\n }\n\n return false;\n };\n\n props.onClick = mutedActionHandler;\n props.onPress = mutedActionHandler;\n props.onPressStart = mutedActionHandler;\n props.onPressEnd = mutedActionHandler;\n props.onPressChange = mutedActionHandler;\n props.onPressUp = mutedActionHandler;\n props.onKeyDown = mutedActionHandler;\n props.onKeyUp = mutedActionHandler;\n }\n\n return props;\n};\n\n/* @flr-generate all /\nexport const Button = flowComponent(\"Button\", (props) => {\n const muted = isMuted(props);\n props = disablePendingProps(props);\n\n const warnDeprecation = useWarnDeprecation();\n const isSkeleton = useSkeletonMode();\n\n const {\n color: colorFromProps = \"primary\",\n variant = \"solid\",\n children,\n className,\n size = \"m\",\n isPending,\n isSucceeded,\n isFailed,\n \"aria-disabled\": ariaDisabled,\n ref,\n slot: ignoredSlotProp,\n ariaSlot: slot,\n unstyled,\n isReadOnly,\n elementType,\n ...restProps\n } = props;\n\n if (colorFromProps === \"accent\") {\n warnDeprecation(\n \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n );\n }\n\n const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n /\n A string child renders no element the CSS could match, so the button itself\n * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n /\n const hasText = containsTextChild(children);\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.button,\n isPending && styles.isPending,\n isSucceeded && styles.isSucceeded,\n isFailed && styles.isFailed,\n size === \"s\" && styles[\"size-s\"],\n styles[color],\n styles[variant],\n ariaDisabled && styles.ariaDisabled,\n hasText && styles.hasText,\n isSkeleton && styles.skeleton,\n className,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n \"aria-hidden\": true,\n size,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n CounterBadge: {\n className: styles.counterBadge,\n },\n Image: {\n className: styles.image,\n },\n };\n\n const stateIcon = isSucceeded ? (\n <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n ) : isFailed ? (\n <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner size={size} className={styles.stateIcon} />\n ) : undefined;\n\n const buttonContent = (\n <>\n <PropsContextProvider props={propsContext}>\n <Wrap if={!unstyled}>\n <span className={styles.content}>{children}</span>\n </Wrap>\n </PropsContextProvider>\n {stateIcon}\n </>\n );\n\n / A styled button is one skeleton surface, so its content draws no skeleton\n of its own. An unstyled button draws no surface, so its content does. */\n const content = (\n <Wrap if={!unstyled}>\n <SkeletonModeReset>{buttonContent}</SkeletonModeReset>\n </Wrap>\n );\n\n if (elementType === \"span\") {\n const spanProps = filterDOMProps(restProps, { global: true });\n\n return (\n <span\n {...spanProps}\n inert={isSkeleton \|\| undefined}\n data-disabled={restProps.isDisabled \|\| undefined}\n className={\n typeof rootClassName === \"string\" ? rootClassName : undefined\n }\n >\n {content}\n </span>\n );\n }\n\n return (\n <Aria.Button\n className={rootClassName}\n ref={ref}\n slot={slot}\n {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n {...restProps}\n aria-disabled={muted \|\| undefined}\n inert={isSkeleton \|\| undefined}\n >\n {content}\n </Aria.Button>\n );\n});\n\nexport default Button;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/Button/Button.module.mjs CHANGED Viewed

@@ -24,6 +24,7 @@ var plain = "flow--button--plain";
 var soft = "flow--button--soft";
 var avatar = "flow--button--avatar";
 var image = "flow--button--image";
+var skeleton = "flow--button--skeleton";
 var Button_module_default = {
 	button,
 	outline,
@@ -51,9 +52,12 @@ var Button_module_default = {
 	plain,
 	soft,
 	avatar,
-	image
+	image,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--button--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--button--skeleton-text-shimmer"
 };
 //#endregion
-export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
+export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, skeleton, soft, solid, stateIcon, success, text };
 //# sourceMappingURL=Button.module.mjs.map

package/dist/js/packages/components/src/components/Button/Button.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements /\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n / Fade the label out when a state icon (pending/success/fail) takes over. /\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States /\n\n / Subtle tactile press feedback: a slight inward scale while pressed.\n A muted button ignores the press, so it does not scale. Overlay triggers\n keep data-pressed while their overlay is open, so an expanded trigger is\n excluded. /\n &[data-pressed]:where(\n :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n ) {\n transform: scale(0.97);\n }\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n / Success/failure icon pops in when it replaces the label. The pending\n spinner is left alone — it has its own animation. /\n &.isSucceeded,\n &.isFailed {\n .stateIcon {\n animation: state-icon-pop var(--transition--duration--default)\n cubic-bezier(0.34, 1.35, 0.5, 1);\n }\n }\n\n / Size /\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n / Variants /\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n / Outline */\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n}\n\n@keyframes state-icon-pop {\n from {\n transform: scale(0.6);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements /\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n / Fade the label out when a state icon (pending/success/fail) takes over. /\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States /\n\n / Subtle tactile press feedback: a slight inward scale while pressed.\n A muted button ignores the press, so it does not scale. Overlay triggers\n keep data-pressed while their overlay is open, so an expanded trigger is\n excluded. /\n &[data-pressed]:where(\n :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n ) {\n transform: scale(0.97);\n }\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n / Success/failure icon pops in when it replaces the label. The pending\n spinner is left alone — it has its own animation. /\n &.isSucceeded,\n &.isFailed {\n .stateIcon {\n animation: state-icon-pop var(--transition--duration--default)\n cubic-bezier(0.34, 1.35, 0.5, 1);\n }\n }\n\n / Size /\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n / Variants /\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n / Outline /\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n\n / SkeletonMode — after the variants, so the surface wins over their colors */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--button--corner-radius);\n\n &:where(.size-s) {\n --skeleton-radius: var(--button--corner-radius-s);\n }\n\n &:where(:has(.avatar)) {\n --skeleton-radius: var(--corner-radius--round);\n }\n }\n}\n\n@include skeleton.keyframes;\n\n@keyframes state-icon-pop {\n from {\n transform: scale(0.6);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/Calendar.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import Calendar_module_default from "./Calendar.module.mjs";
 import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.mjs";
 import clsx from "clsx";
@@ -8,13 +9,15 @@ import * as Aria from "react-aria-components";
 //#region src/components/Calendar/Calendar.tsx
 var Calendar = (props) => {
 	const { className } = props;
-	const rootClassName = clsx(Calendar_module_default.calendar, className);
-	return /* @__PURE__ */ jsxs(Aria.Calendar, {
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Calendar_module_default.calendar, isSkeleton && Calendar_module_default.skeleton, className);
+	return /* @__PURE__ */ jsx(Aria.Calendar, {
 		className: rootClassName,
-		children: [/* @__PURE__ */ jsx(CalendarHeader, {}), /* @__PURE__ */ jsx(Aria.CalendarGrid, {
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsxs(SkeletonModeReset, { children: [/* @__PURE__ */ jsx(CalendarHeader, {}), /* @__PURE__ */ jsx(Aria.CalendarGrid, {
 			weekdayStyle: "short",
 			children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date })
-		})]
+		})] })
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Calendar/Calendar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n const { className } = props;\n\n const rootClassName = clsx(styles.calendar, className);\n\n return (\n <Aria.Calendar className={rootClassName}>\n <CalendarHeader />\n <Aria.CalendarGrid weekdayStyle=\"short\">\n {(date) => <Aria.CalendarCell date={date} />}\n </Aria.CalendarGrid>\n </Aria.Calendar>\n );\n};\n\nexport default Calendar;\n"],"mappings":"~~;;;;;;;;AAOA~~,IAAa,YAAoC,UAAU;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,gBAAgB,~~KAAK~~,wBAAO,~~UAAU~~,~~SAAS~~;~~CAErD~~,OACE,~~qBAAC~~,KAAK,UAAN;EAAe,WAAW;~~EAA1B~~,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN;GAAmB,cAAa;GAC5B,WAAA,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA;EAC1B,CAAA,CACN;;AAEnB"}
1	+ {"version":3,"file":"Calendar.mjs","names":["styles"],"sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n const { className } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.calendar,\n isSkeleton && styles.skeleton,\n className,\n );\n\n return (\n <Aria.Calendar className={rootClassName} inert={isSkeleton \|\| undefined}>\n {/* The calendar is one skeleton surface, its content draws none. */}\n <SkeletonModeReset>\n <CalendarHeader />\n <Aria.CalendarGrid weekdayStyle=\"short\">\n {(date) => <Aria.CalendarCell date={date} />}\n </Aria.CalendarGrid>\n </SkeletonModeReset>\n </Aria.Calendar>\n );\n};\n\nexport default Calendar;\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAoC,UAAU;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,wBAAO,UACP,cAAcA,wBAAO,UACrB,SACF;CAEA,OACE,oBAAC,KAAK,UAAN;EAAe,WAAW;EAAe,OAAO,cAAc,KAAA;EAE5D,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN;GAAmB,cAAa;GAC5B,WAAA,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA;EAC1B,CAAA,CACF,EAAA,CAAA;CACN,CAAA;AAEnB"}

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs CHANGED Viewed

@@ -7,15 +7,19 @@ var container = "flow--calendar--container";
 var presetMenu = "flow--calendar--preset-menu";
 var presetSeparator = "flow--calendar--preset-separator";
 var range = "flow--calendar--range";
+var skeleton = "flow--calendar--skeleton";
 var Calendar_module_default = {
 	calendar,
 	calendarHeader,
 	container,
 	presetMenu,
 	presetSeparator,
-	range
+	range,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--calendar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--calendar--skeleton-text-shimmer"
 };
 //#endregion
-export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, presetSeparator, range };
+export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, presetSeparator, range, skeleton };
 //# sourceMappingURL=Calendar.module.mjs.map

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. /\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: 200px;\n\n /\n * With an auto width, WebKit resolved the menu one item padding wider on\n * every layout. Each reposition of the popover then resized it again,\n * inside react-aria's resize observer on the popover: a\n * \"ResizeObserver loop\" error per step.\n /\n width: max-content;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n\n .presetMenu {\n width: auto;\n }\n\n / The presets move below the grid, so the separator turns horizontal. */\n .presetSeparator {\n border-inline-end: 0;\n border-top: var(--separator--height) var(--separator--border-style)\n var(--separator--color);\n width: 100%;\n }\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. /\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: 200px;\n\n /\n * With an auto width, WebKit resolved the menu one item padding wider on\n * every layout. Each reposition of the popover then resized it again,\n * inside react-aria's resize observer on the popover: a\n * \"ResizeObserver loop\" error per step.\n /\n width: max-content;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n\n .presetMenu {\n width: auto;\n }\n\n / The presets move below the grid, so the separator turns horizontal. /\n .presetSeparator {\n border-inline-end: 0;\n border-top: var(--separator--height) var(--separator--border-style)\n var(--separator--color);\n width: 100%;\n }\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n\n / SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n }\n}\n\n@include skeleton.keyframes;\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"../../Calendar.module.scss\";\n\nexport const CalendarHeader: FC = () => {\n return (\n <header className={styles.calendarHeader}>\n <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n <IconChevronLeft />\n </Button>\n <Aria.Heading />\n <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n <IconChevronRight />\n </Button>\n </header>\n );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;;AASA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD;EAAQ,~~WAAW~~,wBAAO;EAA1B,UAAA;GACE,oBAAC,QAAD;IAAQ,UAAS;IAAW,SAAQ;IAAQ,OAAM;IAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACZ,CAAA;GACR,oBAAC,KAAK,SAAN,CAAe,CAAA;GACf,oBAAC,QAAD;IAAQ,UAAS;IAAO,SAAQ;IAAQ,OAAM;IAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACb,CAAA;EACF;;AAEZ"}
1	+ {"version":3,"file":"CalendarHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"../../Calendar.module.scss\";\n\nexport const CalendarHeader: FC = () => {\n return (\n <header className={styles.calendarHeader}>\n <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n <IconChevronLeft />\n </Button>\n <Aria.Heading />\n <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n <IconChevronRight />\n </Button>\n </header>\n );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;;AASA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD;EAAQ,WAAWA,wBAAO;EAA1B,UAAA;GACE,oBAAC,QAAD;IAAQ,UAAS;IAAW,SAAQ;IAAQ,OAAM;IAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACZ,CAAA;GACR,oBAAC,KAAK,SAAN,CAAe,CAAA;GACf,oBAAC,QAAD;IAAQ,UAAS;IAAO,SAAQ;IAAQ,OAAM;IAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACb,CAAA;EACF;;AAEZ"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SkeletonModeReset, useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import Calendar_module_default from "../../Calendar.module.mjs";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.mjs";
 import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
@@ -34,11 +35,13 @@ var InnerRangeCalendar = ({ withDatePickerPresets }) => {
 /** @flr-generate all */
 var RangeCalendar = (props) => {
 	const { className, withDatePickerPresets, ...rest } = props;
-	const rootClassName = clsx(Calendar_module_default.calendar, Calendar_module_default.range, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Calendar_module_default.calendar, Calendar_module_default.range, isSkeleton && Calendar_module_default.skeleton, className);
 	return /* @__PURE__ */ jsx(Aria.RangeCalendar, {
 		...rest,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsx(InnerRangeCalendar, { withDatePickerPresets })
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(InnerRangeCalendar, { withDatePickerPresets }) })
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeCalendar.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport type { DateRangePickerProps } from \"@/components/DateRangePicker\";\n\nexport type RangeCalendarProps = Omit<\n Aria.RangeCalendarProps<Aria.DateValue>,\n \"children\"\n> &\n Pick<DateRangePickerProps, \"withDatePickerPresets\">;\n\n/** @internal /\nconst InnerRangeCalendar: FC<RangeCalendarProps> = ({\n withDatePickerPresets,\n}) => {\n const dateRangeHelper = useCalendarDateRangePresets(withDatePickerPresets);\n\n const predefinedDateHelperItems = dateRangeHelper.map((present) => {\n return (\n <MenuItem\n key={present.label}\n isDisabled={present.disabled}\n onPress={present.onPress}\n aria-label={present.label}\n >\n {present.label}\n </MenuItem>\n );\n });\n\n return (\n <div className={styles.container}>\n {withDatePickerPresets && (\n <>\n <Aria.Menu className={styles.presetMenu}>\n {predefinedDateHelperItems}\n </Aria.Menu>\n <Separator\n orientation=\"vertical\"\n className={styles.presetSeparator}\n />\n </>\n )}\n <div>\n <CalendarHeader />\n <Aria.CalendarGrid>\n {(date) => <Aria.CalendarCell date={date} />}\n </Aria.CalendarGrid>\n </div>\n </div>\n );\n};\n\n/* @flr-generate all */\nexport const RangeCalendar: FC<RangeCalendarProps> = (props) => {\n const { className, withDatePickerPresets, ...rest } = props;\n const rootClassName = clsx(styles.calendar, styles.range, className);\n\n return (\n <Aria.RangeCalendar {...rest} className={rootClassName}>\n <InnerRangeCalendar withDatePickerPresets={withDatePickerPresets} />\n </Aria.RangeCalendar>\n );\n};\n\nexport default RangeCalendar;\n"],"mappings":"~~;;;;;;;;;;;;;AAiBA~~,IAAM,sBAA8C,EAClD,4BACI;CAGJ,MAAM,4BAFkB,4BAA4B,qBAElB,CAAA,CAAgB,KAAK,YAAY;EACjE,OACE,oBAAC,UAAD;GAEE,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,cAAY,QAAQ;GAEnB,UAAA,QAAQ;EACD,GANH,QAAQ,KAML;CAEd,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,~~WAAW~~,wBAAO;EAAvB,UAAA,CACG,yBACC,~~qBAAA~~,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN;GAAW,~~WAAW~~,wBAAO;GAC1B,UAAA;EACQ,CAAA,GACX,oBAAC,WAAD;GACE,aAAY;GACZ,~~WAAW~~,wBAAO;EACnB,CAAA,CACD,EAAA,CAAA,GAEJ,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN,EAAA,WACI,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA,EAC1B,CAAA,CAChB,EAAA,CAAA,CACF;;AAET;;AAGA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,WAAW,uBAAuB,GAAG,SAAS;CACtD,MAAM,gBAAgB,~~KAAK~~,wBAAO,~~UAAU~~,wBAAO,~~OAAO~~,~~SAAS~~;~~CAEnE~~,OACE,oBAAC,KAAK,eAAN;~~EAAoB~~,GAAI;~~EAAM~~,WAAW;~~EACvC~~,UAAA,oBAAC,oBAAD,EAA2C,sBAAwB,CAAA;~~CACjD~~,CAAA;AAExB"}
1	+ {"version":3,"file":"RangeCalendar.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"../CalendarHeader\";\nimport clsx from \"clsx\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { useCalendarDateRangePresets } from \"@/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets\";\nimport { Separator } from \"@/components/Separator\";\nimport type { DateRangePickerProps } from \"@/components/DateRangePicker\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type RangeCalendarProps = Omit<\n Aria.RangeCalendarProps<Aria.DateValue>,\n \"children\"\n> &\n Pick<DateRangePickerProps, \"withDatePickerPresets\">;\n\n/** @internal /\nconst InnerRangeCalendar: FC<RangeCalendarProps> = ({\n withDatePickerPresets,\n}) => {\n const dateRangeHelper = useCalendarDateRangePresets(withDatePickerPresets);\n\n const predefinedDateHelperItems = dateRangeHelper.map((present) => {\n return (\n <MenuItem\n key={present.label}\n isDisabled={present.disabled}\n onPress={present.onPress}\n aria-label={present.label}\n >\n {present.label}\n </MenuItem>\n );\n });\n\n return (\n <div className={styles.container}>\n {withDatePickerPresets && (\n <>\n <Aria.Menu className={styles.presetMenu}>\n {predefinedDateHelperItems}\n </Aria.Menu>\n <Separator\n orientation=\"vertical\"\n className={styles.presetSeparator}\n />\n </>\n )}\n <div>\n <CalendarHeader />\n <Aria.CalendarGrid>\n {(date) => <Aria.CalendarCell date={date} />}\n </Aria.CalendarGrid>\n </div>\n </div>\n );\n};\n\n/* @flr-generate all /\nexport const RangeCalendar: FC<RangeCalendarProps> = (props) => {\n const { className, withDatePickerPresets, ...rest } = props;\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.calendar,\n styles.range,\n isSkeleton && styles.skeleton,\n className,\n );\n\n return (\n <Aria.RangeCalendar\n {...rest}\n className={rootClassName}\n inert={isSkeleton \|\| undefined}\n >\n {/ The calendar is one skeleton surface, its content draws none. */}\n <SkeletonModeReset>\n <InnerRangeCalendar withDatePickerPresets={withDatePickerPresets} />\n </SkeletonModeReset>\n </Aria.RangeCalendar>\n );\n};\n\nexport default RangeCalendar;\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,sBAA8C,EAClD,4BACI;CAGJ,MAAM,4BAFkB,4BAA4B,qBAElB,CAAA,CAAgB,KAAK,YAAY;EACjE,OACE,oBAAC,UAAD;GAEE,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,cAAY,QAAQ;GAEnB,UAAA,QAAQ;EACD,GANH,QAAQ,KAML;CAEd,CAAC;CAED,OACE,qBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAvB,UAAA,CACG,yBACC,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,MAAN;GAAW,WAAWD,wBAAO;GAC1B,UAAA;EACQ,CAAA,GACX,oBAAC,WAAD;GACE,aAAY;GACZ,WAAWA,wBAAO;EACnB,CAAA,CACD,EAAA,CAAA,GAEJ,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN,EAAA,WACI,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA,EAC1B,CAAA,CAChB,EAAA,CAAA,CACF;;AAET;;AAGA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,WAAW,uBAAuB,GAAG,SAAS;CACtD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,wBAAO,UACPA,wBAAO,OACP,cAAcA,wBAAO,UACrB,SACF;CAEA,OACE,oBAAC,KAAK,eAAN;EACE,GAAI;EACJ,WAAW;EACX,OAAO,cAAc,KAAA;EAGrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,oBAAD,EAA2C,sBAAwB,CAAA,EAClD,CAAA;CACD,CAAA;AAExB"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs CHANGED Viewed

@@ -5,8 +5,8 @@ import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";
-import { DateTime } from "luxon";
 import { CalendarDate, toCalendarDate } from "@internationalized/date";
+import { DateTime } from "luxon";
 //#region src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts
 var clampCalendarDate = (date, minDate, maxDate) => {
 	if (minDate && date.compare(minDate) < 0) return minDate;

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCalendarDateRangePresets.mjs","names":[],"sources":["../../../../../../../../../../src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts"],"sourcesContent":["import { DateTime } from \"luxon\";\nimport { CalendarDate, toCalendarDate } from \"@internationalized/date\";\nimport { useContext, useMemo } from \"react\";\nimport { RangeCalendarStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../../locales/.locale.json\";\nimport invariant from \"invariant\";\n\nexport interface DateRangePresetItem {\n start: CalendarDate;\n end: CalendarDate;\n label: string;\n}\n\nexport type DateRangePresets = DateRangePresetItem[];\n\ninterface CalendarDateRangePresetItem extends DateRangePresetItem {\n onPress: () => void;\n disabled: boolean;\n}\n\nconst clampCalendarDate = (\n date: CalendarDate,\n minDate?: CalendarDate,\n maxDate?: CalendarDate,\n) => {\n if (minDate && date.compare(minDate) < 0) {\n return minDate;\n }\n\n if (maxDate && date.compare(maxDate) > 0) {\n return maxDate;\n }\n\n return date;\n};\n\nconst clampCalendarDateRange = (\n startDate: CalendarDate,\n endDate: CalendarDate,\n minDate?: CalendarDate,\n maxDate?: CalendarDate,\n) => {\n const clampedStart = clampCalendarDate(startDate, minDate, maxDate);\n const clampedEnd = clampCalendarDate(endDate, minDate, maxDate);\n\n return {\n start: clampedStart,\n end: clampedEnd,\n invalid: clampedStart.compare(clampedEnd) > 0,\n };\n};\n\n/* @internal * */\nexport const useCalendarDateRangePresets = (\n customPresets?: DateRangePresets \| boolean,\n): CalendarDateRangePresetItem[] => {\n const now = DateTime.local();\n const state = useContext(RangeCalendarStateContext);\n const stringFormatter = useLocalizedStringFormatter(locales, \"Calendar\");\n\n invariant(!!state, \"Could not find RangeCalendarStateContext.\");\n\n const minDate = state.minValue ? toCalendarDate(state.minValue) : undefined;\n const maxDate = state.maxValue ? toCalendarDate(state.maxValue) : undefined;\n\n const isValidRange = (range: { start: CalendarDate; end: CalendarDate }) =>\n !state.isInvalid(range.start) && !state.isInvalid(range.end);\n\n const possibleRanges = useMemo<DateRangePresets>(() => {\n if (typeof customPresets !== \"boolean\") {\n return customPresets ?? [];\n }\n\n const todayDate = new CalendarDate(now.year, now.month, now.day);\n const yesterdayLuxon = now.minus({ days: 1 });\n const yesterdayDate = new CalendarDate(\n yesterdayLuxon.year,\n yesterdayLuxon.month,\n yesterdayLuxon.day,\n );\n\n const thisWeekStart = now.startOf(\"week\");\n const thisWeekEnd = now.endOf(\"week\");\n const lastWeekLuxon = now.minus({ week: 1 });\n const lastWeekStart = lastWeekLuxon.startOf(\"week\");\n const lastWeekEnd = lastWeekLuxon.endOf(\"week\");\n\n const thisMonthStart = now.startOf(\"month\");\n const thisMonthEnd = now.endOf(\"month\");\n const lastMonthLuxon = now.minus({ month: 1 });\n const lastMonthStart = lastMonthLuxon.startOf(\"month\");\n const lastMonthEnd = lastMonthLuxon.endOf(\"month\");\n\n const thisYearStart = now.startOf(\"year\");\n const thisYearEnd = now.endOf(\"year\");\n const lastYearLuxon = now.minus({ year: 1 });\n const lastYearStart = lastYearLuxon.startOf(\"year\");\n const lastYearEnd = lastYearLuxon.endOf(\"year\");\n\n return [\n {\n label: stringFormatter.format(\"preset.today\"),\n start: todayDate,\n end: todayDate,\n },\n {\n label: stringFormatter.format(\"preset.yesterday\"),\n start: yesterdayDate,\n end: yesterdayDate,\n },\n {\n label: stringFormatter.format(\"preset.thisWeek\"),\n start: new CalendarDate(\n thisWeekStart.year,\n thisWeekStart.month,\n thisWeekStart.day,\n ),\n end: new CalendarDate(\n thisWeekEnd.year,\n thisWeekEnd.month,\n thisWeekEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastWeek\"),\n start: new CalendarDate(\n lastWeekStart.year,\n lastWeekStart.month,\n lastWeekStart.day,\n ),\n end: new CalendarDate(\n lastWeekEnd.year,\n lastWeekEnd.month,\n lastWeekEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.thisMonth\"),\n start: new CalendarDate(\n thisMonthStart.year,\n thisMonthStart.month,\n thisMonthStart.day,\n ),\n end: new CalendarDate(\n thisMonthEnd.year,\n thisMonthEnd.month,\n thisMonthEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastMonth\"),\n start: new CalendarDate(\n lastMonthStart.year,\n lastMonthStart.month,\n lastMonthStart.day,\n ),\n end: new CalendarDate(\n lastMonthEnd.year,\n lastMonthEnd.month,\n lastMonthEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.thisYear\"),\n start: new CalendarDate(\n thisYearStart.year,\n thisYearStart.month,\n thisYearStart.day,\n ),\n end: new CalendarDate(\n thisYearEnd.year,\n thisYearEnd.month,\n thisYearEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastYear\"),\n start: new CalendarDate(\n lastYearStart.year,\n lastYearStart.month,\n lastYearStart.day,\n ),\n end: new CalendarDate(\n lastYearEnd.year,\n lastYearEnd.month,\n lastYearEnd.day,\n ),\n },\n ];\n }, [now, customPresets, stringFormatter]);\n\n return possibleRanges.map((range) => {\n if (\n (minDate && range.end.compare(minDate) < 0) \|\|\n (maxDate && range.start.compare(maxDate) > 0)\n ) {\n return {\n ...range,\n disabled: true,\n onPress: () => {\n // void\n },\n };\n }\n\n const { start, end, invalid } = clampCalendarDateRange(\n range.start,\n range.end,\n minDate,\n maxDate,\n );\n\n const presetDisabled = invalid \|\| !isValidRange({ start, end });\n\n return {\n ...range,\n start,\n end,\n disabled: presetDisabled,\n onPress: () => {\n if (!presetDisabled) {\n state.setValue({ start, end });\n }\n },\n };\n });\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,qBACJ,MACA,SACA,YACG;CACH,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,IAAI,WAAW,KAAK,QAAQ,OAAO,IAAI,GACrC,OAAO;CAGT,OAAO;AACT;AAEA,IAAM,0BACJ,WACA,SACA,SACA,YACG;CACH,MAAM,eAAe,kBAAkB,WAAW,SAAS,OAAO;CAClE,MAAM,aAAa,kBAAkB,SAAS,SAAS,OAAO;CAE9D,OAAO;EACL,OAAO;EACP,KAAK;EACL,SAAS,aAAa,QAAQ,UAAU,IAAI;CAC9C;AACF;;AAGA,IAAa,+BACX,kBACkC;CAClC,MAAM,MAAM,SAAS,MAAM;CAC3B,MAAM,QAAQ,WAAW,yBAAyB;CAClD,MAAM,kBAAkB,~~4BAA4B~~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"}
1	+ {"version":3,"file":"useCalendarDateRangePresets.mjs","names":["locales"],"sources":["../../../../../../../../../../src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.ts"],"sourcesContent":["import { DateTime } from \"luxon\";\nimport { CalendarDate, toCalendarDate } from \"@internationalized/date\";\nimport { useContext, useMemo } from \"react\";\nimport { RangeCalendarStateContext } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../../locales/.locale.json\";\nimport invariant from \"invariant\";\n\nexport interface DateRangePresetItem {\n start: CalendarDate;\n end: CalendarDate;\n label: string;\n}\n\nexport type DateRangePresets = DateRangePresetItem[];\n\ninterface CalendarDateRangePresetItem extends DateRangePresetItem {\n onPress: () => void;\n disabled: boolean;\n}\n\nconst clampCalendarDate = (\n date: CalendarDate,\n minDate?: CalendarDate,\n maxDate?: CalendarDate,\n) => {\n if (minDate && date.compare(minDate) < 0) {\n return minDate;\n }\n\n if (maxDate && date.compare(maxDate) > 0) {\n return maxDate;\n }\n\n return date;\n};\n\nconst clampCalendarDateRange = (\n startDate: CalendarDate,\n endDate: CalendarDate,\n minDate?: CalendarDate,\n maxDate?: CalendarDate,\n) => {\n const clampedStart = clampCalendarDate(startDate, minDate, maxDate);\n const clampedEnd = clampCalendarDate(endDate, minDate, maxDate);\n\n return {\n start: clampedStart,\n end: clampedEnd,\n invalid: clampedStart.compare(clampedEnd) > 0,\n };\n};\n\n/* @internal * */\nexport const useCalendarDateRangePresets = (\n customPresets?: DateRangePresets \| boolean,\n): CalendarDateRangePresetItem[] => {\n const now = DateTime.local();\n const state = useContext(RangeCalendarStateContext);\n const stringFormatter = useLocalizedStringFormatter(locales, \"Calendar\");\n\n invariant(!!state, \"Could not find RangeCalendarStateContext.\");\n\n const minDate = state.minValue ? toCalendarDate(state.minValue) : undefined;\n const maxDate = state.maxValue ? toCalendarDate(state.maxValue) : undefined;\n\n const isValidRange = (range: { start: CalendarDate; end: CalendarDate }) =>\n !state.isInvalid(range.start) && !state.isInvalid(range.end);\n\n const possibleRanges = useMemo<DateRangePresets>(() => {\n if (typeof customPresets !== \"boolean\") {\n return customPresets ?? [];\n }\n\n const todayDate = new CalendarDate(now.year, now.month, now.day);\n const yesterdayLuxon = now.minus({ days: 1 });\n const yesterdayDate = new CalendarDate(\n yesterdayLuxon.year,\n yesterdayLuxon.month,\n yesterdayLuxon.day,\n );\n\n const thisWeekStart = now.startOf(\"week\");\n const thisWeekEnd = now.endOf(\"week\");\n const lastWeekLuxon = now.minus({ week: 1 });\n const lastWeekStart = lastWeekLuxon.startOf(\"week\");\n const lastWeekEnd = lastWeekLuxon.endOf(\"week\");\n\n const thisMonthStart = now.startOf(\"month\");\n const thisMonthEnd = now.endOf(\"month\");\n const lastMonthLuxon = now.minus({ month: 1 });\n const lastMonthStart = lastMonthLuxon.startOf(\"month\");\n const lastMonthEnd = lastMonthLuxon.endOf(\"month\");\n\n const thisYearStart = now.startOf(\"year\");\n const thisYearEnd = now.endOf(\"year\");\n const lastYearLuxon = now.minus({ year: 1 });\n const lastYearStart = lastYearLuxon.startOf(\"year\");\n const lastYearEnd = lastYearLuxon.endOf(\"year\");\n\n return [\n {\n label: stringFormatter.format(\"preset.today\"),\n start: todayDate,\n end: todayDate,\n },\n {\n label: stringFormatter.format(\"preset.yesterday\"),\n start: yesterdayDate,\n end: yesterdayDate,\n },\n {\n label: stringFormatter.format(\"preset.thisWeek\"),\n start: new CalendarDate(\n thisWeekStart.year,\n thisWeekStart.month,\n thisWeekStart.day,\n ),\n end: new CalendarDate(\n thisWeekEnd.year,\n thisWeekEnd.month,\n thisWeekEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastWeek\"),\n start: new CalendarDate(\n lastWeekStart.year,\n lastWeekStart.month,\n lastWeekStart.day,\n ),\n end: new CalendarDate(\n lastWeekEnd.year,\n lastWeekEnd.month,\n lastWeekEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.thisMonth\"),\n start: new CalendarDate(\n thisMonthStart.year,\n thisMonthStart.month,\n thisMonthStart.day,\n ),\n end: new CalendarDate(\n thisMonthEnd.year,\n thisMonthEnd.month,\n thisMonthEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastMonth\"),\n start: new CalendarDate(\n lastMonthStart.year,\n lastMonthStart.month,\n lastMonthStart.day,\n ),\n end: new CalendarDate(\n lastMonthEnd.year,\n lastMonthEnd.month,\n lastMonthEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.thisYear\"),\n start: new CalendarDate(\n thisYearStart.year,\n thisYearStart.month,\n thisYearStart.day,\n ),\n end: new CalendarDate(\n thisYearEnd.year,\n thisYearEnd.month,\n thisYearEnd.day,\n ),\n },\n {\n label: stringFormatter.format(\"preset.lastYear\"),\n start: new CalendarDate(\n lastYearStart.year,\n lastYearStart.month,\n lastYearStart.day,\n ),\n end: new CalendarDate(\n lastYearEnd.year,\n lastYearEnd.month,\n lastYearEnd.day,\n ),\n },\n ];\n }, [now, customPresets, stringFormatter]);\n\n return possibleRanges.map((range) => {\n if (\n (minDate && range.end.compare(minDate) < 0) \|\|\n (maxDate && range.start.compare(maxDate) > 0)\n ) {\n return {\n ...range,\n disabled: true,\n onPress: () => {\n // void\n },\n };\n }\n\n const { start, end, invalid } = clampCalendarDateRange(\n range.start,\n range.end,\n minDate,\n maxDate,\n );\n\n const presetDisabled = invalid \|\| !isValidRange({ start, end });\n\n return {\n ...range,\n start,\n end,\n disabled: presetDisabled,\n onPress: () => {\n if (!presetDisabled) {\n state.setValue({ start, end });\n }\n },\n };\n });\n};\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import CartesianChart_module_default from "./CartesianChart.module.mjs";
 import { useChartClipRect } from "./hooks/useChartClipRect.mjs";
@@ -37,6 +38,16 @@ var CartesianChart = (props) => {
 		layout,
 		stackIdPrefix: `${chartId}-`
 	}), [layout, chartId]);
+	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", {
+		className: CartesianChart_module_default.skeleton,
+		style: {
+			height,
+			aspectRatio: height ? void 0 : 3,
+			flex: flexGrow ? 1 : void 0
+		},
+		"aria-hidden": true,
+		inert: true
+	});
 	return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Wrap, {

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useId,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n /* The data points rendered by the chart. /\n data?: TData[];\n\n /* The height of the chart. /\n height?: string;\n\n /\n The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n \n @default \"horizontal\"\n /\n layout?: CartesianChartLayout;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n if (usesDeprecatedEmptyView) {\n warnDeprecation(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n }\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n return null;\n }, [emptyView]);\n\n const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n const contextValue = useMemo(\n () => ({ layout, stackIdPrefix: `${chartId}-` }),\n [layout, chartId],\n );\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;AAwEA~~,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,~~KACpB~~,8BAAO,gBACP,~~iBAAiB~~,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;~~CAEA~~,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,~~WAAW~~,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
1	+ {"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useId,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n /* The data points rendered by the chart. /\n data?: TData[];\n\n /* The height of the chart. /\n height?: string;\n\n /\n The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n \n @default \"horizontal\"\n /\n layout?: CartesianChartLayout;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all /\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n if (usesDeprecatedEmptyView) {\n warnDeprecation(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n }\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n return null;\n }, [emptyView]);\n\n const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n const contextValue = useMemo(\n () => ({ layout, stackIdPrefix: `${chartId}-` }),\n [layout, chartId],\n );\n\n const isSkeleton = useSkeletonMode();\n\n / No recharts and no svg: one surface in the size the chart would take. */\n if (isSkeleton) {\n return (\n <div\n className={styles.skeleton}\n style={{\n height,\n aspectRatio: height ? undefined : 3,\n flex: flexGrow ? 1 : undefined,\n }}\n aria-hidden\n inert\n />\n );\n }\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}