@mittwald/flow-react-components 0.1.0-alpha.158 → 0.1.0-alpha.159

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 (7) hide show
  1. package/dist/RadioGroup.js +69 -57
  2. package/dist/styles.css +1 -1
  3. package/dist/types/components/RadioGroup/RadioGroup.d.ts +2 -1
  4. package/dist/types/components/RadioGroup/stories/Default.stories.d.ts +1 -0
  5. package/dist/types/lib/getContainerBreakpointSizeClassName.d.ts +3 -0
  6. package/dist/types/lib/types/props.d.ts +4 -0
  7. package/package.json +4 -4
package/dist/RadioGroup.js CHANGED
@@ -1,37 +1,43 @@
1
1
  "use client"
2
2
  /* */
3
3
  import e from "react";
4
- import * as R from "react-aria-components";
4
+ import * as k from "react-aria-components";
5
5
  import E from "clsx";
6
6
  import "./propsContext-DzAKlmhS.js";
7
- import { P as C, m as I } from "./PropsContextProvider-C6Z4XGp6.js";
7
+ import { P as C, m as z } from "./PropsContextProvider-C6Z4XGp6.js";
8
8
  import "@react-aria/utils";
9
9
  import "remeda";
10
- import { d as P } from "./dynamic-ClpUSmEt.js";
11
- import { F as b } from "./FieldError-Dab589IV.js";
12
- import { C as k } from "./ColumnLayout-FMONjI17.js";
13
- import { TunnelProvider as y, TunnelExit as m } from "@mittwald/react-tunnel";
14
- import { s as c } from "./FormField.module-DHK6nIcD.js";
15
- import { d as F } from "./deepFindOfType-6pG0fH7S.js";
16
- import { C as w } from "./ClearPropsContext-CUvsbMn8.js";
10
+ import { d as h } from "./dynamic-ClpUSmEt.js";
11
+ import { F as B } from "./FieldError-Dab589IV.js";
12
+ import { C as I } from "./ColumnLayout-FMONjI17.js";
13
+ import { TunnelProvider as P, TunnelExit as c } from "@mittwald/react-tunnel";
14
+ import { s as m } from "./FormField.module-DHK6nIcD.js";
15
+ import { d as y } from "./deepFindOfType-6pG0fH7S.js";
16
+ import { C as b } from "./ClearPropsContext-CUvsbMn8.js";
17
17
  import "@tabler/icons-react";
18
18
  import "./Icon-BcUUAuaS.js";
19
- import { I as B, a as v } from "./IconRadioOn-D56UzZk_.js";
19
+ import { I as F, a as v } from "./IconRadioOn-D56UzZk_.js";
20
20
  import { f as N } from "./flowComponent-DDs2bWU2.js";
21
21
  import "dot-prop";
22
22
  import { I as D } from "./IconCheck-DCcrnlQY.js";
