lawgic-dev-kit 0.18.4 → 0.19.0
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.
- package/dist/_virtual/index2.js +3 -2
- package/dist/_virtual/index3.js +3 -3
- package/dist/_virtual/index4.js +5 -3
- package/dist/_virtual/index5.js +2 -5
- package/dist/_virtual/index6.js +2 -2
- package/dist/_virtual/index7.js +2 -2
- package/dist/components/atoms/Pill/Pill.d.ts +8 -0
- package/dist/components/atoms/Pill/Pill.js +31 -0
- package/dist/components/atoms/Pill/index.d.ts +1 -0
- package/dist/components/atoms/Tab/Tab.d.ts +1 -1
- package/dist/components/atoms/Tab/Tab.js +19 -14
- package/dist/components/atoms/Tab/Tab.types.d.ts +3 -2
- package/dist/components/atoms/index.d.ts +1 -0
- package/dist/components/molecules/AutocompleteInput/AutocompleteInput.js +128 -119
- package/dist/components/molecules/AutocompleteInput/AutocompleteInput.types.d.ts +3 -0
- package/dist/components/molecules/PillsContainer/PillsContainer.d.ts +6 -0
- package/dist/components/molecules/PillsContainer/PillsContainer.js +60 -0
- package/dist/components/molecules/PillsContainer/index.d.ts +1 -0
- package/dist/components/molecules/Tabs/Tabs.d.ts +3 -2
- package/dist/components/molecules/Tabs/Tabs.js +13 -10
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.js +67 -63
- package/dist/lawgic-dev-kit.css +1 -1
- package/dist/lawgic-dev-kit.umd.js +54 -54
- package/dist/node_modules/@fortawesome/pro-light-svg-icons/index.js +27 -17
- package/dist/node_modules/@fortawesome/pro-regular-svg-icons/index.js +6 -1
- package/dist/node_modules/prop-types/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/node_modules/toposort/index.js +1 -1
- package/dist/node_modules/yup/index.esm.js +3 -3
- package/package.json +1 -1
- package/dist/src/components/atoms/LoadingProgress/LoadingProgress.d.ts +0 -13
- package/dist/src/components/atoms/TextInput/TextInput.d.ts +0 -5
- package/dist/src/components/atoms/TextInput/TextInput.types.d.ts +0 -13
- package/dist/src/components/atoms/UncontrolledTextInput/UncontrolledTextInput.types.d.ts +0 -14
- package/dist/src/components/atoms/UploadContainer/UploadContainer.types.d.ts +0 -37
package/dist/_virtual/index2.js
CHANGED
package/dist/_virtual/index3.js
CHANGED
package/dist/_virtual/index4.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as r } from "../node_modules/toposort/index.js";
|
|
3
|
+
var t = r();
|
|
4
|
+
const s = /* @__PURE__ */ o(t);
|
|
3
5
|
export {
|
|
4
|
-
|
|
6
|
+
s as default
|
|
5
7
|
};
|
package/dist/_virtual/index5.js
CHANGED
package/dist/_virtual/index6.js
CHANGED
package/dist/_virtual/index7.js
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
+
import { FontAwesomeIcon as n } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
|
|
3
|
+
import { faX as l } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
|
|
4
|
+
const p = ({
|
|
5
|
+
label: s,
|
|
6
|
+
onClick: o,
|
|
7
|
+
onRemove: t,
|
|
8
|
+
readOnly: r
|
|
9
|
+
}) => /* @__PURE__ */ e.jsxs(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
className: "flex justify-between items-center gap-10 bg-[#DEE6F7] rounded-[4px] p-8 text-14",
|
|
13
|
+
onClick: o,
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ e.jsx("span", { className: "text-blue-500 font-semibold text-nowrap text-ellipsis overflow-hidden", children: s }),
|
|
16
|
+
!r && t && /* @__PURE__ */ e.jsx(
|
|
17
|
+
"button",
|
|
18
|
+
{
|
|
19
|
+
onClick: (i) => {
|
|
20
|
+
t(), i.stopPropagation();
|
|
21
|
+
},
|
|
22
|
+
className: "flex items-center text-blue-300 hover:text-red-500",
|
|
23
|
+
children: /* @__PURE__ */ e.jsx(n, { icon: l })
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
export {
|
|
30
|
+
p as default
|
|
31
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Pill } from './Pill';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as TabProps } from './Tab.types';
|
|
2
|
-
declare const Tab: ({ label, icon, isSelected, onClick, variant, direction, }: TabProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Tab: ({ label, icon, isSelected, onClick, variant, direction, labelClassName, }: TabProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Tab;
|
|
@@ -1,30 +1,35 @@
|
|
|
1
|
-
import { j as
|
|
1
|
+
import { j as r } from "../../../_virtual/jsx-runtime.js";
|
|
2
2
|
import { FontAwesomeIcon as n } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
|
|
3
|
-
import { resolveTabClasses as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
import { resolveTabClasses as x } from "./Tab.styles.js";
|
|
4
|
+
import { clsx as f } from "../../../node_modules/clsx/dist/clsx.js";
|
|
5
|
+
const w = ({
|
|
6
|
+
label: s,
|
|
7
|
+
icon: t,
|
|
8
|
+
isSelected: o,
|
|
8
9
|
onClick: a,
|
|
9
10
|
variant: e = "default",
|
|
10
|
-
direction: l = "row"
|
|
11
|
-
|
|
11
|
+
direction: l = "row",
|
|
12
|
+
labelClassName: m = ""
|
|
13
|
+
}) => /* @__PURE__ */ r.jsxs(
|
|
12
14
|
"button",
|
|
13
15
|
{
|
|
14
|
-
className: `${
|
|
16
|
+
className: `${x(
|
|
17
|
+
e,
|
|
18
|
+
o
|
|
19
|
+
)} w-full cursor-pointer transition-all duration-200 ${l === "row" && "flex-row!"}`,
|
|
15
20
|
onClick: a,
|
|
16
21
|
children: [
|
|
17
|
-
|
|
22
|
+
t && /* @__PURE__ */ r.jsx(
|
|
18
23
|
n,
|
|
19
24
|
{
|
|
20
|
-
icon:
|
|
21
|
-
className: `${
|
|
25
|
+
icon: t,
|
|
26
|
+
className: `${o ? "text-blue-500" : "text-gray-500"} w-20 h-20`
|
|
22
27
|
}
|
|
23
28
|
),
|
|
24
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ r.jsx("span", { className: f("text-lg font-500", m), children: s })
|
|
25
30
|
]
|
|
26
31
|
}
|
|
27
32
|
);
|
|
28
33
|
export {
|
|
29
|
-
|
|
34
|
+
w as default
|
|
30
35
|
};
|
|
@@ -4,7 +4,8 @@ export default interface TabProps {
|
|
|
4
4
|
label: string;
|
|
5
5
|
icon?: IconProp;
|
|
6
6
|
isSelected?: boolean;
|
|
7
|
-
direction?:
|
|
7
|
+
direction?: "row" | "col";
|
|
8
8
|
onClick?: () => void;
|
|
9
|
-
variant?:
|
|
9
|
+
variant?: "default" | "underline";
|
|
10
|
+
labelClassName?: string;
|
|
10
11
|
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
import { j as t } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
-
import { FontAwesomeIcon as
|
|
3
|
-
import { useTheme as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { faChevronUp as
|
|
6
|
-
import { useFloating as
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
2
|
+
import { FontAwesomeIcon as q } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
|
|
3
|
+
import { useTheme as G } from "../../../hooks/useTheme.js";
|
|
4
|
+
import { useState as J, useRef as Q } from "react";
|
|
5
|
+
import { faChevronUp as S } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
|
|
6
|
+
import { useFloating as V, useClick as X, useDismiss as Z, useInteractions as _, useTransitionStyles as C } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
|
|
7
|
+
import ee from "../../atoms/Button/Button.js";
|
|
8
|
+
import { autoUpdate as te } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
|
|
9
|
+
import { offset as re, flip as se, shift as oe, size as ne } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
|
|
10
|
+
const ge = ({
|
|
11
|
+
name: p,
|
|
12
|
+
error: c,
|
|
13
|
+
value: r,
|
|
14
|
+
onChange: n,
|
|
15
|
+
onOptionClick: u,
|
|
16
|
+
onKeyDown: y,
|
|
17
|
+
onSelect: m,
|
|
18
|
+
onButtonClick: v,
|
|
19
|
+
options: j,
|
|
20
|
+
placeholder: k,
|
|
21
|
+
label: M,
|
|
22
|
+
disabled: s = !1,
|
|
23
|
+
className: P = "",
|
|
24
|
+
buttonContent: E = "Enviar",
|
|
22
25
|
showOptionsOnClick: I = !0,
|
|
23
|
-
showChevron:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
showChevron: l = !1,
|
|
27
|
+
showButton: T = !1,
|
|
28
|
+
setValueOnOptionSelect: L = !0,
|
|
29
|
+
leftSide: w,
|
|
26
30
|
rightSide: N
|
|
27
31
|
}) => {
|
|
28
|
-
const { t:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}, [d]);
|
|
32
|
-
const x = G(null), { x: T, y: L, strategy: R, refs: c, context: h } = Q({
|
|
33
|
-
open: l,
|
|
34
|
-
onOpenChange: a,
|
|
32
|
+
const { t: x } = G(), [a, i] = J(!1), h = Q(null), { x: R, y: z, strategy: A, refs: d, context: g } = V({
|
|
33
|
+
open: a,
|
|
34
|
+
onOpenChange: i,
|
|
35
35
|
middleware: [
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
re(8),
|
|
37
|
+
se(),
|
|
38
38
|
oe({ padding: 8 }),
|
|
39
39
|
ne({
|
|
40
40
|
apply({ availableHeight: e, elements: o }) {
|
|
@@ -46,129 +46,138 @@ const xe = ({
|
|
|
46
46
|
})
|
|
47
47
|
],
|
|
48
48
|
placement: "bottom-start",
|
|
49
|
-
whileElementsMounted:
|
|
50
|
-
}),
|
|
51
|
-
enabled:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
]), { isMounted: S, styles: U } = V(h, {
|
|
49
|
+
whileElementsMounted: te
|
|
50
|
+
}), F = X(g, {
|
|
51
|
+
enabled: l
|
|
52
|
+
}), D = Z(g), { getReferenceProps: O, getFloatingProps: B } = _([
|
|
53
|
+
F,
|
|
54
|
+
D
|
|
55
|
+
]), { isMounted: U, styles: W } = C(g, {
|
|
57
56
|
duration: { open: 200, close: 150 },
|
|
58
57
|
initial: { opacity: 0, transform: "translateY(-4px)" }
|
|
59
|
-
}),
|
|
60
|
-
const e = Array.isArray(
|
|
61
|
-
if (!
|
|
62
|
-
const o =
|
|
63
|
-
return e.filter((
|
|
64
|
-
})(),
|
|
65
|
-
|
|
66
|
-
},
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
e.stopPropagation(),
|
|
58
|
+
}), f = (() => {
|
|
59
|
+
const e = Array.isArray(j) ? j : [];
|
|
60
|
+
if (!r || !r.trim()) return e;
|
|
61
|
+
const o = r.toLowerCase();
|
|
62
|
+
return e.filter((b) => b.label.toLowerCase().includes(o));
|
|
63
|
+
})(), $ = (e) => {
|
|
64
|
+
L && (n == null || n(e.label)), i(!1), u == null || u(e), m == null || m(e.value);
|
|
65
|
+
}, H = (e) => {
|
|
66
|
+
n == null || n(e);
|
|
67
|
+
}, K = (e) => {
|
|
68
|
+
e.stopPropagation(), l && !s && (i(!a), !a && h.current && setTimeout(() => {
|
|
70
69
|
var o;
|
|
71
|
-
return (o =
|
|
70
|
+
return (o = h.current) == null ? void 0 : o.focus();
|
|
72
71
|
}, 100));
|
|
73
|
-
},
|
|
74
|
-
...
|
|
72
|
+
}, Y = {
|
|
73
|
+
...l ? O() : {},
|
|
75
74
|
onKeyDown: void 0,
|
|
76
|
-
// Remover el handler de teclado que interfiere
|
|
77
75
|
onClick: void 0
|
|
78
|
-
// Remover el click handler general
|
|
79
76
|
};
|
|
80
77
|
return /* @__PURE__ */ t.jsxs(
|
|
81
78
|
"div",
|
|
82
79
|
{
|
|
83
|
-
className: `flex flex-col gap-8 select-none ${
|
|
80
|
+
className: `flex flex-col gap-8 select-none ${s && "cursor-not-allowed"} ${P}`,
|
|
84
81
|
children: [
|
|
85
82
|
/* @__PURE__ */ t.jsx(
|
|
86
83
|
"h6",
|
|
87
84
|
{
|
|
88
|
-
className: `text-gray-600 font-600 group ${
|
|
89
|
-
children:
|
|
85
|
+
className: `text-gray-600 font-600 group ${c && "!text-red-500"} text-label ${s && "text-gray-300"}`,
|
|
86
|
+
children: M
|
|
90
87
|
}
|
|
91
88
|
),
|
|
92
|
-
/* @__PURE__ */ t.jsxs(
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
89
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex gap-24", children: [
|
|
90
|
+
/* @__PURE__ */ t.jsxs(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
ref: d.setReference,
|
|
94
|
+
className: `
|
|
97
95
|
flex items-center justify-between gap-8 p-16
|
|
98
96
|
|
|
99
|
-
${
|
|
97
|
+
${c && "!border-red-500"}
|
|
100
98
|
|
|
101
99
|
bg-light
|
|
102
100
|
|
|
103
101
|
w-full h-full rounded-full border
|
|
104
102
|
|
|
105
|
-
${
|
|
106
|
-
${!
|
|
107
|
-
${
|
|
103
|
+
${r && !s ? "border-blue-200" : "border-blue-100"}
|
|
104
|
+
${!s && "hover:border-blue-300"}
|
|
105
|
+
${s && "cursor-not-allowed"}
|
|
108
106
|
|
|
109
107
|
focus-within:border-blue-500 transition-colors duration-200 ease-in-out
|
|
110
|
-
${
|
|
108
|
+
${s && "hover:!cursor-pointer"}
|
|
111
109
|
group-disabled:bg-gray-500
|
|
112
110
|
`,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
111
|
+
...Y,
|
|
112
|
+
children: [
|
|
113
|
+
w && w,
|
|
114
|
+
/* @__PURE__ */ t.jsx(
|
|
115
|
+
"input",
|
|
116
|
+
{
|
|
117
|
+
ref: h,
|
|
118
|
+
id: p,
|
|
119
|
+
name: p,
|
|
120
|
+
disabled: s,
|
|
121
|
+
placeholder: k,
|
|
122
|
+
value: r,
|
|
123
|
+
onClick: () => {
|
|
124
|
+
I && !a && !s && i(!0);
|
|
125
|
+
},
|
|
126
|
+
onChange: (e) => H(e.target.value),
|
|
127
|
+
onKeyDown: (e) => {
|
|
128
|
+
y && y(e), e.key === "Enter" && (e.preventDefault(), f.length > 0 && $(f[0])), e.key === "Escape" && i(!1);
|
|
129
|
+
},
|
|
130
|
+
className: `group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${s && "pointer-events-none !select-none !caret-transparent"}`
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
N && !l ? N : l && /* @__PURE__ */ t.jsx(
|
|
134
|
+
q,
|
|
135
|
+
{
|
|
136
|
+
icon: S,
|
|
137
|
+
className: `text-xl text-gray-500 cursor-pointer ${a && "rotate-180"} transition-transform duration-150 ease-in-out`,
|
|
138
|
+
onClick: K
|
|
139
|
+
}
|
|
140
|
+
)
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
T && /* @__PURE__ */ t.jsx(
|
|
145
|
+
ee,
|
|
146
|
+
{
|
|
147
|
+
variant: "filled",
|
|
148
|
+
size: "lg",
|
|
149
|
+
onClick: v,
|
|
150
|
+
className: "h-[55px]!",
|
|
151
|
+
children: E
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
] }),
|
|
155
|
+
/* @__PURE__ */ t.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: c && x(c || "", { x: x(p) }) }),
|
|
156
|
+
U && /* @__PURE__ */ t.jsx(
|
|
148
157
|
"div",
|
|
149
158
|
{
|
|
150
|
-
ref:
|
|
159
|
+
ref: d.setFloating,
|
|
151
160
|
style: {
|
|
152
|
-
position:
|
|
153
|
-
top:
|
|
154
|
-
left:
|
|
155
|
-
...
|
|
156
|
-
width:
|
|
161
|
+
position: A,
|
|
162
|
+
top: z ?? 0,
|
|
163
|
+
left: R ?? 0,
|
|
164
|
+
...W,
|
|
165
|
+
width: d.reference.current instanceof Element ? d.reference.current.clientWidth : void 0,
|
|
157
166
|
zIndex: 50
|
|
158
167
|
},
|
|
159
168
|
className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
|
|
160
|
-
...
|
|
161
|
-
children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children:
|
|
169
|
+
...B(),
|
|
170
|
+
children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: f.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: f.map((e, o) => /* @__PURE__ */ t.jsx(
|
|
162
171
|
"li",
|
|
163
172
|
{
|
|
164
|
-
className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${
|
|
165
|
-
onClick: (
|
|
166
|
-
|
|
173
|
+
className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${r === e.label ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
|
|
174
|
+
onClick: (b) => {
|
|
175
|
+
b.stopPropagation(), $(e);
|
|
167
176
|
},
|
|
168
|
-
children: /* @__PURE__ */ t.jsx("span", { children:
|
|
177
|
+
children: /* @__PURE__ */ t.jsx("span", { children: x(e.label) })
|
|
169
178
|
},
|
|
170
179
|
`${e.label}-${o}`
|
|
171
|
-
)) }) :
|
|
180
|
+
)) }) : r && (r == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
|
|
172
181
|
/* @__PURE__ */ t.jsx(
|
|
173
182
|
"svg",
|
|
174
183
|
{
|
|
@@ -189,7 +198,7 @@ const xe = ({
|
|
|
189
198
|
),
|
|
190
199
|
/* @__PURE__ */ t.jsxs("p", { className: "mt-8 text-body-s", children: [
|
|
191
200
|
'No se encontraron resultados para "',
|
|
192
|
-
|
|
201
|
+
r,
|
|
193
202
|
'"'
|
|
194
203
|
] })
|
|
195
204
|
] }) : null })
|
|
@@ -200,5 +209,5 @@ const xe = ({
|
|
|
200
209
|
);
|
|
201
210
|
};
|
|
202
211
|
export {
|
|
203
|
-
|
|
212
|
+
ge as default
|
|
204
213
|
};
|
|
@@ -9,6 +9,8 @@ export interface AutocompleteInputProps {
|
|
|
9
9
|
label: string;
|
|
10
10
|
value: unknown;
|
|
11
11
|
}) => void;
|
|
12
|
+
onButtonClick?: () => void;
|
|
13
|
+
buttonContent?: React.ReactNode;
|
|
12
14
|
options: {
|
|
13
15
|
label: string;
|
|
14
16
|
value: unknown;
|
|
@@ -19,6 +21,7 @@ export interface AutocompleteInputProps {
|
|
|
19
21
|
className?: string;
|
|
20
22
|
showOptionsOnClick?: boolean;
|
|
21
23
|
showChevron?: boolean;
|
|
24
|
+
showButton?: boolean;
|
|
22
25
|
setValueOnOptionSelect?: boolean;
|
|
23
26
|
leftSide?: React.ReactNode;
|
|
24
27
|
rightSide?: React.ReactNode;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
|
+
import a from "../../atoms/Pill/Pill.js";
|
|
3
|
+
import { faChevronUp as x, faChevronDown as p } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
|
|
4
|
+
import { FontAwesomeIcon as l } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
|
|
5
|
+
import { useState as d } from "react";
|
|
6
|
+
import { AnimatePresence as f } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
|
|
7
|
+
import { motion as h } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
|
|
8
|
+
const C = ({
|
|
9
|
+
values: o,
|
|
10
|
+
onPillRemove: r
|
|
11
|
+
}) => {
|
|
12
|
+
const [i, c] = d(!1), m = o.slice(0, 3), s = o.slice(3);
|
|
13
|
+
return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-start gap-20", children: [
|
|
14
|
+
/* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
|
|
15
|
+
m.map((t, n) => /* @__PURE__ */ e.jsx(
|
|
16
|
+
a,
|
|
17
|
+
{
|
|
18
|
+
label: t,
|
|
19
|
+
onRemove: () => r(n)
|
|
20
|
+
},
|
|
21
|
+
t
|
|
22
|
+
)),
|
|
23
|
+
/* @__PURE__ */ e.jsx(f, { children: i && s.map((t, n) => /* @__PURE__ */ e.jsx(
|
|
24
|
+
h.div,
|
|
25
|
+
{
|
|
26
|
+
initial: { opacity: 0, scale: 0.8 },
|
|
27
|
+
animate: { opacity: 1, scale: 1 },
|
|
28
|
+
exit: { opacity: 0, scale: 0.8 },
|
|
29
|
+
transition: { duration: 0.2 },
|
|
30
|
+
children: /* @__PURE__ */ e.jsx(a, { label: t, onRemove: () => r(n) })
|
|
31
|
+
},
|
|
32
|
+
t
|
|
33
|
+
)) })
|
|
34
|
+
] }),
|
|
35
|
+
s.length > 0 && /* @__PURE__ */ e.jsx(
|
|
36
|
+
"button",
|
|
37
|
+
{
|
|
38
|
+
type: "button",
|
|
39
|
+
onClick: () => c(!i),
|
|
40
|
+
className: "flex items-center gap-8 w-fit text-blue-500 font-semibold text-14 transition hover:text-blue-700 text-nowrap shrink-0",
|
|
41
|
+
children: i ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
42
|
+
/* @__PURE__ */ e.jsx("p", { children: "Ocultar" }),
|
|
43
|
+
" ",
|
|
44
|
+
/* @__PURE__ */ e.jsx(l, { icon: x })
|
|
45
|
+
] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
46
|
+
/* @__PURE__ */ e.jsxs("p", { children: [
|
|
47
|
+
"Ver ",
|
|
48
|
+
s.length,
|
|
49
|
+
" más"
|
|
50
|
+
] }),
|
|
51
|
+
" ",
|
|
52
|
+
/* @__PURE__ */ e.jsx(l, { icon: p })
|
|
53
|
+
] })
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
] });
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
C as default
|
|
60
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PillsContainer } from './PillsContainer';
|
|
@@ -3,7 +3,7 @@ import { Tab } from '../../atoms';
|
|
|
3
3
|
interface Tab {
|
|
4
4
|
id: string | number;
|
|
5
5
|
label: string;
|
|
6
|
-
icon
|
|
6
|
+
icon?: IconProp;
|
|
7
7
|
href?: string;
|
|
8
8
|
}
|
|
9
9
|
interface TabsProps {
|
|
@@ -15,6 +15,7 @@ interface TabsProps {
|
|
|
15
15
|
direction?: "row" | "col";
|
|
16
16
|
className?: string;
|
|
17
17
|
showLabel?: boolean;
|
|
18
|
+
labelClassName?: string;
|
|
18
19
|
}
|
|
19
|
-
declare const Tabs: ({ variant, color, tabs, activeTab, onTabChange, className, direction, showLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare const Tabs: ({ variant, color, tabs, activeTab, onTabChange, className, direction, showLabel, labelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
export default Tabs;
|