prometeo-design-system 2.7.0 → 2.7.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 (39) hide show
  1. package/dist/Avatar.es.js +72 -33
  2. package/dist/Button.es.js +398 -2
  3. package/dist/DatePicker.es.js +2 -2
  4. package/dist/DrawerDesktop.es.js +31 -30
  5. package/dist/FAButton.es.js +69 -18
  6. package/dist/Header.es.js +14 -14
  7. package/dist/Icons/Icons.d.ts +5 -0
  8. package/dist/Icons.es.js +432 -330
  9. package/dist/{ImageGallery-DKzJg3un.js → ImageGallery-D8nIvBpV.js} +7 -7
  10. package/dist/ImageGallery.es.js +1 -1
  11. package/dist/Input-CnXDg2s7.js +253 -0
  12. package/dist/Input.es.js +1 -1
  13. package/dist/InputFormikV2.es.js +30 -18
  14. package/dist/ProgressBar.es.js +63 -35
  15. package/dist/{Select-BQMdfu1n.js → Select-CiaBY4E0.js} +332 -235
  16. package/dist/Select.es.js +1 -1
  17. package/dist/SelectFormik.es.js +21 -20
  18. package/dist/SelectSearch.es.js +1 -1
  19. package/dist/Switch.es.js +4 -4
  20. package/dist/Toast.es.js +1 -1
  21. package/dist/components/Avatar/Avatar.d.ts +9 -4
  22. package/dist/components/Button/Button.d.ts +8 -14
  23. package/dist/components/Button/Button_Legacy.d.ts +29 -0
  24. package/dist/components/Input/Input.d.ts +7 -10
  25. package/dist/components/ProgressBar/ProgressBar.d.ts +13 -3
  26. package/dist/components/RecurrentDatePicker/CustomFrequencySettings.d.ts +5 -5
  27. package/dist/components/Select/Select.d.ts +5 -5
  28. package/dist/exports/ProgressBar.d.ts +1 -1
  29. package/dist/index-BOQuZ0gG.js +34 -0
  30. package/dist/index.d.ts +1 -3
  31. package/dist/prometeo-design-system.css +1 -1
  32. package/dist/prometeo-design-system.es.js +19 -21
  33. package/package.json +1 -5
  34. package/dist/Button-CvBWH1HX.js +0 -183
  35. package/dist/ButtonV2.d.ts +0 -6
  36. package/dist/ButtonV2.es.js +0 -217
  37. package/dist/Input-BTsR-vNF.js +0 -281
  38. package/dist/components/Button/ButtonV2.d.ts +0 -23
  39. package/dist/exports/ButtonV2.d.ts +0 -2
