@vkzstudio/muza-ui 1.0.44 → 1.0.45

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 (84) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +14 -5
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +39 -39
  4. package/dist/components/DataTable/DataTable.stories.d.ts.map +1 -1
  5. package/dist/components/DropdownMenu/DropdownMenu.d.ts +38 -7
  6. package/dist/components/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  7. package/dist/components/DropdownMenu/DropdownMenu.js +165 -163
  8. package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts +3 -17
  9. package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts.map +1 -1
  10. package/dist/components/ExpandableTable/ExpandableTable.d.ts +30 -11
  11. package/dist/components/ExpandableTable/ExpandableTable.d.ts.map +1 -1
  12. package/dist/components/ExpandableTable/ExpandableTable.js +100 -111
  13. package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts +3 -1
  14. package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts.map +1 -1
  15. package/dist/components/FileUpload/FileItem.d.ts +6 -0
  16. package/dist/components/FileUpload/FileItem.d.ts.map +1 -1
  17. package/dist/components/FileUpload/FileItem.js +38 -41
  18. package/dist/components/FileUpload/FileUpload.d.ts +32 -0
  19. package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
  20. package/dist/components/FileUpload/FileUpload.js +87 -83
  21. package/dist/components/FileUpload/FileUpload.stories.d.ts +1 -0
  22. package/dist/components/FileUpload/FileUpload.stories.d.ts.map +1 -1
  23. package/dist/components/Flex/Flex.d.ts +1 -1
  24. package/dist/components/Icons/CustomBadges.d.ts +14 -0
  25. package/dist/components/Icons/CustomBadges.d.ts.map +1 -0
  26. package/dist/components/Icons/CustomBadges.js +334 -0
  27. package/dist/components/Icons/CustomIcons.d.ts +24 -0
  28. package/dist/components/Icons/CustomIcons.d.ts.map +1 -1
  29. package/dist/components/Icons/CustomIcons.js +88 -42
  30. package/dist/components/Icons/CustomLogos.d.ts +29 -0
  31. package/dist/components/Icons/CustomLogos.d.ts.map +1 -0
  32. package/dist/components/Icons/CustomLogos.js +593 -0
  33. package/dist/components/Icons/LogosAndBadges.stories.d.ts +7 -0
  34. package/dist/components/Icons/LogosAndBadges.stories.d.ts.map +1 -0
  35. package/dist/components/Icons/index.d.ts +2 -0
  36. package/dist/components/Icons/index.d.ts.map +1 -1
  37. package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts +24 -1
  38. package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts.map +1 -1
  39. package/dist/components/LanguageSwitcher/LanguageSwitcher.js +71 -52
  40. package/dist/components/LanguageSwitcher/LanguageSwitcher.stories.d.ts +2 -0
  41. package/dist/components/LanguageSwitcher/LanguageSwitcher.stories.d.ts.map +1 -1
  42. package/dist/components/MultiSelect/MultiSelect.d.ts.map +1 -1
  43. package/dist/components/MultiSelect/MultiSelect.js +18 -17
  44. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts +266 -0
  45. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts.map +1 -0
  46. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts +39 -0
  47. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts.map +1 -0
  48. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js +134 -0
  49. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.d.ts +14 -0
  50. package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.d.ts.map +1 -0
  51. package/dist/components/ResponsiveLayoutTable/index.d.ts +2 -0
  52. package/dist/components/ResponsiveLayoutTable/index.d.ts.map +1 -0
  53. package/dist/components/Select/Select.d.ts +20 -7
  54. package/dist/components/Select/Select.d.ts.map +1 -1
  55. package/dist/components/Select/Select.js +123 -92
  56. package/dist/components/Select/Select.stories.d.ts +1 -0
  57. package/dist/components/Select/Select.stories.d.ts.map +1 -1
  58. package/dist/components/Select/utils.d.ts +1 -0
  59. package/dist/components/Select/utils.d.ts.map +1 -1
  60. package/dist/components/Select/utils.js +5 -2
  61. package/dist/components/Toggle/Toggle.js +1 -1
  62. package/dist/components/ToggleCheckButton/ToggleCheckButton.d.ts +69 -0
  63. package/dist/components/ToggleCheckButton/ToggleCheckButton.d.ts.map +1 -0
  64. package/dist/components/ToggleCheckButton/ToggleCheckButton.js +64 -0
  65. package/dist/components/ToggleCheckButton/ToggleCheckButton.stories.d.ts +8 -0
  66. package/dist/components/ToggleCheckButton/ToggleCheckButton.stories.d.ts.map +1 -0
  67. package/dist/components/ToggleCheckButton/index.d.ts +2 -0
  68. package/dist/components/ToggleCheckButton/index.d.ts.map +1 -0
  69. package/dist/components/WebCheckoutNav/WebCheckoutNav.examples.d.ts +19 -0
  70. package/dist/components/WebCheckoutNav/WebCheckoutNav.examples.d.ts.map +1 -0
  71. package/dist/components/WebCheckoutNav/WebCheckoutNav.stories.d.ts +8 -0
  72. package/dist/components/WebCheckoutNav/WebCheckoutNav.stories.d.ts.map +1 -0
  73. package/dist/components/index.d.ts +2 -0
  74. package/dist/components/index.d.ts.map +1 -1
  75. package/dist/hooks/use-is-breakpoint.d.ts +11 -0
  76. package/dist/hooks/use-is-breakpoint.d.ts.map +1 -1
  77. package/dist/hooks/use-is-breakpoint.js +24 -13
  78. package/dist/index.js +236 -215
  79. package/dist/muza-ui.css +1 -1
  80. package/dist/styles/token-colors.css +64 -3
  81. package/dist/styles/token-sizes.css +86 -54
  82. package/dist/utils/cn.d.ts.map +1 -1
  83. package/dist/utils/cn.js +16 -5
  84. package/package.json +1 -1
