@mittwald/flow-react-components 0.2.0-alpha.751 → 0.2.0-alpha.752
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 +6 -0
- package/dist/assets/doc-properties.json +6302 -6302
- package/dist/js/_virtual/_.locale.json@24d7079ce80a619bbdda6dfcc8289f94.mjs +8 -0
- package/dist/js/_virtual/_.locale.json@24d7079ce80a619bbdda6dfcc8289f94.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Badge/Badge.mjs +4 -0
- package/dist/js/packages/components/src/components/Badge/Badge.mjs.map +1 -1
- package/dist/types/components/Badge/Badge.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_.locale.json@24d7079ce80a619bbdda6dfcc8289f94.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -13,6 +13,8 @@ import '../Icon/components/IconSetProvider.mjs';
|
|
|
13
13
|
import '../Icon/Icon.mjs';
|
|
14
14
|
import '../../views/IconView.mjs';
|
|
15
15
|
import { IconClose } from '../Icon/components/icons/IconClose.mjs';
|
|
16
|
+
import { useLocalizedStringFormatter } from 'react-aria';
|
|
17
|
+
import locales from '../../../../../_virtual/_.locale.json@24d7079ce80a619bbdda6dfcc8289f94.mjs';
|
|
16
18
|
|
|
17
19
|
const Badge = flowComponent("Badge", (props) => {
|
|
18
20
|
const {
|
|
@@ -25,6 +27,7 @@ const Badge = flowComponent("Badge", (props) => {
|
|
|
25
27
|
isDisabled,
|
|
26
28
|
...rest
|
|
27
29
|
} = props;
|
|
30
|
+
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
28
31
|
const rootClassName = clsx(
|
|
29
32
|
styles.badge,
|
|
30
33
|
styles[color],
|
|
@@ -74,6 +77,7 @@ const Badge = flowComponent("Badge", (props) => {
|
|
|
74
77
|
variant: "plain",
|
|
75
78
|
onPress: onClose,
|
|
76
79
|
isDisabled,
|
|
80
|
+
"aria-label": stringFormatter.format("badge.remove"),
|
|
77
81
|
children: /* @__PURE__ */ jsx(IconClose, {})
|
|
78
82
|
}
|
|
79
83
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n \"dark\",\n \"light\",\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /** Handler that is called when the badge is pressed. */\n onPress?: (e: PressEvent) => void;\n /** Handler that is called when the badges close icon is pressed. */\n onClose?: (e: PressEvent) => void;\n /** The color of the badge. @default \"neutral\" */\n color?: BadgeColors;\n /** Whether the badge is disabled. */\n isDisabled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n const {\n children,\n className,\n color = \"neutral\",\n ref,\n onPress,\n onClose,\n isDisabled,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.badge,\n styles[color],\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n Button: {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName} {...rest} ref={ref}>\n {!onPress && <div className={styles.content}>{children}</div>}\n {onPress && (\n <Button\n isDisabled={isDisabled}\n unstyled\n className={styles.button}\n onPress={onPress}\n >\n {children}\n </Button>\n )}\n {onClose && (\n <Button\n className={styles.close}\n size=\"s\"\n color={color === \"light\" ? \"light\" : \"dark\"}\n variant=\"plain\"\n onPress={onClose}\n isDisabled={isDisabled}\n >\n <IconClose />\n </Button>\n )}\n </div>\n </PropsContextProvider>\n );\n});\n\nexport default Badge;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n \"dark\",\n \"light\",\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /** Handler that is called when the badge is pressed. */\n onPress?: (e: PressEvent) => void;\n /** Handler that is called when the badges close icon is pressed. */\n onClose?: (e: PressEvent) => void;\n /** The color of the badge. @default \"neutral\" */\n color?: BadgeColors;\n /** Whether the badge is disabled. */\n isDisabled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n const {\n children,\n className,\n color = \"neutral\",\n ref,\n onPress,\n onClose,\n isDisabled,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const rootClassName = clsx(\n styles.badge,\n styles[color],\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n Button: {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName} {...rest} ref={ref}>\n {!onPress && <div className={styles.content}>{children}</div>}\n {onPress && (\n <Button\n isDisabled={isDisabled}\n unstyled\n className={styles.button}\n onPress={onPress}\n >\n {children}\n </Button>\n )}\n {onClose && (\n <Button\n className={styles.close}\n size=\"s\"\n color={color === \"light\" ? \"light\" : \"dark\"}\n variant=\"plain\"\n onPress={onClose}\n isDisabled={isDisabled}\n aria-label={stringFormatter.format(\"badge.remove\")}\n >\n <IconClose />\n </Button>\n )}\n </div>\n </PropsContextProvider>\n );\n});\n\nexport default Badge;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyCO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,GAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,KAAA;AAAA,IACP,OAAO,KAAK,CAAA;AAAA,IACZ,cAAc,MAAA,CAAO,QAAA;AAAA,IACrB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAA,EAAa,MAAA;AAAA,MACb,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,MAAA;AAAA,QACb,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,WAAA,EAAa,MAAA;AAAA,QACb,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,GAAA,EACtC,QAAA,EAAA;AAAA,IAAA,CAAC,2BAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,IACtD,OAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAA,EAAQ,IAAA;AAAA,QACR,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,OAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,IAED,OAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,IAAA,EAAK,GAAA;AAAA,QACL,KAAA,EAAO,KAAA,KAAU,OAAA,GAAU,OAAA,GAAU,MAAA;AAAA,QACrC,OAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS,OAAA;AAAA,QACT,UAAA;AAAA,QACA,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA;AAAA,QAEjD,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAMtD,eAAO,MAAM,WAAW,4GAYd,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,UACf,SAAQ,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB;IACjE,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAwB;AACxB,eAAO,MAAM,KAAK,+FA0EhB,CAAC;AAEH,eAAe,KAAK,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.752",
|
|
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-compiler": "^3.2.6",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.752",
|
|
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.752",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"@lezer/generator": "^1.8.0",
|
|
113
113
|
"@lezer/lr": "^1.4.8",
|
|
114
114
|
"@mittwald/flow-core": "",
|
|
115
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
115
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.752",
|
|
116
116
|
"@mittwald/flow-icons-base": "",
|
|
117
117
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
118
118
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
},
|
|
166
166
|
"peerDependencies": {
|
|
167
167
|
"@internationalized/date": "^3.10.0",
|
|
168
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
168
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.751",
|
|
169
169
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
170
170
|
"next": "*",
|
|
171
171
|
"react": "^19.2.0",
|
|
@@ -186,5 +186,5 @@
|
|
|
186
186
|
"optional": true
|
|
187
187
|
}
|
|
188
188
|
},
|
|
189
|
-
"gitHead": "
|
|
189
|
+
"gitHead": "cf7424fa013b2ddb4b6a41d8bd2659e80c7fe9c7"
|
|
190
190
|
}
|