@dimasbaguspm/versaur 0.0.0 → 0.0.2

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 (72) hide show
  1. package/dist/components/bottom-bar/bottom-bar.atoms.d.ts +1 -1
  2. package/dist/components/bottom-bar/bottom-bar.d.ts +1 -1
  3. package/dist/components/bottom-bar/types.d.ts +3 -2
  4. package/dist/components/index.d.ts +1 -0
  5. package/dist/index.js +6996 -66
  6. package/package.json +2 -10
  7. package/dist/alert-DzSPXqwS.js +0 -167
  8. package/dist/app-bar-B4nQkgdL.js +0 -92
  9. package/dist/avatar-Bsn24V6g.js +0 -91
  10. package/dist/badge-DqLCHm9q.js +0 -184
  11. package/dist/bottom-bar-DOQ3gVwW.js +0 -73
  12. package/dist/breadcrumbs-PJV3izUu.js +0 -59
  13. package/dist/button-C8OibEPE.js +0 -81
  14. package/dist/button-float-B8tdLJkX.js +0 -107
  15. package/dist/button-icon-CWji4cBA.js +0 -89
  16. package/dist/calendar-CkLj89o2.js +0 -112
  17. package/dist/checkbox-input-CSboebwt.js +0 -167
  18. package/dist/chip-input-C1PJPDFq.js +0 -189
  19. package/dist/cn-Ca4KprQ1.js +0 -2730
  20. package/dist/components/alert.js +0 -4
  21. package/dist/components/app-bar.js +0 -4
  22. package/dist/components/avatar.js +0 -4
  23. package/dist/components/badge.js +0 -4
  24. package/dist/components/bottom-bar.js +0 -4
  25. package/dist/components/breadcrumbs.js +0 -4
  26. package/dist/components/button-float.js +0 -4
  27. package/dist/components/button-icon.js +0 -4
  28. package/dist/components/button.js +0 -4
  29. package/dist/components/calendar.js +0 -4
  30. package/dist/components/checkbox-input.js +0 -4
  31. package/dist/components/chip-input.js +0 -4
  32. package/dist/components/date-single-picker-input.js +0 -4
  33. package/dist/components/drawer.js +0 -9
  34. package/dist/components/icon.js +0 -4
  35. package/dist/components/loading-indicator.js +0 -4
  36. package/dist/components/menu.js +0 -4
  37. package/dist/components/modal.js +0 -4
  38. package/dist/components/radio-input.js +0 -4
  39. package/dist/components/segment-multiple-input.js +0 -4
  40. package/dist/components/segment-single-input.js +0 -4
  41. package/dist/components/select-input.js +0 -4
  42. package/dist/components/skeleton.js +0 -4
  43. package/dist/components/snackbar.js +0 -4
  44. package/dist/components/switch-input.js +0 -7
  45. package/dist/components/tabs.js +0 -4
  46. package/dist/components/text-input.js +0 -4
  47. package/dist/components/text.js +0 -4
  48. package/dist/components/textarea-input.js +0 -4
  49. package/dist/components/tile.js +0 -4
  50. package/dist/components/top-bar.js +0 -4
  51. package/dist/date-single-picker-input--Ew0O9NQ.js +0 -252
  52. package/dist/drawer-DrnAR2a4.js +0 -218
  53. package/dist/helpers-CEDtBUGM.js +0 -37
  54. package/dist/hooks/index.js +0 -1
  55. package/dist/icon-D-lTZMHY.js +0 -44
  56. package/dist/index-DU1SCUkk.js +0 -329
  57. package/dist/loading-indicator-BZMnT5PA.js +0 -168
  58. package/dist/menu-BZvilMF7.js +0 -174
  59. package/dist/modal-BGAtqMl9.js +0 -149
  60. package/dist/radio-input-BRGoevZY.js +0 -173
  61. package/dist/segment-multiple-input-VwHCqFd6.js +0 -229
  62. package/dist/segment-single-input-Cqoo7-C2.js +0 -228
  63. package/dist/select-input-DCb0usvK.js +0 -108
  64. package/dist/skeleton-D4X5USf_.js +0 -59
  65. package/dist/snackbar-CYias-fJ.js +0 -79
  66. package/dist/switch-input-C5s1lvYh.js +0 -186
  67. package/dist/tabs-C8aRKfxS.js +0 -216
  68. package/dist/text-B7e-au41.js +0 -120
  69. package/dist/text-input-BsWvUk_H.js +0 -73
  70. package/dist/textarea-input-DZExXEE8.js +0 -102
  71. package/dist/tile-Du7YciCG.js +0 -51
  72. package/dist/top-bar-ErHvwR4K.js +0 -62
