@mittwald/flow-react-components 0.2.0-alpha.791 → 0.2.0-alpha.792
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.
- package/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +4602 -4545
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.mjs +6 -2
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.module.scss.mjs +4 -2
- package/dist/js/packages/components/src/components/AccentBox/AccentBox.module.scss.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Text/Text.mjs +7 -1
- package/dist/js/packages/components/src/components/Text/Text.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Text/Text.module.scss.mjs +2 -1
- package/dist/js/packages/components/src/components/Text/Text.module.scss.mjs.map +1 -1
- package/dist/types/components/AccentBox/AccentBox.d.ts +2 -2
- package/dist/types/components/AccentBox/AccentBox.d.ts.map +1 -1
- package/dist/types/components/Text/Text.d.ts +1 -0
- package/dist/types/components/Text/Text.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -24,7 +24,7 @@ function isFlowColor(something) {
|
|
|
24
24
|
const AccentBox = flowComponent("AccentBox", (props) => {
|
|
25
25
|
const {
|
|
26
26
|
color = "default",
|
|
27
|
-
backgroundColor = "
|
|
27
|
+
backgroundColor = "blue",
|
|
28
28
|
backgroundImage,
|
|
29
29
|
children,
|
|
30
30
|
elementType = "div",
|
|
@@ -33,6 +33,7 @@ const AccentBox = flowComponent("AccentBox", (props) => {
|
|
|
33
33
|
aspectRatio
|
|
34
34
|
} = props;
|
|
35
35
|
const isAFlowColor = isFlowColor(backgroundColor);
|
|
36
|
+
const backgroundColorFromColor = color === "neutral" || color === "gradient" || color === "green" ? color : void 0;
|
|
36
37
|
const style = {
|
|
37
38
|
backgroundColor: isAFlowColor ? void 0 : backgroundColor,
|
|
38
39
|
backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
|
|
@@ -42,7 +43,7 @@ const AccentBox = flowComponent("AccentBox", (props) => {
|
|
|
42
43
|
const rootClassName = clsx(
|
|
43
44
|
styles.accentBox,
|
|
44
45
|
className,
|
|
45
|
-
isAFlowColor ? styles[backgroundColor] : void 0
|
|
46
|
+
backgroundColorFromColor ? styles[backgroundColorFromColor] : isAFlowColor ? styles[backgroundColor] : void 0
|
|
46
47
|
);
|
|
47
48
|
const Element = elementType;
|
|
48
49
|
const contentColor = color === "default" ? void 0 : color;
|
|
@@ -55,6 +56,9 @@ const AccentBox = flowComponent("AccentBox", (props) => {
|
|
|
55
56
|
},
|
|
56
57
|
Heading: {
|
|
57
58
|
color: contentColor
|
|
59
|
+
},
|
|
60
|
+
Icon: {
|
|
61
|
+
className: styles.icon
|
|
58
62
|
}
|
|
59
63
|
};
|
|
60
64
|
return /* @__PURE__ */ jsx(Element, { className: rootClassName, style, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccentBox.mjs","sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n AlphaColor,\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n \"neutral\",\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"navy\",\n \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n | AccentBoxBackgroundColor\n | (string & {});\n\nfunction isFlowColor(\n something: unknown,\n): something is AccentBoxBackgroundColor {\n const anyAccentBoxBackgroundColors =\n accentBoxBackgroundColors as readonly string[];\n return (\n typeof something === \"string\" &&\n anyAccentBoxBackgroundColors.includes(something)\n );\n}\n\nexport interface AccentBoxProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" | \"section\" | \"article\">,\n PropsWithClassName,\n FlowComponentProps {\n /** The background color of the accent box. @default \"
|
|
1
|
+
{"version":3,"file":"AccentBox.mjs","sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n AlphaColor,\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n \"neutral\",\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"navy\",\n \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n | AccentBoxBackgroundColor\n | (string & {});\n\nfunction isFlowColor(\n something: unknown,\n): something is AccentBoxBackgroundColor {\n const anyAccentBoxBackgroundColors =\n accentBoxBackgroundColors as readonly string[];\n return (\n typeof something === \"string\" &&\n anyAccentBoxBackgroundColors.includes(something)\n );\n}\n\nexport interface AccentBoxProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" | \"section\" | \"article\">,\n PropsWithClassName,\n FlowComponentProps {\n /** The background color of the accent box. @default \"blue\" */\n backgroundColor?: AccentBoxWithCustomBackgroundColor;\n /** The content color of the accent box. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** The background image of the accent box. */\n backgroundImage?: string;\n /** The aspect ratio of the accent box. */\n aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/** @flr-generate all */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n const {\n color = \"default\",\n backgroundColor = \"blue\",\n backgroundImage,\n children,\n elementType = \"div\",\n className,\n style: styleFromProps,\n aspectRatio,\n } = props;\n\n const isAFlowColor = isFlowColor(backgroundColor);\n\n // backwards compatibility\n const backgroundColorFromColor =\n (color as unknown as string) === \"neutral\" ||\n (color as unknown as string) === \"gradient\" ||\n (color as unknown as string) === \"green\"\n ? (color as unknown as AccentBoxBackgroundColor)\n : undefined;\n\n const style = {\n backgroundColor: isAFlowColor ? undefined : backgroundColor,\n backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n aspectRatio,\n ...styleFromProps,\n };\n\n const rootClassName = clsx(\n styles.accentBox,\n className,\n backgroundColorFromColor\n ? styles[backgroundColorFromColor]\n : isAFlowColor\n ? styles[backgroundColor]\n : undefined,\n );\n\n const Element = elementType;\n\n const contentColor = color === \"default\" ? undefined : color;\n\n const propsContext: PropsContext = {\n Link: {\n color: contentColor,\n },\n Text: {\n color: contentColor,\n },\n Heading: {\n color: contentColor,\n },\n Icon: {\n className: styles.icon,\n },\n };\n\n return (\n <Element className={rootClassName} style={style}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n );\n});\n\nexport default AccentBox;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,yBAAA,GAA4B;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAOA,SAAS,YACP,SAAA,EACuC;AACvC,EAAA,MAAM,4BAAA,GACJ,yBAAA;AACF,EAAA,OACE,OAAO,SAAA,KAAc,QAAA,IACrB,4BAAA,CAA6B,SAAS,SAAS,CAAA;AAEnD;AAmBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,KAAA,GAAQ,SAAA;AAAA,IACR,eAAA,GAAkB,MAAA;AAAA,IAClB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,SAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,YAAA,GAAe,YAAY,eAAe,CAAA;AAGhD,EAAA,MAAM,2BACH,KAAA,KAAgC,SAAA,IAChC,UAAgC,UAAA,IAChC,KAAA,KAAgC,UAC5B,KAAA,GACD,MAAA;AAEN,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,eAAA,EAAiB,eAAe,MAAA,GAAY,eAAA;AAAA,IAC5C,eAAA,EAAiB,eAAA,GAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,CAAA,CAAA,GAAM,MAAA;AAAA,IAC/D,WAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,SAAA;AAAA,IACP,SAAA;AAAA,IACA,2BACI,MAAA,CAAO,wBAAwB,IAC/B,YAAA,GACE,MAAA,CAAO,eAAe,CAAA,GACtB;AAAA,GACR;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,MAAM,YAAA,GAAe,KAAA,KAAU,SAAA,GAAY,MAAA,GAAY,KAAA;AAEvD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EACjC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -9,6 +9,7 @@ const lilac = "flow--accent-box--lilac";
|
|
|
9
9
|
const violet = "flow--accent-box--violet";
|
|
10
10
|
const green = "flow--accent-box--green";
|
|
11
11
|
const navy = "flow--accent-box--navy";
|
|
12
|
+
const icon = "flow--accent-box--icon";
|
|
12
13
|
const styles = {
|
|
13
14
|
accentBox: accentBox,
|
|
14
15
|
gradient: gradient,
|
|
@@ -18,8 +19,9 @@ const styles = {
|
|
|
18
19
|
lilac: lilac,
|
|
19
20
|
violet: violet,
|
|
20
21
|
green: green,
|
|
21
|
-
navy: navy
|
|
22
|
+
navy: navy,
|
|
23
|
+
icon: icon
|
|
22
24
|
};
|
|
23
25
|
|
|
24
|
-
export { accentBox, blue, styles as default, gradient, green, lilac, navy, neutral, teal, violet };
|
|
26
|
+
export { accentBox, blue, styles as default, gradient, green, icon, lilac, navy, neutral, teal, violet };
|
|
25
27
|
//# sourceMappingURL=AccentBox.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccentBox.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccentBox.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -26,6 +26,7 @@ const Text = flowComponent("Text", (props) => {
|
|
|
26
26
|
style: styleFromProps,
|
|
27
27
|
whiteSpace,
|
|
28
28
|
wordBreak,
|
|
29
|
+
noLigatures,
|
|
29
30
|
...rest
|
|
30
31
|
} = props;
|
|
31
32
|
const rootClassName = clsx(
|
|
@@ -33,6 +34,7 @@ const Text = flowComponent("Text", (props) => {
|
|
|
33
34
|
isAlphaColor(color) && styles[color],
|
|
34
35
|
align && styles[`align-${align}`],
|
|
35
36
|
wrap && styles[`wrap-${wrap}`],
|
|
37
|
+
noLigatures && styles[`no-ligatures`],
|
|
36
38
|
className
|
|
37
39
|
);
|
|
38
40
|
const textProps = { ...rest, className: rootClassName };
|
|
@@ -43,7 +45,11 @@ const Text = flowComponent("Text", (props) => {
|
|
|
43
45
|
Icon: { className: styles.icon },
|
|
44
46
|
Kbd: { variant: "soft" }
|
|
45
47
|
};
|
|
46
|
-
const style = {
|
|
48
|
+
const style = {
|
|
49
|
+
whiteSpace,
|
|
50
|
+
wordBreak,
|
|
51
|
+
...styleFromProps
|
|
52
|
+
};
|
|
47
53
|
const childrenElement = /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: emulateBoldWidth, children: /* @__PURE__ */ jsx(EmulatedBoldText, { children }) }) });
|
|
48
54
|
if (!props.slot) {
|
|
49
55
|
const Element = elementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport 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 /* Whether the elements width should match the width it would have with mold text. */\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. @default undefined */\n wrap?: \"wrap\" | \"balance\" | \"pretty\";\n /* The white-space property of the text. @default undefined */\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. @default undefined */\n wordBreak?: React.CSSProperties[\"wordBreak\"];\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 ...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 className,\n );\n\n const textProps = { ...rest, className: rootClassName };\n\n const propsContext: PropsContext = {\n Link: {\n inline: true,\n },\n Icon: { className: styles.icon },\n Kbd: { variant: \"soft\" },\n };\n\n const style = {
|
|
1
|
+
{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport 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 /* Whether the elements width should match the width it would have with mold text. */\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. @default undefined */\n wrap?: \"wrap\" | \"balance\" | \"pretty\";\n /* The white-space property of the text. @default undefined */\n whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n /* The word-break property of the text. @default undefined */\n wordBreak?: React.CSSProperties[\"wordBreak\"];\n /* Disables standard and contextual ligatures for predictable, literal text rendering */\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 },\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"],"names":[],"mappings":";;;;;;;;;;;;;AAyCO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,MAAA;AAAA,IACd,gBAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,KAAA,GAAQ,OAAA;AAAA,IACR,IAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,UAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,IAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,KAAA,IAAS,MAAA,CAAO,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAA;AAAA,IAChC,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,WAAA,IAAe,OAAO,CAAA,YAAA,CAAc,CAAA;AAAA,IACpC;AAAA,GACF;AAEA,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,IAAA,EAAM,WAAW,aAAA,EAAc;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,IAC/B,GAAA,EAAK,EAAE,OAAA,EAAS,MAAA;AAAO,GACzB;AAEA,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,eAAA,mBACJ,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,gBAAA,EACR,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,GAC9B,CAAA,EACF,CAAA;AAGF,EAAA,IAAI,CAAC,MAAM,IAAA,EAAM;AACf,IAAA,MAAM,OAAA,GAAU,WAAA;AAChB,IAAA,2BACG,OAAA,EAAA,EAAQ,KAAA,EAAe,GAAG,SAAA,EAAW,KACnC,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,SAAA;AAAA,IACE,OAAO,WAAA,KAAgB,QAAA;AAAA,IACvB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,OAAe,GAAG,SAAA,EAAW,WAAA,EAA0B,GAAA,EAC/D,QAAA,EAAA,eAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -16,7 +16,8 @@ const styles = {
|
|
|
16
16
|
"align-end": "flow--text--align-end",
|
|
17
17
|
"wrap-wrap": "flow--text--wrap-wrap",
|
|
18
18
|
"wrap-balance": "flow--text--wrap-balance",
|
|
19
|
-
"wrap-pretty": "flow--text--wrap-pretty"
|
|
19
|
+
"wrap-pretty": "flow--text--wrap-pretty",
|
|
20
|
+
"no-ligatures": "flow--text--no-ligatures"
|
|
20
21
|
};
|
|
21
22
|
|
|
22
23
|
export { dark, styles as default, icon, light, text };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,9 +5,9 @@ declare const accentBoxBackgroundColors: readonly ["neutral", "blue", "violet",
|
|
|
5
5
|
type AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];
|
|
6
6
|
type AccentBoxWithCustomBackgroundColor = AccentBoxBackgroundColor | (string & {});
|
|
7
7
|
export interface AccentBoxProps extends PropsWithChildren, PropsWithElementType<"div" | "section" | "article">, PropsWithClassName, FlowComponentProps {
|
|
8
|
-
/** The background color of the accent box. @default "
|
|
8
|
+
/** The background color of the accent box. @default "blue" */
|
|
9
9
|
backgroundColor?: AccentBoxWithCustomBackgroundColor;
|
|
10
|
-
/** The
|
|
10
|
+
/** The content color of the accent box. @default "default" */
|
|
11
11
|
color?: "default" | AlphaColor;
|
|
12
12
|
/** The background image of the accent box. */
|
|
13
13
|
backgroundImage?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccentBox.d.ts","sourceRoot":"","sources":["../../../../src/components/AccentBox/AccentBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,yBAAyB,sFASrB,CAAC;AAEX,KAAK,wBAAwB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC3E,KAAK,kCAAkC,GACnC,wBAAwB,GACxB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAalB,MAAM,WAAW,cACf,SACE,iBAAiB,EACjB,oBAAoB,CAAC,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC,EACnD,kBAAkB,EAClB,kBAAkB;IACpB,
|
|
1
|
+
{"version":3,"file":"AccentBox.d.ts","sourceRoot":"","sources":["../../../../src/components/AccentBox/AccentBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,yBAAyB,sFASrB,CAAC;AAEX,KAAK,wBAAwB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC3E,KAAK,kCAAkC,GACnC,wBAAwB,GACxB,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAalB,MAAM,WAAW,cACf,SACE,iBAAiB,EACjB,oBAAoB,CAAC,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC,EACnD,kBAAkB,EAClB,kBAAkB;IACpB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,kCAAkC,CAAC;IACrD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,wBAAwB;AACxB,eAAO,MAAM,SAAS,mGAiEpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -9,6 +9,7 @@ export interface TextProps extends PropsWithChildren, Omit<Aria.TextProps, "chil
|
|
|
9
9
|
wrap?: "wrap" | "balance" | "pretty";
|
|
10
10
|
whiteSpace?: React.CSSProperties["whiteSpace"];
|
|
11
11
|
wordBreak?: React.CSSProperties["wordBreak"];
|
|
12
|
+
noLigatures?: boolean;
|
|
12
13
|
}
|
|
13
14
|
/** @flr-generate all */
|
|
14
15
|
export declare const Text: React.FunctionComponent<TextProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO/E,MAAM,WAAW,SACf,SACE,iBAAiB,EACjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,aAAa,CAAC,EAChD,oBAAoB,CAAC,MAAM,GAAG,KAAK,GAAG,GAAG,CAAC,EAC1C,kBAAkB;IAEpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAE/B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEnC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAErC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAE/C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO/E,MAAM,WAAW,SACf,SACE,iBAAiB,EACjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,aAAa,CAAC,EAChD,oBAAoB,CAAC,MAAM,GAAG,KAAK,GAAG,GAAG,CAAC,EAC1C,kBAAkB;IAEpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAE/B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEnC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAErC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAE/C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE7C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,0EAqEf,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.792",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@codemirror/lint": "^6.9.5",
|
|
61
61
|
"@internationalized/string": "^3.2.7",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.792",
|
|
64
64
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
65
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
65
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.792",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/i18n": "^3.12.16",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@lezer/generator": "^1.8.0",
|
|
117
117
|
"@lezer/lr": "^1.4.8",
|
|
118
118
|
"@mittwald/flow-core": "",
|
|
119
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
119
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.792",
|
|
120
120
|
"@mittwald/flow-icons-base": "",
|
|
121
121
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
122
122
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"@internationalized/date": "^3.10.0",
|
|
172
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
172
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.791",
|
|
173
173
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
174
174
|
"next": "*",
|
|
175
175
|
"react": "^19.2.0",
|
|
@@ -190,5 +190,5 @@
|
|
|
190
190
|
"optional": true
|
|
191
191
|
}
|
|
192
192
|
},
|
|
193
|
-
"gitHead": "
|
|
193
|
+
"gitHead": "05052317dc822b1fc75a6928a8ce6c23e3228210"
|
|
194
194
|
}
|