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

@mittwald/flow-react-components 1.5.0-next.30 → 1.5.0-next.31

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

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs ADDED Viewed

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { getTextOfChild, isTextChild } from "../../lib/isTextChild.mjs";
+import { useSkeletonMode } from "../../skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonTextContent/SkeletonTextContent.mjs";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx
+/**
+* The text rule for containers: turns raw string and number children into bars
+* and leaves every element child to its own skeleton rendering. Outside an
+* enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonRawText = (props) => {
+	const { children } = props;
+	if (!useSkeletonMode()) return children;
+	return Children.map(children, (child) => isTextChild(child) && getTextOfChild(child) !== "" ? /* @__PURE__ */ jsx(SkeletonTextContent, {
+		defaultWidth: "8em",
+		children: child
+	}) : child);
+};
+//#endregion
+export { SkeletonRawText, SkeletonRawText as default };
+//# sourceMappingURL=SkeletonRawText.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SkeletonRawText.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx"],"sourcesContent":["import { Children, type FC, type PropsWithChildren } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport {\n getTextOfChild,\n isTextChild,\n} from \"@/components/SkeletonMode/lib/isTextChild\";\n\n/**\n * The text rule for containers: turns raw string and number children into bars\n * and leaves every element child to its own skeleton rendering. Outside an\n * enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonRawText: FC<PropsWithChildren> = (props) => {\n const { children } = props;\n\n const isSkeleton = useSkeletonMode();\n\n if (!isSkeleton) {\n return children;\n }\n\n return Children.map(children, (child) =>\n isTextChild(child) && getTextOfChild(child) !== \"\" ? (\n <SkeletonTextContent defaultWidth=\"8em\">{child}</SkeletonTextContent>\n ) : (\n child\n ),\n );\n};\n\nexport default SkeletonRawText;\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAA0C,UAAU;CAC/D,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,OAAO,SAAS,IAAI,WAAW,UAC7B,YAAY,KAAK,KAAK,eAAe,KAAK,MAAM,KAC9C,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,IAEpE,KAEJ;AACF"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs ADDED Viewed

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
+import { hasContent } from "../../lib/hasContent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../../skeletonModeContext.mjs";
+import SkeletonTextContent_module_default from "./SkeletonTextContent.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx
+/**
+* The text rule of `SkeletonMode`: content becomes one bar per line in the
+* width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+* Outside an enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonTextContent = (props) => {
+	const { children, defaultWidth } = props;
+	if (!useSkeletonMode()) return children;
+	if (!hasContent(children)) return /* @__PURE__ */ jsx(SkeletonText, { width: defaultWidth });
+	return /* @__PURE__ */ jsx("span", {
+		className: SkeletonTextContent_module_default.skeletonTextContent,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+	});
+};
+//#endregion
+export { SkeletonTextContent, SkeletonTextContent as default };
+//# sourceMappingURL=SkeletonTextContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SkeletonTextContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { hasContent } from \"@/components/SkeletonMode/lib/hasContent\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"./SkeletonTextContent.module.scss\";\n\nexport interface SkeletonTextContentProps extends PropsWithChildren {\n /** Width of the bar when there is no content to take the width from. */\n defaultWidth: CSSProperties[\"width\"];\n}\n\n/**\n * The text rule of `SkeletonMode`: content becomes one bar per line in the\n * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.\n * Outside an enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonTextContent: FC<SkeletonTextContentProps> = (props) => {\n const { children, defaultWidth } = props;\n\n const isSkeleton = useSkeletonMode();\n\n if (!isSkeleton) {\n return children;\n }\n\n if (!hasContent(children)) {\n return <SkeletonText width={defaultWidth} />;\n }\n\n return (\n <span className={styles.skeletonTextContent} aria-hidden>\n <SkeletonModeReset>{children}</SkeletonModeReset>\n </span>\n );\n};\n\nexport default SkeletonTextContent;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EAAE,UAAU,iBAAiB;CAInC,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,IAAI,CAAC,WAAW,QAAQ,GACtB,OAAO,oBAAC,cAAD,EAAc,OAAO,aAAe,CAAA;CAG7C,OACE,oBAAC,QAAD;EAAM,WAAWA,mCAAO;EAAqB,eAAA;EAC3C,UAAA,oBAAC,mBAAD,EAAoB,SAA4B,CAAA;CAC5C,CAAA;AAEV"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs ADDED Viewed

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss
+var skeletonTextContent = "flow--skeleton-mode--skeleton-text-content";
+var SkeletonTextContent_module_default = {
+	skeletonTextContent,
+	"skeleton-text-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-text-shimmer",
+	"skeleton-surface-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-surface-shimmer"
+};
+//#endregion
+export { SkeletonTextContent_module_default as default, skeletonTextContent };
+//# sourceMappingURL=SkeletonTextContent.module.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SkeletonTextContent.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonTextContent {\n @include skeleton.text;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs ADDED Viewed

