@ztwoint/z-ui 0.1.42 → 0.1.44

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 (11) hide show
  1. package/dist/components/assets/icons/z2-slash.d.ts +8 -0
  2. package/dist/components/dropdown-menu/z2-dropdown-menu.d.ts +11 -4
  3. package/dist/components/dropdown-menu/z2-dropdown-menu.js +145 -122
  4. package/dist/components/table/components/table-filter/table-filter.js +32 -31
  5. package/dist/css/config/colors/surfaces.css +4 -0
  6. package/dist/css/styles/tailwind.css +1 -1
  7. package/dist/index.d.ts +1 -0
  8. package/dist/types/components/assets/icons/z2-slash.d.ts +8 -0
  9. package/dist/types/components/dropdown-menu/z2-dropdown-menu.d.ts +11 -4
  10. package/dist/types/index.d.ts +1 -0
  11. package/package.json +1 -1
package/dist/components/assets/icons/z2-slash.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ strokewidth?: number;
5
+ title?: string;
6
+ };
7
+ declare function Z2Slash({ fill, strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default Z2Slash;
package/dist/components/dropdown-menu/z2-dropdown-menu.d.ts CHANGED
@@ -3,15 +3,22 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
3
3
  declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
4
  declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
5
5
  declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
6
- declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
6
+ declare function DropdownMenuContent({ className, sideOffset, size, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
7
+ size?: 'xsmall' | 'small' | 'default' | 'large';
8
+ }): import("react/jsx-runtime").JSX.Element;
7
9
  declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
8
- declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
10
+ declare function DropdownMenuItem({ className, inset, variant, description, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
9
11
  inset?: boolean;
10
12
  variant?: 'default' | 'destructive';
13
+ description?: string;
14
+ }): import("react/jsx-runtime").JSX.Element;
15
+ declare function DropdownMenuCheckboxItem({ className, children, checked, description, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
16
+ description?: string;
11
17
  }): import("react/jsx-runtime").JSX.Element;
12
- declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
13
18
  declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
14
- declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
19
+ declare function DropdownMenuRadioItem({ className, children, description, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
20
+ description?: string;
21
+ }): import("react/jsx-runtime").JSX.Element;
15
22
  declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
16
23
  inset?: boolean;
17
24
  }): import("react/jsx-runtime").JSX.Element;
