prometeo-design-system 4.2.0 → 4.2.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 (5) hide show
  1. package/dist/Avatar.es.js +19 -19
  2. package/dist/CardProfile.es.js +125 -112
  3. package/dist/components/Avatar/Avatar.d.ts +1 -2
  4. package/dist/components/CardProfile/CardProfile.d.ts +7 -4
  5. package/package.json +1 -1
package/dist/Avatar.es.js CHANGED
@@ -1,13 +1,13 @@
1
- import { j as e } from "./jsx-runtime-GkKLlHH4.js";
1
+ import { j as t } from "./jsx-runtime-GkKLlHH4.js";
2
2
  import { g as v } from "./useLabelBackground-BDIHUdND.js";
3
- import { c as n } from "./cn-B6yFEsav.js";
3
+ import { c as x } from "./cn-B6yFEsav.js";
4
4
  import { useState as C, useRef as u, useLayoutEffect as N } from "react";
5
- import { UserAvatar as S } from "./Icons/UserAvatar.es.js";
5
+ import { UserAvatar as y } from "./Icons/UserAvatar.es.js";
6
6
  function I({
7
7
  imageUrl: s,
8
- sizeImage: x = "md",
9
- sizeFallback: t = "md",
10
- fallbackText: d = "Selene Soluciones",
8
+ sizeImage: n = "md",
9
+ sizeFallback: e = "md",
10
+ fallbackText: d = "",
11
11
  subImageUrl: i,
12
12
  fallbackType: c = "initials"
13
13
  }) {
@@ -35,50 +35,50 @@ function I({
35
35
  md: "w-12 h-12 border-3",
36
36
  lg: "w-16 h-16 border-4",
37
37
  xl: "w-20 h-20 border-5"
38
- }, b = m ? x : t, o = u(null), l = u(null);
38
+ }, b = m ? n : e, o = u(null), l = u(null);
39
39
  return N(() => {
40
40
  if (!o.current || !l.current) return;
41
41
  const a = v(o.current);
42
42
  l.current.style.borderColor = a;
43
- }, []), /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: o, children: [
44
- m ? /* @__PURE__ */ e.jsx(
43
+ }, []), /* @__PURE__ */ t.jsxs("div", { className: "relative inline-block min-w-max ", ref: o, children: [
44
+ m ? /* @__PURE__ */ t.jsx(
45
45
  "img",
46
46
  {
47
47
  onError: () => {
48
48
  h(!0);
49
49
  },
50
50
  src: s,
51
- className: `rounded-full object-cover ${r[x]}`,
51
+ className: `rounded-full object-cover ${r[n]}`,
52
52
  alt: "Profile",
53
53
  draggable: !1
54
54
  }
55
- ) : c === "initials" ? /* @__PURE__ */ e.jsx(
55
+ ) : c === "initials" ? /* @__PURE__ */ t.jsx(
56
56
  "div",
57
57
  {
58
- className: ` flex items-center justify-center rounded-full aspect-square ${r[t]}`,
58
+ className: ` flex items-center justify-center rounded-full aspect-square ${r[e]}`,
59
59
  style: { backgroundColor: "#C6D2FF" },
60
- children: /* @__PURE__ */ e.jsx(
60
+ children: /* @__PURE__ */ t.jsx(
61
61
  "span",
62
62
  {
63
- className: n(
63
+ className: x(
64
64
  "text-[#312C85] font-semibold",
65
- p[t]
65
+ p[e]
66
66
  ),
67
67
  children: g(d)
68
68
  }
69
69
  )
70
70
  },
71
71
  "initials"
72
- ) : c === "defaultAvatar" && /* @__PURE__ */ e.jsx(S, { className: n(r[t], "fill-[#D4D4D8]") }),
73
- i && /* @__PURE__ */ e.jsx(
72
+ ) : c === "defaultAvatar" && /* @__PURE__ */ t.jsx(y, { className: x(r[e], "fill-[#D4D4D8] text-(--neutral-700)") }),
73
+ i && /* @__PURE__ */ t.jsx(
74
74
  "div",
75
75
  {
76
- className: n(
76
+ className: x(
77
77
  "absolute bottom-[-10px] right-[-10px] rounded-full border overflow-hidden bg-gray-900",
78
78
  w[b]
79
79
  ),
80
80
  ref: l,
81
- children: /* @__PURE__ */ e.jsx(
81
+ children: /* @__PURE__ */ t.jsx(
82
82
  "img",
83
83
  {
84
84
  draggable: !1,
package/dist/CardProfile.es.js CHANGED
@@ -1,42 +1,43 @@
1
1
  import { j as e } from "./jsx-runtime-GkKLlHH4.js";
2
- import { c as i } from "./cn-B6yFEsav.js";
3
- import { motion as l, AnimatePresence as c } from "framer-motion";
4
- import u from "./Avatar.es.js";
5
- import { ChevronDown as f } from "./Icons/ChevronDown.es.js";
6
- import { Logout as m } from "./Icons/Logout.es.js";
7
- function x({
2
+ import { c as n } from "./cn-B6yFEsav.js";
3
+ import { motion as i, AnimatePresence as h } from "framer-motion";
4
+ import { isValidElement as j } from "react";
5
+ import g from "./Avatar.es.js";
6
+ import { ChevronDown as v } from "./Icons/ChevronDown.es.js";
7
+ import { Logout as b } from "./Icons/Logout.es.js";
8
+ function y({
8
9
  sessions: t,
9
- handleTokenLogin: a
10
+ handleTokenLogin: r
10
11
  }) {
11
- return /* @__PURE__ */ e.jsx("div", { className: "profile-options-container w-full ", children: t?.map((r) => /* @__PURE__ */ e.jsx(
12
+ return /* @__PURE__ */ e.jsx("div", { className: "profile-options-container w-full ", children: t?.map((a) => /* @__PURE__ */ e.jsx(
12
13
  "button",
13
14
  {
14
15
  className: "w-full ",
15
- onClick: () => a?.(r.token),
16
- children: /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(
17
- o.Content,
16
+ onClick: () => r?.(a.token),
17
+ children: /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsx(
18
+ s.Content,
18
19
  {
19
20
  onClick: () => {
20
21
  console.log("hola");
21
22
  },
22
23
  isExpanded: !1,
23
- nameUser: r.name,
24
- nameArea: r?.areaId?.name,
25
- nameCompany: r.companyId.name,
26
- cardProfile: /* @__PURE__ */ e.jsx(o.Image, { isExpanded: !1 })
24
+ nameUser: a.name,
25
+ nameArea: a?.areaId?.name,
26
+ nameCompany: a.companyId.name,
27
+ cardProfile: /* @__PURE__ */ e.jsx(s.Image, { isExpanded: !1 })
27
28
  }
28
29
  ) })
29
30
  },
30
- r._id
31
+ a._id
31
32
  )) });
32
33
  }
33
- const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profile-container flex gap-0.5 overflow-hidden w-full min-w-0 ", children: t }), p = ({
34
+ const w = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profile-container flex gap-0.5 overflow-hidden w-full min-w-0 ", children: t }), N = ({
34
35
  isExpanded: t,
35
- sessions: a,
36
- onClickLogout: r,
37
- handleTokenLogin: n
38
- }) => /* @__PURE__ */ e.jsx(c, { mode: "wait", children: t && /* @__PURE__ */ e.jsxs(
39
- l.div,
36
+ sessions: r,
37
+ onClickLogout: a,
38
+ handleTokenLogin: d
39
+ }) => /* @__PURE__ */ e.jsx(h, { mode: "wait", children: t && /* @__PURE__ */ e.jsxs(
40
+ i.div,
40
41
  {
41
42
  initial: { height: 0, opacity: 0 },
42
43
  animate: {
@@ -62,7 +63,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
62
63
  className: "overflow-hidden",
63
64
  children: [
64
65
  /* @__PURE__ */ e.jsx(
65
- l.div,
66
+ i.div,
66
67
  {
67
68
  className: "flex justify-center items-center w-full mt-4",
68
69
  exit: {
@@ -78,9 +79,9 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
78
79
  children: /* @__PURE__ */ e.jsx("div", { className: "border-b border-neutral-strong-default border w-full" })
79
80
  }
80
81
  ),
81
- a && a.length > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
82
+ r && r.length > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
82
83
  /* @__PURE__ */ e.jsx(
83
- l.div,
84
+ i.div,
84
85
  {
85
86
  className: "mt-4",
86
87
  exit: {
@@ -97,7 +98,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
97
98
  }
98
99
  ),
99
100
  /* @__PURE__ */ e.jsx(
100
- l.div,
101
+ i.div,
101
102
  {
102
103
  className: "mt-4 overflow-hidden w-full ",
103
104
  exit: {
@@ -114,16 +115,16 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
114
115
  }
115
116
  },
116
117
  children: /* @__PURE__ */ e.jsx(
117
- x,
118
+ y,
118
119
  {
119
- sessions: a,
120
- handleTokenLogin: n
120
+ sessions: r,
121
+ handleTokenLogin: d
121
122
  }
122
123
  )
123
124
  }
124
125
  ),
125
126
  /* @__PURE__ */ e.jsx(
126
- l.div,
127
+ i.div,
127
128
  {
128
129
  className: "flex justify-center items-center w-full mt-4",
129
130
  exit: {
@@ -141,9 +142,9 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
141
142
  )
142
143
  ] }),
143
144
  /* @__PURE__ */ e.jsxs(
144
- l.button,
145
+ i.button,
145
146
  {
146
- onClick: r,
147
+ onClick: a,
147
148
  className: "flex flex-1 h-12 w-full gap-1 rounded-md cursor-pointer mt-4 mb-4 px-2 items-center overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile",
148
149
  exit: {
149
150
  opacity: 0,
@@ -162,95 +163,107 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
162
163
  },
163
164
  whileTap: { scale: 0.98 },
164
165
  children: [
165
- /* @__PURE__ */ e.jsx(m, { size: 24, className: "text-neutral-default-default" }),
166
+ /* @__PURE__ */ e.jsx(b, { size: 24, className: "text-neutral-default-default" }),
166
167
  /* @__PURE__ */ e.jsx("span", { className: "text-neutral-default-default font-semibold text-sm", children: "Cerrar sesión" })
167
168
  ]
168
169
  }
169
170
  )
170
171
  ]
171
172
  }
172
- ) }), g = ({ imageUrl: t, fallbackText: a }) => /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center profile-image-wrapper", children: /* @__PURE__ */ e.jsx(
173
- u,
173
+ ) }), I = ({ imageUrl: t, fallbackText: r, avatarProps: a }) => /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center profile-image-wrapper", children: /* @__PURE__ */ e.jsx(
174
+ g,
174
175
  {
175
- subImageUrl: t,
176
176
  imageUrl: t,
177
177
  sizeImage: "xxs",
178
178
  sizeFallback: "xxs",
179
- fallbackText: a
179
+ fallbackText: r,
180
+ ...a
180
181
  }
181
- ) }), j = ({
182
+ ) }), O = ({
182
183
  isExpanded: t,
183
- nameUser: a,
184
- nameCompany: r,
185
- nameArea: n,
186
- cardProfile: s,
187
- onClick: d
188
- }) => /* @__PURE__ */ e.jsxs(
189
- l.button,
190
- {
191
- onClick: d,
192
- className: i(
193
- "flex flex-1 gap-2 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile h-max p-3",
194
- t && "bg-neutral-medium-selected"
195
- ),
196
- whileHover: {
197
- opacity: 1,
198
- scale: [1, 1.02, 1]
199
- },
200
- whileTap: { scale: 0.98 },
201
- transition: { duration: 0.2, ease: "easeInOut" },
202
- children: [
203
- s,
204
- /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center overflow-hidden flex-1 relative z-10 profile-user-info mr-2 p-0", children: [
205
- /* @__PURE__ */ e.jsx(
206
- "p",
207
- {
208
- className: i(
209
- "profile-name font-semibold leading-tight mb-0 text-left",
210
- t ? "text-primary-default-default" : "text-neutral-default-default"
211
- ),
212
- children: a?.length && a?.length > 20 ? a?.slice(0, 10) + ".." : a
213
- }
214
- ),
215
- /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1 mt-0 ", children: r && r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
216
- /* @__PURE__ */ e.jsx(
217
- "p",
218
- {
219
- className: i(
220
- "profile-options truncate text-xs mt-0",
221
- t ? "text-primary-default-default" : "text-neutral-default-default"
222
- ),
223
- children: r?.length && r?.length > 20 ? r?.slice(0, 10) + ".." : r
224
- }
225
- ),
184
+ nameUser: r,
185
+ nameCompany: a,
186
+ nameArea: d,
187
+ cardProfile: o,
188
+ onClick: u,
189
+ unassigned: l = !1
190
+ }) => {
191
+ const m = () => {
192
+ if (o && j(o) && o.type === s.Image) {
193
+ const c = o.props, f = l ? "" : c.fallbackText || r, x = l ? "" : c.imageUrl, p = l ? "defaultAvatar" : "initials";
194
+ return /* @__PURE__ */ e.jsx(s.Image, { ...c, fallbackText: f, avatarProps: { ...c.avatarProps, fallbackType: p, imageUrl: x } });
195
+ }
196
+ return o;
197
+ };
198
+ return /* @__PURE__ */ e.jsxs(
199
+ i.button,
200
+ {
201
+ onClick: u,
202
+ className: n(
203
+ "flex flex-1 gap-2 rounded-lg relative overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile h-max p-3",
204
+ t && "bg-neutral-medium-selected",
205
+ u && "cursor-pointer",
206
+ l && "hover:bg-transparent"
207
+ ),
208
+ whileTap: l ? void 0 : u && { scale: 0.98 },
209
+ transition: { duration: 0.2, ease: "easeInOut" },
210
+ children: [
211
+ m(),
212
+ /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center overflow-hidden flex-1 relative z-10 profile-user-info mr-2 p-0", children: [
226
213
  /* @__PURE__ */ e.jsx(
227
214
  "p",
228
215
  {
229
- className: i(
230
- "profile-options truncate font-bold mt-0",
231
- t ? "text-primary-default-default" : "text-neutral-default-default"
216
+ className: n(
217
+ "profile-name prometeo-fonts-label-large mb-0 text-left",
218
+ t ? "text-primary-default-default" : "text-neutral-default-default",
219
+ l && "text-neutral-default-pressed"
232
220
  ),
233
- children: "·"
221
+ children: l ? "Sin asignar" : r?.length && r?.length > 20 ? r?.slice(0, 10) + ".." : r
234
222
  }
235
223
  ),
236
- /* @__PURE__ */ e.jsx(
237
- "p",
238
- {
239
- className: i(
240
- "profile-options truncate text-xs mt-0",
241
- t ? "text-primary-default-default" : "text-neutral-default-default"
242
- ),
243
- children: n || "Sin asignar"
244
- }
245
- )
246
- ] }) : /* @__PURE__ */ e.jsx("span", { className: "font-semibold leading-tight ml-3 text-xs text-blue-300 text-center", children: "Sin asignar" }) })
247
- ] })
248
- ]
249
- }
250
- ), v = () => /* @__PURE__ */ e.jsx("div", { className: "w-px bg-gray-500/30 my-1 border-separator-profile" }), y = ({ isExpanded: t, onClick: a }) => /* @__PURE__ */ e.jsx(
251
- l.button,
224
+ /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1 mt-0 ", children: a && a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
225
+ /* @__PURE__ */ e.jsx(
226
+ "p",
227
+ {
228
+ className: n(
229
+ "profile-options truncate mt-0 prometeo-fonts-body-small",
230
+ t ? "text-primary-default-default" : "text-neutral-default-default",
231
+ l && "text-neutral-default-pressed"
232
+ ),
233
+ children: a?.length && a?.length > 20 ? a?.slice(0, 10) + ".." : a
234
+ }
235
+ ),
236
+ /* @__PURE__ */ e.jsx(
237
+ "p",
238
+ {
239
+ className: n(
240
+ "profile-options truncate prometeo-fonts-body-small mt-0",
241
+ t ? "text-primary-default-default" : "text-neutral-default-default",
242
+ l && "text-neutral-default-pressed"
243
+ ),
244
+ children: "·"
245
+ }
246
+ ),
247
+ /* @__PURE__ */ e.jsx(
248
+ "p",
249
+ {
250
+ className: n(
251
+ "profile-options truncate prometeo-fonts-body-small mt-0",
252
+ t ? "text-primary-default-default" : "text-neutral-default-default",
253
+ l && "text-neutral-default-pressed"
254
+ ),
255
+ children: d || "Sin asignar"
256
+ }
257
+ )
258
+ ] }) : /* @__PURE__ */ e.jsx("span", { className: "font-semibold leading-tight ml-3 text-xs text-blue-300 text-center", children: "Sin asignar" }) })
259
+ ] })
260
+ ]
261
+ }
262
+ );
263
+ }, C = () => /* @__PURE__ */ e.jsx("div", { className: "w-px bg-gray-500/30 my-1 border-separator-profile" }), k = ({ isExpanded: t, onClick: r }) => /* @__PURE__ */ e.jsx(
264
+ i.button,
252
265
  {
253
- onClick: a,
266
+ onClick: r,
254
267
  className: "flex items-center justify-center p-3 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none w-8 min-w-8 hover:bg-neutral-medium-selected button-content-chevron",
255
268
  whileHover: { scale: 1.05 },
256
269
  whileTap: { scale: 0.95 },
@@ -258,23 +271,23 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
258
271
  title: t ? "Ocultar opciones" : "Mostrar opciones",
259
272
  "aria-label": t ? "Ocultar opciones" : "Mostrar opciones",
260
273
  children: /* @__PURE__ */ e.jsx(
261
- l.div,
274
+ i.div,
262
275
  {
263
276
  animate: { rotate: t ? 180 : 0 },
264
277
  transition: { duration: 0.3, ease: "easeOut" },
265
278
  className: "relative button-select-crevron",
266
- children: /* @__PURE__ */ e.jsx(l.div, { transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(f, { size: 24, className: "text-prometeo-neutral " }) })
279
+ children: /* @__PURE__ */ e.jsx(i.div, { transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(v, { size: 24, className: "text-prometeo-neutral " }) })
267
280
  }
268
281
  )
269
282
  }
270
- ), o = Object.assign(h, {
271
- Menu: p,
272
- Image: g,
273
- Content: j,
274
- Separator: v,
275
- Options: y
283
+ ), s = Object.assign(w, {
284
+ Menu: N,
285
+ Image: I,
286
+ Content: O,
287
+ Separator: C,
288
+ Options: k
276
289
  });
277
290
  export {
278
- o as CardProfile,
279
- o as default
291
+ s as CardProfile,
292
+ s as default
280
293
  };
package/dist/components/Avatar/Avatar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type SizeVariant = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
2
- interface IAvatar {
2
+ export interface IAvatar {
3
3
  imageUrl?: string;
4
4
  sizeImage?: SizeVariant;
5
5
  sizeFallback?: SizeVariant;
@@ -9,4 +9,3 @@ interface IAvatar {
9
9
  fallbackType?: "initials" | "defaultAvatar";
10
10
  }
11
11
  export default function Avatar({ imageUrl, sizeImage, sizeFallback, fallbackText, subImageUrl, fallbackType, }: IAvatar): import("react/jsx-runtime").JSX.Element;
12
- export {};
package/dist/components/CardProfile/CardProfile.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { IAvatar as AvatarProps } from '../Avatar/Avatar';
2
3
  interface ICardProfile {
3
4
  children: ReactNode;
4
5
  dropMenu?: ReactNode;
@@ -29,9 +30,10 @@ interface IDropMenu {
29
30
  handleTokenLogin: () => void;
30
31
  }
31
32
  interface ICardProfileImage {
32
- isExpanded: boolean;
33
+ isExpanded?: boolean;
33
34
  imageUrl?: string;
34
35
  fallbackText?: string;
36
+ avatarProps?: AvatarProps;
35
37
  }
36
38
  interface ICardProfileContent {
37
39
  isExpanded: boolean;
@@ -39,7 +41,8 @@ interface ICardProfileContent {
39
41
  nameCompany: string;
40
42
  nameArea: string;
41
43
  cardProfile: ReactNode;
42
- onClick: () => void;
44
+ onClick?: () => void;
45
+ unassigned?: boolean;
43
46
  }
44
47
  interface ICardProfileOptions {
45
48
  onClick: () => void;
@@ -47,8 +50,8 @@ interface ICardProfileOptions {
47
50
  }
48
51
  export declare const CardProfile: (({ children }: ICardProfile) => import("react/jsx-runtime").JSX.Element) & {
49
52
  Menu: ({ isExpanded, sessions, onClickLogout, handleTokenLogin, }: IDropMenu) => import("react/jsx-runtime").JSX.Element;
50
- Image: ({ imageUrl, fallbackText }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
51
- Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
53
+ Image: ({ imageUrl, fallbackText, avatarProps }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
54
+ Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, unassigned }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
52
55
  Separator: () => import("react/jsx-runtime").JSX.Element;
53
56
  Options: ({ isExpanded, onClick }: ICardProfileOptions) => import("react/jsx-runtime").JSX.Element;
54
57
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "prometeo-design-system",
3
3
  "private": false,
4
- "version": "4.2.0",
4
+ "version": "4.2.1",
5
5
  "type": "module",
6
6
  "description": "design kit system",
7
7
  "main": "dist/prometeo-design-system.umd.js",