@mittwald/flow-react-components 0.1.0-alpha.125 → 0.1.0-alpha.127

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 (97) hide show
  1. package/dist/{Accordion-Bszrsi-4.js → Accordion-ws4Zm_8c.js} +3 -3
  2. package/dist/Accordion.js +1 -1
  3. package/dist/Avatar.js +1 -1
  4. package/dist/Breadcrumb.js +2 -2
  5. package/dist/Button-54Eoq_9o.js +120 -0
  6. package/dist/Button.js +1 -1
  7. package/dist/ButtonGroup.js +1 -1
  8. package/dist/{Checkbox-CHueH9FZ.js → Checkbox-DKGPBvfB.js} +4 -4
  9. package/dist/Checkbox.js +1 -1
  10. package/dist/{CheckboxButton-Ch3zxviG.js → CheckboxButton-Dq2LZ-cZ.js} +2 -2
  11. package/dist/CheckboxButton.js +1 -1
  12. package/dist/CheckboxGroup.js +3 -3
  13. package/dist/{Content-xPY804ey.js → Content-CqXiq55k.js} +1 -1
  14. package/dist/Content.js +1 -1
  15. package/dist/{ContextMenu-ChxMleeO.js → ContextMenu-C0R1LgPo.js} +1 -1
  16. package/dist/ContextMenu.js +2 -2
  17. package/dist/CopyButton.js +4 -4
  18. package/dist/CounterLabel.js +18 -0
  19. package/dist/FieldDescription.js +2 -2
  20. package/dist/{FieldError-Bl_SXH5M.js → FieldError-B-DZZKmM.js} +3 -3
  21. package/dist/FieldError.js +1 -1
  22. package/dist/{Header-uOS96l33.js → Header-CNcwT0A-.js} +1 -1
  23. package/dist/Header.js +1 -1
  24. package/dist/{Heading-CSfMC_V6.js → Heading-BoOpj4Y4.js} +1 -1
  25. package/dist/Heading.js +1 -1
  26. package/dist/{Icon-DXq5lwp4.js → Icon-BwDd2GzD.js} +1 -1
  27. package/dist/Icon.js +1 -1
  28. package/dist/{IconCheck-BLXj9z4I.js → IconCheck-B3-gj5Z4.js} +1 -1
  29. package/dist/{IconCheckboxEmpty-CseDZ77J.js → IconCheckboxEmpty-DL20lMih.js} +1 -1
  30. package/dist/{IconCheckboxIndeterminate-BdEkNKEg.js → IconCheckboxIndeterminate-DEX0y_6i.js} +1 -1
  31. package/dist/{IconChevronDown-DGMWVrr9.js → IconChevronDown-xHLf7Pku.js} +1 -1
  32. package/dist/{IconChevronRight-Sd5qEgz9.js → IconChevronRight-D4wPdDfY.js} +1 -1
  33. package/dist/{IconClose-BuJDcvk1.js → IconClose-D5lPIOIs.js} +1 -1
  34. package/dist/{IconContextMenu-BtDEfs_U.js → IconContextMenu-Bf-D1luy.js} +1 -1
  35. package/dist/{IconCopy-Y4GR1Z03.js → IconCopy-B_1cohk1.js} +1 -1
  36. package/dist/{IconDanger-D3n1sEDX.js → IconDanger-9AHctjFi.js} +1 -1
  37. package/dist/{IconPending-C0IPPa0F.js → IconPending-DDMMJh8P.js} +1 -1
  38. package/dist/{IconPlus-BL-Zqbnv.js → IconPlus-DIghO9AS.js} +1 -1
  39. package/dist/{IconRadioOn-D0pCkmJ4.js → IconRadioOn-CQ6Wifij.js} +1 -1
  40. package/dist/{IconSearch-B9UA2NmT.js → IconSearch-DB2-YIVR.js} +1 -1
  41. package/dist/{IconSucceeded-B4DEKa6J.js → IconSucceeded-14t0usjT.js} +1 -1
  42. package/dist/{IconWarning-CmSsxAnH.js → IconWarning-Cxwzhq8-.js} +1 -1
  43. package/dist/Icons.js +16 -16
  44. package/dist/Image.js +1 -1
  45. package/dist/Initials.js +1 -1
  46. package/dist/InlineAlert.js +2 -2
  47. package/dist/{Label-CfPzBQtx.js → Label-BuZlD5RR.js} +1 -1
  48. package/dist/Label.js +1 -1
  49. package/dist/LayoutCard.js +1 -1
  50. package/dist/{Link-BNozTXoN.js → Link-CUdps5_K.js} +1 -1
  51. package/dist/Link.js +1 -1
  52. package/dist/List.js +12 -12
  53. package/dist/{LoadingSpinner-smFm5pXR.js → LoadingSpinner-qv2jHNni.js} +2 -2
  54. package/dist/LoadingSpinner.js +1 -1
  55. package/dist/{MenuItem-CgrBX4na.js → MenuItem-BJwqcaQl.js} +5 -5
  56. package/dist/MenuItem.js +1 -1
  57. package/dist/Modal.js +1 -1
  58. package/dist/Navigation.js +2 -2
  59. package/dist/NumberField.js +6 -6
  60. package/dist/OffCanvas.js +4 -4
  61. package/dist/RadioGroup.js +5 -5
  62. package/dist/Section.js +1 -1
  63. package/dist/Select.js +4 -4
  64. package/dist/StatusBadge.js +3 -3
  65. package/dist/{StatusIcon-CzfeqAZQ.js → StatusIcon-CvKvGN7C.js} +3 -3
  66. package/dist/StatusIcon.js +1 -1
  67. package/dist/Switch.js +5 -5
  68. package/dist/Table.js +40 -0
  69. package/dist/Tabs.js +7 -7
  70. package/dist/{Text-DOQUStg_.js → Text-cmKqNaYE.js} +1 -1
  71. package/dist/Text.js +1 -1
  72. package/dist/TextArea.js +2 -2
  73. package/dist/TextField.js +2 -2
  74. package/dist/{TextFieldBase-B6lQlCmE.js → TextFieldBase-CVi18EEt.js} +1 -1
  75. package/dist/{flowComponent-Cv_SURLH.js → flowComponent-DHBRxUvd.js} +12 -11
  76. package/dist/react-hook-form.js +1 -1
  77. package/dist/styles.css +1 -1
  78. package/dist/types/components/CounterLabel/CounterLabel.d.ts +9 -0
  79. package/dist/types/components/CounterLabel/index.d.ts +4 -0
  80. package/dist/types/components/CounterLabel/stories/Default.stories.d.ts +10 -0
  81. package/dist/types/components/Table/Table.d.ts +6 -0
  82. package/dist/types/components/Table/components/TableBody/TableBody.d.ts +6 -0
  83. package/dist/types/components/Table/components/TableBody/index.d.ts +4 -0
  84. package/dist/types/components/Table/components/TableCell/TableCell.d.ts +6 -0
  85. package/dist/types/components/Table/components/TableCell/index.d.ts +4 -0
  86. package/dist/types/components/Table/components/TableColumn/TableColumn.d.ts +6 -0
  87. package/dist/types/components/Table/components/TableColumn/index.d.ts +4 -0
  88. package/dist/types/components/Table/components/TableHeader/TableHeader.d.ts +6 -0
  89. package/dist/types/components/Table/components/TableHeader/index.d.ts +4 -0
  90. package/dist/types/components/Table/components/TableRow/TableRow.d.ts +6 -0
  91. package/dist/types/components/Table/components/TableRow/index.d.ts +4 -0
  92. package/dist/types/components/Table/index.d.ts +9 -0
  93. package/dist/types/components/Table/stories/Default.stories.d.ts +7 -0
  94. package/dist/types/components/propTypes/index.d.ts +2 -0
  95. package/dist/types/lib/propsContext/propsContext.d.ts +1 -0
  96. package/package.json +12 -4
  97. package/dist/Button-tEtjVHFC.js +0 -116
