@moises.ai/design-system 4.17.8 → 4.17.9

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 (4) hide show
  1. package/dist/index.js +64 -50
  2. package/package.json +1 -1
  3. package/src/components/NumberPicker/NumberPicker.jsx +13 -1
  4. package/src/components/ProjectsList/ProjectsList.stories.jsx +24 -8
package/dist/index.js CHANGED
@@ -8607,56 +8607,70 @@ const nI = ({
8607
8607
  max: s = 10,
8608
8608
  onChange: o
8609
8609
  }) => {
8610
- const i = D((c) => {
8611
- c.stopPropagation(), !(s != null && t >= s) && o(t + 1);
8612
- }, [s, o, t]), l = D((c) => {
8613
- c.stopPropagation(), !(r != null && t <= r) && o(t - 1);
8614
- }, [r, o, t]);
8615
- return /* @__PURE__ */ v(S, { direction: "row", gap: "1", align: "center", justify: "center", children: [
8616
- n && /* @__PURE__ */ a(q, { size: "2", weight: "medium", children: n }),
8617
- /* @__PURE__ */ v(S, { direction: "row", gap: "1", align: "center", justify: "center", children: [
8618
- /* @__PURE__ */ a(
8619
- Ee,
8620
- {
8621
- type: "button",
8622
- "aria-label": "increment",
8623
- onClick: l,
8624
- disabled: r != null && t <= r,
8625
- style: {
8626
- backgroundColor: "var(--neutral-alpha-3 )"
8627
- },
8628
- children: /* @__PURE__ */ a(Wo, { width: 16, height: 16 })
8629
- }
8630
- ),
8631
- /* @__PURE__ */ a(
8632
- S,
8633
- {
8634
- align: "center",
8635
- justify: "center",
8636
- style: {
8637
- height: "24px",
8638
- minWidth: "42px",
8639
- borderRadius: "var(--radius-2)",
8640
- backgroundColor: "var(--neutral-alpha-3 )"
8641
- },
8642
- children: /* @__PURE__ */ a(q, { size: "2", children: t > 0 ? `+${t}` : t })
8643
- }
8644
- ),
8645
- /* @__PURE__ */ a(
8646
- Ee,
8647
- {
8648
- type: "button",
8649
- "aria-label": "decrement",
8650
- onClick: i,
8651
- disabled: s != null && t >= s,
8652
- style: {
8653
- backgroundColor: "var(--neutral-alpha-3 )"
8654
- },
8655
- children: /* @__PURE__ */ a(Tr, { width: 16, height: 16 })
8656
- }
8657
- )
8658
- ] })
8659
- ] });
8610
+ const i = D((d) => {
8611
+ d.stopPropagation(), !(s != null && t >= s) && o(t + 1);
8612
+ }, [s, o, t]), l = D((d) => {
8613
+ d.stopPropagation(), !(r != null && t <= r) && o(t - 1);
8614
+ }, [r, o, t]), c = D((d) => {
8615
+ d.stopPropagation();
8616
+ }, []);
8617
+ return /* @__PURE__ */ v(
8618
+ S,
8619
+ {
8620
+ direction: "row",
8621
+ gap: "1",
8622
+ align: "center",
8623
+ justify: "center",
8624
+ onClick: c,
8625
+ children: [
8626
+ n && /* @__PURE__ */ a(q, { size: "2", weight: "medium", children: n }),
8627
+ /* @__PURE__ */ v(S, { direction: "row", gap: "1", align: "center", justify: "center", children: [
8628
+ /* @__PURE__ */ a(
8629
+ Ee,
8630
+ {
8631
+ type: "button",
8632
+ "aria-label": "increment",
8633
+ onClick: l,
8634
+ disabled: r != null && t <= r,
8635
+ style: {
8636
+ backgroundColor: "var(--neutral-alpha-3 )"
8637
+ },
8638
+ children: /* @__PURE__ */ a(Wo, { width: 16, height: 16 })
8639
+ }
8640
+ ),
8641
+ /* @__PURE__ */ a(
8642
+ S,
8643
+ {
8644
+ align: "center",
8645
+ justify: "center",
8646
+ onClick: c,
8647
+ style: {
8648
+ height: "24px",
8649
+ minWidth: "42px",
8650
+ borderRadius: "var(--radius-2)",
8651
+ backgroundColor: "var(--neutral-alpha-3 )",
8652
+ cursor: "default"
8653
+ },
8654
+ children: /* @__PURE__ */ a(q, { size: "2", children: t > 0 ? `+${t}` : t })
8655
+ }
8656
+ ),
8657
+ /* @__PURE__ */ a(
8658
+ Ee,
8659
+ {
8660
+ type: "button",
8661
+ "aria-label": "decrement",
8662
+ onClick: i,
8663
+ disabled: s != null && t >= s,
8664
+ style: {
8665
+ backgroundColor: "var(--neutral-alpha-3 )"
8666
+ },
8667
+ children: /* @__PURE__ */ a(Tr, { width: 16, height: 16 })
8668
+ }
8669
+ )
8670
+ ] })
8671
+ ]
8672
+ }
8673
+ );
8660
8674
  }, vI = "_itemTrack_7ug0q_1", yI = "_iconArrowLeft_7ug0q_6", kI = "_coverImage_7ug0q_18", bI = "_trackTitle_7ug0q_24", II = "_cover_7ug0q_18", Tn = {
8661
8675
  itemTrack: vI,
8662
8676
  iconArrowLeft: yI,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moises.ai/design-system",
3
- "version": "4.17.8",
3
+ "version": "4.17.9",
4
4
  "description": "Design System package based on @radix-ui/themes with custom defaults",
5
5
  "private": false,
6
6
  "type": "module",
package/src/components/NumberPicker/NumberPicker.jsx CHANGED
@@ -23,8 +23,18 @@ export const NumberPicker = ({
23
23
  onChange(value - 1)
24
24
  }, [min, onChange, value])
25
25
 
26
+ const stopClickPropagation = useCallback((e) => {
27
+ e.stopPropagation()
28
+ }, [])
29
+
26
30
  return (
27
- <Flex direction="row" gap="1" align="center" justify="center">
31
+ <Flex
32
+ direction="row"
33
+ gap="1"
34
+ align="center"
35
+ justify="center"
36
+ onClick={stopClickPropagation}
37
+ >
28
38
  {label && (
29
39
  <Text size="2" weight="medium">
30
40
  {label}
@@ -46,11 +56,13 @@ export const NumberPicker = ({
46
56
  <Flex
47
57
  align="center"
48
58
  justify="center"
59
+ onClick={stopClickPropagation}
49
60
  style={{
50
61
  height: '24px',
51
62
  minWidth: '42px',
52
63
  borderRadius: 'var(--radius-2)',
53
64
  backgroundColor: 'var(--neutral-alpha-3 )',
65
+ cursor: 'default',
54
66
  }}
55
67
  >
56
68
  <Text size="2">{value > 0 ? `+${value}` : value}</Text>
package/src/components/ProjectsList/ProjectsList.stories.jsx CHANGED
@@ -36,9 +36,13 @@ export const Default = {
36
36
  onInsertAllTracks={args.onInsertAllTracks}
37
37
  onProjectClick={args.onProjectClick}
38
38
  >
39
- {(tracks) =>
39
+ {({ projectId, tracks }) =>
40
40
  tracks.map((track) => (
41
- <ProjectsList.Track key={track.id} {...track} />
41
+ <ProjectsList.Track
42
+ projectId={projectId}
43
+ key={track.id}
44
+ {...track}
45
+ />
42
46
  ))
43
47
  }
44
48
  </ProjectsList>
@@ -84,9 +88,13 @@ export const WithEmptyProjects = {
84
88
  onInsertAllTracks={args.onInsertAllTracks}
85
89
  onProjectClick={args.onProjectClick}
86
90
  >
87
- {(tracks) =>
91
+ {({ projectId, tracks }) =>
88
92
  tracks.map((track) => (
89
- <ProjectsList.Track key={track.id} {...track} />
93
+ <ProjectsList.Track
94
+ projectId={projectId}
95
+ key={track.id}
96
+ {...track}
97
+ />
90
98
  ))
91
99
  }
92
100
  </ProjectsList>
@@ -133,9 +141,13 @@ export const WithProjectLoading = {
133
141
  onInsertAllTracks={args.onInsertAllTracks}
134
142
  onProjectClick={args.onProjectClick}
135
143
  >
136
- {(tracks) =>
144
+ {({ projectId, tracks }) =>
137
145
  tracks.map((track) => (
138
- <ProjectsList.Track key={track.id} {...track} />
146
+ <ProjectsList.Track
147
+ projectId={projectId}
148
+ key={track.id}
149
+ {...track}
150
+ />
139
151
  ))
140
152
  }
141
153
  </ProjectsList>
@@ -182,9 +194,13 @@ export const WithProjectFailed = {
182
194
  onInsertAllTracks={args.onInsertAllTracks}
183
195
  onProjectClick={args.onProjectClick}
184
196
  >
185
- {(tracks) =>
197
+ {({ projectId, tracks }) =>
186
198
  tracks.map((track) => (
187
- <ProjectsList.Track key={track.id} {...track} />
199
+ <ProjectsList.Track
200
+ projectId={projectId}
201
+ key={track.id}
202
+ {...track}
203
+ />
188
204
  ))
189
205
  }
190
206
  </ProjectsList>