@pglevy/sailwind 0.5.0 → 0.5.1

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 (50) hide show
  1. package/README.md +19 -2
  2. package/dist/components/Button/Button.stories.d.ts +13 -0
  3. package/dist/components/Button/Button.stories.d.ts.map +1 -1
  4. package/dist/components/Button/ButtonWidget.d.ts.map +1 -1
  5. package/dist/components/Button/ButtonWidget.js +67 -61
  6. package/dist/components/Card/Card.stories.d.ts +30 -0
  7. package/dist/components/Card/Card.stories.d.ts.map +1 -1
  8. package/dist/components/Checkbox/Checkbox.stories.d.ts +22 -0
  9. package/dist/components/Checkbox/Checkbox.stories.d.ts.map +1 -1
  10. package/dist/components/Checkbox/CheckboxField.js +63 -60
  11. package/dist/components/Dialog/Dialog.stories.d.ts +10 -0
  12. package/dist/components/Dialog/Dialog.stories.d.ts.map +1 -1
  13. package/dist/components/Dropdown/Dropdown.stories.d.ts +10 -0
  14. package/dist/components/Dropdown/Dropdown.stories.d.ts.map +1 -1
  15. package/dist/components/Heading/Heading.stories.d.ts +29 -0
  16. package/dist/components/Heading/Heading.stories.d.ts.map +1 -1
  17. package/dist/components/MessageBanner/MessageBanner.stories.d.ts +20 -0
  18. package/dist/components/MessageBanner/MessageBanner.stories.d.ts.map +1 -1
  19. package/dist/components/Milestone/Milestone.stories.d.ts +17 -0
  20. package/dist/components/Milestone/Milestone.stories.d.ts.map +1 -1
  21. package/dist/components/Milestone/MilestoneField.d.ts.map +1 -1
  22. package/dist/components/Milestone/MilestoneField.js +43 -42
  23. package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
  24. package/dist/components/ProgressBar/ProgressBar.js +35 -34
  25. package/dist/components/ProgressBar/ProgressBar.stories.d.ts +13 -0
  26. package/dist/components/ProgressBar/ProgressBar.stories.d.ts.map +1 -1
  27. package/dist/components/RadioButton/RadioButton.stories.d.ts +22 -0
  28. package/dist/components/RadioButton/RadioButton.stories.d.ts.map +1 -1
  29. package/dist/components/ReadOnlyGrid/ReadOnlyGrid.js +54 -54
  30. package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts +30 -0
  31. package/dist/components/ReadOnlyGrid/ReadOnlyGrid.stories.d.ts.map +1 -1
  32. package/dist/components/RichText/RichText.stories.d.ts +18 -0
  33. package/dist/components/RichText/RichText.stories.d.ts.map +1 -1
  34. package/dist/components/Slider/SliderField.d.ts.map +1 -1
  35. package/dist/components/Slider/SliderField.js +69 -68
  36. package/dist/components/Stamp/Stamp.stories.d.ts +24 -0
  37. package/dist/components/Stamp/Stamp.stories.d.ts.map +1 -1
  38. package/dist/components/Stamp/StampField.js +5 -5
  39. package/dist/components/Switch/Switch.stories.d.ts.map +1 -1
  40. package/dist/components/Tabs/Tabs.stories.d.ts +17 -0
  41. package/dist/components/Tabs/Tabs.stories.d.ts.map +1 -1
  42. package/dist/components/Tag/Tag.stories.d.ts +10 -0
  43. package/dist/components/Tag/Tag.stories.d.ts.map +1 -1
  44. package/dist/components/Tag/TagField.d.ts.map +1 -1
  45. package/dist/components/Tag/TagField.js +1 -0
  46. package/dist/components/TextField/TextField.stories.d.ts +10 -0
  47. package/dist/components/TextField/TextField.stories.d.ts.map +1 -1
  48. package/dist/components/Toggle/Toggle.stories.d.ts.map +1 -1
  49. package/dist/components/Toggle/ToggleField.js +20 -20
  50. package/package.json +16 -8
@@ -20,6 +20,26 @@ declare const meta: {
20
20
  announceBehavior?: import('./MessageBanner').AnnounceBehavior | undefined;
21
21
  accessibilityText?: string | undefined;
22
22
  }>) => import("react/jsx-runtime").JSX.Element)[];
