@yuno-payments/dashboard-design-system 0.0.137 → 0.0.138-beta.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 (8) hide show
  1. package/dist/components/atoms/filter/filter-date-range.js +140 -165
  2. package/dist/components/atoms/filter/filter.d.ts +4 -0
  3. package/dist/components/atoms/filter/filter.js +75 -63
  4. package/dist/components/atoms/time-picker/time-picker.d.ts +5 -0
  5. package/dist/components/atoms/time-picker/time-picker.js +123 -115
  6. package/dist/index.css +1 -1
  7. package/dist/vendor/shadcn/select.js +1 -1
  8. package/package.json +1 -1
package/dist/components/atoms/filter/filter-date-range.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { j as e } from "../../../_virtual/jsx-runtime.js";
2
- import { forwardRef as T, useMemo as b } from "react";
3
- import { RadioGroup as S, RadioGroupItem as C } from "../../../vendor/shadcn/radio-group.js";
4
- import { cn as _ } from "../../../lib/utils.js";
5
- import { DatePicker as D } from "../date-picker/date-picker.js";
6
- import { TimePicker as p } from "../time-picker/time-picker.js";
7
- const c = {
2
+ import { forwardRef as y, useMemo as $ } from "react";
3
+ import { RadioGroup as b, RadioGroupItem as H } from "../../../vendor/shadcn/radio-group.js";
4
+ import { cn as N } from "../../../lib/utils.js";
5
+ import { DatePicker as f } from "../date-picker/date-picker.js";
6
+ import { TimePicker as g } from "../time-picker/time-picker.js";
7
+ const o = {
8
8
  CUSTOM: "CUSTOM",
9
9
  TODAY: "TODAY",
10
10
  LAST_3_DAYS: "LAST_3_DAYS",
@@ -12,8 +12,8 @@ const c = {
12
12
  LAST_30_DAYS: "LAST_30_DAYS",
13
13
  THIS_MONTH: "THIS_MONTH",
14
14
  ALL_TIME: "ALL_TIME"
15
- }, r = (s) => {
16
- const l = s.getDate();
15
+ }, i = (s) => {
16
+ const t = s.getDate();
17
17
  return `${[
18
18
  "Jan",
19
19
  "Feb",
@@ -27,7 +27,7 @@ const c = {
27
27
  "Oct",
28
28
  "Nov",
29
29
  "Dec"
30
- ][s.getMonth()]} ${l}`;
30
+ ][s.getMonth()]} ${t}`;
31
31
  }, R = (s) => {
32
32
  const a = [
33
33
  "Jan",
@@ -44,217 +44,192 @@ const c = {
44
44
  "Dec"
45
45
  ][s.getMonth()], n = s.getFullYear();
46
46
  return `${a} ${n}`;
47
- }, F = (s) => ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][s.getDay()], H = () => {
47
+ }, C = (s) => ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][s.getDay()], F = () => {
48
48
  const s = /* @__PURE__ */ new Date();
49
49
  s.setHours(0, 0, 0, 0);
50
- const l = `${F(s)}, ${r(s)}`, a = new Date(s);
50
+ const t = `${C(s)}, ${i(s)}`, a = new Date(s);
51
51
  a.setDate(a.getDate() - 2);
52
- const n = `${r(a)} - ${r(s)}`, o = new Date(s);
53
- o.setDate(o.getDate() - 6);
54
- const d = `${r(o)} - ${r(s)}`, t = new Date(s);
55
- t.setDate(t.getDate() - 29);
56
- const m = `${r(t)} - ${r(s)}`, f = R(s);
52
+ const n = `${i(a)} - ${i(s)}`, r = new Date(s);
53
+ r.setDate(r.getDate() - 6);
54
+ const m = `${i(r)} - ${i(s)}`, l = new Date(s);
55
+ l.setDate(l.getDate() - 29);
56
+ const x = `${i(l)} - ${i(s)}`, D = R(s);
57
57
  return {
58
- today: l,
58
+ today: t,
59
59
  last3Days: n,
60
- last7Days: d,
61
- last30Days: m,
62
- thisMonth: f
60
+ last7Days: m,
61
+ last30Days: x,
62
+ thisMonth: D
63
63
  };
64
- }, i = T(
65
- ({ label: s, description: l, value: a, className: n, ...o }, d) => {
66
- const t = `date-range-${a}`;
64
+ }, c = y(
65
+ ({ label: s, description: t, value: a, className: n, ...r }, m) => {
66
+ const l = `date-range-${a}`;
67
67
  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-start gap-4 w-full py-1", children: [
68
68
  /* @__PURE__ */ e.jsxs(
69
69
  "label",
70
70
  {
71
- ref: d,
72
- className: _(
71
+ ref: m,
72
+ className: N(
73
73
  "flex-1 flex items-start gap-3 cursor-pointer",
74
74
  n
75
75
  ),
76
- ...o,
76
+ ...r,
77
77
  children: [
78
- /* @__PURE__ */ e.jsx(C, { id: t, value: a, className: "mt-px" }),
78
+ /* @__PURE__ */ e.jsx(H, { id: l, value: a, className: "mt-px" }),
79
79
  /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-1.5 items-start justify-center pb-0 pt-px px-0", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium leading-none text-foreground", children: s }) })
80
80
  ]
81
81
  }
82
82
  ),
83
- l && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-normal leading-none text-muted-foreground whitespace-nowrap", children: l }) })
83
+ t && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-xs font-normal leading-none text-muted-foreground whitespace-nowrap", children: t }) })
84
84
  ] });
85
85
  }
86
86
  );
87
- i.displayName = "FilterDateRangeOption";
88
- const I = T(
87
+ c.displayName = "FilterDateRangeOption";
88
+ const I = y(
89
89
  ({
90
90
  showCustomFields: s = !1,
91
- onCustomFieldsChange: l,
91
+ onCustomFieldsChange: t,
92
92
  startDate: a,
93
93
  endDate: n,
94
- startTime: o = "",
95
- endTime: d = "",
96
- onStartDateChange: t,
97
- onEndDateChange: m,
98
- onStartTimeChange: f,
99
- onEndTimeChange: g,
100
- mode: u = "range",
101
- singleDayLabel: M = "Select date",
102
- showAllTime: L = !1,
103
- className: O,
104
- value: y,
105
- onValueChange: Y,
106
- ...N
94
+ startTime: r = "",
95
+ endTime: m = "",
96
+ onStartDateChange: l,
97
+ onEndDateChange: x,
98
+ onStartTimeChange: D,
99
+ onEndTimeChange: j,
100
+ mode: S = "range",
101
+ singleDayLabel: T = "Select date",
102
+ showAllTime: A = !1,
103
+ className: v,
104
+ value: _,
105
+ onValueChange: M,
106
+ ...L
107
107
  }, w) => {
108
- const h = b(() => H(), []), j = (x) => {
109
- Y?.(x), l?.(x === c.CUSTOM);
110
- }, $ = (x) => {
111
- if (x) {
112
- const v = new Date(x);
113
- v.setHours(0, 0, 0, 0);
114
- const A = new Date(x);
115
- A.setHours(23, 59, 59, 999), t?.(v), m?.(A);
108
+ const p = $(() => F(), []), O = (d) => {
109
+ M?.(d), t?.(d === o.CUSTOM);
110
+ }, Y = (d) => {
111
+ if (d) {
112
+ const h = new Date(d);
113
+ h.setHours(0, 0, 0, 0);
114
+ const u = new Date(d);
115
+ u.setHours(23, 59, 59, 999), l?.(h), x?.(u);
116
116
  } else
117
- t?.(void 0), m?.(void 0);
117
+ l?.(void 0), x?.(void 0);
118
118
  };
119
- return /* @__PURE__ */ e.jsxs(
119
+ return /* @__PURE__ */ e.jsx(
120
120
  "div",
121
121
  {
122
122
  ref: w,
123
- className: _("flex flex-col gap-4 w-full", O),
124
- children: [
125
- /* @__PURE__ */ e.jsx(
126
- S,
127
- {
128
- value: y,
129
- onValueChange: j,
130
- ...N,
131
- children: /* @__PURE__ */ e.jsx(i, { label: "Custom", value: c.CUSTOM })
132
- }
133
- ),
134
- s && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
135
- u === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
136
- D,
137
- {
138
- date: a,
139
- onChange: $,
140
- placeholder: M,
141
- className: "h-9",
142
- iconPosition: "none"
143
- }
144
- ) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
145
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
146
- D,
147
- {
148
- date: a,
149
- onChange: t,
150
- placeholder: "Start date",
151
- className: "h-9",
152
- iconPosition: "none"
153
- }
154
- ) }),
155
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
156
- D,
157
- {
158
- date: n,
159
- onChange: m,
160
- placeholder: "End date",
161
- className: "h-9",
162
- iconPosition: "none"
163
- }
164
- ) })
165
- ] }),
166
- u === "single" ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
167
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
168
- p,
169
- {
170
- value: o,
171
- onChange: f,
172
- placeholder: "10:30:00",
173
- className: "h-9"
174
- }
175
- ) }),
176
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
177
- p,
178
- {
179
- value: d,
180
- onChange: g,
181
- placeholder: "10:30:00",
182
- className: "h-9"
183
- }
184
- ) })
185
- ] }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
186
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
187
- p,
188
- {
189
- value: o,
190
- onChange: f,
191
- placeholder: "10:30:00",
192
- className: "h-9"
193
- }
194
- ) }),
195
- /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
196
- p,
197
- {
198
- value: d,
199
- onChange: g,
200
- placeholder: "10:30:00",
201
- className: "h-9"
202
- }
203
- ) })
204
- ] })
205
- ] }),
206
- /* @__PURE__ */ e.jsx(
207
- S,
208
- {
209
- value: y,
210
- onValueChange: j,
211
- ...N,
212
- children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
123
+ className: N("flex flex-col gap-4 w-full", v),
124
+ children: /* @__PURE__ */ e.jsxs(
125
+ b,
126
+ {
127
+ value: _,
128
+ onValueChange: O,
129
+ ...L,
130
+ children: [
131
+ /* @__PURE__ */ e.jsx(c, { label: "Custom", value: o.CUSTOM }),
132
+ s && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 pl-7", children: [
133
+ S === "single" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
134
+ f,
135
+ {
136
+ date: a,
137
+ onChange: Y,
138
+ placeholder: T,
139
+ className: "h-9",
140
+ iconPosition: "none"
141
+ }
142
+ ) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
143
+ /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
144
+ f,
145
+ {
146
+ date: a,
147
+ onChange: l,
148
+ placeholder: "Start date",
149
+ className: "h-9",
150
+ iconPosition: "none"
151
+ }
152
+ ) }),
153
+ /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
154
+ f,
155
+ {
156
+ date: n,
157
+ onChange: x,
158
+ placeholder: "End date",
159
+ className: "h-9",
160
+ iconPosition: "none"
161
+ }
162
+ ) })
163
+ ] }),
164
+ /* @__PURE__ */ e.jsxs("div", { className: "flex gap-4 items-start w-full", children: [
165
+ /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
166
+ g,
167
+ {
168
+ value: r,
169
+ onChange: D,
170
+ mode: "dropdown",
171
+ use24Hour: !0,
172
+ width: "100%"
173
+ }
174
+ ) }),
175
+ /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex flex-col gap-3", children: /* @__PURE__ */ e.jsx(
176
+ g,
177
+ {
178
+ value: m,
179
+ onChange: j,
180
+ mode: "dropdown",
181
+ use24Hour: !0,
182
+ width: "100%"
183
+ }
184
+ ) })
185
+ ] })
186
+ ] }),
187
+ /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
213
188
  /* @__PURE__ */ e.jsx(
214
- i,
189
+ c,
215
190
  {
216
191
  label: "Today",
217
- value: c.TODAY,
218
- description: h.today
192
+ value: o.TODAY,
193
+ description: p.today
219
194
  }
220
195
  ),
221
196
  /* @__PURE__ */ e.jsx(
222
- i,
197
+ c,
223
198
  {
224
199
  label: "Last 3 days",
225
- value: c.LAST_3_DAYS,
226
- description: h.last3Days
200
+ value: o.LAST_3_DAYS,
201
+ description: p.last3Days
227
202
  }
228
203
  ),
229
204
  /* @__PURE__ */ e.jsx(
230
- i,
205
+ c,
231
206
  {
232
207
  label: "Last 7 days",
233
- value: c.LAST_7_DAYS,
234
- description: h.last7Days
208
+ value: o.LAST_7_DAYS,
209
+ description: p.last7Days
235
210
  }
236
211
  ),
237
212
  /* @__PURE__ */ e.jsx(
238
- i,
213
+ c,
239
214
  {
240
215
  label: "Last 30 days",
241
- value: c.LAST_30_DAYS,
242
- description: h.last30Days
216
+ value: o.LAST_30_DAYS,
217
+ description: p.last30Days
243
218
  }
244
219
  ),
245
220
  /* @__PURE__ */ e.jsx(
246
- i,
221
+ c,
247
222
  {
248
223
  label: "This month",
249
- value: c.THIS_MONTH,
250
- description: h.thisMonth
224
+ value: o.THIS_MONTH,
225
+ description: p.thisMonth
251
226
  }
252
227
  ),
253
- L && /* @__PURE__ */ e.jsx(i, { label: "All time", value: c.ALL_TIME })
228
+ A && /* @__PURE__ */ e.jsx(c, { label: "All time", value: o.ALL_TIME })
254
229
  ] })
255
- }
256
- )
257
- ]
230
+ ]
231
+ }
232
+ )
258
233
  }
259
234
  );
260
235
  }
@@ -262,6 +237,6 @@ const I = T(
262
237
  I.displayName = "FilterDateRange";
263
238
  export {
264
239
  I as FilterDateRange,
265
- i as FilterDateRangeOption,
266
- c as FilterDateRangeValue
240
+ c as FilterDateRangeOption,
241
+ o as FilterDateRangeValue
267
242
  };
package/dist/components/atoms/filter/filter.d.ts CHANGED
@@ -20,6 +20,8 @@ interface FilterSectionItem {
20
20
  value: string;
21
21
  label: string;
22
22
  description?: string;
23
+ /** Optional icon URL to display before the label */
24
+ icon?: string;
23
25
  }
24
26
  interface FilterSectionPropsBase {
25
27
  title: string;
@@ -52,6 +54,8 @@ interface FilterCheckboxOptionProps {
52
54
  className?: string;
53
55
  /** Maximum label length before truncating (default: 14) */
54
56
  maxLabelLength?: number;
57
+ /** Optional icon URL to display before the label */
58
+ icon?: string;
55
59
  }
56
60
  declare const FilterCheckboxOption: import('react').ForwardRefExoticComponent<FilterCheckboxOptionProps & import('react').RefAttributes<HTMLButtonElement>>;
57
61
  interface FilterRadioOptionProps {