@@ -0,0 +1,9 @@
1
+ import { FC } from 'react';
2
+ import { PropsWithElementType } from '../../lib/types/props';
3
+ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
4
+
5
+ export interface CounterLabelProps extends PropsWithElementType<"span">, FlowComponentProps<"CounterLabel"> {
6
+ count?: number;
7
+ }
8
+ export declare const CounterLabel: FC<CounterLabelProps>;
9
+ export default CounterLabel;
@@ -0,0 +1,4 @@
1
+ import { CounterLabel } from './CounterLabel';
2
+
3
+ export { type CounterLabelProps, CounterLabel } from './CounterLabel';
4
+ export default CounterLabel;
@@ -0,0 +1,10 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { CounterLabel } from '..';
3
+
4
+ declare const meta: Meta<typeof CounterLabel>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof CounterLabel>;
7
+ export declare const Default: Story;
8
+ export declare const WithoutContent: Story;
9
+ export declare const WithHighNumber: Story;
10
+ export declare const WithButton: Story;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableProps = Aria.TableProps;
5
+ export declare const Table: FC<TableProps>;
6
+ export default Table;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableBodyProps = Aria.TableBodyProps<never>;
5
+ export declare const TableBody: FC<TableBodyProps>;
6
+ export default TableBody;
@@ -0,0 +1,4 @@
1
+ import { TableBody } from './TableBody';
2
+
3
+ export { type TableBodyProps, TableBody } from './TableBody';
4
+ export default TableBody;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableCellProps = Aria.CellProps;
5
+ export declare const TableCell: FC<TableCellProps>;
6
+ export default TableCell;
@@ -0,0 +1,4 @@
1
+ import { TableCell } from './TableCell';
2
+
3
+ export { type TableCellProps, TableCell } from './TableCell';
4
+ export default TableCell;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableColumnProps = Aria.ColumnProps;
5
+ export declare const TableColumn: FC<TableColumnProps>;
6
+ export default TableColumn;
@@ -0,0 +1,4 @@
1
+ import { TableColumn } from './TableColumn';
2
+
3
+ export { type TableColumnProps, TableColumn } from './TableColumn';
4
+ export default TableColumn;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableHeaderProps = Aria.TableHeaderProps<never>;
5
+ export declare const TableHeader: FC<TableHeaderProps>;
6
+ export default TableHeader;
@@ -0,0 +1,4 @@
1
+ import { TableHeader } from './TableHeader';
2
+
3
+ export { type TableHeaderProps, TableHeader } from './TableHeader';
4
+ export default TableHeader;
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+
3
+ import * as Aria from "react-aria-components";
4
+ export type TableRowProps = Aria.RowProps<never>;
5
+ export declare const TableRow: FC<TableRowProps>;
6
+ export default TableRow;
@@ -0,0 +1,4 @@
1
+ import { TableRow } from './TableRow';
2
+
3
+ export { type TableRowProps, TableRow } from './TableRow';
4
+ export default TableRow;
@@ -0,0 +1,9 @@
1
+ import { Table } from './Table';
2
+
3
+ export { type TableProps, Table } from './Table';
4
+ export * from './components/TableBody';
5
+ export * from './components/TableCell';
6
+ export * from './components/TableColumn';
7
+ export * from './components/TableHeader';
8
+ export * from './components/TableRow';
9
+ export default Table;
@@ -0,0 +1,7 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { Table } from '..';
3
+
4
+ declare const meta: Meta<typeof Table>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof Table>;
7
+ export declare const Default: Story;
@@ -30,6 +30,7 @@ import { CheckboxButtonProps } from '../CheckboxButton';
30
30
  import { TabsProps } from '../Tabs';