23
+ argTypes: {
24
+ backgroundColor: {
25
+ control: "text";
26
+ };
27
+ highlightColor: {
28
+ control: "text";
29
+ };
30
+ icon: {
31
+ control: "select";
32
+ options: string[];
33
+ };
34
+ shape: {
35
+ control: "select";
36
+ options: string[];
37
+ };
38
+ marginBelow: {
39
+ control: "select";
40
+ options: string[];
41
+ };
42
+ };
23
43
  };
24
44
  export default meta;
25
45
  type Story = StoryObj<typeof meta>;
@@ -1 +1 @@
1
- {"version":3,"file":"MessageBanner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBanner/MessageBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAY4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAA"}
1
+ {"version":3,"file":"MessageBanner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MessageBanner/MessageBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAkC9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAA"}
@@ -6,6 +6,23 @@ declare const meta: {
6
6
  parameters: {
7
7
  layout: string;
8
8
  };
9
+ argTypes: {
10
+ stepStyle: {
11
+ control: "select";
12
+ options: string[];
13
+ };
14
+ orientation: {
15
+ control: "select";
16
+ options: string[];
17
+ };
18
+ color: {
19
+ control: "text";
20
+ };
21
+ labelPosition: {
22
+ control: "select";
23
+ options: string[];
24
+ };
25
+ };
9
26
  };
10
27
  export default meta;
11
28
  type Story = StoryObj<typeof meta>;