@@ -0,0 +1,11 @@
+"use client"
+/* */
+import { getTextOfChild } from "./isTextChild.mjs";
+import { Children } from "react";
+//#region src/components/SkeletonMode/lib/hasContent.ts
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+var hasContent = (children) => Children.toArray(children).some((child) => getTextOfChild(child) !== "");
+//#endregion
+export { hasContent };
+//# sourceMappingURL=hasContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hasContent.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/hasContent.ts"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { getTextOfChild } from \"./isTextChild\";\n\n/** Whether `children` renders anything — `null`, booleans and empty text do not. */\nexport const hasContent = (children: ReactNode): boolean =>\n Children.toArray(children).some((child) => getTextOfChild(child) !== \"\");\n"],"mappings":";;;;;;AAIA,IAAa,cAAc,aACzB,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU,eAAe,KAAK,MAAM,EAAE"}

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs ADDED Viewed

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { isRemoteTextRenderProps } from "../../../lib/react/remote.mjs";
+import { isValidElement } from "react";
+//#region src/components/SkeletonMode/lib/isTextChild.ts
+/**
+* Whether `child` is a text node — locally a string or number, remotely a
+* `RemoteTextRenderer` element.
+*/
+var isTextChild = (child) => typeof child === "string" || typeof child === "number" || isValidElement(child) && isRemoteTextRenderProps(child.props);
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+var getTextOfChild = (child) => {
+	if (typeof child === "string" || typeof child === "number") return String(child);
+	return isValidElement(child) && isRemoteTextRenderProps(child.props) ? child.props.remote.data : void 0;
+};
+//#endregion
+export { getTextOfChild, isTextChild };
+//# sourceMappingURL=isTextChild.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"isTextChild.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/isTextChild.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { isRemoteTextRenderProps } from \"@/lib/react/remote\";\n\n/**\n * Whether `child` is a text node — locally a string or number, remotely a\n * `RemoteTextRenderer` element.\n */\nexport const isTextChild = (child: ReactNode): boolean =>\n typeof child === \"string\" ||\n typeof child === \"number\" ||\n (isValidElement(child) && isRemoteTextRenderProps(child.props));\n\n/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */\nexport const getTextOfChild = (child: ReactNode): string | undefined => {\n if (typeof child === \"string\" || typeof child === \"number\") {\n return String(child);\n }\n\n return isValidElement(child) && isRemoteTextRenderProps(child.props)\n ? child.props.remote.data\n : undefined;\n};\n"],"mappings":";;;;;;;;;AAOA,IAAa,eAAe,UAC1B,OAAO,UAAU,YACjB,OAAO,UAAU,YAChB,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK;;AAG/D,IAAa,kBAAkB,UAAyC;CACtE,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,OAAO,KAAK;CAGrB,OAAO,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK,IAC/D,MAAM,MAAM,OAAO,OACnB,KAAA;AACN"}

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs ADDED Viewed

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var skeletonModeContext = createContext({
+	isEnabled: false,
+	isAnnounced: false
+});
+/** Whether the calling component renders as skeleton. */
+var useSkeletonMode = () => useContext(skeletonModeContext).isEnabled;
+var resetState = {
+	isEnabled: false,
+	isAnnounced: true
+};
+/**
+* Renders its children as real UI below a component that already draws the
+* skeleton for them — the Text inside a text bar or a button surface must not
+* draw a second bar on top.
+*/
+var SkeletonModeReset = (props) => /* @__PURE__ */ jsx(skeletonModeContext.Provider, {
+	value: resetState,
+	children: props.children
+});
+//#endregion
+export { SkeletonModeReset, skeletonModeContext, useSkeletonMode };
+//# sourceMappingURL=skeletonModeContext.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skeletonModeContext.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonMode/skeletonModeContext.tsx"],"sourcesContent":["import {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from \"react\";\n\nexport interface SkeletonModeState {\n /** Whether components render as skeleton. */\n isEnabled: boolean;\n /** Whether an enabled `SkeletonMode` above already announces the loading. */\n isAnnounced: boolean;\n}\n\nconst disabledState: SkeletonModeState = {\n isEnabled: false,\n isAnnounced: false,\n};\n\nexport const skeletonModeContext =\n createContext<SkeletonModeState>(disabledState);\n\n/** Whether the calling component renders as skeleton. */\nexport const useSkeletonMode = (): boolean =>\n useContext(skeletonModeContext).isEnabled;\n\nconst resetState: SkeletonModeState = {\n isEnabled: false,\n isAnnounced: true,\n};\n\n/**\n * Renders its children as real UI below a component that already draws the\n * skeleton for them — the Text inside a text bar or a button surface must not\n * draw a second bar on top.\n */\nexport const SkeletonModeReset: FC<PropsWithChildren> = (props) => (\n <skeletonModeContext.Provider value={resetState}>\n {props.children}\n </skeletonModeContext.Provider>\n);\n"],"mappings":";;;;AAmBA,IAAa,sBACX,cAAiC;CALjC,WAAW;CACX,aAAa;AAIoB,CAAa;;AAGhD,IAAa,wBACX,WAAW,mBAAmB,CAAC,CAAC;AAElC,IAAM,aAAgC;CACpC,WAAW;CACX,aAAa;AACf;;;;;;AAOA,IAAa,qBAA4C,UACvD,oBAAC,oBAAoB,UAArB;CAA8B,OAAO;CAClC,UAAA,MAAM;AACqB,CAAA"}

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