31
31
  import { ModalProps } from '../Modal';
32
32
  import { SectionProps } from '../Section';
33
+ import { CounterLabelProps } from '../CounterLabel';
33
34
 
34
35
  export * from './types';
35
36
  export interface FlowComponentPropsTypes {
@@ -43,6 +44,7 @@ export interface FlowComponentPropsTypes {
43
44
  Content: ContentProps;
44
45
  ContextMenu: ContextMenuProps;
45
46
  CopyButton: CopyButtonProps;
47
+ CounterLabel: CounterLabelProps;
46
48
  FieldDescription: FieldDescriptionProps;
47
49
  FieldError: FieldErrorProps;
48
50
  Header: HeaderProps;
@@ -11,6 +11,7 @@ export declare const propsContext: import('react').Context<Partial<{
11
11
  Content: import('./types').ComponentPropsContext<"Content">;
12
12
  ContextMenu: import('./types').ComponentPropsContext<"ContextMenu">;
13
13
  CopyButton: import('./types').ComponentPropsContext<"CopyButton">;
14
+ CounterLabel: import('./types').ComponentPropsContext<"CounterLabel">;
14
15
  FieldDescription: import('./types').ComponentPropsContext<"FieldDescription">;
15
16
  FieldError: import('./types').ComponentPropsContext<"FieldError">;
16
17
  Header: import('./types').ComponentPropsContext<"Header">;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.1.0-alpha.125",
3
+ "version": "0.1.0-alpha.127",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -50,6 +50,10 @@
50
50
  "types": "./dist/types/components/Content/index.d.ts",
51
51
  "import": "./dist/Content.js"
52
52
  },
53
+ "./CounterLabel": {
54
+ "types": "./dist/types/components/CounterLabel/index.d.ts",
55
+ "import": "./dist/CounterLabel.js"
56
+ },
53
57
  "./IllustratedMessage": {
54
58
  "types": "./dist/types/components/IllustratedMessage/index.d.ts",
55
59
  "import": "./dist/IllustratedMessage.js"
@@ -198,6 +202,10 @@
198
202
  "types": "./dist/types/components/Switch/index.d.ts",
199
203
  "import": "./dist/Switch.js"
200
204
  },
205
+ "./Table": {
206
+ "types": "./dist/types/components/Table/index.d.ts",
207
+ "import": "./dist/Table.js"
208
+ },
201
209
  "./Tabs": {
202
210
  "types": "./dist/types/components/Tabs/index.d.ts",
203
211
  "import": "./dist/Tabs.js"
@@ -251,7 +259,7 @@
251
259
  },
252
260
  "dependencies": {
253
261
  "@chakra-ui/live-region": "^2.1.0",
254
- "@mittwald/react-tunnel": "^0.1.0-alpha.125",
262
+ "@mittwald/react-tunnel": "^0.1.0-alpha.127",
255
263
  "@mittwald/react-use-promise": "^2.3.13",
256
264
  "@react-aria/utils": "^3.24.1",
257
265
  "@react-types/shared": "^3.23.1",
@@ -275,7 +283,7 @@
275
283
  },
276
284
  "devDependencies": {
277
285
  "@faker-js/faker": "^8.4.1",
278
- "@mittwald/flow-design-tokens": "^0.1.0-alpha.125",
286
+ "@mittwald/flow-design-tokens": "^0.1.0-alpha.127",
279
287
  "@mittwald/react-use-promise": "^2.3.13",
280
288
  "@nx/storybook": "^19.0.5",
281
289
  "@storybook/addon-a11y": "^8.1.2",
@@ -351,5 +359,5 @@
351
359
  "optional": true
352
360
  }
353
361
  },
354
- "gitHead": "9f954b620860e7424ebe4e138ee1a61fa11907dc"
362
+ "gitHead": "0344a25da2cf7f981180c9035758696649ae8236"
355
363
  }