package/dist/components/dropdown-menu/z2-dropdown-menu.js CHANGED
@@ -1,255 +1,278 @@
1
- import { jsx as t, jsxs as s } from "react/jsx-runtime";
2
- import * as o from "@radix-ui/react-dropdown-menu";
3
- import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as l } from "lucide-react";
4
- import { cn as n } from "../../lib/utils.js";
5
- function b({ ...e }) {
6
- return /* @__PURE__ */ t(o.Root, { "data-slot": "dropdown-menu", ...e });
1
+ import { jsx as t, jsxs as d } from "react/jsx-runtime";
2
+ import * as a from "@radix-ui/react-dropdown-menu";
3
+ import { CheckIcon as u, CircleIcon as c, ChevronRightIcon as m } from "lucide-react";
4
+ import { cn as s } from "../../lib/utils.js";
5
+ function x({ ...e }) {
6
+ return /* @__PURE__ */ t(a.Root, { "data-slot": "dropdown-menu", ...e });
7
7
  }
8
- function m({
8
+ function w({
9
9
  ...e
10
10
  }) {
11
- return /* @__PURE__ */ t(o.Portal, { "data-slot": "dropdown-menu-portal", ...e });
11
+ return /* @__PURE__ */ t(a.Portal, { "data-slot": "dropdown-menu-portal", ...e });
12
12
  }
13
- function f({
13
+ function v({
14
14
  ...e
15
15
  }) {
16
- return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dropdown-menu-trigger", ...e });
16
+ return /* @__PURE__ */ t(a.Trigger, { "data-slot": "dropdown-menu-trigger", ...e });
17
17
  }
18
- function x({
18
+ function b({
19
19
  className: e,
20
- sideOffset: a = 8,
20
+ sideOffset: n = 8,
21
+ size: o = "default",
21
22
  ...r
22
23
  }) {
23
- return /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
24
- o.Content,
24
+ const l = {
25
+ xsmall: "w-36",
26
+ small: "w-48",
27
+ default: "w-64",
28
+ large: "w-96"
29
+ };
30
+ return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
31
+ a.Content,
25
32
  {
26
33
  "data-slot": "dropdown-menu-content",
27
- sideOffset: a,
28
- className: n(
29
- "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
34
+ sideOffset: n,
35
+ className: s(
36
+ "surface-neutral-default text-neutral-primary border border-gray-200 dark:border-gray-800",
30
37
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
31
38
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
32
39
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
33
40
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
34
41
  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
35
- "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[12rem]",
36
- "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
37
- "rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
38
- "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
42
+ "z-50 origin-(--radix-dropdown-menu-content-transform-origin)",
43
+ "rounded-xl shadow-2xl shadow-black/10 dark:shadow-black/30",
44
+ "px-1 pb-1",
45
+ l[o],
39
46
  e
40
47
  ),
41
48
  ...r
42
49
  }
43
50
  ) });
44
51
  }
45
- function w({ ...e }) {
46
- return /* @__PURE__ */ t(o.Group, { "data-slot": "dropdown-menu-group", ...e });
52
+ function h({ ...e }) {
53
+ return /* @__PURE__ */ t(a.Group, { "data-slot": "dropdown-menu-group", ...e });
47
54
  }
48
- function k({
55
+ function y({
49
56
  className: e,
50
- inset: a,
51
- variant: r = "default",
52
- ...d
57
+ inset: n,
58
+ variant: o = "default",
59
+ description: r,
60
+ children: l,
61
+ ...i
53
62
  }) {
54
63
  return /* @__PURE__ */ t(
55
- o.Item,
64
+ a.Item,
56
65
  {
57
66
  "data-slot": "dropdown-menu-item",
58
- "data-inset": a,
59
- "data-variant": r,
60
- className: n(
61
- "relative flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
67
+ "data-inset": n,
68
+ "data-variant": o,
69
+ className: s(
70
+ "relative flex cursor-default items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium leading-none",
62
71
  "outline-none select-none transition-all duration-150",
63
- "hover:bg-gray-50 dark:hover:bg-gray-900/50",
64
- "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
72
+ "hover:surface-neutral-focused focus:surface-neutral-focused",
73
+ "text-neutral-primary",
65
74
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
66
- "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400",
67
- "data-[variant=destructive]:hover:bg-red-50 dark:data-[variant=destructive]:hover:bg-red-950/20",
68
- "data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950/30",
75
+ "data-[variant=destructive]:text-danger-secondary",
76
+ "data-[variant=destructive]:hover:surface-danger-light",
77
+ "data-[variant=destructive]:focus:surface-danger-light",
69
78
  "data-[inset]:pl-10",
70
79
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
71
- "[&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400",
80
+ "[&_svg:not([class*='text-'])]:text-neutral-secondary",
72
81
  e
73
82
  ),
74
- ...d
83
+ ...i,
84
+ children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 flex-1", children: [
85
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: l }),
86
+ r && /* @__PURE__ */ t("div", { className: "text-sm font-normal leading-none text-neutral-secondary pl-7", children: r })
87
+ ] })
75
88
  }
76
89
  );
77
90
  }
78
- function h({
91
+ function D({
79
92
  className: e,
80
- children: a,
81
- checked: r,
82
- ...d
93
+ children: n,
94
+ checked: o,
95
+ description: r,
96
+ ...l
83
97
  }) {
84
- return /* @__PURE__ */ s(
85
- o.CheckboxItem,
98
+ return /* @__PURE__ */ d(
99
+ a.CheckboxItem,
86
100
  {
87
101
  "data-slot": "dropdown-menu-checkbox-item",
88
- className: n(
89
- "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
102
+ className: s(
103
+ "relative flex cursor-default items-center gap-3 rounded-lg py-2 pr-2 pl-10 text-sm font-medium leading-none",
90
104
  "outline-none select-none transition-all duration-150",
91
- "hover:bg-gray-50 dark:hover:bg-gray-900/50",
92
- "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
105
+ "hover:surface-neutral-focused focus:surface-neutral-focused",
106
+ "text-neutral-primary",
93
107
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
94
108
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
109
+ "[&_svg:not([class*='text-'])]:text-neutral-secondary",
95
110
  e
96
111
  ),
97
- checked: r,
98
- ...d,
112
+ checked: o,
113
+ ...l,
99
114
  children: [
100
- /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, { className: "size-3.5 text-blue-600 dark:text-blue-400" }) }) }),
101
- a
115
+ /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-3.5 text-neutral-primary" }) }) }),
116
+ /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 flex-1", children: [
117
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: n }),
118
+ r && /* @__PURE__ */ t("div", { className: "text-sm font-normal leading-none text-neutral-secondary", children: r })
119
+ ] })
102
120
  ]
103
121
  }