@@ -1,174 +0,0 @@
1
- import { c as b, j as l } from "./index-DU1SCUkk.js";
2
- import { createContext as h, useContext as w, forwardRef as f, useId as M, useEffect as m, useRef as g } from "react";
3
- import { c as y } from "./cn-Ca4KprQ1.js";
4
- const x = h(null), p = () => {
5
- const n = w(x);
6
- if (!n)
7
- throw new Error("useMenuContext must be used within a Menu component");
8
- return n;
9
- }, E = b(
10
- // Modern, clean, accessible base style
11
- "z-50 min-w-40 bg-neutral-50 text-black rounded-lg shadow-md border border-transparent",
12
- {
13
- variants: {
14
- variant: {
15
- default: "",
16
- outline: "border bg-transparent"
17
- },
18
- size: {
19
- sm: "py-2",
20
- md: "py-2.5"
21
- }
22
- },
23
- defaultVariants: {
24
- variant: "default",
25
- size: "md"
26
- }
27
- }
28
- ), z = b(
29
- "w-full text-left px-4 rounded-md cursor-pointer transition-colors duration-150 font-medium select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coral/70 hover:bg-slate-100 active:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed",
30
- {
31
- variants: {
32
- variant: {
33
- default: "",
34
- outline: "border border-color-neutral"
35
- },
36
- size: {
37
- sm: "text-sm py-2",
38
- md: "text-base py-2.5"
39
- }
40
- },
41
- defaultVariants: {
42
- variant: "default",
43
- size: "md"
44
- }
45
- }
46
- ), I = f(
47
- ({ children: n, ...e }, t) => {
48
- const { open: u, triggerRef: r } = p();
49
- return /* @__PURE__ */ l.jsx(
50
- "button",
51
- {
52
- ref: (o) => {
53
- r.current = o, typeof t == "function" ? t(o) : t && (t.current = o);
54
- },
55
- "aria-haspopup": "menu",
56
- "aria-expanded": u,
57
- "aria-controls": "menu-content",
58
- type: "button",
59
- ...e,
60
- children: n
61
- }
62
- );
63
- }
64
- ), j = f(
65
- ({ children: n, className: e, ...t }, u) => {
66
- const { open: r, contentRef: o, triggerRef: i, size: s } = p(), d = M();
67
- let c = 0, v = 0;
68
- if (i.current) {
69
- const a = i.current.getBoundingClientRect();
70
- c = a.bottom + window.scrollY + 4, v = a.left + window.scrollX;
71
- }
72
- return /* @__PURE__ */ l.jsx(
73
- "div",
74
- {
75
- ref: (a) => {
76
- o.current = a, typeof u == "function" ? u(a) : u && (u.current = a);
77
- },
78
- id: `menu-content-${d}`,
79
- role: "menu",
80
- tabIndex: -1,
81
- "aria-hidden": !r,
82
- className: y(
83
- E({
84
- size: s
85
- }),
86
- "absolute z-50 transition-opacity duration-150 ease-out",
87
- r ? "opacity-100" : "opacity-0",
88
- e
89
- ),
90
- style: {
91
- minWidth: i.current?.offsetWidth,
92
- top: c,
93
- left: v
94
- },
95
- ...t,
96
- children: r && n
97
- }
98
- );
99
- }
100
- ), k = f(
101
- ({ children: n, disabled: e, className: t, ...u }, r) => {
102
- const { size: o } = p();
103
- return /* @__PURE__ */ l.jsx(
104
- "button",
105
- {
106
- ref: r,
107
- role: "menuitem",
108
- tabIndex: 0,
109
- disabled: e,
110
- "aria-disabled": e,
111
- className: y(
112
- z({
113
- size: o
114
- }),
115
- t
116
- ),
117
- ...u,
118
- children: n
119
- }
120
- );
121
- }
122
- );
123
- function C(n, e, t, u) {
124
- m(() => {
125
- if (!n) return;
126
- function r(o) {
127
- !e.current?.contains(o.target) && !t.current?.contains(o.target) && u();
128
- }
129
- return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
130
- }, [n, u, e, t]);
131
- }
132
- function D(n, e) {
133
- m(() => {
134
- if (n && e.current) {
135
- const t = e.current.querySelectorAll('[role="menuitem"]');
136
- t.length && t[0].focus();
137
- }
138
- }, [n, e]);
139
- }
140
- function A(n, e, t, u) {
141
- m(() => {
142
- if (!n || !e.current) return;
143
- const r = e.current;
144
- function o(i) {
145
- const s = Array.from(
146
- r.querySelectorAll('[role="menuitem"]')
147
- ), d = document.activeElement, c = s.indexOf(d);
148
- i.key === "ArrowDown" ? (i.preventDefault(), s.length && s[(c + 1) % s.length].focus()) : i.key === "ArrowUp" ? (i.preventDefault(), s.length && s[(c - 1 + s.length) % s.length].focus()) : i.key === "Home" ? (i.preventDefault(), s.length && s[0].focus()) : i.key === "End" ? (i.preventDefault(), s.length && s[s.length - 1].focus()) : i.key === "Escape" && (i.preventDefault(), u(), t.current?.focus());
149
- }
150
- return r.addEventListener("keydown", o), () => r.removeEventListener("keydown", o);
151
- }, [n, u, e, t]);
152
- }
153
- const L = ({
154
- children: n,
155
- isOpen: e,
156
- onOutsideClick: t,
157
- size: u = "md"
158
- }) => {
159
- const r = g(null), o = g(null);
160
- return C(e, o, r, t), D(e, o), A(e, o, r, t), /* @__PURE__ */ l.jsx(
161
- x.Provider,
162
- {
163
- value: { open: e, triggerRef: r, contentRef: o, size: u },
164
- children: n
165
- }
166
- );
167
- }, q = Object.assign(L, {
168
- Trigger: I,
169
- Content: j,
170
- Item: k
171
- });
172
- export {
173
- q as M
174
- };
@@ -1,149 +0,0 @@
1
- import { j as o, c as y } from "./index-DU1SCUkk.js";
2
- import { forwardRef as s, useEffect as d, useRef as x, useState as p } from "react";
3
- import { c as u } from "./cn-Ca4KprQ1.js";
4
- const E = s(
5
- ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx(
6
- "div",
7
- {
8
- ref: a,
9
- className: u("px-6 pt-6 pb-2 text-lg font-semibold", e),
10
- ...t
11
- }
12
- )
13
- ), k = s(
14
- ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx(
15
- "div",
16
- {
17
- ref: a,
18
- className: u("px-6 py-4 flex justify-end gap-2", e),
19
- ...t
20
- }
21
- )
22
- ), M = s(
23
- ({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx("div", { ref: a, className: u("px-6 py-2", e), ...t })
24
- ), R = s(
25
- ({ onOverlayClick: e, ...t }, a) => /* @__PURE__ */ o.jsx(
26
- "div",
27
- {
28
- ref: a,
29
- role: "presentation",
30
- tabIndex: -1,
31
- "aria-modal": "true",
32
- onClick: e,
33
- ...t
34
- }
35
- )
36
- ), N = y(
37
- "fixed inset-0 z-51 transition-opacity duration-300 bg-black/30 backdrop-blur-md flex items-center justify-center transition-opacity duration-200 ease-in-out",
38
- {
39
- variants: {
40
- placement: {
41
- top: "items-start",
42
- center: "items-center"
43
- }
44
- },
45
- defaultVariants: {
46
- placement: "center"
47
- }
48
- }
49
- ), V = y(
50
- [
51
- "bg-white rounded-lg shadow-xl relative",
52
- "flex flex-col",
53
- "outline-none",
54
- "mx-4",
55
- "transition-all duration-200 ease-in-out "
56
- ],
57
- {
58
- variants: {
59
- size: {
60
- sm: "w-[20rem] max-w-sm",
61
- // 20rem, 320px
62
- md: "w-[28rem] max-w-md",
63
- // 28rem, 448px
64
- lg: "w-[36rem] max-w-lg"
65
- // 36rem, 576px
66
- },
67
- placement: {
68
- top: "mt-4",
69
- center: ""
70
- }
71
- },
72
- defaultVariants: {
73
- size: "md",
74
- placement: "center"
75
- }
76
- }
77
- );
78
- function A(e, t) {
79
- d(() => {
80
- if (t && e.current) {
81
- const a = e.current.querySelectorAll(
82
- 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
83
- );
84
- a.length && a[0].focus();
85
- }
86
- }, [t, e]);
87
- }
88
- function F(e, t) {
89
- d(() => {
90
- if (!e) return;
91
- const a = (n) => {
92
- n.key === "Escape" && t();
93
- };
94
- return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
95
- }, [e, t]);
96
- }
97
- const I = 200, T = ({
98
- isOpen: e,
99
- onOpenChange: t,
100
- size: a = "md",
101
- placement: n = "center",
102
- children: v,
103
- disableOverlayClose: b,
104
- disableEscClose: w,
105
- ...j
106
- }) => {
107
- const r = x(null), i = x(null), [g, m] = p(e), [f, c] = p(!1);
108
- return d(() => {
109
- if (e)
110
- m(!0), c(!1), r.current = document.activeElement;
111
- else if (g) {
112
- c(!0);
113
- const l = setTimeout(() => {
114
- m(!1), c(!1), r.current && r.current.focus();
115
- }, I);
116
- return () => clearTimeout(l);
117
- }
118
- }, [e]), F(e && !w, () => {
119
- t && t(!1);
120
- }), A(i, e), /* @__PURE__ */ o.jsx(
121
- R,
122
- {
123
- ref: i,
124
- className: `${N({ placement: n })} transition-opacity duration-200 ease-in-out ` + (e && !f ? "opacity-100" : "opacity-0 pointer-events-none"),
125
- onOverlayClick: (l) => {
126
- l.target === i.current && !b && t && t(!1);
127
- },
128
- placement: n,
129
- children: /* @__PURE__ */ o.jsx(
130
- "div",
131
- {
132
- className: `${V({ size: a, placement: n })} transition-all duration-200 ease-in-out ` + (e && !f ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
133
- role: "dialog",
134
- ...j,
135
- tabIndex: 0,
136
- "aria-hidden": !e,
137
- children: v
138
- }
139
- )
140
- }
141
- );
142
- }, B = Object.assign(T, {
143
- Header: E,
144
- Body: M,
145
- Footer: k
146
- });
147
- export {
148
- B as M
149
- };
@@ -1,173 +0,0 @@
1
- import { c as m, j as r } from "./index-DU1SCUkk.js";
2
- import f, { createContext as k, useContext as w } from "react";
3
- import { c as h } from "./cn-Ca4KprQ1.js";
4
- const y = m("space-y-2", {
5
- variants: {
6
- direction: {
7
- vertical: "space-y-2 space-x-0",
8
- horizontal: "flex flex-wrap gap-4 space-y-0"
9
- }
10
- },
11
- defaultVariants: {
12
- direction: "vertical"
13
- }
14
- }), v = m(
15
- "relative h-4 w-4 rounded-full border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
16
- {
17
- variants: {
18
- variant: {
19
- // Core variants using Versaur color system
20
- primary: "border-coral/40 checked:bg-coral checked:border-coral focus:ring-coral/20",
21
- secondary: "border-sage/40 checked:bg-sage checked:border-sage focus:ring-sage/20",
22
- tertiary: "border-mist/40 checked:bg-mist checked:border-mist focus:ring-mist/20",
23
- ghost: "border-slate/40 checked:bg-slate checked:border-slate focus:ring-slate/20",
24
- neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
25
- // Outline variants
26
- "primary-outline": "border-coral checked:bg-white checked:border-coral focus:ring-coral/20",
27
- "secondary-outline": "border-sage checked:bg-white checked:border-sage focus:ring-sage/20",
28
- "tertiary-outline": "border-mist checked:bg-white checked:border-mist focus:ring-mist/20",
29
- "ghost-outline": "border-slate checked:bg-white checked:border-slate focus:ring-slate/20",
30
- "neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
31
- // Semantic variants
32
- success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
33
- "success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
34
- info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
35
- "info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
36
- warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
37
- "warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
38
- danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
39
- "danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
40
- },
41
- size: {
42
- sm: "h-3 w-3",
43
- md: "h-4 w-4",
44
- lg: "h-5 w-5"
45
- }
46
- },
47
- defaultVariants: {
48
- variant: "primary",
49
- size: "md"
50
- }
51
- }
52
- ), j = m(
53
- "text-foreground cursor-pointer select-none",
54
- {
55
- variants: {
56
- size: {
57
- sm: "text-xs",
58
- md: "text-sm",
59
- lg: "text-base"
60
- },
61
- disabled: {
62
- true: "opacity-50 cursor-not-allowed",
63
- false: ""
64
- }
65
- },
66
- defaultVariants: {
67
- size: "md",
68
- disabled: !1
69
- }
70
- }
71
- ), x = k(
72
- null
73
- ), z = () => {
74
- const o = w(x);
75
- if (!o)
76
- throw new Error(
77
- "useRadioInputContext must be used within RadioInputContext"
78
- );
79
- return o;
80
- }, R = f.forwardRef(
81
- ({ children: o, description: c, className: a, disabled: i, id: n, value: l, ...b }, g) => {
82
- const e = z(), u = f.useId(), d = n || u, t = i || e.disabled, s = e.error ? "danger" : e.variant || "primary";
83
- return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
84
- /* @__PURE__ */ r.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ r.jsx(
85
- "input",
86
- {
87
- ref: g,
88
- type: "radio",
89
- id: d,
90
- name: e.name,
91
- value: l,
92
- disabled: t,
93
- className: h(
94
- v({
95
- variant: s,
96
- size: e.size
97
- }),
98
- // Custom radio dot styling using ::before - centered positioning with size variants
99
- 'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-white before:opacity-0 before:transition-opacity before:duration-200',
100
- // Size-specific radio dot dimensions
101
- e.size === "sm" && "before:w-[6px] before:h-[6px]",
102
- e.size === "md" && "before:w-[8px] before:h-[8px]",
103
- e.size === "lg" && "before:w-[10px] before:h-[10px]",
104
- "checked:before:opacity-100",
105
- // Outline variants use colored radio dot
106
- s?.includes("outline") && "checked:before:bg-current",
107
- a
108
- ),
109
- ...b
110
- }
111
- ) }),
112
- /* @__PURE__ */ r.jsxs("div", { className: "flex-1", children: [
113
- /* @__PURE__ */ r.jsx(
114
- "label",
115
- {
116
- htmlFor: d,
117
- className: j({
118
- size: e.size,
119
- disabled: t
120
- }),
121
- children: o
122
- }
123
- ),
124
- c && /* @__PURE__ */ r.jsx(
125
- "div",
126
- {
127
- className: h(
128
- "text-gray-600 mt-1",
129
- e.size === "sm" && "text-xs",
130
- e.size === "md" && "text-xs",
131
- e.size === "lg" && "text-sm",
132
- t && "opacity-50"
133
- ),
134
- children: c
135
- }
136
- )
137
- ] })
138
- ] });
139
- }
140
- ), N = f.forwardRef(
141
- ({
142
- variant: o = "primary",
143
- size: c = "md",
144
- label: a,
145
- helperText: i,
146
- error: n,
147
- direction: l = "vertical",
148
- className: b,
149
- disabled: g,
150
- name: e,
151
- children: u,
152
- ...d
153
- }, t) => {
154
- const s = !!n, p = {
155
- variant: o,
156
- size: c,
157
- disabled: g,
158
- error: s,
159
- name: e
160
- };
161
- return /* @__PURE__ */ r.jsx(x.Provider, { value: p, children: /* @__PURE__ */ r.jsxs("div", { ref: t, className: h("w-full", b), ...d, children: [
162
- a && /* @__PURE__ */ r.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: a }),
163
- /* @__PURE__ */ r.jsx("div", { className: y({ direction: l }), children: u }),
164
- s && /* @__PURE__ */ r.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
165
- !s && i && /* @__PURE__ */ r.jsx("div", { className: "mt-2 text-sm text-gray-600", children: i })
166
- ] }) });
167
- }
168
- ), O = Object.assign(N, {
169
- Option: R
170
- });
171
- export {
172
- O as R
173
- };