@mittwald/flow-react-components 0.2.0-alpha.996 → 0.2.0-alpha.998
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.
|
@@ -31,7 +31,7 @@ const AccentBox = flowComponent("AccentBox", (props) => {
|
|
|
31
31
|
style: styleFromProps,
|
|
32
32
|
aspectRatio
|
|
33
33
|
} = props;
|
|
34
|
-
const defaultColor = colorFromProps === "gradient" || backgroundColor === "gradient" ? "dark
|
|
34
|
+
const defaultColor = colorFromProps === "gradient" || backgroundColor === "gradient" ? "dark" : "default";
|
|
35
35
|
const color = colorFromProps ?? defaultColor;
|
|
36
36
|
const isAFlowColor = isFlowColor(backgroundColor);
|
|
37
37
|
const backgroundColorFromColor = colorFromProps === "neutral" || colorFromProps === "gradient" || colorFromProps === "green" ? colorFromProps : void 0;
|
|
@@ -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 \"neutral\" */\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/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n const {\n color: colorFromProps,\n backgroundColor = \"neutral\",\n backgroundImage,\n children,\n elementType = \"div\",\n className,\n style: styleFromProps,\n aspectRatio,\n } = props;\n\n const defaultColor =\n (colorFromProps as unknown as string) === \"gradient\" ||\n backgroundColor === \"gradient\"\n ? \"dark
|
|
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 \"neutral\" */\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/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n const {\n color: colorFromProps,\n backgroundColor = \"neutral\",\n backgroundImage,\n children,\n elementType = \"div\",\n className,\n style: styleFromProps,\n aspectRatio,\n } = props;\n\n const defaultColor =\n (colorFromProps as unknown as string) === \"gradient\" ||\n backgroundColor === \"gradient\"\n ? \"dark\"\n : \"default\";\n\n const color = colorFromProps ?? defaultColor;\n\n const isAFlowColor = isFlowColor(backgroundColor);\n\n // backwards compatibility\n const backgroundColorFromColor =\n (colorFromProps as unknown as string) === \"neutral\" ||\n (colorFromProps as unknown as string) === \"gradient\" ||\n (colorFromProps as unknown as string) === \"green\"\n ? (colorFromProps 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 backgroundColorFromColor\n ? styles[backgroundColorFromColor]\n : isAFlowColor\n ? styles[backgroundColor]\n : undefined,\n className,\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;AAsBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,eAAA,GAAkB,SAAA;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,GACH,cAAA,KAAyC,UAAA,IAC1C,eAAA,KAAoB,aAChB,MAAA,GACA,SAAA;AAEN,EAAA,MAAM,QAAQ,cAAA,IAAkB,YAAA;AAEhC,EAAA,MAAM,YAAA,GAAe,YAAY,eAAe,CAAA;AAGhD,EAAA,MAAM,2BACH,cAAA,KAAyC,SAAA,IACzC,mBAAyC,UAAA,IACzC,cAAA,KAAyC,UACrC,cAAA,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,2BACI,MAAA,CAAO,wBAAwB,IAC/B,YAAA,GACE,MAAA,CAAO,eAAe,CAAA,GACtB,MAAA;AAAA,IACN;AAAA,GACF;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;;;;"}
|
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.998",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
"@internationalized/string-compiler": "^3.4.1",
|
|
73
73
|
"@lezer/common": "^1.5.2",
|
|
74
74
|
"@lezer/highlight": "^1.2.3",
|
|
75
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
75
|
+
"@mittwald/flow-icons": "0.2.0-alpha.998",
|
|
76
76
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
77
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
77
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.998",
|
|
78
78
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
79
79
|
"@react-aria/form": "^3.2.1",
|
|
80
80
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
"@lezer/generator": "^1.8.0",
|
|
130
130
|
"@lezer/lr": "^1.4.10",
|
|
131
131
|
"@mittwald/flow-core": "",
|
|
132
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
132
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.998",
|
|
133
133
|
"@mittwald/flow-icons-base": "",
|
|
134
134
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
135
135
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
},
|
|
185
185
|
"peerDependencies": {
|
|
186
186
|
"@internationalized/date": "^3.12.2",
|
|
187
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
187
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.998",
|
|
188
188
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
189
189
|
"next": "^16.2.3",
|
|
190
190
|
"react": "^19.2.0",
|
|
@@ -205,5 +205,5 @@
|
|
|
205
205
|
"optional": true
|
|
206
206
|
}
|
|
207
207
|
},
|
|
208
|
-
"gitHead": "
|
|
208
|
+
"gitHead": "2c585a67b46ad90b1af8243230321c468d67e3ec"
|
|
209
209
|
}
|