@yuno-payments/dashboard-design-system 0.0.192 → 0.0.194

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.
@@ -1,5 +1,5 @@
1
1
  import { j as t } from "../../../_virtual/jsx-runtime.js";
2
- import { forwardRef as u } from "react";
2
+ import { forwardRef as c } from "react";
3
3
  import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
4
4
  import { UserIcon as v } from "../../../node_modules/@phosphor-icons/react/dist/csr/User.es.js";
5
5
  import { cn as s } from "../../../lib/utils.js";
@@ -22,7 +22,7 @@ const j = r(
22
22
  }
23
23
  }
24
24
  ), A = r("aspect-square h-full w-full object-cover"), b = r(
25
- "flex h-full w-full items-center justify-center rounded-full bg-surface text-muted-foreground font-medium uppercase",
25
+ "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium uppercase",
26
26
  {
27
27
  variants: {
28
28
  size: {
@@ -37,15 +37,15 @@ const j = r(
37
37
  size: "default"
38
38
  }
39
39
  }
40
- ), h = u(
41
- ({ size: l, src: i, alt: m, name: e, fallback: o, className: d, ...n }, c) => {
42
- const f = e ? x(e) : void 0;
40
+ ), h = c(
41
+ ({ size: l, src: i, alt: d, name: e, fallback: o, className: f, ...n }, u) => {
42
+ const m = e ? x(e) : void 0;
43
43
  let a;
44
- return o ? a = o : f ? a = f : a = /* @__PURE__ */ t.jsx(v, { className: "size-1/2" }), /* @__PURE__ */ t.jsxs(
44
+ return o ? a = o : m ? a = m : a = /* @__PURE__ */ t.jsx(v, { className: "size-1/2" }), /* @__PURE__ */ t.jsxs(
45
45
  p,
46
46
  {
47
- ref: c,
48
- className: s(j({ size: l }), d),
47
+ ref: u,
48
+ className: s(j({ size: l }), f),
49
49
  "data-testid": "avatar",
50
50
  ...n,
51
51
  children: [
@@ -53,7 +53,7 @@ const j = r(
53
53
  g,
54
54
  {
55
55
  src: i,
56
- alt: m || e || "Avatar",
56
+ alt: d || e || "Avatar",
57
57
  className: s(A()),
58
58
  "data-testid": "avatar-image",
59
59
  "data-slot": "avatar-image"
@@ -1,60 +1,60 @@
1
1
  import { j as e } from "../../../_virtual/jsx-runtime.js";
2
2
  import { forwardRef as b, useId as w } from "react";
3
- import { InputGroup as y, InputGroupAddon as j, InputGroupInput as z } from "../../../vendor/shadcn/input-group.js";
4
- import { cn as a } from "../../../lib/utils.js";
3
+ import { InputGroup as y, InputGroupAddon as h, InputGroupInput as z } from "../../../vendor/shadcn/input-group.js";
4
+ import { cn as l } from "../../../lib/utils.js";
5
5
  import { Button as B } from "../button/button.js";
6
- import { Icon as p } from "../icon/icon.js";
7
- import { Field as I, FieldDescription as R, FieldError as A } from "../../../vendor/shadcn/field.js";
8
- import { Label as D } from "../label/label.js";
6
+ import { Icon as N } from "../icon/icon.js";
7
+ import { Field as R, FieldDescription as A, FieldError as D } from "../../../vendor/shadcn/field.js";
8
+ import { Label as I } from "../label/label.js";
9
9
  const L = b(
10
10
  ({
11
- className: h,
12
- orientation: N = "vertical",
13
- label: o,
14
- description: l,
15
- error: i,
16
- info: v,
17
- requiredIndicator: g,
18
- required: c,
11
+ className: v,
12
+ orientation: g = "vertical",
13
+ label: c,
14
+ description: a,
15
+ error: s,
16
+ info: o,
17
+ requiredIndicator: x,
18
+ required: f,
19
19
  id: F,
20
- button: x,
20
+ button: u,
21
21
  disabled: r,
22
- startIcon: f,
22
+ startIcon: j,
23
23
  startIconProps: d,
24
- endIcon: u,
24
+ endIcon: p,
25
25
  endIconProps: m,
26
26
  inputProps: t,
27
27
  ...$
28
28
  }, E) => {
29
- const G = w(), s = F || t?.id || G, n = !!i;
29
+ const G = w(), i = F || t?.id || G, n = !!s;
30
30
  return /* @__PURE__ */ e.jsxs(
31
- I,
31
+ R,
32
32
  {
33
- orientation: N,
33
+ orientation: g,
34
34
  "data-invalid": n,
35
- className: a("w-full", h),
35
+ className: l("w-full", v),
36
36
  children: [
37
- o && /* @__PURE__ */ e.jsx(
38
- D,
37
+ (c || o || x) && /* @__PURE__ */ e.jsx(
38
+ I,
39
39
  {
40
- htmlFor: s,
41
- info: v,
42
- requiredIndicator: g,
43
- required: c,
40
+ htmlFor: i,
41
+ info: o,
42
+ requiredIndicator: x,
43
+ required: f,
44
44
  disabled: r,
45
- children: o
45
+ children: c
46
46
  }
47
47
  ),
48
48
  /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
49
49
  /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center", children: [
50
50
  /* @__PURE__ */ e.jsxs(y, { className: "flex-1", children: [
51
- f && /* @__PURE__ */ e.jsx(j, { align: "inline-start", children: /* @__PURE__ */ e.jsx(
52
- p,
51
+ j && /* @__PURE__ */ e.jsx(h, { align: "inline-start", children: /* @__PURE__ */ e.jsx(
52
+ N,
53
53
  {
54
- name: d?.name || f,
54
+ name: d?.name || j,
55
55
  size: "sm",
56
56
  ...d,
57
- className: a(
57
+ className: l(
58
58
  "cursor-default text-muted-foreground",
59
59
  d?.className
60
60
  )
@@ -65,35 +65,35 @@ const L = b(
65
65
  {
66
66
  ref: E,
67
67
  disabled: r,
68
- required: c,
69
- className: a(
68
+ required: f,
69
+ className: l(
70
70
  n && "border-destructive focus-visible:border-destructive",
71
71
  t?.className
72
72
  ),
73
73
  "aria-invalid": n ? !0 : void 0,
74
- "aria-describedby": l || i ? `${s}-description` : void 0,
74
+ "aria-describedby": a || s ? `${i}-description` : void 0,
75
75
  ...$,
76
76
  ...t,
77
- id: s
77
+ id: i
78
78
  }
79
79
  ),
80
- u && /* @__PURE__ */ e.jsx(j, { align: "inline-end", children: /* @__PURE__ */ e.jsx(
81
- p,
80
+ p && /* @__PURE__ */ e.jsx(h, { align: "inline-end", children: /* @__PURE__ */ e.jsx(
81
+ N,
82
82
  {
83
- name: m?.name || u,
83
+ name: m?.name || p,
84
84
  size: "sm",
85
85
  ...m,
86
- className: a(
86
+ className: l(
87
87
  "cursor-default text-muted-foreground",
88
88
  m?.className
89
89
  )
90
90
  }
91
91
  ) })
92
92
  ] }),
93
- x && /* @__PURE__ */ e.jsx(B, { disabled: r, ...x })
93
+ u && /* @__PURE__ */ e.jsx(B, { disabled: r, ...u })
94
94
  ] }),
95
- l && !i && /* @__PURE__ */ e.jsx(R, { id: `${s}-description`, children: l }),
96
- i && /* @__PURE__ */ e.jsx(A, { id: `${s}-description`, children: i })
95
+ a && !s && /* @__PURE__ */ e.jsx(A, { id: `${i}-description`, children: a }),
96
+ s && /* @__PURE__ */ e.jsx(D, { id: `${i}-description`, children: s })
97
97
  ] })
98
98
  ]
99
99
  }
@@ -1,36 +1,36 @@
1
1
  import { j as e } from "../../../_virtual/jsx-runtime.js";
2
- import { cn as o } from "../../../lib/utils.js";
3
- import { Label as c } from "../../../vendor/shadcn/label.js";
2
+ import { cn as m } from "../../../lib/utils.js";
3
+ import { Label as x } from "../../../vendor/shadcn/label.js";
4
4
  import "react";
5
- import { Icon as x } from "../icon/icon.js";
5
+ import { Icon as c } from "../icon/icon.js";
6
6
  import { Tooltip as p } from "../tooltip/tooltip.js";
7
7
  const u = ({
8
- htmlFor: m,
9
- className: n,
8
+ htmlFor: n,
9
+ className: a,
10
10
  info: s,
11
11
  requiredIndicator: t,
12
- required: a = !1,
13
- disabled: l = !1,
14
- children: i,
12
+ required: l = !1,
13
+ disabled: i = !1,
14
+ children: r,
15
15
  ...f
16
16
  }) => {
17
- const r = () => t ? typeof t == "string" ? t : a ? "required" : "optional" : null;
18
- return /* @__PURE__ */ e.jsxs("div", { className: o(
17
+ const o = () => t ? typeof t == "string" ? t : l ? "required" : "optional" : null;
18
+ return /* @__PURE__ */ e.jsxs("div", { className: m(
19
19
  "flex items-center justify-between gap-2",
20
- l && "text-muted-foreground"
20
+ i && "text-muted-foreground"
21
21
  ), children: [
22
22
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
23
- /* @__PURE__ */ e.jsx(
24
- c,
23
+ r && /* @__PURE__ */ e.jsx(
24
+ x,
25
25
  {
26
- htmlFor: m,
27
- className: o("text-sm cursor-pointer", n),
26
+ htmlFor: n,
27
+ className: m("text-sm cursor-pointer", a),
28
28
  ...f,
29
- children: i
29
+ children: r
30
30
  }
31
31
  ),
32
32
  s && /* @__PURE__ */ e.jsx(p, { content: s, children: /* @__PURE__ */ e.jsx(
33
- x,
33
+ c,
34
34
  {
35
35
  name: "Info",
36
36
  size: "sm",
@@ -38,9 +38,9 @@ const u = ({
38
38
  }
39
39
  ) })
40
40
  ] }),
41
- r() && /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-muted-foreground font-normal", children: [
41
+ o() && /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-muted-foreground font-normal", children: [
42
42
  "(",
43
- r(),
43
+ o(),
44
44
  ")"
45
45
  ] })
46
46
  ] });
@@ -1,53 +1,53 @@
1
1
  import { j as e } from "../../../_virtual/jsx-runtime.js";
2
2
  import * as G from "react";
3
- import { cn as t } from "../../../lib/utils.js";
4
- import { Select as L, SelectTrigger as O, SelectValue as R, SelectContent as T, SelectGroup as V, SelectLabel as E, SelectItem as j } from "../../../vendor/shadcn/select.js";
3
+ import { cn as m } from "../../../lib/utils.js";
4
+ import { Select as L, SelectTrigger as O, SelectValue as R, SelectContent as T, SelectGroup as V, SelectLabel as E, SelectItem as f } from "../../../vendor/shadcn/select.js";
5
5
  import { Label as F } from "../label/label.js";
6
6
  import { Typography as n } from "../typography/typography.js";
7
7
  const $ = G.forwardRef(
8
8
  ({
9
- label: m,
10
- description: r,
9
+ label: r,
10
+ description: i,
11
11
  error: a,
12
- info: f,
13
- requiredIndicator: i,
12
+ info: x,
13
+ requiredIndicator: c,
14
14
  required: u = !1,
15
- optional: o = !1,
16
- placeholder: v = "Select an option",
15
+ optional: v = !1,
16
+ placeholder: o = "Select an option",
17
17
  value: p,
18
18
  defaultValue: S,
19
19
  onChange: N,
20
- disabled: c = !1,
21
- options: x = [],
22
- groups: h = [],
20
+ disabled: t = !1,
21
+ options: h = [],
22
+ groups: j = [],
23
23
  className: b,
24
24
  id: d
25
25
  }, g) => {
26
- const y = h.length > 0, w = x.length > 0;
27
- return /* @__PURE__ */ e.jsxs("div", { className: t("w-full", b), children: [
28
- m && /* @__PURE__ */ e.jsxs("div", { className: "mb-2", children: [
26
+ const y = j.length > 0, w = h.length > 0;
27
+ return /* @__PURE__ */ e.jsxs("div", { className: m("w-full", b), children: [
28
+ (r || x || c) && /* @__PURE__ */ e.jsxs("div", { className: "mb-2", children: [
29
29
  /* @__PURE__ */ e.jsx(
30
30
  F,
31
31
  {
32
32
  htmlFor: d,
33
- info: f,
34
- requiredIndicator: i,
33
+ info: x,
34
+ requiredIndicator: c,
35
35
  required: u,
36
- disabled: c,
37
- children: m
36
+ disabled: t,
37
+ children: r
38
38
  }
39
39
  ),
40
- o && !i && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
40
+ v && !c && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
41
41
  ] }),
42
- r && !a && /* @__PURE__ */ e.jsx(
42
+ i && !a && /* @__PURE__ */ e.jsx(
43
43
  n,
44
44
  {
45
45
  variant: "sm",
46
- className: t(
46
+ className: m(
47
47
  "text-muted-foreground mb-2",
48
- c && "opacity-50"
48
+ t && "opacity-50"
49
49
  ),
50
- children: r
50
+ children: i
51
51
  }
52
52
  ),
53
53
  /* @__PURE__ */ e.jsxs(
@@ -56,29 +56,29 @@ const $ = G.forwardRef(
56
56
  value: p,
57
57
  defaultValue: S,
58
58
  onValueChange: N,
59
- disabled: c,
59
+ disabled: t,
60
60
  children: [
61
61
  /* @__PURE__ */ e.jsx(
62
62
  O,
63
63
  {
64
64
  ref: g,
65
65
  id: d,
66
- className: t(a && "border-destructive"),
67
- children: /* @__PURE__ */ e.jsx(R, { placeholder: v })
66
+ className: m(a && "border-destructive"),
67
+ children: /* @__PURE__ */ e.jsx(R, { placeholder: o })
68
68
  }
69
69
  ),
70
70
  /* @__PURE__ */ e.jsx(T, { children: y ? (
71
71
  // Render grouped options
72
- h.map((l, C) => /* @__PURE__ */ e.jsxs(V, { children: [
72
+ j.map((l, C) => /* @__PURE__ */ e.jsxs(V, { children: [
73
73
  l.label && /* @__PURE__ */ e.jsx(E, { children: l.label }),
74
- l.options.map((s) => /* @__PURE__ */ e.jsxs(j, { value: s.value, children: [
74
+ l.options.map((s) => /* @__PURE__ */ e.jsxs(f, { value: s.value, children: [
75
75
  s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
76
76
  s.label
77
77
  ] }, s.value))
78
78
  ] }, C))
79
79
  ) : w ? (
80
80
  // Render flat options
81
- x.map((l) => /* @__PURE__ */ e.jsx(j, { value: l.value, children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
81
+ h.map((l) => /* @__PURE__ */ e.jsx(f, { value: l.value, children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
82
82
  l.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: l.icon }),
83
83
  l.label
84
84
  ] }) }, l.value))
@@ -1,97 +1,97 @@
1
1
  import { j as e } from "../../_virtual/jsx-runtime.js";
2
2
  import { useId as P } from "react";
3
- import { cn as f } from "../../lib/utils.js";
3
+ import { cn as p } from "../../lib/utils.js";
4
4
  import { Button as F } from "./button.js";
5
- import { Calendar as I } from "./calendar.js";
6
- import { Popover as b, PopoverTrigger as k, PopoverContent as E } from "./popover.js";
7
- import { Field as $, FieldDescription as M, FieldError as B } from "./field.js";
5
+ import { Calendar as b } from "./calendar.js";
6
+ import { Popover as k, PopoverTrigger as E, PopoverContent as $ } from "./popover.js";
7
+ import { Field as I, FieldDescription as M, FieldError as B } from "./field.js";
8
8
  import S from "../../node_modules/lucide-react/dist/esm/icons/calendar.js";
9
9
  import L from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
10
10
  import { Label as R } from "../../components/atoms/label/label.js";
11
11
  import { formatDate as T } from "../../node_modules/date-fns/format.js";
12
- function W({
13
- date: o,
14
- onChange: x,
15
- placeholder: p = "Pick a date",
16
- disabled: n = !1,
17
- className: l,
18
- iconPosition: d = "start",
19
- minDate: u,
20
- maxDate: h,
21
- dateFormat: j = "MMM d, yyyy",
12
+ function X({
13
+ date: s,
14
+ onChange: h,
15
+ placeholder: u = "Pick a date",
16
+ disabled: c = !1,
17
+ className: d,
18
+ iconPosition: m = "start",
19
+ minDate: j,
20
+ maxDate: v,
21
+ dateFormat: w = "MMM d, yyyy",
22
22
  label: i,
23
23
  error: t,
24
- description: s,
25
- info: v,
26
- requiredIndicator: w,
24
+ description: o,
25
+ info: a,
26
+ requiredIndicator: n,
27
27
  required: y = !1,
28
28
  orientation: g = "vertical",
29
29
  id: C
30
30
  }) {
31
- const D = P(), r = C || D, a = !!t, N = d === "start", c = d === "end", m = /* @__PURE__ */ e.jsxs(b, { children: [
32
- /* @__PURE__ */ e.jsx(k, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
31
+ const D = P(), r = C || D, l = !!t, N = m === "start", f = m === "end", x = /* @__PURE__ */ e.jsxs(k, { children: [
32
+ /* @__PURE__ */ e.jsx(E, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
33
33
  F,
34
34
  {
35
35
  variant: "outline",
36
- className: f(
36
+ className: p(
37
37
  "w-full text-left font-normal h-9",
38
- c ? "justify-between" : "justify-start",
39
- !o && "text-muted-foreground",
40
- a && "border-destructive focus-visible:border-destructive",
41
- l
38
+ f ? "justify-between" : "justify-start",
39
+ !s && "text-muted-foreground",
40
+ l && "border-destructive focus-visible:border-destructive",
41
+ d
42
42
  ),
43
- disabled: n,
44
- "aria-invalid": a ? !0 : void 0,
45
- "aria-describedby": s || t ? `${r}-description` : void 0,
43
+ disabled: c,
44
+ "aria-invalid": l ? !0 : void 0,
45
+ "aria-describedby": o || t ? `${r}-description` : void 0,
46
46
  id: r,
47
47
  children: [
48
48
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
49
49
  N && /* @__PURE__ */ e.jsx(S, { className: "h-4 w-4" }),
50
- o ? T(o, j) : /* @__PURE__ */ e.jsx("span", { children: p })
50
+ s ? T(s, w) : /* @__PURE__ */ e.jsx("span", { children: u })
51
51
  ] }),
52
- c && /* @__PURE__ */ e.jsx(L, { className: "h-4 w-4 opacity-50" })
52
+ f && /* @__PURE__ */ e.jsx(L, { className: "h-4 w-4 opacity-50" })
53
53
  ]
54
54
  }
55
55
  ) }),
56
- /* @__PURE__ */ e.jsx(E, { className: "w-auto p-0", children: /* @__PURE__ */ e.jsx(
57
- I,
56
+ /* @__PURE__ */ e.jsx($, { className: "w-auto p-0", children: /* @__PURE__ */ e.jsx(
57
+ b,
58
58
  {
59
59
  mode: "single",
60
- selected: o,
61
- onSelect: x,
60
+ selected: s,
61
+ onSelect: h,
62
62
  initialFocus: !0,
63
- fromDate: u,
64
- toDate: h
63
+ fromDate: j,
64
+ toDate: v
65
65
  }
66
66
  ) })
67
67
  ] });
68
- return i || t || s ? /* @__PURE__ */ e.jsxs(
69
- $,
68
+ return i || t || o || a || n ? /* @__PURE__ */ e.jsxs(
69
+ I,
70
70
  {
71
71
  orientation: g,
72
- "data-invalid": a,
73
- className: f("w-full", l),
72
+ "data-invalid": l,
73
+ className: p("w-full", d),
74
74
  children: [
75
- i && /* @__PURE__ */ e.jsx(
75
+ (i || a || n) && /* @__PURE__ */ e.jsx(
76
76
  R,
77
77
  {
78
78
  htmlFor: r,
79
- info: v,
80
- requiredIndicator: w,
79
+ info: a,
80
+ requiredIndicator: n,
81
81
  required: y,
82
- disabled: n,
82
+ disabled: c,
83
83
  children: i
84
84
  }
85
85
  ),
86
86
  /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
87
- m,
88
- s && !t && /* @__PURE__ */ e.jsx(M, { id: `${r}-description`, children: s }),
87
+ x,
88
+ o && !t && /* @__PURE__ */ e.jsx(M, { id: `${r}-description`, children: o }),
89
89
  t && /* @__PURE__ */ e.jsx(B, { id: `${r}-description`, children: t })
90
90
  ] })
91
91
  ]
92
92
  }
93
- ) : m;
93
+ ) : x;
94
94
  }
95
95
  export {
96
- W as DatePicker
96
+ X as DatePicker
97
97
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuno-payments/dashboard-design-system",
3
- "version": "0.0.192",
3
+ "version": "0.0.194",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",