@@ -2,12 +2,12 @@
 /* */
 //#region src/components/SkeletonText/SkeletonText.module.scss
 var skeletonText = "flow--skeleton-text";
-var shimmer = "flow--skeleton-text--shimmer";
 var SkeletonText_module_default = {
 	skeletonText,
-	shimmer
+	"skeleton-surface-shimmer": "flow--skeleton-text--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton-text--skeleton-text-shimmer"
 };
 //#endregion
-export { SkeletonText_module_default as default, shimmer, skeletonText };
+export { SkeletonText_module_default as default, skeletonText };
 //# sourceMappingURL=SkeletonText.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":[".skeletonText {\n ~~position:~~ ~~relative;\n overflow: hidden;\n background-color: rgba(183, 201, 219, 0~~.5);\n ~~border-radius: var(--corner-radius--m);\~~n width: 100%;\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n height: 1em;\n\n &::before {\n content: \"-\";\n visibility: hidden;\n }\n\n ~~&::after {~~\n ~~position:~~ ~~absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0~~.~~4) 60%,\n rgba(255, 255, 255, 0)\n );\n animation: shimmer 3s infinite;\n content: \"\";\n }\n}\n\n@~~keyframes ~~shimmer {\n 100% {\n transform: translateX(100%)~~;\n ~~}\n}\n~~"],"mappings":""}