@@ -1 +1 @@
1
- {"version":3,"file":"Milestone.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Milestone/Milestone.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;CAK6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAa5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA"}
1
+ {"version":3,"file":"Milestone.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Milestone/Milestone.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAW6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAa5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"MilestoneField.d.ts","sourceRoot":"","sources":["../../../src/components/Milestone/MilestoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAC5C,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAA;AAC3C,KAAK,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsTxD,CAAA"}
1
+ {"version":3,"file":"MilestoneField.d.ts","sourceRoot":"","sources":["../../../src/components/Milestone/MilestoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAC5C,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAA;AAC3C,KAAK,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,GAAG,EAAE,CAAA;IACb,mGAAmG;IACnG,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuTxD,CAAA"}
@@ -1,24 +1,24 @@
1
- import { jsxs as s, jsx as t, Fragment as I } from "react/jsx-runtime";
1
+ import { jsxs as s, jsx as t, Fragment as T } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { FieldLabel as k } from "../shared/FieldLabel.js";
4
4
  const M = ({
5
- label: x,
6
- instructions: g,
7
- steps: c,
8
- links: f = [],
5
+ label: i,
6
+ instructions: u,
7
+ steps: n,
8
+ links: y = [],
9
9
  active: d = null,
10
- labelPosition: y = "ABOVE",
11
- helpTooltip: C,
12
- showWhen: h = !0,
13
- orientation: n = "HORIZONTAL",
14
- accessibilityText: E,
10
+ labelPosition: C = "ABOVE",
11
+ helpTooltip: h,
12
+ showWhen: E = !0,
13
+ orientation: c = "HORIZONTAL",
14
+ accessibilityText: N,
15
15
  color: v = "ACCENT",
16
16
  marginAbove: O = "NONE",
17
17
  marginBelow: p = "STANDARD",
18
18
  stepStyle: a = "LINE"
19
19
  }) => {
20
- if (!h) return null;
21
- const u = `milestone-${Math.random().toString(36).slice(2, 11)}`, $ = {
20
+ if (!E) return null;
21
+ const f = `milestone-${Math.random().toString(36).slice(2, 11)}`, $ = {
22
22
  NONE: "mt-0",
23
23
  EVEN_LESS: "mt-1",
24
24
  LESS: "mt-2",
@@ -37,7 +37,7 @@ const M = ({
37
37
  ACCENT: { bg: "bg-blue-500", text: "text-blue-500", border: "border-blue-500" },
38
38
  POSITIVE: { bg: "bg-green-700", text: "text-green-700", border: "border-green-700" },
39
39
  NEGATIVE: { bg: "bg-red-700", text: "text-red-700", border: "border-red-700" },
40
- WARN: { bg: "bg-yellow-500", text: "text-yellow-500", border: "border-yellow-500" }
40
+ WARN: { bg: "bg-yellow-500", text: "text-yellow-900", border: "border-yellow-500" }
41
41
  };
42
42
  return o[l] ? {
43
43
  ...o[l],
@@ -49,9 +49,9 @@ const M = ({
49
49
  style: { backgroundColor: l, borderColor: l, color: l }
50
50
  };
51
51
  })(v), A = (l) => d === null ? "future" : d === -1 || l < d ? "completed" : l === d ? "current" : "future", L = (l, o) => {
52
- const e = A(o), b = f[o], m = o + 1, N = /* @__PURE__ */ s("div", { className: `flex ${a === "DOT" && n === "VERTICAL" ? "items-start" : a === "CHEVRON" ? "items-center" : "flex-col items-center"} ${n === "VERTICAL" ? "relative" : ""}`, children: [
52
+ const e = A(o), b = y[o], m = o + 1, x = /* @__PURE__ */ s("div", { className: `flex ${a === "DOT" && c === "VERTICAL" ? "items-start" : a === "CHEVRON" ? "items-center" : "flex-col items-center"} ${c === "VERTICAL" ? "relative" : ""}`, children: [
53
53
  /* @__PURE__ */ s("div", { className: "flex items-center justify-center relative", children: [
54
- a === "DOT" && /* @__PURE__ */ s(I, { children: [
54
+ a === "DOT" && /* @__PURE__ */ s(T, { children: [
55
55
  /* @__PURE__ */ t(
56
56
  "div",
57
57
  {
@@ -62,7 +62,7 @@ const M = ({
62
62
  } : void 0
63
63
  }
64
64
  ),
65
- n === "VERTICAL" && o < c.length - 1 && /* @__PURE__ */ t(
65
+ c === "VERTICAL" && o < n.length - 1 && /* @__PURE__ */ t(
66
66
  "div",
67
67
  {
68
68
  className: `absolute top-3 left-1.5 w-0.5 h-[32px] transform -translate-x-px ${e === "completed" ? r.bg || "bg-gray-400" : "bg-gray-200"}`,
@@ -96,7 +96,7 @@ const M = ({
96
96
  children: l
97
97
  }
98
98
  ),
99
- n === "HORIZONTAL" && o < c.length - 1 && /* @__PURE__ */ t(
99
+ c === "HORIZONTAL" && o < n.length - 1 && /* @__PURE__ */ t(
100
100
  "div",
101
101
  {
102
102
  className: `w-0 h-0 border-l-[16px] border-y-[20px] border-y-transparent relative z-10 ${e === "completed" || e === "current" ? r.border : "border-l-gray-200"}`,
@@ -105,7 +105,7 @@ const M = ({
105
105
  } : void 0
106
106
  }
107
107
  ),
108
- n === "VERTICAL" && o < c.length - 1 && /* @__PURE__ */ t(
108
+ c === "VERTICAL" && o < n.length - 1 && /* @__PURE__ */ t(
109
109
  "div",
110
110
  {
111
111
  className: `absolute -bottom-2 left-4 w-0 h-0 border-t-[16px] border-x-[20px] border-x-transparent ${e === "completed" || e === "current" ? r.border : "border-t-gray-200"}`,
@@ -119,7 +119,7 @@ const M = ({
119
119
  a !== "CHEVRON" && /* @__PURE__ */ t(
120
120
  "span",
121
121
  {
122
- className: `${a === "DOT" && n === "VERTICAL" ? "ml-3 text-base leading-3" : "mt-2 text-base text-center"} ${e === "current" ? "font-semibold" : "font-normal"} ${e === "completed" || e === "current" ? r.text || "text-gray-900" : "text-gray-500"}`,
122
+ className: `${a === "DOT" && c === "VERTICAL" ? "ml-3 text-base leading-3" : "mt-2 text-base text-center"} ${e === "current" ? "font-semibold" : "font-normal"} ${e === "completed" || e === "current" ? r.text || "text-gray-900" : "text-gray-500"}`,
123
123
  style: r.style && (e === "completed" || e === "current") ? {
124
124
  color: r.style.color
125
125
  } : void 0,
@@ -131,74 +131,75 @@ const M = ({
131
131
  "button",
132
132
  {
133
133
  onClick: () => {
134
- const i = b.onClick || b.saveInto;
135
- i && typeof i == "function" && i(b.value);
134
+ const g = b.onClick || b.saveInto;
135
+ g && typeof g == "function" && g(b.value);
136
136
  },
137
- className: `text-left hover:opacity-80 transition-opacity ${n === "HORIZONTAL" && a === "LINE" ? "flex-1" : ""}`,
137
+ className: `text-left hover:opacity-80 transition-opacity ${c === "HORIZONTAL" && a === "LINE" ? "flex-1" : ""}`,
138
138
  "aria-label": `${l} - Step ${m}`,
139
- children: N
139
+ children: x
140
140
  },
141
141
  o
142
142
  ) : /* @__PURE__ */ t(
143
143
  "div",
144
144
  {
145
145
  "aria-label": `${l} - Step ${m}`,
146
- className: n === "HORIZONTAL" && a === "LINE" ? "flex-1" : "",
147
- children: N
146
+ className: c === "HORIZONTAL" && a === "LINE" ? "flex-1" : "",
147
+ children: x
148
148
  },
149
149
  o
150
150
  );
151
- }, T = [
151
+ }, I = [
152
152
  $[O],
153
153
  R[p]
154
154
  ].filter(Boolean).join(" ");
155
- return /* @__PURE__ */ s("div", { className: T, children: [
155
+ return /* @__PURE__ */ s("div", { className: I, children: [
156
156
  /* @__PURE__ */ t(
157
157
  k,
158
158
  {
159
- label: x,
160
- labelPosition: y,
161
- helpTooltip: C,
162
- htmlFor: u,
163
- accessibilityText: E
159
+ label: i,
160
+ labelPosition: C,
161
+ helpTooltip: h,
162
+ htmlFor: f,
163
+ accessibilityText: N
164
164
  }
165
165
  ),
166
166
  /* @__PURE__ */ s(
167
167
  "div",
168
168
  {
169
- id: u,
170
- className: n === "HORIZONTAL" ? "relative" : "flex flex-col",
169
+ id: f,
170
+ className: c === "HORIZONTAL" ? "relative" : "flex flex-col",
171
171
  role: "progressbar",
172
+ "aria-label": N || i || "Progress",
172
173
  "aria-valuemin": 0,
173
- "aria-valuemax": c.length - 1,
174
+ "aria-valuemax": n.length - 1,
174
175
  "aria-valuenow": d ?? 0,
175
- "aria-valuetext": d !== null && d >= 0 && d < c.length ? c[d] : void 0,
176
+ "aria-valuetext": d !== null && d >= 0 && d < n.length ? n[d] : void 0,
176
177
  children: [
177
- n === "HORIZONTAL" && a === "LINE" && c.length > 1 && /* @__PURE__ */ t(
178
+ c === "HORIZONTAL" && a === "LINE" && n.length > 1 && /* @__PURE__ */ t(
178
179
  "div",
179
180
  {
180
181
  className: "absolute top-3 h-0.5 bg-gray-200 z-0",
181
182
  style: {
182
- left: `calc(100% / ${c.length} / 2)`,
183
- right: `calc(100% / ${c.length} / 2)`
183
+ left: `calc(100% / ${n.length} / 2)`,
184
+ right: `calc(100% / ${n.length} / 2)`
184
185
  },
185
186
  children: /* @__PURE__ */ t(
186
187
  "div",
187
188
  {
188
189
  className: `h-full transition-all duration-300 ${r.bg || "bg-gray-400"}`,
189
190
  style: {
190
- width: d === null ? "0%" : d === -1 ? "100%" : `${d / (c.length - 1) * 100}%`,
191
+ width: d === null ? "0%" : d === -1 ? "100%" : `${d / (n.length - 1) * 100}%`,
191
192
  ...r.style ? { backgroundColor: r.style.backgroundColor } : {}
192
193
  }
193
194
  }
194
195
  )
195
196
  }
196
197
  ),
197
- /* @__PURE__ */ t("div", { className: n === "HORIZONTAL" ? a === "CHEVRON" ? "flex items-center" : "flex items-start" : a === "CHEVRON" ? "flex flex-col space-y-4" : "flex flex-col space-y-8", children: c.map((l, o) => L(l, o)) })
198
+ /* @__PURE__ */ t("div", { className: c === "HORIZONTAL" ? a === "CHEVRON" ? "flex items-center" : "flex items-start" : a === "CHEVRON" ? "flex flex-col space-y-4" : "flex flex-col space-y-8", children: n.map((l, o) => L(l, o)) })
198
199
  ]
199
200
  }
200
201
  ),
201
- g && /* @__PURE__ */ t("p", { className: "text-gray-700 text-sm mt-1", children: g })
202
+ u && /* @__PURE__ */ t("p", { className: "text-gray-700 text-sm mt-1", children: u })
202
203
  ] });
203
204
  };
204
205
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGzE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AACnF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wDAAwD;IACxD,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgKlD,CAAA"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGzE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AACnF,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wDAAwD;IACxD,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,gCAAgC;IAChC,WAAW,CAAC,EAAE,cAAc,CAAA;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiKlD,CAAA"}
@@ -3,21 +3,21 @@ import * as R from "react";
3
3
  import * as b from "@radix-ui/react-progress";
4
4
  import { FieldLabel as O } from "../shared/FieldLabel.js";
5
5
  const V = ({
6
- label: f,
7
- instructions: n,
8
- percentage: d,
9
- labelPosition: p = "ABOVE",
10
- helpTooltip: g,
11
- accessibilityText: o,
12
- color: r = "ACCENT",
6
+ label: c,
7
+ instructions: o,
8
+ percentage: N,
9
+ labelPosition: g = "ABOVE",
10
+ helpTooltip: p,
11
+ accessibilityText: r,
12
+ color: l = "ACCENT",
13
13
  showWhen: x = !0,
14
14
  style: t = "THIN",
15
- showPercentage: i = !0,
15
+ showPercentage: n = !0,
16
16
  marginAbove: S = "NONE",
17
17
  marginBelow: u = "STANDARD"
18
18
  }) => {
19
19
  if (!x) return null;
20
- const a = Math.max(0, Math.min(100, d)), m = Math.round(d), N = R.useId(), I = {
20
+ const a = Math.max(0, Math.min(100, N)), m = Math.round(N), h = R.useId(), I = {
21
21
  NONE: "mt-0",
22
22
  EVEN_LESS: "mt-1",
23
23
  LESS: "mt-2",
@@ -31,85 +31,86 @@ const V = ({
31
31
  STANDARD: "mb-4",
32
32
  MORE: "mb-6",
33
33
  EVEN_MORE: "mb-8"
34
- }, l = {
34
+ }, i = {
35
35
  THIN: { height: "h-2", textSize: "text-sm" },
36
36
  THICK: { height: "h-6", textSize: "text-base" }
37
- }, h = {
37
+ }, E = {
38
38
  ACCENT: "bg-blue-500",
39
39
  POSITIVE: "bg-green-700",
40
40
  NEGATIVE: "bg-red-700",
41
41
  WARN: "bg-yellow-500"
42
- }, c = r in h, v = c ? h[r] : "", A = [
42
+ }, d = l in E, v = d ? E[l] : "", A = [
43
43
  I[S],
44
44
  C[u]
45
- ].filter(Boolean).join(" "), T = [
45
+ ].filter(Boolean).join(" "), M = [
46
46
  "relative",
47
47
  "overflow-hidden",
48
48
  "bg-gray-300",
49
49
  "rounded-sm",
50
- l[t].height
51
- ].join(" "), M = [
50
+ i[t].height
51
+ ].join(" "), T = [
52
52
  "h-full",
53
53
  "transition-transform",
54
54
  "duration-300",
55
55
  "ease-in-out",
56
- c ? v : "bg-gray-500"
57
- ].join(" "), E = {};
58
- return !c && r && (E.backgroundColor = r), /* @__PURE__ */ s("div", { className: A, children: [
56
+ d ? v : "bg-gray-500"
57
+ ].join(" "), f = {};
58
+ return !d && l && (f.backgroundColor = l), /* @__PURE__ */ s("div", { className: A, children: [
59
59
  /* @__PURE__ */ e(
60
60
  O,
61
61
  {
62
- label: f,
63
- labelPosition: p,
64
- helpTooltip: g,
65
- htmlFor: N,
66
- accessibilityText: o
62
+ label: c,
63
+ labelPosition: g,
64
+ helpTooltip: p,
65
+ htmlFor: h,
66
+ accessibilityText: r
67
67
  }
68
68
  ),
69
69
  /* @__PURE__ */ s("div", { className: "relative", children: [
70
70
  /* @__PURE__ */ e(
71
71
  b.Root,
72
72
  {
73
- id: N,
74
- className: T,
73
+ id: h,
74
+ className: M,
75
75
  value: a,
76
76
  max: 100,
77
+ "aria-label": r || c || "Progress",
77
78
  children: /* @__PURE__ */ e(
78
79
  b.Indicator,
79
80
  {
80
- className: M,
81
+ className: T,
81
82
  style: {
82
83
  width: `${a}%`,
83
- ...E
84
+ ...f
84
85
  }
85
86
  }
86
87
  )
87
88
  }
88
89
  ),
89
- i && t === "THICK" && a > 15 && /* @__PURE__ */ e(
90
+ n && t === "THICK" && a > 15 && /* @__PURE__ */ e(
90
91
  "div",
91
92
  {
92
93
  className: "absolute inset-y-0 flex items-center pr-2",
93
94
  style: { left: "0", width: `${a}%` },
94
- children: /* @__PURE__ */ e("div", { className: "w-full flex justify-end", children: /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-white`, children: [
95
+ children: /* @__PURE__ */ e("div", { className: "w-full flex justify-end", children: /* @__PURE__ */ s("span", { className: `${i[t].textSize} font-semibold text-white`, children: [
95
96
  m,
96
97
  "%"
97
98
  ] }) })
98
99
  }
99
100
  ),
100
- i && t === "THICK" && a <= 15 && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-start pl-3", children: /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-black`, children: [
101
+ n && t === "THICK" && a <= 15 && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-start pl-3", children: /* @__PURE__ */ s("span", { className: `${i[t].textSize} font-semibold text-black`, children: [
101
102
  m,
102
103
  "%"
103
104
  ] }) })
104
105
  ] }),
105
- (n || i && t === "THIN") && /* @__PURE__ */ s("div", { className: "flex justify-between items-start mt-1", children: [
106
- /* @__PURE__ */ e("div", { className: "flex-1", children: n && /* @__PURE__ */ e("p", { className: "text-gray-700 text-sm", children: n }) }),
107
- i && t === "THIN" && /* @__PURE__ */ s("span", { className: `${l[t].textSize} font-semibold text-black ml-4`, children: [
106
+ (o || n && t === "THIN") && /* @__PURE__ */ s("div", { className: "flex justify-between items-start mt-1", children: [
107
+ /* @__PURE__ */ e("div", { className: "flex-1", children: o && /* @__PURE__ */ e("p", { className: "text-gray-700 text-sm", children: o }) }),
108
+ n && t === "THIN" && /* @__PURE__ */ s("span", { className: `${i[t].textSize} font-semibold text-black ml-4`, children: [
108
109
  m,
109
110
  "%"
110
111
  ] })
111
112
  ] }),
112
- o && /* @__PURE__ */ e("span", { className: "sr-only", children: o })
113
+ r && /* @__PURE__ */ e("span", { className: "sr-only", children: r })
113
114
  ] });
114
115
  };
115
116
  export {
@@ -20,6 +20,19 @@ declare const meta: {
20
20
  marginAbove?: import('../..').SAILMarginSize | undefined;
21
21
  marginBelow?: import('../..').SAILMarginSize | undefined;
22
22
  }>) => import("react/jsx-runtime").JSX.Element)[];
23
+ argTypes: {
24
+ style: {
25
+ control: "select";
26
+ options: string[];
27
+ };
28
+ color: {
29
+ control: "text";
30
+ };
31
+ labelPosition: {
32
+ control: "select";
33
+ options: string[];
34
+ };
35
+ };
23
36
  };
24
37
  export default meta;
25
38
  type Story = StoryObj<typeof meta>;
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAY0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAA"}
1
+ {"version":3,"file":"ProgressBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAA"}
@@ -6,6 +6,28 @@ declare const meta: {
6
6
  parameters: {
7
7
  layout: string;
8
8
  };
9
+ argTypes: {
10
+ labelPosition: {
11
+ control: "select";
12
+ options: string[];
13
+ };
14
+ choiceLayout: {
15
+ control: "select";
16
+ options: string[];
17
+ };
18
+ choiceStyle: {
19
+ control: "select";
20
+ options: string[];
21
+ };
22
+ choicePosition: {
23
+ control: "select";
24
+ options: string[];
25
+ };
26
+ spacing: {
27
+ control: "select";
28
+ options: string[];
29
+ };
30
+ };
9
31
  };
10
32
  export default meta;
11
33
  type Story = StoryObj<typeof meta>;
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,QAAA,MAAM,IAAI;;;;;;;CAK+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KAmBzC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAsC/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAA"}
1
+ {"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAK3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAkChC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,2BAA2B,EAAE,KA8BzC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAiB/B,CAAA"}