@@ -1,60 +1,61 @@
1
- import { jsx as e, jsxs as p } from "react/jsx-runtime";
2
- import * as l from "react";
3
- import * as d from "@radix-ui/react-dropdown-menu";
4
- import { cva as k } from "class-variance-authority";
5
- import { Button as y } from "../Button/Button.js";
6
- import { cn as i } from "../../utils/cn.js";
7
- import { Typography as b } from "../Typography/Typography.js";
1
+ import { jsx as e, jsxs as b, Fragment as y } from "react/jsx-runtime";
2
+ import * as m from "react";
3
+ import * as a from "@radix-ui/react-dropdown-menu";
4
+ import { cva as N } from "class-variance-authority";
5
+ import { Button as I } from "../Button/Button.js";
6
+ import { Flex as D } from "../Flex/Flex.js";
7
+ import { cn as s } from "../../utils/cn.js";
8
8
  import { UnreadOutline as x } from "@solar-icons/react-perf";
9
- const h = l.createContext(null), N = () => l.useContext(h), T = ({ ...o }) => /* @__PURE__ */ e(d.Root, { "data-slot": "dropdown-menu", ...o }), P = ({ ...o }) => /* @__PURE__ */ e(d.Portal, { "data-slot": "dropdown-menu-portal", ...o }), G = ({ ...o }) => /* @__PURE__ */ e(
10
- d.Trigger,
9
+ import { Typography as f } from "../Typography/Typography.js";
10
+ const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /* @__PURE__ */ e(a.Root, { "data-slot": "dropdown-menu", ...o }), F = ({ ...o }) => /* @__PURE__ */ e(a.Portal, { "data-slot": "dropdown-menu-portal", ...o }), H = ({ ...o }) => /* @__PURE__ */ e(
11
+ a.Trigger,
11
12
  {
12
13
  "data-slot": "dropdown-menu-trigger",
13
14
  ...o
14
15
  }
15
- ), j = ({
16
+ ), O = ({
16
17
  className: o,
17
18
  sideOffset: t = 4,
18
- align: r = "start",
19
- ...n
19
+ align: n = "start",
20
+ ...r
20
21
  }) => {
21
- const [s, c] = l.useState(!1), a = l.useRef(null);
22
- return l.useEffect(() => {
23
- const m = () => {
24
- if (a.current) {
25
- const { scrollHeight: g, clientHeight: v } = a.current;
26
- c(g > v);
22
+ const [c, i] = m.useState(!1), d = m.useRef(null);
23
+ return m.useEffect(() => {
24
+ const l = () => {
25
+ if (d.current) {
26
+ const { scrollHeight: v, clientHeight: k } = d.current;
27
+ i(v > k);
27
28
  }
28
- }, u = setTimeout(m, 10), w = new ResizeObserver(m);
29
- return a.current && w.observe(a.current), () => {
30
- clearTimeout(u), w.disconnect();
29
+ }, u = setTimeout(l, 10), p = new ResizeObserver(l);
30
+ return d.current && p.observe(d.current), () => {
31
+ clearTimeout(u), p.disconnect();
31
32
  };
32
- }, [n.children]), /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(
33
- d.Content,
33
+ }, [r.children]), /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(
34
+ a.Content,
34
35
  {
35
36
  "data-slot": "dropdown-menu-content",
36
37
  sideOffset: t,
37
- align: r,
38
- className: i(
38
+ align: n,
39
+ className: s(
39
40
  "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
40
41
  "flex flex-col rounded-xl bg-comp-select-fill-def dropdown-shadow-default",
41
42
  o
42
43
  ),
43
- ...n,
44
+ ...r,
44
45
  children: /* @__PURE__ */ e(
45
46
  "div",
46
47
  {
47
- ref: a,
48
- className: i(
48
+ ref: d,
49
+ className: s(
49
50
  "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-stroke-base-secondary hover:scrollbar-thumb-stroke-base-primary scrollbar-thumb-rounded-full my-sm max-h-full overflow-y-auto px-sm py-0 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
50
- s && "w-[calc(100%_-_var(--spacing-sm))]"
51
+ c && "w-[calc(100%_-_var(--spacing-sm))]"
51
52
  ),
52
- children: n.children
53
+ children: r.children
53
54
  }
54
55
  )
55
56
  }
56
57
  ) });
57
- }, f = k(
58
+ }, w = N(
58
59
  [
59
60
  "text-comp-dropdown-menu-text-primary flex cursor-pointer items-center gap-sm rounded-md pt-md pr-lg pb-md pl-lg outline-0 transition-colors",
60
61
  "hover:bg-comp-dropdown-menu-fill-base-hover hover:text-comp-dropdown-menu-text-base-hover",
@@ -79,205 +80,206 @@ const h = l.createContext(null), N = () => l.useContext(h), T = ({ ...o }) => /*
79
80
  variant: "base"
80
81
  }
81
82
  }
82
- ), B = ({
83
+ ), h = ({
84
+ children: o,
85
+ description: t
86
+ }) => typeof o == "function" ? /* @__PURE__ */ e(y, { children: o }) : t ? /* @__PURE__ */ b(D, { flex: 1, direction: "column", className: "min-w-0", children: [
87
+ /* @__PURE__ */ e(
88
+ f,
89
+ {
90
+ component: "span",
91
+ size: "sm",
92
+ variant: "body",
93
+ weight: "medium",
94
+ fixY: !0,
95
+ children: o
96
+ }
97
+ ),
98
+ /* @__PURE__ */ e(f, { component: "span", size: "sm", variant: "body", weight: "regular", children: t })
99
+ ] }) : /* @__PURE__ */ e(
100
+ f,
101
+ {
102
+ component: "span",
103
+ size: "sm",
104
+ weight: "medium",
105
+ className: "flex-1",
106
+ fixY: !0,
107
+ children: o
108
+ }
109
+ ), Y = ({
83
110
  className: o,
84
111
  variant: t,
85
- children: r,
86
- icon: n,
87
- disabled: s,
88
- isActive: c,
89
- ...a
90
- }) => /* @__PURE__ */ p(
91
- d.Item,
112
+ children: n,
113
+ icon: r,
114
+ disabled: c,
115
+ isActive: i,
116
+ description: d,
117
+ ...l
118
+ }) => /* @__PURE__ */ b(
119
+ a.Item,
92
120
  {
93
121
  "data-slot": "dropdown-menu-item",
94
- disabled: s,
95
- className: i(
122
+ disabled: c,
123
+ className: s(
96
124
  "group",
97
- f({
125
+ w({
98
126
  variant: t,
99
- disabled: s,
100
- checked: c
127
+ disabled: c,
128
+ checked: i
101
129
  }),
102
130
  o
103
131
  ),
104
- ...a,
132
+ ...l,
105
133
  children: [
106
- n && /* @__PURE__ */ e(
134
+ r && /* @__PURE__ */ e(
107
135
  "span",
108
136
  {
109
- className: i("block [&>svg]:block [&>svg]:size-icon-small", {
137
+ className: s("block [&>svg]:block [&>svg]:size-icon-small", {
110
138
  "text-comp-dropdown-menu-text-error": t === "destructive",
111
139
  "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": t !== "destructive",
112
- "text-comp-dropdown-menu-icon-base-active": c
140
+ "text-comp-dropdown-menu-icon-base-active": i
113
141
  }),
114
- children: n
115
- }
116
- ),
117
- typeof r != "function" ? /* @__PURE__ */ e(
118
- b,
119
- {
120
- component: "span",
121
- size: "sm",
122
- weight: "medium",
123
- className: "flex-1",
124
- fixY: !0,
125
142
  children: r
126
143
  }
127
- ) : r
144
+ ),
145
+ /* @__PURE__ */ e(h, { description: d, children: n })
128
146
  ]
129
147
  }
130
- ), H = ({
148
+ ), _ = ({
131
149
  children: o,
132
150
  buttonProps: t,
133
- className: r,
134
- ...n
151
+ className: n,
152
+ ...r
135
153
  }) => /* @__PURE__ */ e("div", { className: "my-md px-lg", children: /* @__PURE__ */ e(
136
- d.Item,
154
+ a.Item,
137
155
  {
138
156
  "data-slot": "dropdown-menu-item",
139
157
  asChild: !0,
140
- ...n,
158
+ ...r,
141
159
  children: /* @__PURE__ */ e(
142
- y,
160
+ I,
143
161
  {
144
162
  fullWidth: !0,
145
163
  ...t,
146
- className: i(
164
+ className: s(
147
165
  "outline-0 hover:ring-transparent",
148
- r,
166
+ n,
149
167
  t.className
150
168
  ),
151
169
  children: o
152
170
  }
153
171
  )
154
172
  }
155
- ) }), O = ({
173
+ ) }), E = ({
156
174
  className: o,
157
175
  children: t,
158
- checked: r,
159
- variant: n,
160
- icon: s,
161
- ...c
162
- }) => /* @__PURE__ */ p(
163
- d.CheckboxItem,
176
+ checked: n,
177
+ variant: r,
178
+ icon: c,
179
+ description: i,
180
+ ...d
181
+ }) => /* @__PURE__ */ b(
182
+ a.CheckboxItem,
164
183
  {
165
184
  "data-slot": "dropdown-menu-checkbox-item",
166
- className: i(
167
- f({
168
- variant: n,
169
- checked: !!r
185
+ className: s(
186
+ w({
187
+ variant: r,
188
+ checked: !!n
170
189
  }),
171
190
  o
172
191
  ),
173
- checked: r,
174
- onSelect: (a) => {
175
- a.preventDefault();
192
+ checked: n,
193
+ onSelect: (l) => {
194
+ l.preventDefault();
176
195
  },
177
- ...c,
196
+ ...d,
178
197
  children: [
179
- s && /* @__PURE__ */ e(
198
+ c && /* @__PURE__ */ e(
180
199
  "span",
181
200
  {
182
- className: i({
183
- "text-comp-dropdown-menu-text-error": n === "destructive",
184
- "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive"
201
+ className: s({
202
+ "text-comp-dropdown-menu-text-error": r === "destructive",
203
+ "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive"
185
204
  }),
186
- children: s
205
+ children: c
187
206
  }
188
207
  ),
189
- typeof t != "function" ? /* @__PURE__ */ e(
190
- b,
191
- {
192
- component: "span",
193
- size: "sm",
194
- weight: "medium",
195
- className: "flex-1 fix-y-text",
196
- children: t
197
- }
198
- ) : t,
199
- /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
208
+ /* @__PURE__ */ e(h, { description: i, children: t }),
209
+ /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
200
210
  ]
201
211
  }
202
- ), Y = ({
212
+ ), L = ({
203
213
  value: o,
204
214
  onValueChange: t,
205
- ...r
206
- }) => /* @__PURE__ */ e(h.Provider, { value: { value: o, onValueChange: t }, children: /* @__PURE__ */ e(
207
- d.RadioGroup,
215
+ ...n
216
+ }) => /* @__PURE__ */ e(g.Provider, { value: { value: o, onValueChange: t }, children: /* @__PURE__ */ e(
217
+ a.RadioGroup,
208
218
  {
209
219
  "data-slot": "dropdown-menu-radio-group",
210
220
  value: o,
211
221
  onValueChange: t,
212
- ...r
222
+ ...n
213
223
  }
214
- ) }), I = l.forwardRef(({ className: o, children: t, variant: r, icon: n, value: s, ...c }, a) => {
215
- const m = N(), u = (m == null ? void 0 : m.value) === s;
216
- return /* @__PURE__ */ p(
217
- d.RadioItem,
218
- {
219
- ref: a,
220
- "data-slot": "dropdown-menu-radio-item",
221
- className: i(
222
- f({
223
- variant: r,
224
- checked: u
225
- }),
226
- o,
227
- c.disabled && "cursor-not-allowed text-comp-dropdown-menu-text-base-disabled hover:bg-transparent hover:text-comp-dropdown-menu-text-base-disabled"
228
- ),
229
- value: s,
230
- ...c,
231
- children: [
232
- n && /* @__PURE__ */ e(
233
- "span",
234
- {
235
- className: i({
236
- "text-comp-dropdown-menu-text-error": r === "destructive",
237
- "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": r !== "destructive",
238
- "text-comp-dropdown-menu-text-base-disabled": c.disabled
239
- }),
240
- children: n
241
- }
224
+ ) }), R = m.forwardRef(
225
+ ({ className: o, children: t, variant: n, icon: r, description: c, value: i, ...d }, l) => {
226
+ const u = M(), p = (u == null ? void 0 : u.value) === i;
227
+ return /* @__PURE__ */ b(
228
+ a.RadioItem,
229
+ {
230
+ ref: l,
231
+ "data-slot": "dropdown-menu-radio-item",
232
+ className: s(
233
+ w({
234
+ variant: n,
235
+ checked: p
236
+ }),
237
+ o,
238
+ d.disabled && "cursor-not-allowed text-comp-dropdown-menu-text-base-disabled hover:bg-transparent hover:text-comp-dropdown-menu-text-base-disabled"
242
239
  ),
243
- typeof t != "function" ? /* @__PURE__ */ e(
244
- b,
245
- {
246
- component: "span",
247
- size: "sm",
248
- weight: "medium",
249
- className: "flex-1",
250
- fixY: !0,
251
- children: t
252
- }
253
- ) : t,
254
- /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(d.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
255
- ]
256
- }
257
- );
258
- });
259
- I.displayName = "DropdownMenuRadioItem";
260
- const _ = ({
240
+ value: i,
241
+ ...d,
242
+ children: [
243
+ r && /* @__PURE__ */ e(
244
+ "span",
245
+ {
246
+ className: s({
247
+ "text-comp-dropdown-menu-text-error": n === "destructive",
248
+ "group-focus-visible:-icon-brand-focused text-icon-dark-secondary-def group-hover:text-icon-brand-def": n !== "destructive",
249
+ "text-comp-dropdown-menu-text-base-disabled": d.disabled
250
+ }),
251
+ children: r
252
+ }
253
+ ),
254
+ /* @__PURE__ */ e(h, { description: c, children: t }),
255
+ /* @__PURE__ */ e("span", { className: "text-comp-dropdown-menu-icon-brand-def", children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(x, { className: "size-icon-small" }) }) })
256
+ ]
257
+ }
258
+ );
259
+ }
260
+ );
261
+ R.displayName = "DropdownMenuRadioItem";
262
+ const U = ({
261
263
  className: o,
262
264
  ...t
263
265
  }) => /* @__PURE__ */ e(
264
- d.Separator,
266
+ a.Separator,
265
267
  {
266
268
  "data-slot": "dropdown-menu-separator",
267
- className: i("my-sm h-0 border-b border-stroke-base-primary", o),
269
+ className: s("my-sm h-0 border-b border-stroke-base-primary", o),
268
270
  ...t
269
271
  }
270
272
  );
271
273
  export {
272
- T as DropdownMenu,
273
- H as DropdownMenuButtonItem,
274
- O as DropdownMenuCheckboxItem,
275
- j as DropdownMenuContent,
276
- B as DropdownMenuItem,
277
- P as DropdownMenuPortal,
278
- Y as DropdownMenuRadioGroup,
279
- I as DropdownMenuRadioItem,
280
- _ as DropdownMenuSeparator,
281
- G as DropdownMenuTrigger,
282
- f as dropdownMenuItemVariants
274
+ B as DropdownMenu,
275
+ _ as DropdownMenuButtonItem,
276
+ E as DropdownMenuCheckboxItem,
277
+ O as DropdownMenuContent,
278
+ Y as DropdownMenuItem,
279
+ F as DropdownMenuPortal,
280
+ L as DropdownMenuRadioGroup,
281
+ R as DropdownMenuRadioItem,
282
+ U as DropdownMenuSeparator,
283
+ H as DropdownMenuTrigger,
284
+ w as dropdownMenuItemVariants
283
285
  };
@@ -5,8 +5,8 @@ declare const meta: {
5
5
  subcomponents: {
6
6
  DropdownMenuTrigger: ({ ...props }: import('./DropdownMenu').DropdownMenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
7
7
  DropdownMenuContent: ({ className, sideOffset, align, ...props }: import('./DropdownMenu').DropdownMenuContentProps) => import("react/jsx-runtime").JSX.Element;
8
- DropdownMenuItem: ({ className, variant, children, icon, disabled, isActive, ...props }: import('./DropdownMenu').DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
9
- DropdownMenuCheckboxItem: ({ className, children, checked, variant, icon, ...props }: import('./DropdownMenu').DropdownMenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
8
+ DropdownMenuItem: ({ className, variant, children, icon, disabled, isActive, description, ...props }: import('./DropdownMenu').DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
9
+ DropdownMenuCheckboxItem: ({ className, children, checked, variant, icon, description, ...props }: import('./DropdownMenu').DropdownMenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
10
10
  DropdownMenuRadioGroup: ({ value, onValueChange, ...props }: import('./DropdownMenu').DropdownMenuRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
11
11
  DropdownMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<import('./DropdownMenu').DropdownMenuRadioItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
12
12
  DropdownMenuSeparator: ({ className, ...props }: import('./DropdownMenu').DropdownMenuSeparatorProps) => import("react/jsx-runtime").JSX.Element;
@@ -29,34 +29,19 @@ declare const meta: {
29
29
  argTypes: {
30
30
  open: {
31
31
  control: "boolean";
32
- table: {
33
- category: string;
34
- };
35
32
  };
36
33
  defaultOpen: {
37
34
  control: "boolean";
38
- table: {
39
- category: string;
40
- };
41
35
  };
42
36
  onOpenChange: {
43
37
  control: false;
44
- table: {
45
- category: string;
46
- };
47
38
  };
48
39
  modal: {
49
40
  control: "boolean";
50
- table: {
51
- category: string;
52
- };
53
41
  };
54
42
  dir: {
55
43
  control: "select";
56
44
  options: string[];
57
- table: {
58
- category: string;
59
- };
60
45
  };
61
46
  };
62
47
  };
@@ -71,5 +56,6 @@ export declare const WithButton: Story;
71
56
  export declare const ItemVariants: Story;
72
57
  export declare const WithCheckboxItems: Story;
73
58
  export declare const WithCheckboxItemsWithCustomContent: Story;
59
+ export declare const WithDescriptions: Story;
74
60
  export declare const WithRadioGroup: Story;
75
61
  //# sourceMappingURL=DropdownMenu.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AA4B3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,KA+EhD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA"}
1
+ {"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AA4B3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2C/B,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,KA+EhD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA2D9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAA"}
@@ -1,9 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
- /**
3
- * Named breakpoint at and above which a column becomes visible.
4
- * Mirrors the breakpoints exported from `@/hooks/use-is-breakpoint`.
5
- */
6
- export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
2
+ import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
3
+ export type { ResponsiveBreakpoint };
7
4
  /**
8
5
  * Column definition for the ExpandableTable.
9
6
  *
@@ -20,7 +17,9 @@ export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3
20
17
  * },
21
18
  * ]
22
19
  */
23
- export interface IColumn<T> {
20
+ export interface IColumn<T extends {
21
+ id: string | number;
22
+ }> {
24
23
  /** Key of the data object to display in this column. */
25
24
  dataKey: keyof T;
26
25
  /** Header content rendered in the table head. */
@@ -66,7 +65,9 @@ export interface IColumn<T> {
66
65
  * render: (value) => <a href="#profile">{value}</a>,
67
66
  * }
68
67
  */
69
- export interface IExpandableTableRowCell<T> {
68
+ export interface IExpandableTableRowCell<T extends {
69
+ id: string | number;
70
+ }> {
70
71
  /** Key of the data object to display in this cell. */
71
72
  dataKey: keyof T;
72
73
  /** Additional CSS class applied to the cell. */
@@ -97,7 +98,9 @@ export interface IExpandableTableRowCell<T> {
97
98
  * ],
98
99
  * }
99
100
  */
100
- export interface IExpandableTableRowSection<T> {
101
+ export interface IExpandableTableRowSection<T extends {
102
+ id: string | number;
103
+ }> {
101
104
  /** Optional heading rendered above the section cells. */
102
105
  title?: ReactNode;
103
106
  /**
@@ -110,9 +113,23 @@ export interface IExpandableTableRowSection<T> {
110
113
  /**
111
114
  * Props for the ExpandableTable component.
112
115
  *
113
- * @typeParam T - The type of data objects in each row
116
+ * @typeParam T - The type of data objects in each row. Must include an
117
+ * `id: string | number` field — used both as the React key and as the
118
+ * internal expansion-state key. Keying by index corrupts focus, animation,
119
+ * and expansion state whenever rows reorder, filter, or paginate.
120
+ *
121
+ * @example
122
+ * <ExpandableTable<Order>
123
+ * data={orders}
124
+ * columns={columns}
125
+ * expandableRowSections={[
126
+ * { title: 'Details', cells: [{ dataKey: 'invoiceNumber', title: 'Invoice' }] },
127
+ * ]}
128
+ * />
114
129
  */
115
- export interface ExpandableTableProps<T> {
130
+ export interface ExpandableTableProps<T extends {
131
+ id: string | number;
132
+ }> {
116
133
  /** Array of data objects where each item represents one table row. */
117
134
  data: T[];
118
135
  /**
@@ -170,5 +187,7 @@ export interface ExpandableTableProps<T> {
170
187
  cellsWrap: string;
171
188
  }>;
172
189
  }
173
- export declare const ExpandableTable: <T>({ data, columns, expandableRowSections, classNames, }: ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
190
+ export declare const ExpandableTable: <T extends {
191
+ id: string | number;
192
+ }>({ data, columns, expandableRowSections, classNames, }: ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
174
193
  //# sourceMappingURL=ExpandableTable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAuBd;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAA;AAET;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;;;;OAUG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;;;;;OAiBG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AA4CD,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,uDAKjC,oBAAoB,CAAC,CAAC,CAAC,4CAiZzB,CAAA"}
1
+ {"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAA;AAclC,YAAY,EAAE,oBAAoB,EAAE,CAAA;AAEpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxD,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxE,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAC3E,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACrE,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;;;;OAUG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;;;;;OAiBG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AA4CD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,uDAKhE,oBAAoB,CAAC,CAAC,CAAC,4CAgYzB,CAAA"}