104
122
  );
105
123
  }
106
- function v({
124
+ function M({
107
125
  ...e
108
126
  }) {
109
- return /* @__PURE__ */ t(o.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...e });
127
+ return /* @__PURE__ */ t(a.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...e });
110
128
  }
111
- function y({
129
+ function N({
112
130
  className: e,
113
- children: a,
131
+ children: n,
132
+ description: o,
114
133
  ...r
115
134
  }) {
116
- return /* @__PURE__ */ s(
117
- o.RadioItem,
135
+ return /* @__PURE__ */ d(
136
+ a.RadioItem,
118
137
  {
119
138
  "data-slot": "dropdown-menu-radio-item",
120
- className: n(
121
- "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
139
+ className: s(
140
+ "relative flex cursor-default items-center gap-3 rounded-lg py-2 pr-2 pl-10 text-sm font-medium leading-none",
122
141
  "outline-none select-none transition-all duration-150",
123
- "hover:bg-gray-50 dark:hover:bg-gray-900/50",
124
- "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
142
+ "hover:surface-neutral-focused focus:surface-neutral-focused",
143
+ "text-neutral-primary",
125
144
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
126
145
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
146
+ "[&_svg:not([class*='text-'])]:text-neutral-secondary",
127
147
  e
128
148
  ),
129
149
  ...r,
130
150
  children: [
131
- /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-2 fill-blue-600 dark:fill-blue-400 text-blue-600 dark:text-blue-400" }) }) }),
132
- a
151
+ /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { children: /* @__PURE__ */ t(c, { className: "size-2 fill-neutral-primary text-neutral-primary" }) }) }),
152
+ /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 flex-1", children: [
153
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: n }),
154
+ o && /* @__PURE__ */ t("div", { className: "text-sm font-normal leading-none text-neutral-secondary", children: o })
155
+ ] })
133
156
  ]
134
157
  }
135
158
  );
136
159
  }