1	+ {"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonText {\n @include skeleton.surface;\n\n width: 100%;\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n height: 1em;\n\n &::before {\n content: \"-\";\n visibility: hidden;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";
 import Tabs_module_default from "../../Tabs.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_32.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_33.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tabs/components/FallbackTab/FallbackTab.tsx
 var FallbackTab = (props) => {

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

@@ -6,6 +6,8 @@ import { isAlphaColor } from "../../lib/types/props.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import { EmulatedBoldText } from "../EmulatedBoldText/EmulatedBoldText.mjs";
 import Text_module_default from "./Text.module.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -14,10 +16,12 @@ import invariant from "invariant";
 /** @flr-generate all */
 var Text = flowComponent("Text", (props) => {
 	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Text_module_default.text, isAlphaColor(color) && Text_module_default[color], align && Text_module_default[`align-${align}`], wrap && Text_module_default[`wrap-${wrap}`], noLigatures && Text_module_default[`no-ligatures`], className);
 	const textProps = {
 		...rest,
-		className: rootClassName
+		className: rootClassName,
+		inert: isSkeleton || void 0
 	};
 	const propsContext = {
 		Link: {
@@ -36,7 +40,10 @@ var Text = flowComponent("Text", (props) => {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: emulateBoldWidth,
-			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children })
+			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+				defaultWidth: "8em",
+				children
+			}) })
 		})
 	});
 	if (!props.slot) return /* @__PURE__ */ jsx(elementType, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n extends\n PropsWithChildren,\n Omit<Aria.TextProps, \"children\" \| \"elementType\">,\n PropsWithElementType<\"span\" \| \"div\" \| \"p\">,\n FlowComponentProps {\n /*\n Whether the elements width should match the width it would have with bold\n * text.\n /\n emulateBoldWidth?: boolean;\n /* The color of the text. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* The alignment of the text. @default \"start\" /\n align?: \"start\" \| \"end\" \| \"center\";\n /* The text-wrap property of the text. /\n wrap?: \"wrap\" \| \"balance\" \| \"pretty\";\n /* The white-space property of the text. /\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. /\n wordBreak?: React.CSSProperties[\"wordBreak\"];\n /\n Disables standard and contextual ligatures for predictable, literal text\n * rendering.\n /\n noLigatures?: boolean;\n}\n\n/* @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n const {\n children,\n className,\n elementType = \"span\",\n emulateBoldWidth,\n ref,\n color = \"default\",\n align = \"start\",\n wrap,\n style: styleFromProps,\n whiteSpace,\n wordBreak,\n noLigatures,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.text,\n isAlphaColor(color) && styles[color],\n align && styles[`align-${align}`],\n wrap && styles[`wrap-${wrap}`],\n noLigatures && styles[`no-ligatures`],\n className,\n );\n\n const textProps = { ...rest, className: rootClassName };\n\n const propsContext: PropsContext = {\n Link: {\n inline: true,\n color: isAlphaColor(color) ? color : undefined,\n },\n Icon: { className: styles.icon },\n Kbd: { variant: \"soft\" },\n };\n\n const style = {\n whiteSpace,\n wordBreak,\n ...styleFromProps,\n };\n\n const childrenElement = (\n <PropsContextProvider props={propsContext}>\n <Wrap if={emulateBoldWidth}>\n <EmulatedBoldText>{children}</EmulatedBoldText>\n </Wrap>\n </PropsContextProvider>\n );\n\n if (!props.slot) {\n const Element = elementType;\n return (\n <Element style={style} {...textProps} ref={ref}>\n {childrenElement}\n </Element>\n );\n }\n\n invariant(\n typeof elementType === \"string\",\n \"'elementType' in Text component must be of type string\",\n );\n\n return (\n <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n {childrenElement}\n </Aria.Text>\n );\n});\n\nexport default Text;\n"],"mappings":"~~;;;;;;;;;;;;;;AA+CA~~,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,oBAAO,MACP,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAASA,oBAAO,SAAS,UACzB,QAAQA,oBAAO,QAAQ,SACvB,eAAeA,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;~~EAAE~~,GAAG;~~EAAM~~,WAAW;~~CAAc~~;~~CAEtD~~,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAWA,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,~~EAAmB~~,~~SAA2B~~,CAAA;~~EAC1C~~,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAACC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}