@@ -1,281 +0,0 @@
1
- import { j as e } from "./jsx-runtime-DKDX3adD.js";
2
- import { Icons as H } from "./Icons.es.js";
3
- import { c as r } from "./cn-B6yFEsav.js";
4
- import { useRef as T, useLayoutEffect as ge, memo as xe, forwardRef as be, useState as V, useCallback as he, useEffect as v } from "react";
5
- import { useDebounce as we } from "use-debounce";
6
- import ye from "./Spinner.es.js";
7
- import { H as je } from "./HelperComponent-U6mPwuDH.js";
8
- import Ce from "./ButtonV2.es.js";
9
- const ze = (o) => {
10
- let t = o;
11
- for (; t && t !== document.body; ) {
12
- const l = window.getComputedStyle(t).backgroundColor;
13
- if (l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)")
14
- return l;
15
- t = t.parentElement;
16
- }
17
- const s = window.getComputedStyle(document.body).backgroundColor;
18
- return s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)" ? s : "rgb(255, 255, 255)";
19
- };
20
- function Ne() {
21
- const o = T(null);
22
- return ge(() => {
23
- if (!o.current || !o.current.parentElement) return;
24
- const t = ze(o.current.parentElement);
25
- o.current.style.backgroundColor = t;
26
- }, []), {
27
- ref: o
28
- };
29
- }
30
- const b = {
31
- default: {
32
- container: "",
33
- input: r(
34
- "border-neutral-default-default text-neutral-default-default!",
35
- "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
36
- "hover:border-neutral-strong-default"
37
- ),
38
- label: r(
39
- "text-neutral-medium-default"
40
- ),
41
- icon: r(
42
- "text-neutral-medium-default",
43
- "peer-focus:text-primary-default-default"
44
- )
45
- },
46
- error: {
47
- container: "",
48
- input: r(
49
- "border-error-default-default text-neutral-default-default",
50
- "focus:border-error-default focus:border-2",
51
- "focus:ring-0 focus:ring-error-default/20"
52
- ),
53
- label: r(
54
- "text-lime-500",
55
- "peer-focus:text-error-light"
56
- ),
57
- icon: r(
58
- "text-error-light",
59
- "peer-focus:text-error-light"
60
- )
61
- },
62
- success: {
63
- container: "",
64
- input: r(
65
- "border-success-default-default text-neutral-default-default",
66
- "focus:border-success-default focus:border-2",
67
- "focus:ring-0 focus:ring-success-default/20"
68
- ),
69
- label: r(
70
- "text-success",
71
- "peer-focus:text-success-light"
72
- ),
73
- icon: r(
74
- "text-success-light",
75
- "peer-focus:text-success-light"
76
- )
77
- }
78
- }, F = be(({
79
- label: o,
80
- icon: t,
81
- iconPosition: s = "left",
82
- onChange: h,
83
- value: l = "",
84
- debounceMs: p = 0,
85
- name: w,
86
- width: g = "100%",
87
- height: c,
88
- variant: f = "default",
89
- labelVariant: a = "default",
90
- size: G = "medium",
91
- disabled: x = !1,
92
- type: n = "text",
93
- isFetching: d,
94
- errorComponent: y,
95
- helperComponent: j,
96
- placeholder: J,
97
- required: B = !1,
98
- onFocus: K,
99
- onBlur: Q,
100
- onEmptied: $,
101
- onKeyDown: U,
102
- onKeyUp: W,
103
- className: X,
104
- isActive: C,
105
- style: Y,
106
- readOnly: Z = !1,
107
- onClear: L,
108
- ..._
109
- }, q) => {
110
- const [z, P] = V(l), [N] = we(z, p), [I, A] = V(!1), { ref: M } = Ne(), ee = T(null), E = q || null || ee;
111
- let i = G;
112
- c && (i = "customHeight");
113
- const m = {
114
- small: {
115
- container: "text-sm",
116
- input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
117
- label: ` prometeo-fonts-label-large
118
- peer-focus:prometeo-fonts-label-large
119
- peer-placeholder-shown:${a === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
120
- icon: "w-4 h-4 right-3"
121
- },
122
- medium: {
123
- container: "text-base",
124
- input: "h-12 px-3 prometeo-fonts-body-large",
125
- label: ` prometeo-fonts-label-large
126
- peer-focus:prometeo-fonts-label-large
127
- peer-placeholder-shown:${a === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
128
- icon: "w-5 h-5 right-3"
129
- },
130
- large: {
131
- container: "text-lg",
132
- input: "h-14 px-3 text-lg border-b border-t-0 border-x-0 rounded-none focus:ring-0 prometeo-fonts-body-xlarge ",
133
- label: "peer-placeholder-shown:prometeo-fonts-body-xlarge peer-focus:prometeo-fonts-label-large peer-focus:text-neutral-medium-default prometeo-fonts-label-large ",
134
- icon: "w-6 h-6 right-3"
135
- },
136
- customHeight: {
137
- container: "text-base",
138
- input: "text-base",
139
- label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
140
- icon: "w-6 h-6 right-3"
141
- }
142
- }, D = he(h, []);
143
- v(() => {
144
- p > 0 && N !== l && D(N);
145
- }, [N, p, D, l]), v(() => {
146
- P(l);
147
- }, [l]), v(() => {
148
- C && E.current?.focus();
149
- }, [C, E.current?.focus]);
150
- const te = (u) => {
151
- K?.(u);
152
- }, re = (u) => {
153
- C === void 0 && Q?.(u);
154
- }, oe = (u) => {
155
- const k = u.target.value, ie = u.target.name, me = z;
156
- P(k), me.length > 0 && k.length === 0 && $?.(), (!p || p === 0) && h(k, ie);
157
- }, le = () => {
158
- A(!I);
159
- }, R = {};
160
- g && g !== "100%" && (R.width = g), c && (R.height = c);
161
- const O = f === "error" && y, se = !O && j, ne = n === "password", ae = () => a === "static" ? "-top-1 -translate-y-full left-0 pl-3" : t ? `peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${s === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : "peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1", ue = () => c ? m.customHeight.label : m[i].label, ce = () => c ? { height: c } : {}, fe = () => a === "default" ? o : J || o || "", pe = () => ne ? t ? s === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : t ? s === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", de = a === "default" && "transition-all duration-200 ease-in-out", S = y || j;
162
- return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(
163
- "div",
164
- {
165
- className: r(
166
- "relative",
167
- m[i].container,
168
- !g && "w-full",
169
- "bg-inherit",
170
- a === "static" && "mt-2",
171
- X
172
- ),
173
- style: { ...Y, ...R },
174
- children: [
175
- /* @__PURE__ */ e.jsx(
176
- "input",
177
- {
178
- id: w,
179
- name: w,
180
- ref: E,
181
- value: z,
182
- placeholder: fe(),
183
- type: n === "password" && I ? "text" : n,
184
- className: r(
185
- "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
186
- "focus:outline-none px-3",
187
- a === "default" && "placeholder:text-transparent",
188
- a === "static" && "placeholder:text-neutral-medium-default ",
189
- b[f].input,
190
- m[i].input,
191
- t && "pr-10",
192
- x && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
193
- b[f].container,
194
- pe()
195
- ),
196
- style: ce(),
197
- onChange: oe,
198
- onFocus: te,
199
- onBlur: re,
200
- disabled: x,
201
- required: B,
202
- onEmptied: $,
203
- onKeyDown: U,
204
- onKeyUp: W,
205
- readOnly: Z,
206
- ..._
207
- }
208
- ),
209
- /* @__PURE__ */ e.jsx(
210
- "label",
211
- {
212
- ref: M,
213
- htmlFor: w,
214
- className: r(
215
- "absolute left-3 pointer-events-none px-1 z-10",
216
- de,
217
- ue(),
218
- b[f].label,
219
- ae(),
220
- B && "after:content-['*'] after:text-error-default after:ml-1",
221
- x && "text-neutral-medium-disabled prometeo-fonts-label-large"
222
- ),
223
- children: o
224
- }
225
- ),
226
- (t || n === "password" || d) && /* @__PURE__ */ e.jsx(
227
- "button",
228
- {
229
- tabIndex: -1,
230
- type: "button",
231
- className: r(
232
- `absolute ${S ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
233
- m[i].icon,
234
- b[f].icon,
235
- n === "password" && !d ? "cursor-pointer" : "pointer-events-none",
236
- s === "right" ? "right-3" : "left-3"
237
- ),
238
- onClick: n === "password" && !d ? le : void 0,
239
- onMouseDown: (u) => n === "password" && !d && u.preventDefault(),
240
- children: /* @__PURE__ */ e.jsx("div", { children: d && n !== "password" ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(ye, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : n === "password" ? I ? /* @__PURE__ */ e.jsx(H.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ e.jsx(H.EyeVisibilityOff, { size: 24, className: "" }) : t })
241
- }
242
- ),
243
- L && /* @__PURE__ */ e.jsx(
244
- Ce,
245
- {
246
- type: "button",
247
- color: "secondary",
248
- size: "small",
249
- animate: !1,
250
- className: r(
251
- `absolute ${S ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
252
- "size-6 p-4 ",
253
- "bg-inherit",
254
- "hover:bg-transparent! p-4 rounded-full"
255
- ),
256
- label: "",
257
- disabled: x,
258
- onClick: L,
259
- variant: "text",
260
- animateIcon: !1,
261
- icon: /* @__PURE__ */ e.jsx(H.Close, { size: 20, className: "" })
262
- }
263
- ),
264
- S && /* @__PURE__ */ e.jsx("div", { className: "min-h-6", children: (O || se) && /* @__PURE__ */ e.jsx(
265
- je,
266
- {
267
- className: "absolute ",
268
- variant: f,
269
- children: y || j
270
- }
271
- ) })
272
- ]
273
- }
274
- ) });
275
- });
276
- F.displayName = "Input";
277
- const Le = xe(F);
278
- export {
279
- Le as I,
280
- Ne as u
281
- };
@@ -1,23 +0,0 @@
1
- import { ButtonVariant, ColorVariant, SizeVariant } from '../Shared/types';
2
- export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
- label?: string;
4
- onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
5
- icon?: React.ReactNode;
6
- contentClassName?: string;
7
- loadingText?: string;
8
- animate?: boolean;
9
- animateIcon?: boolean;
10
- isLoading?: boolean;
11
- children?: React.ReactNode;
12
- spinner?: React.ReactNode;
13
- type?: 'button' | "submit" | "reset";
14
- className?: string;
15
- disabled?: boolean;
16
- variant?: ButtonVariant;
17
- form?: string;
18
- size?: SizeVariant;
19
- color?: ColorVariant;
20
- hideSpinner?: boolean;
21
- }
22
- declare const _default: import('react').MemoExoticComponent<({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, children, hideSpinner, spinner, type, className, disabled, variant, form, size, color }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
23
- export default _default;
@@ -1,2 +0,0 @@
1
- export { default } from '../components/Button/ButtonV2';
2
- export type { ButtonProps } from '../components/Button/ButtonV2';