@@ -1,116 +0,0 @@
1
- "use client"
2
- /* */
3
- import o, { useEffect as x } from "react";
4
- import * as F from "react-aria-components";
5
- import E from "clsx";
6
- import { C as y } from "./ClearPropsContext-CeCMjUK9.js";
7
- import { P as h } from "./PropsContextProvider-ChpH8eF2.js";
8
- import "@react-aria/utils";
9
- import "./propsContext-CauylOgH.js";
10
- import "remeda";
11
- import "@tabler/icons-react";
12
- import "./Icon-DXq5lwp4.js";
13
- import { I as C, a as I } from "./IconSucceeded-B4DEKa6J.js";
14
- import { W as u } from "./Wrap-DGT1h1o3.js";
15
- import { T as N } from "./Text-DOQUStg_.js";
16
- import { f as k } from "./flowComponent-Cv_SURLH.js";
17
- import { L as A } from "./LoadingSpinner-smFm5pXR.js";
18
- import { useLocalizedStringFormatter as D } from "react-aria";
19
- import { useLiveRegion as T } from "@chakra-ui/live-region";
20
- const z = "flow--button", B = "flow--button--content", L = "flow--button--state-icon", R = "flow--button--avatar", K = "flow--button--icon", U = "flow--button--text", W = "flow--button--is-succeeded", $ = "flow--button--is-failed", j = "flow--button--is-pending", q = "flow--button--plain", G = "flow--button--primary", H = "flow--button--solid", J = "flow--button--aria-disabled", M = "flow--button--accent", O = "flow--button--danger", Q = "flow--button--secondary", V = "flow--button--dark", X = "flow--button--light", Y = "flow--button--soft", t = {
21
- button: z,
22
- content: B,
23
- stateIcon: L,
24
- avatar: R,
25
- icon: K,
26
- text: U,
27
- isSucceeded: W,
28
- isFailed: $,
29
- isPending: j,
30
- plain: q,
31
- "size-s": "flow--button--size-s",
32
- primary: G,
33
- solid: H,
34
- ariaDisabled: J,
35
- accent: M,
36
- danger: O,
37
- secondary: Q,
38
- dark: V,
39
- light: X,
40
- soft: Y
41
- }, Z = {
42
- "de-DE": {
43
- "action.isFailed": "Fehlgeschlagen",
44
- "action.isPending": "Ausstehend...",
45
- "action.isSucceeded": "Erfolgreich"
46
- },
47
- "en-EN": {
48
- "action.isFailed": "Failed",
49
- "action.isPending": "Pending...",
50
- "action.isSucceeded": "Succeeded"
51
- }
52
- }, _ = (e, r = {}) => {
53
- const i = D(Z), {
54
- isPendingText: a = i.format("action.isPending"),
55
- isSucceededText: c = i.format("action.isSucceeded"),
56
- isFailedText: s = i.format("action.isFailed")
57
- } = r, n = T({
58
- "aria-live": "polite",
59
- "aria-atomic": !1,
60
- "aria-relevant": "text additions",
61
- role: "status"
62
- });
63
- x(() => {
64
- e === "isPending" ? n.speak(a) : e === "isSucceeded" ? n.speak(c) : e === "isFailed" && n.speak(s);
65
- }, [e]);
66
- }, ee = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), we = k("Button", (e) => {
67
- e = ee(e);
68
- const {
69
- color: r = "primary",
70
- variant: i = "solid",
71
- children: a,
72
- className: c,
73
- size: s = "m",
74
- isPending: n,
75
- isSucceeded: d,
76
- isFailed: l,
77
- "aria-disabled": b,
78
- refProp: g,
79
- unstyled: m,
80
- ...P
81
- } = e, w = m ? c : E(
82
- t.button,
83
- n && t.isPending,
84
- d && t.isSucceeded,
85
- l && t.isFailed,
86
- t[`size-${s}`],
87
- t[r],
88
- t[i],
89
- c,
90
- /**
91
- * Workaround warning: The Aria.Button does not support "aria-disabled"
92
- * by now, so this Button will be visually disabled via CSS.
93
- */
94
- b && t.ariaDisabled
95
- );
96
- _(
97
- n ? "isPending" : d ? "isSucceeded" : l ? "isFailed" : "isIdle"
98
- );
99
- const v = {
100
- Icon: {
101
- className: t.icon,
102
- "aria-hidden": !0,
103
- size: s
104
- },
105
- Text: {
106
- className: t.text
107
- },
108
- Avatar: {
109
- className: t.avatar
110
- }
111
- }, f = d ? C : l ? I : n ? A : void 0, p = f && /* @__PURE__ */ o.createElement(f, { size: s, className: t.stateIcon }), S = typeof a == "string";
112
- return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(F.Button, { className: w, ref: g, ...P }, /* @__PURE__ */ o.createElement(h, { props: v }, /* @__PURE__ */ o.createElement(u, { if: !m }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(u, { if: S }, /* @__PURE__ */ o.createElement(N, null, a))))), p));
113
- });
114
- export {
115
- we as B
116
- };