23
- const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "flow--radio-group--segments", L = "flow--radio-group--segment", A = "flow--radio-group--checkmark", a = {
23
+ const T = "flow--radio-group", $ = "flow--radio-group--segmented-group", O = "flow--radio-group--segments", L = "flow--radio-group--segment", S = "flow--radio-group--checkmark", A = "flow--radio-group--radio-group-container", r = {
24
24
  radioGroup: T,
25
- segmentedGroup: O,
26
- segments: $,
25
+ segmentedGroup: $,
26
+ segments: O,
27
27
  segment: L,
28
- checkmark: A
29
- }, j = "flow--radio-group--radio-button", q = "flow--radio-group--radio-button--content", z = "flow--radio-group--radio-button--label", f = {
28
+ checkmark: S,
29
+ radioGroupContainer: A,
30
+ "container-breakpoint-size-xs": "flow--radio-group--container-breakpoint-size-xs",
31
+ "container-breakpoint-size-s": "flow--radio-group--container-breakpoint-size-s",
32
+ "container-breakpoint-size-m": "flow--radio-group--container-breakpoint-size-m",
33
+ "container-breakpoint-size-l": "flow--radio-group--container-breakpoint-size-l",
34
+ "container-breakpoint-size-xl": "flow--radio-group--container-breakpoint-size-xl"
35
+ }, j = "flow--radio-group--radio-button", q = "flow--radio-group--radio-button--content", H = "flow--radio-group--radio-button--label", f = {
30
36
  radioButton: j,
31
37
  content: q,
32
- label: z
33
- }, H = N("RadioButton", (n) => {
34
- const { children: t, className: r, refProp: o, ...s } = n, l = E(f.radioButton, r), i = {
38
+ label: H
39
+ }, J = N("RadioButton", (t) => {
40
+ const { children: a, className: n, refProp: o, ...i } = t, s = E(f.radioButton, n), l = {
35
41
  Text: {
36
42
  className: f.label
37
43
  },
@@ -39,28 +45,34 @@ const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "fl
39
45
  className: f.content
40
46
  }
41
47
  };
42
- return /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(M, { ...s, className: l, ref: o }, /* @__PURE__ */ e.createElement(C, { props: i }, t)));
43
- }), ce = N("RadioGroup", (n) => {
48
+ return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(U, { ...i, className: s, ref: o }, /* @__PURE__ */ e.createElement(C, { props: l }, a)));
49
+ }), K = (t) => `container-breakpoint-size-${t}`, ue = N("RadioGroup", (t) => {
44
50
  const {
45
- children: t,
46
- className: r,
51
+ children: a,
52
+ className: n,
47
53
  variant: o = "default",
48
- s,
49
- m: l,
50
- l: i,
51
- refProp: d,
52
- ...h
53
- } = n, G = E(c.formField, r);
54
+ s: i,
55
+ m: s,
56
+ l,
57
+ containerBreakpointSize: d = "m",
58
+ refProp: w,
59
+ ...R
60
+ } = t, x = E(
61
+ m.formField,
62
+ r.radioGroupContainer,
63
+ n,
64
+ r[K(d)]
65
+ );
54
66
  let p = {
55
67
  Label: {
56
- className: c.label
68
+ className: m.label
57
69
  },
58
70
  FieldDescription: {
59
- className: c.fieldDescription,
71
+ className: m.fieldDescription,
60
72
  tunnelId: "fieldDescription"
61
73
  },
62
74
  FieldError: {
63
- className: c.customFieldError,
75
+ className: m.customFieldError,
64
76
  tunnelId: "fieldError"
65
77
  },
66
78
  RadioButton: {
@@ -70,46 +82,46 @@ const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "fl
70
82
  tunnelId: "radios"
71
83
  }
72
84
  };
73
- o === "segmented" && (p = I(p, {
85
+ o === "segmented" && (p = z(p, {
74
86
  Radio: {
75
- className: a.segment,
87
+ className: r.segment,
76
88
  unstyled: !0,
77
- children: P((x) => /* @__PURE__ */ e.createElement(e.Fragment, null, x.children, /* @__PURE__ */ e.createElement(D, { className: a.checkmark })))
89
+ children: h((G) => /* @__PURE__ */ e.createElement(e.Fragment, null, G.children, /* @__PURE__ */ e.createElement(D, { className: r.checkmark })))
78
90
  }
79
91
  }));
80
- const u = !!F(t, H);
92
+ const u = !!y(a, J);
81
93
  return o === "segmented" && u && console.warn(
82
94
  "<RadioButton/> is not supported in 'segmented' variant of <RadioGroup />"
83
- ), /* @__PURE__ */ e.createElement(R.RadioGroup, { ...h, className: G, ref: d }, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(
95
+ ), /* @__PURE__ */ e.createElement(k.RadioGroup, { ...R, className: x, ref: w }, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
84
96
  C,
85
97
  {
86
98
  props: p,
87
99
  dependencies: [o],
88
100
  mergeInParentContext: !0
89
101
  },
90
- t,
91
- o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: a.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: a.segments }, /* @__PURE__ */ e.createElement(m, { id: "radios" }))),
92
- o === "default" && u && /* @__PURE__ */ e.createElement(k, { s, m: l, l: i, className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
93
- o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
94
- /* @__PURE__ */ e.createElement(m, { id: "fieldDescription" }),
95
- /* @__PURE__ */ e.createElement(m, { id: "fieldError" })
96
- )), /* @__PURE__ */ e.createElement(b, { className: c.fieldError }));
97
- }), J = "flow--radio-group--radio", K = "flow--radio-group--radio--icon", g = {
98
- radio: J,
99
- icon: K
100
- }, M = N("Radio", (n) => {
102
+ a,
103
+ o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: r.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: r.segments }, /* @__PURE__ */ e.createElement(c, { id: "radios" }))),
104
+ o === "default" && u && /* @__PURE__ */ e.createElement(I, { s: i, m: s, l, className: r.radioGroup }, /* @__PURE__ */ e.createElement(c, { id: "radios" })),
105
+ o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: r.radioGroup }, /* @__PURE__ */ e.createElement(c, { id: "radios" })),
106
+ /* @__PURE__ */ e.createElement(c, { id: "fieldDescription" }),
107
+ /* @__PURE__ */ e.createElement(c, { id: "fieldError" })
108
+ )), /* @__PURE__ */ e.createElement(B, { className: m.fieldError }));
109
+ }), M = "flow--radio-group--radio", Q = "flow--radio-group--radio--icon", g = {
110
+ radio: M,
111
+ icon: Q
112
+ }, U = N("Radio", (t) => {
101
113
  const {
102
- children: t,
103
- className: r,
114
+ children: a,
115
+ className: n,
104
116
  unstyled: o = !1,
105
- refProp: s,
106
- ...l
107
- } = n, i = o ? r : E(g.radio, r);
108
- return /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(R.Radio, { ...l, className: i, ref: s }, ({ isSelected: d }) => /* @__PURE__ */ e.createElement(e.Fragment, null, d ? !o && /* @__PURE__ */ e.createElement(B, { className: g.icon }) : !o && /* @__PURE__ */ e.createElement(v, { className: g.icon }), t)));
117
+ refProp: i,
118
+ ...s
119
+ } = t, l = o ? n : E(g.radio, n);
120
+ return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(k.Radio, { ...s, className: l, ref: i }, ({ isSelected: d }) => /* @__PURE__ */ e.createElement(e.Fragment, null, d ? !o && /* @__PURE__ */ e.createElement(F, { className: g.icon }) : !o && /* @__PURE__ */ e.createElement(v, { className: g.icon }), a)));
109
121
  });
110
122
  export {
111
- M as Radio,
112
- H as RadioButton,
113
- ce as RadioGroup,
114
- ce as default
123
+ U as Radio,
124
+ J as RadioButton,
125
+ ue as RadioGroup,
126
+ ue as default
115
127
  };