@mittwald/flow-react-components 0.2.0-alpha.1019 → 0.2.0-alpha.1020
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 +4 -0
- package/dist/assets/doc-properties.json +19326 -19326
- package/dist/js/packages/components/src/components/Kbd/Kbd.mjs +5 -2
- package/dist/js/packages/components/src/components/Kbd/Kbd.mjs.map +1 -1
- package/dist/types/components/Kbd/Kbd.d.ts.map +1 -1
- package/package.json +11 -11
|
@@ -8,6 +8,7 @@ import styles from './Kbd.module.scss.mjs';
|
|
|
8
8
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
9
9
|
import { Fragment } from 'react';
|
|
10
10
|
import { isAppleDevice } from '@react-aria/utils';
|
|
11
|
+
import { useIsSSR } from 'react-aria';
|
|
11
12
|
|
|
12
13
|
const Kbd = flowComponent("Kbd", (props) => {
|
|
13
14
|
const {
|
|
@@ -18,6 +19,7 @@ const Kbd = flowComponent("Kbd", (props) => {
|
|
|
18
19
|
variant = "plain",
|
|
19
20
|
...rest
|
|
20
21
|
} = props;
|
|
22
|
+
const isSsr = useIsSSR();
|
|
21
23
|
const rootClassName = clsx(
|
|
22
24
|
styles.kbd,
|
|
23
25
|
isDisabled && styles.disabled,
|
|
@@ -25,13 +27,14 @@ const Kbd = flowComponent("Kbd", (props) => {
|
|
|
25
27
|
className
|
|
26
28
|
);
|
|
27
29
|
const stringFormatter = useLocalizedStringFormatter(locales, "Kbd");
|
|
30
|
+
const isApple = !isSsr && isAppleDevice();
|
|
28
31
|
const joinedKeys = keys?.map((key, index) => {
|
|
29
32
|
let formattedKey = key;
|
|
30
33
|
if (key === "mod") {
|
|
31
|
-
formattedKey =
|
|
34
|
+
formattedKey = isApple ? "⌘" : stringFormatter.format("mod");
|
|
32
35
|
}
|
|
33
36
|
if (key === "alt") {
|
|
34
|
-
formattedKey =
|
|
37
|
+
formattedKey = isApple ? "⌥" : stringFormatter.format("alt");
|
|
35
38
|
}
|
|
36
39
|
if (key === "shift") {
|
|
37
40
|
formattedKey = "⇧";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\n\nexport interface KbdProps\n extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n /** Array of keys to be joined */\n keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n /** Whether the component is displayed as disabled */\n isDisabled?: boolean;\n /** The visual variant @default \"plain\" */\n variant?: \"plain\" | \"soft\";\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n const {\n keys,\n className,\n isDisabled,\n children,\n variant = \"plain\",\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.kbd,\n isDisabled && styles.disabled,\n styles[variant],\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Kbd\");\n\n const joinedKeys = keys?.map((key, index) => {\n let formattedKey = key;\n\n if (key === \"mod\") {\n formattedKey =
|
|
1
|
+
{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Kbd.module.scss\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Fragment, type PropsWithChildren } from \"react\";\nimport { isAppleDevice } from \"@react-aria/utils\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface KbdProps\n extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n /** Array of keys to be joined */\n keys?: (string | \"mod\" | \"alt\" | \"shift\")[];\n /** Whether the component is displayed as disabled */\n isDisabled?: boolean;\n /** The visual variant @default \"plain\" */\n variant?: \"plain\" | \"soft\";\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const Kbd = flowComponent(\"Kbd\", (props) => {\n const {\n keys,\n className,\n isDisabled,\n children,\n variant = \"plain\",\n ...rest\n } = props;\n\n const isSsr = useIsSSR();\n\n const rootClassName = clsx(\n styles.kbd,\n isDisabled && styles.disabled,\n styles[variant],\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Kbd\");\n const isApple = !isSsr && isAppleDevice();\n\n const joinedKeys = keys?.map((key, index) => {\n let formattedKey = key;\n\n if (key === \"mod\") {\n formattedKey = isApple ? \"⌘\" : stringFormatter.format(\"mod\");\n }\n\n if (key === \"alt\") {\n formattedKey = isApple ? \"⌥\" : stringFormatter.format(\"alt\");\n }\n\n if (key === \"shift\") {\n formattedKey = \"⇧\";\n }\n\n if (keys?.length === 1) {\n return <Fragment key={index}>{formattedKey}</Fragment>;\n }\n\n return (\n <Fragment key={index}>\n <kbd className={styles.kbd}>{formattedKey}</kbd>\n {index < keys.length - 1 && \" + \"}\n </Fragment>\n );\n });\n\n return (\n <kbd className={rootClassName} {...rest}>\n {joinedKeys ?? children}\n </kbd>\n );\n});\n\nexport default Kbd;\n"],"names":[],"mappings":";;;;;;;;;;AA2BO,MAAM,GAAA,GAAM,aAAA,CAAc,KAAA,EAAO,CAAC,KAAA,KAAU;AACjD,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,GAAA;AAAA,IACP,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB,OAAO,OAAO,CAAA;AAAA,IACd;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,KAAK,CAAA;AAClE,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,IAAS,aAAA,EAAc;AAExC,EAAA,MAAM,UAAA,GAAa,IAAA,EAAM,GAAA,CAAI,CAAC,KAAK,KAAA,KAAU;AAC3C,IAAA,IAAI,YAAA,GAAe,GAAA;AAEnB,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,OAAA,GAAU,GAAA,GAAM,eAAA,CAAgB,MAAA,CAAO,KAAK,CAAA;AAAA,IAC7D;AAEA,IAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,MAAA,YAAA,GAAe,OAAA,GAAU,GAAA,GAAM,eAAA,CAAgB,MAAA,CAAO,KAAK,CAAA;AAAA,IAC7D;AAEA,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,YAAA,GAAe,GAAA;AAAA,IACjB;AAEA,IAAA,IAAI,IAAA,EAAM,WAAW,CAAA,EAAG;AACtB,MAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAsB,QAAA,EAAA,YAAA,EAAA,EAAR,KAAqB,CAAA;AAAA,IAC7C;AAEA,IAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAM,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,MACzC,KAAA,GAAQ,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK;AAAA,KAAA,EAAA,EAFf,KAGf,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAgB,GAAG,IAAA,EAChC,wBAAc,QAAA,EACjB,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/Kbd/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/Kbd/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,QACf,SAAQ,kBAAkB,EAAE,kBAAkB,EAAE,iBAAiB;IACjE,iCAAiC;IACjC,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,EAAE,CAAC;IAC5C,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG,6FAsDd,CAAC;AAEH,eAAe,GAAG,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.1020",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
"@internationalized/string-compiler": "^3.4.1",
|
|
75
75
|
"@lezer/common": "^1.5.2",
|
|
76
76
|
"@lezer/highlight": "^1.2.3",
|
|
77
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
77
|
+
"@mittwald/flow-icons": "0.2.0-alpha.1020",
|
|
78
78
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
79
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
79
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.1020",
|
|
80
80
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
81
81
|
"@react-aria/form": "^3.2.1",
|
|
82
82
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -130,12 +130,12 @@
|
|
|
130
130
|
"@internationalized/date": "^3.12.2",
|
|
131
131
|
"@lezer/generator": "^1.8.0",
|
|
132
132
|
"@lezer/lr": "^1.4.10",
|
|
133
|
-
"@mittwald/flow-core": "0.2.0-alpha.
|
|
134
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
135
|
-
"@mittwald/flow-icons-base": "0.2.0-alpha.
|
|
133
|
+
"@mittwald/flow-core": "0.2.0-alpha.1020",
|
|
134
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.1020",
|
|
135
|
+
"@mittwald/flow-icons-base": "0.2.0-alpha.1020",
|
|
136
136
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
137
137
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
138
|
-
"@mittwald/typescript-config": "0.2.0-alpha.
|
|
138
|
+
"@mittwald/typescript-config": "0.2.0-alpha.1020",
|
|
139
139
|
"@nx/storybook": "^22.7.6",
|
|
140
140
|
"@storybook/addon-a11y": "^10.4.6",
|
|
141
141
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -144,8 +144,9 @@
|
|
|
144
144
|
"@storybook/react": "^10.4.6",
|
|
145
145
|
"@storybook/react-vite": "^10.4.6",
|
|
146
146
|
"@tabler/icons-react": "^3.44.0",
|
|
147
|
+
"@teispace/next-themes": "^2.0.4",
|
|
147
148
|
"@types/node": "25.9.5",
|
|
148
|
-
"@typescript/native
|
|
149
|
+
"@typescript/native": "npm:typescript@^7.0.2",
|
|
149
150
|
"@vitejs/plugin-react": "5.2.0",
|
|
150
151
|
"@vitest/browser": "^4.1.10",
|
|
151
152
|
"@vitest/browser-playwright": "^4.1.10",
|
|
@@ -156,7 +157,6 @@
|
|
|
156
157
|
"glob": "^13.0.6",
|
|
157
158
|
"happy-dom": "^20.10.6",
|
|
158
159
|
"next": "^16.2.10",
|
|
159
|
-
"next-themes": "^0.4.6",
|
|
160
160
|
"nx": "^22.7.5",
|
|
161
161
|
"postcss": "^8.5.19",
|
|
162
162
|
"postcss-nested-import": "^1.3.0",
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
},
|
|
189
189
|
"peerDependencies": {
|
|
190
190
|
"@internationalized/date": "^3.12.2",
|
|
191
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
191
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.1020",
|
|
192
192
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
193
193
|
"next": "^16.2.3",
|
|
194
194
|
"react": "^19.2.0",
|
|
@@ -209,5 +209,5 @@
|
|
|
209
209
|
"optional": true
|
|
210
210
|
}
|
|
211
211
|
},
|
|
212
|
-
"gitHead": "
|
|
212
|
+
"gitHead": "058d4ffed4fd5279fb7198a4b3acbd8070ff3539"
|
|
213
213
|
}
|