1	+ {"version":3,"file":"Text.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TextProps\n extends\n PropsWithChildren,\n Omit<Aria.TextProps, \"children\" \| \"elementType\">,\n PropsWithElementType<\"span\" \| \"div\" \| \"p\">,\n FlowComponentProps {\n /*\n Whether the elements width should match the width it would have with bold\n * text.\n /\n emulateBoldWidth?: boolean;\n /* The color of the text. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n /* The alignment of the text. @default \"start\" /\n align?: \"start\" \| \"end\" \| \"center\";\n /* The text-wrap property of the text. /\n wrap?: \"wrap\" \| \"balance\" \| \"pretty\";\n /* The white-space property of the text. /\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. /\n wordBreak?: React.CSSProperties[\"wordBreak\"];\n /\n Disables standard and contextual ligatures for predictable, literal text\n * rendering.\n /\n noLigatures?: boolean;\n}\n\n/* @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n const {\n children,\n className,\n elementType = \"span\",\n emulateBoldWidth,\n ref,\n color = \"default\",\n align = \"start\",\n wrap,\n style: styleFromProps,\n whiteSpace,\n wordBreak,\n noLigatures,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.text,\n isAlphaColor(color) && styles[color],\n align && styles[`align-${align}`],\n wrap && styles[`wrap-${wrap}`],\n noLigatures && styles[`no-ligatures`],\n className,\n );\n\n const textProps = {\n ...rest,\n className: rootClassName,\n inert: isSkeleton \|\| undefined,\n };\n\n const propsContext: PropsContext = {\n Link: {\n inline: true,\n color: isAlphaColor(color) ? color : undefined,\n },\n Icon: { className: styles.icon },\n Kbd: { variant: \"soft\" },\n };\n\n const style = {\n whiteSpace,\n wordBreak,\n ...styleFromProps,\n };\n\n const childrenElement = (\n <PropsContextProvider props={propsContext}>\n <Wrap if={emulateBoldWidth}>\n <EmulatedBoldText>\n <SkeletonTextContent defaultWidth=\"8em\">\n {children}\n </SkeletonTextContent>\n </EmulatedBoldText>\n </Wrap>\n </PropsContextProvider>\n );\n\n if (!props.slot) {\n const Element = elementType;\n return (\n <Element style={style} {...textProps} ref={ref}>\n {childrenElement}\n </Element>\n );\n }\n\n invariant(\n typeof elementType === \"string\",\n \"'elementType' in Text component must be of type string\",\n );\n\n return (\n <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n {childrenElement}\n </Aria.Text>\n );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,oBAAO,MACP,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAASA,oBAAO,SAAS,UACzB,QAAQA,oBAAO,QAAQ,SACvB,eAAeA,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAChB,GAAG;EACH,WAAW;EACX,OAAO,cAAc,KAAA;CACvB;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAWA,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IAAqB,cAAa;IAC/B;GACkB,CAAA,EACL,CAAA;EACd,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAACC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}

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

@@ -11,7 +11,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextField_module_default from "./TextField.module.mjs";
-import __locale_default from "../../../../../_virtual/_33.locale.mjs";
+import __locale_default from "../../../../../_virtual/_34.locale.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs CHANGED Viewed

@@ -4,7 +4,7 @@ import { PropsContextProvider } from "../../../../lib/propsContext/components/Pr
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
-import __locale_default from "../../../../../../../_virtual/_34.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_35.locale.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";

package/dist/js/packages/components/src/status/component-status.mjs CHANGED Viewed

@@ -384,6 +384,10 @@ var component_status_default = {
 		"level": "stable",
 		"isNew": false
 	},
+	"@mittwald/flow-react-components#SkeletonMode": {
+		"level": "beta",
+		"isNew": true
+	},
 	"@mittwald/flow-react-components#SkeletonText": {
 		"level": "stable",
 		"isNew": false

package/dist/js/packages/components/src/status/component-status.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component-status.mjs","names":[],"sources":["../../../../../../src/status/component-status.json"],"sourcesContent":["{\n \"@mittwald/flow-react-components#AccentBox\": {\n \"level\": \"beta\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Accordion\": {\n \"level\": \"beta\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Action\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ActionGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Activity\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Alert\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertBadge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertIcon\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertText\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Align\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use Combine instead\"\n },\n \"@mittwald/flow-react-components#Autocomplete\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Avatar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AvatarStack\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Badge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#BigNumber\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Breadcrumb\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#BrowserOnly\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Button\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CartesianChart\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Chat\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Checkbox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CheckboxButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CheckboxGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ClearPropsContext\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CoachMark\": {\n \"level\": \"beta\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#CodeBlock\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CodeEditor\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Color\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ColumnLayout\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Combine\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#ComboBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ComponentDefaultsProvider\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#ComponentPropsContextProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Content\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ContextMenu\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ContextualHelp\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CopyButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CounterBadge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CountryOptions\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DatePicker\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DateRangePicker\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DeprecationWarningProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Div\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DonutChart\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FieldDescription\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FieldError\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileCard\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileCardList\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileDropZone\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Flex\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Header\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#HeaderNavigation\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Heading\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Icon\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#IllustratedMessage\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Image\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ImageCropper\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Initials\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#InlineCode\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Kbd\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Label\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LabeledValue\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LayoutCard\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Legend\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LightBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Link\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#List\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LoadingSpinner\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Markdown\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MarkdownEditor\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MenuItem\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Message\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MessageThread\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Modal\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Navigation\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Notification\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#NotificationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#NumberField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Option\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Overlay\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#OverlayTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#PasswordCreationField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Popover\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ProgressBar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#RadioGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#RangeCalendar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Rating\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SearchField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Section\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SegmentedControl\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use `Tabs` to switch content, or `RadioGroup` to select a value.\"\n },\n \"@mittwald/flow-react-components#Select\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Separator\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Skeleton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SkeletonText\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Slider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SuspenseTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Switch\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TabNavigation\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Table\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Tabs\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Text\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TextArea\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TextField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TimeField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Tooltip\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TranslationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Truncate\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TunnelEntry\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Wrap\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Action\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ActionBatch\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#BrowserOnly\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ComponentDefaultsProvider\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components/flr-universal#CountryOptions\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#DeprecationWarningProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#LightBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#LightBoxTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#List\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ListItemView\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Modal\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ModalTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#NotificationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Popover\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#PopoverTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#SettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Wrap\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/nextjs#Link\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use RouterProvider instead\"\n },\n \"@mittwald/flow-react-components/nextjs#LinkProvider\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use RouterProvider instead\"\n },\n \"@mittwald/flow-react-components/nextjs#RouterProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#Field\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#Form\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#FormAction\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#FormRootError\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components/react-hook-form#FormSettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#ResetButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#SubmitButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"component-status.mjs","names":[],"sources":["../../../../../../src/status/component-status.json"],"sourcesContent":["{\n \"@mittwald/flow-react-components#AccentBox\": {\n \"level\": \"beta\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Accordion\": {\n \"level\": \"beta\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Action\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ActionGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Activity\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Alert\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertBadge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertIcon\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AlertText\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Align\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use Combine instead\"\n },\n \"@mittwald/flow-react-components#Autocomplete\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Avatar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#AvatarStack\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Badge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#BigNumber\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Breadcrumb\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#BrowserOnly\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Button\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CartesianChart\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Chat\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Checkbox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CheckboxButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CheckboxGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ClearPropsContext\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CoachMark\": {\n \"level\": \"beta\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#CodeBlock\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CodeEditor\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Color\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ColumnLayout\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Combine\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#ComboBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ComponentDefaultsProvider\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#ComponentPropsContextProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Content\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ContextMenu\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ContextualHelp\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CopyButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CounterBadge\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#CountryOptions\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DatePicker\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DateRangePicker\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DeprecationWarningProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Div\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#DonutChart\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FieldDescription\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FieldError\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileCard\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileCardList\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileDropZone\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#FileField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Flex\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Header\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#HeaderNavigation\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Heading\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Icon\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#IllustratedMessage\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Image\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ImageCropper\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Initials\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#InlineCode\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Kbd\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Label\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LabeledValue\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LayoutCard\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Legend\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LightBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Link\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#List\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#LoadingSpinner\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Markdown\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MarkdownEditor\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MenuItem\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Message\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#MessageThread\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Modal\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Navigation\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Notification\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#NotificationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#NumberField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Option\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Overlay\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#OverlayTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#PasswordCreationField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Popover\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#ProgressBar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#RadioGroup\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#RangeCalendar\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Rating\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SearchField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Section\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SegmentedControl\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use `Tabs` to switch content, or `RadioGroup` to select a value.\"\n },\n \"@mittwald/flow-react-components#Select\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Separator\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Skeleton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SkeletonMode\": {\n \"level\": \"beta\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#SkeletonText\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Slider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#SuspenseTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Switch\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TabNavigation\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components#Table\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Tabs\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Text\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TextArea\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TextField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TimeField\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Tooltip\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TranslationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Truncate\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#TunnelEntry\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components#Wrap\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Action\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ActionBatch\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#BrowserOnly\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ComponentDefaultsProvider\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components/flr-universal#CountryOptions\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#DeprecationWarningProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#LightBox\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#LightBoxTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#List\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ListItemView\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Modal\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#ModalTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#NotificationProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Popover\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#PopoverTrigger\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#SettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/flr-universal#Wrap\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/nextjs#Link\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use RouterProvider instead\"\n },\n \"@mittwald/flow-react-components/nextjs#LinkProvider\": {\n \"level\": \"deprecated\",\n \"isNew\": false,\n \"deprecationNotice\": \"Use RouterProvider instead\"\n },\n \"@mittwald/flow-react-components/nextjs#RouterProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#Field\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#Form\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#FormAction\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#FormRootError\": {\n \"level\": \"stable\",\n \"isNew\": true\n },\n \"@mittwald/flow-react-components/react-hook-form#FormSettingsProvider\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#ResetButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n },\n \"@mittwald/flow-react-components/react-hook-form#SubmitButton\": {\n \"level\": \"stable\",\n \"isNew\": false\n }\n}\n"],"mappings":""}

package/dist/types/components/SkeletonMode/SkeletonMode.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeProps extends PropsWithChildren {
+    /**
+     * Whether the components inside render as skeleton. A nested `SkeletonMode`
+     * with `isEnabled={false}` renders its content as real UI.
+     *
+     * @default true
+     */
+    isEnabled?: boolean;
+}
+/**
+ * @flr-generate all
+ * @flowStatus beta, new
+ */
+export declare const SkeletonMode: FC<SkeletonModeProps>;
+export default SkeletonMode;

package/dist/types/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * The text rule for containers: turns raw string and number children into bars
+ * and leaves every element child to its own skeleton rendering. Outside an
+ * enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonRawText: FC<PropsWithChildren>;
+export default SkeletonRawText;

package/dist/types/components/SkeletonMode/components/SkeletonRawText/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './SkeletonRawText';
2	+ export { default } from './SkeletonRawText';

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+export interface SkeletonTextContentProps extends PropsWithChildren {
+    /** Width of the bar when there is no content to take the width from. */
+    defaultWidth: CSSProperties["width"];
+}
+/**
+ * The text rule of `SkeletonMode`: content becomes one bar per line in the
+ * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+ * Outside an enabled `SkeletonMode` it renders its children unchanged.
+ */
+export declare const SkeletonTextContent: FC<SkeletonTextContentProps>;
+export default SkeletonTextContent;

package/dist/types/components/SkeletonMode/components/SkeletonTextContent/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './SkeletonTextContent';
2	+ export { default } from './SkeletonTextContent';

package/dist/types/components/SkeletonMode/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './view';
+export { type SkeletonModeProps, SkeletonMode } from './SkeletonMode';
+export { default } from './SkeletonMode';

package/dist/types/components/SkeletonMode/lib/hasContent.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+export declare const hasContent: (children: ReactNode) => boolean;

package/dist/types/components/SkeletonMode/lib/isTextChild.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * Whether `child` is a text node — locally a string or number, remotely a
+ * `RemoteTextRenderer` element.
+ */
+export declare const isTextChild: (child: ReactNode) => boolean;
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+export declare const getTextOfChild: (child: ReactNode) => string | undefined;

package/dist/types/components/SkeletonMode/skeletonModeContext.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+export interface SkeletonModeState {
+    /** Whether components render as skeleton. */
+    isEnabled: boolean;
+    /** Whether an enabled `SkeletonMode` above already announces the loading. */
+    isAnnounced: boolean;
+}
+export declare const skeletonModeContext: import('react').Context<SkeletonModeState>;
+/** Whether the calling component renders as skeleton. */
+export declare const useSkeletonMode: () => boolean;
+/**
+ * Renders its children as real UI below a component that already draws the
+ * skeleton for them — the Text inside a text bar or a button surface must not
+ * draw a second bar on top.
+ */
+export declare const SkeletonModeReset: FC<PropsWithChildren>;

package/dist/types/components/SkeletonMode/view.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { SkeletonMode } from './SkeletonMode';
+import { ViewComponent } from '../../lib/viewComponentContext';
+declare global {
+    interface FlowViewComponents {
+        SkeletonMode: ViewComponent<typeof SkeletonMode>;
+    }
+}

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

@@ -97,6 +97,7 @@ export * from './Separator';
 export * from './SettingsProvider';
 export * from './Kbd';
 export * from './Skeleton';
+export * from './SkeletonMode';
 export * from './SkeletonText';
 export * from './Slider';
 export * from './SuspenseTrigger';

package/dist/types/status/component-status.json.d.ts CHANGED Viewed

@@ -381,6 +381,10 @@ declare const _default: {
     "level": "stable",
     "isNew": false
   },
+  "@mittwald/flow-react-components#SkeletonMode": {
+    "level": "beta",
+    "isNew": true
+  },
   "@mittwald/flow-react-components#SkeletonText": {
     "level": "stable",
     "isNew": false

package/dist/types/views/SkeletonModeView.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SkeletonModeProps } from '../components/SkeletonMode/SkeletonMode';
+declare const SkeletonModeView: FC<SkeletonModeProps>;
+export default SkeletonModeView;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.0-next.30",
+  "version": "1.5.0-next.31",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.0-next.30",
+    "@mittwald/flow-icons": "^1.5.0-next.31",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.0-next.30",
+    "@mittwald/react-tunnel": "^1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,12 +139,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.5.0-next.30",
-    "@mittwald/flow-design-tokens": "1.5.0-next.30",
-    "@mittwald/flow-icons-base": "1.5.0-next.30",
+    "@mittwald/flow-core": "1.5.0-next.31",
+    "@mittwald/flow-design-tokens": "1.5.0-next.31",
+    "@mittwald/flow-icons-base": "1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.0-next.30",
+    "@mittwald/typescript-config": "1.5.0-next.31",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -198,7 +198,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.0-next.30",
+    "@mittwald/flow-icons-pro": "1.5.0-next.31",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -222,5 +222,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "5d48baca7274f8efe6c289217743b9d36030024d"
+  "gitHead": "32830501988a267a91ea97cf0087ad68ac761f57"
 }