137
- function D({
160
+ function k({
138
161
  className: e,
139
- inset: a,
140
- ...r
162
+ inset: n,
163
+ ...o
141
164
  }) {
142
165
  return /* @__PURE__ */ t(
143
- o.Label,
166
+ a.Label,
144
167
  {
145
168
  "data-slot": "dropdown-menu-label",
146
- "data-inset": a,
147
- className: n(
148
- "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
169
+ "data-inset": n,
170
+ className: s(
171
+ "pt-2 px-2 pb-1 text-sm font-medium leading-none text-neutral-secondary",
149
172
  "data-[inset]:pl-10",
150
173
  e
151
174
  ),
152
- ...r
175
+ ...o
153
176
  }
154
177
  );
155
178
  }
156
- function M({
179
+ function z({
157
180
  className: e,
158
- ...a
181
+ ...n
159
182
  }) {
160
183
  return /* @__PURE__ */ t(
161
- o.Separator,
184
+ a.Separator,
162
185
  {
163
186
  "data-slot": "dropdown-menu-separator",
164
- className: n("bg-gray-200 dark:bg-gray-800 my-2 h-px", e),
165
- ...a
187
+ className: s("bg-neutral-200 dark:bg-neutral-800 my-2 h-px", e),
188
+ ...n
166
189
  }
167
190
  );
168
191
  }
169
- function z({ className: e, ...a }) {
192
+ function I({ className: e, ...n }) {
170
193
  return /* @__PURE__ */ t(
171
194
  "span",
172
195
  {
173
196
  "data-slot": "dropdown-menu-shortcut",
174
- className: n(
175
- "ml-auto text-xs font-mono text-gray-400 dark:text-gray-500 tracking-wider",
176
- "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded",
197
+ className: s(
198
+ "ml-auto text-xs text-neutral-muted tracking-wider",
199
+ "bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded",
177
200
  e
178
201
  ),
179
- ...a
202
+ ...n
180
203
  }
181
204
  );
182
205
  }
183
- function I({ ...e }) {
184
- return /* @__PURE__ */ t(o.Sub, { "data-slot": "dropdown-menu-sub", ...e });
206
+ function _({ ...e }) {
207
+ return /* @__PURE__ */ t(a.Sub, { "data-slot": "dropdown-menu-sub", ...e });
185
208
  }
186
209
  function Z({
187
210
  className: e,
188
- inset: a,
189
- children: r,
190
- ...d
211
+ inset: n,
212
+ children: o,
213
+ ...r
191
214
  }) {
192
- return /* @__PURE__ */ s(
193
- o.SubTrigger,
215
+ return /* @__PURE__ */ d(
216
+ a.SubTrigger,
194
217
  {
195
218
  "data-slot": "dropdown-menu-sub-trigger",
196
- "data-inset": a,
197
- className: n(
198
- "flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
219
+ "data-inset": n,
220
+ className: s(
221
+ "flex cursor-default items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium leading-none",
199
222
  "outline-none select-none transition-all duration-150",
200
- "hover:bg-gray-50 dark:hover:bg-gray-900/50",
201
- "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
202
- "data-[state=open]:bg-blue-50 dark:data-[state=open]:bg-blue-950/30",
203
- "data-[state=open]:text-blue-700 dark:data-[state=open]:text-blue-300",
223
+ "hover:surface-neutral-focused focus:surface-neutral-focused",
224
+ "data-[state=open]:surface-neutral-focused",
225
+ "text-neutral-primary",
204
226
  "data-[inset]:pl-10",
227
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
228
+ "[&_svg:not([class*='text-'])]:text-neutral-secondary",
205
229
  e
206
230
  ),
207
- ...d,
231
+ ...r,
208
232
  children: [
209
- r,
210
- /* @__PURE__ */ t(l, { className: "ml-auto size-4 text-gray-400 dark:text-gray-500" })
233
+ o,
234
+ /* @__PURE__ */ t(m, { className: "ml-auto size-4 text-neutral-secondary" })
211
235
  ]
212
236
  }
213
237
  );
214
238
  }
215
- function N({
239
+ function S({
216
240
  className: e,
217
- ...a
241
+ ...n
218
242
  }) {
219
243
  return /* @__PURE__ */ t(
220
- o.SubContent,
244
+ a.SubContent,
221
245
  {
222
246
  "data-slot": "dropdown-menu-sub-content",
223
- className: n(
224
- "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
247
+ className: s(
248
+ "surface-neutral-default text-neutral-primary border border-neutral-200 dark:border-neutral-800",
225
249
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
226
250
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
227
251
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
228
252
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
229
253
  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
230
254
  "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin)",
231
- "overflow-hidden rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
232
- "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
255
+ "rounded-xl shadow-2xl shadow-black/10 dark:shadow-black/30",
233
256
  e
234
257
  ),
235
- ...a
258
+ ...n
236
259
  }
237
260
  );
238
261
  }
239
262
  export {
240
- b as Z2DropdownMenu,
241
- h as Z2DropdownMenuCheckboxItem,
242
- x as Z2DropdownMenuContent,
243
- w as Z2DropdownMenuGroup,
244
- k as Z2DropdownMenuItem,
245
- D as Z2DropdownMenuLabel,
246
- m as Z2DropdownMenuPortal,
247
- v as Z2DropdownMenuRadioGroup,
248
- y as Z2DropdownMenuRadioItem,
249
- M as Z2DropdownMenuSeparator,
250
- z as Z2DropdownMenuShortcut,
251
- I as Z2DropdownMenuSub,
252
- N as Z2DropdownMenuSubContent,
263
+ x as Z2DropdownMenu,
264
+ D as Z2DropdownMenuCheckboxItem,
265
+ b as Z2DropdownMenuContent,
266
+ h as Z2DropdownMenuGroup,
267
+ y as Z2DropdownMenuItem,
268
+ k as Z2DropdownMenuLabel,
269
+ w as Z2DropdownMenuPortal,
270
+ M as Z2DropdownMenuRadioGroup,
271
+ N as Z2DropdownMenuRadioItem,
272
+ z as Z2DropdownMenuSeparator,
273
+ I as Z2DropdownMenuShortcut,
274
+ _ as Z2DropdownMenuSub,
275
+ S as Z2DropdownMenuSubContent,
253
276
  Z as Z2DropdownMenuSubTrigger,
254
- f as Z2DropdownMenuTrigger
277
+ v as Z2DropdownMenuTrigger
255
278
  };
package/dist/components/table/components/table-filter/table-filter.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsxs as t, jsx as l } from "react/jsx-runtime";
2
- import { Button as s } from "../../../button/button.js";
3
- import C from "./table-filter.hook.js";
4
- import T from "./filters/text.js";
1
+ import { jsxs as l, jsx as t } from "react/jsx-runtime";
2
+ import { Button as i } from "../../../button/button.js";
3
+ import T from "./table-filter.hook.js";
4
+ import C from "./filters/text.js";
5
5
  import j from "./filters/boolean.js";
6
6
  import z from "./filters/number/number.js";
7
7
  import A from "./filters/checkbox.js";
@@ -19,11 +19,11 @@ const E = ({
19
19
  updateColumnFilter: f,
20
20
  clearAllFilters: v,
21
21
  applyFilters: k,
22
- hasActiveFilters: i,
22
+ hasActiveFilters: s,
23
23
  isOpen: m,
24
24
  setIsOpen: u,
25
25
  filterableFields: y
26
- } = C({ schema: d, filter: o || { value: [], onChange: () => {
26
+ } = T({ schema: d, filter: o || { value: [], onChange: () => {
27
27
  } } });
28
28
  if (!o)
29
29
  return null;
@@ -31,7 +31,7 @@ const E = ({
31
31
  if (!r) return null;
32
32
  const e = d.find((c) => c.key === r), F = {
33
33
  boolean: j,
34
- text: T,
34
+ text: C,
35
35
  number: z,
36
36
  checkbox: A
37
37
  }, h = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || F[(e == null ? void 0 : e.cellType) || "text"];
@@ -43,63 +43,64 @@ const E = ({
43
43
  condition: (a == null ? void 0 : a.condition) || "",
44
44
  value: (a == null ? void 0 : a.value) || ""
45
45
  };
46
- return /* @__PURE__ */ l("div", { className: "flex-1", children: /* @__PURE__ */ l("div", { className: "mb-4", children: /* @__PURE__ */ l("div", { className: "", children: /* @__PURE__ */ l(
46
+ return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
47
47
  h,
48
48
  {
49
49
  value: g,
50
50
  onChange: ({ condition: c, value: w }) => f(r, c, w),
51
51
  filterOptions: e == null ? void 0 : e.filterOptions
52
- }
52
+ },
53
+ e == null ? void 0 : e.key
53
54
  ) }) }) });
54
55
  };
55
- return /* @__PURE__ */ t("div", { className: "relative", children: [
56
- /* @__PURE__ */ t(
57
- s,
56
+ return /* @__PURE__ */ l("div", { className: "relative", children: [
57
+ /* @__PURE__ */ l(
58
+ i,
58
59
  {
59
60
  onClick: () => u(!m),
60
- variant: i ? "filled" : "stroke",
61
- shade: i ? "brand" : "neutral",
61
+ variant: s ? "filled" : "stroke",
62
+ shade: s ? "brand" : "neutral",
62
63
  size: "small",
63
64
  children: [
64
65
  "Filter ",
65
- i && `(${o.value.length})`
66
+ s && `(${o.value.length})`
66
67
  ]
67
68
  }
68
69
  ),
69
- m && /* @__PURE__ */ t("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
70
- /* @__PURE__ */ t("div", { className: "flex min-h-[300px]", children: [
71
- /* @__PURE__ */ t("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
72
- /* @__PURE__ */ l("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ l("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
73
- /* @__PURE__ */ l("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ t(
70
+ m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
71
+ /* @__PURE__ */ l("div", { className: "flex min-h-[300px]", children: [
72
+ /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
73
+ /* @__PURE__ */ t("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ t("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
74
+ /* @__PURE__ */ t("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ l(
74
75
  "button",
75
76
  {
76
77
  onClick: () => p(e.key),
77
78
  className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors ${r === e.key ? "bg-surface-brand-subtle text-text-brand-primary" : "text-text-neutral-primary"}`,
78
79
  children: [
79
- /* @__PURE__ */ l("span", { className: "truncate", children: e.title }),
80
- b(e.key) && /* @__PURE__ */ l(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
80
+ /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
81
+ b(e.key) && /* @__PURE__ */ t(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
81
82
  ]
82
83
  },
83
84
  e.key
84
85
  )) })
85
86
  ] }),
86
- /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ l("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
87
+ /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
87
88
  ] }),
88
- /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
89
- /* @__PURE__ */ l(
90
- s,
89
+ /* @__PURE__ */ l("div", { className: "flex justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
90
+ /* @__PURE__ */ t(
91
+ i,
91
92
  {
92
93
  onClick: v,
93
94
  variant: "ghost",
94
95
  shade: "neutral",
95
96
  size: "small",
96
- disabled: !i,
97
+ disabled: !s,
97
98
  children: "Clear All"
98
99
  }
99
100
  ),
100
- /* @__PURE__ */ t("div", { className: "flex gap-2", children: [
101
- /* @__PURE__ */ l(
102
- s,
101
+ /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
102
+ /* @__PURE__ */ t(
103
+ i,
103
104
  {
104
105
  onClick: () => u(!1),
105
106
  variant: "stroke",
@@ -108,7 +109,7 @@ const E = ({
108
109
  children: "Cancel"
109
110
  }
110
111
  ),
111
- /* @__PURE__ */ l(s, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
112
+ /* @__PURE__ */ t(i, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
112
113
  ] })
113
114
  ] })
114
115
  ] })
package/dist/css/config/colors/surfaces.css CHANGED
@@ -25,6 +25,10 @@
25
25
  background-color: var(--color-alpha-two-100);
26
26
  }
27
27
 
28
+ @utility surface-neutral-focused {
29
+ background-color: var(--color-neutral-75);
30
+ }
31
+
28
32
  /* Brand surfaces */
29
33
  @utility surface-brand-default {
30
34
  background-color: #2b394e;