sanitas-ui-design-system 1.1.4 → 1.1.6
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/Select-BpqrjmYB.js +223 -0
- package/dist/Select-BpqrjmYB.js.map +1 -0
- package/dist/index.js +7 -6
- package/dist/styles/index.css +1 -1
- package/dist/ui/components/Select/Select.d.ts +16 -0
- package/dist/ui/components/Select/Select.d.ts.map +1 -0
- package/dist/ui/components/Select/index.d.ts +3 -0
- package/dist/ui/components/Select/index.d.ts.map +1 -0
- package/dist/ui/components/index.d.ts +2 -0
- package/dist/ui/components/index.d.ts.map +1 -1
- package/dist/ui/index.js +3 -2
- package/package.json +1 -1
- package/dist/Loading-CH95_MB_.js +0 -189
- package/dist/Loading-CH95_MB_.js.map +0 -1
- /package/dist/assets/{Loading.css → Select.css} +0 -0
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
import { jsx as t, jsxs as d, Fragment as E } from "react/jsx-runtime";
|
|
2
|
+
const _ = () => {
|
|
3
|
+
try {
|
|
4
|
+
return require("@tanstack/react-router").Link;
|
|
5
|
+
} catch {
|
|
6
|
+
return null;
|
|
7
|
+
}
|
|
8
|
+
}, h = _(), C = "primary", N = "medium", R = "button", x = "buttonIcon", I = {
|
|
9
|
+
primary: "isPrimary",
|
|
10
|
+
secondary: "isSecondary",
|
|
11
|
+
success: "isSuccess",
|
|
12
|
+
danger: "isDanger",
|
|
13
|
+
outline: "isOutline",
|
|
14
|
+
ghost: "isGhost",
|
|
15
|
+
white: "isWhite",
|
|
16
|
+
icon: "isIcon",
|
|
17
|
+
static: "isStatic"
|
|
18
|
+
}, k = {
|
|
19
|
+
small: "isSmall",
|
|
20
|
+
medium: "isMedium",
|
|
21
|
+
large: "isLarge"
|
|
22
|
+
}, O = {
|
|
23
|
+
none: "isRounded-none",
|
|
24
|
+
sm: "isRounded-sm",
|
|
25
|
+
base: "isRounded-base",
|
|
26
|
+
md: "isRounded-md",
|
|
27
|
+
lg: "isRounded-lg",
|
|
28
|
+
xl: "isRounded-xl",
|
|
29
|
+
"2xl": "isRounded-2xl",
|
|
30
|
+
"3xl": "isRounded-3xl",
|
|
31
|
+
full: "isRounded-full"
|
|
32
|
+
}, D = (n, e, a, i, s, o) => [
|
|
33
|
+
R,
|
|
34
|
+
I[n],
|
|
35
|
+
k[e],
|
|
36
|
+
s && O[s],
|
|
37
|
+
a && "isFullWidth",
|
|
38
|
+
i && "isLoading",
|
|
39
|
+
o
|
|
40
|
+
].filter(Boolean).join(" "), B = ({ icon: n, children: e }) => /* @__PURE__ */ d(E, { children: [
|
|
41
|
+
n && /* @__PURE__ */ t("span", { className: x, children: n }),
|
|
42
|
+
e
|
|
43
|
+
] }), P = (n) => "to" in n && !!n.to, T = (n) => "href" in n && !!n.href, z = (n, e, a) => h ? /* @__PURE__ */ t(h, { to: n, className: e, children: a }) : (process.env.NODE_ENV === "development" && console.warn('Button: La prop "to" requiere @tanstack/react-router instalado'), null), F = (n, e, a, i) => {
|
|
44
|
+
const { target: s, rel: o, ...c } = i;
|
|
45
|
+
return /* @__PURE__ */ t("a", { href: n, className: e, target: s, rel: o, ...c, children: a });
|
|
46
|
+
}, w = (n, e, a, i, s) => /* @__PURE__ */ t("button", { className: n, disabled: a || i, ...s, children: e }), nn = (n) => {
|
|
47
|
+
const {
|
|
48
|
+
variant: e = C,
|
|
49
|
+
size: a = N,
|
|
50
|
+
rounded: i,
|
|
51
|
+
fullWidth: s = !1,
|
|
52
|
+
loading: o = !1,
|
|
53
|
+
children: c,
|
|
54
|
+
icon: u,
|
|
55
|
+
className: v = "",
|
|
56
|
+
...r
|
|
57
|
+
} = n, g = D(e, a, s, o, i, v), m = /* @__PURE__ */ t(B, { icon: u, children: c });
|
|
58
|
+
if (P(n))
|
|
59
|
+
return z(n.to, g, m);
|
|
60
|
+
if (T(n))
|
|
61
|
+
return F(
|
|
62
|
+
n.href,
|
|
63
|
+
g,
|
|
64
|
+
m,
|
|
65
|
+
r
|
|
66
|
+
);
|
|
67
|
+
const { disabled: A, ...b } = r;
|
|
68
|
+
return w(g, m, A || !1, o, b);
|
|
69
|
+
}, M = "Espere por favor, procesando datos...", U = "overlay", l = {
|
|
70
|
+
main: "easy-loading-main",
|
|
71
|
+
div: "easy-loading-div",
|
|
72
|
+
background: "easy-loading-bkg",
|
|
73
|
+
text: "easy-loading-text",
|
|
74
|
+
animation: "ball-scale-multiple"
|
|
75
|
+
}, f = {
|
|
76
|
+
content: "easy-loading-content",
|
|
77
|
+
text: "easy-loading-text"
|
|
78
|
+
}, V = {
|
|
79
|
+
ballsCount: 3
|
|
80
|
+
}, p = {
|
|
81
|
+
sm: { container: "var(--spacing-10)", gap: "var(--spacing-2)", fontSize: "var(--font-size-sm)" },
|
|
82
|
+
md: { container: "var(--spacing-12)", gap: "var(--spacing-3)", fontSize: "var(--font-size-base)" },
|
|
83
|
+
lg: { container: "var(--spacing-16)", gap: "var(--spacing-4)", fontSize: "var(--font-size-lg)" }
|
|
84
|
+
}, W = 9999, j = 0.5, S = () => ({
|
|
85
|
+
position: "absolute",
|
|
86
|
+
top: "50%",
|
|
87
|
+
left: "50%",
|
|
88
|
+
transform: "translate(-50%, -50%)",
|
|
89
|
+
textAlign: "center"
|
|
90
|
+
}), L = () => ({
|
|
91
|
+
width: "100%",
|
|
92
|
+
height: "100%"
|
|
93
|
+
}), y = () => /* @__PURE__ */ t("div", { className: l.animation, children: Array.from({ length: V.ballsCount }, (n, e) => /* @__PURE__ */ t("div", {}, `spinner-ball-${e}`)) }), Z = ({ size: n }) => {
|
|
94
|
+
const { container: e } = p[n];
|
|
95
|
+
return /* @__PURE__ */ t(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
className: l.animation,
|
|
99
|
+
style: { width: e, height: e },
|
|
100
|
+
children: /* @__PURE__ */ t(y, {})
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
}, Y = ({ text: n, size: e }) => {
|
|
104
|
+
const { gap: a, fontSize: i } = p[e];
|
|
105
|
+
return /* @__PURE__ */ d(
|
|
106
|
+
"div",
|
|
107
|
+
{
|
|
108
|
+
style: {
|
|
109
|
+
padding: "var(--spacing-4)",
|
|
110
|
+
textAlign: "center",
|
|
111
|
+
display: "flex",
|
|
112
|
+
flexDirection: "column",
|
|
113
|
+
alignItems: "center",
|
|
114
|
+
gap: a
|
|
115
|
+
},
|
|
116
|
+
children: [
|
|
117
|
+
/* @__PURE__ */ t(Z, { size: e }),
|
|
118
|
+
n && /* @__PURE__ */ t(
|
|
119
|
+
"div",
|
|
120
|
+
{
|
|
121
|
+
style: {
|
|
122
|
+
color: "var(--lila)",
|
|
123
|
+
fontSize: i,
|
|
124
|
+
fontFamily: "var(--font-family)"
|
|
125
|
+
},
|
|
126
|
+
children: n
|
|
127
|
+
}
|
|
128
|
+
)
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
}, q = () => /* @__PURE__ */ t(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: l.background,
|
|
136
|
+
style: {
|
|
137
|
+
backgroundColor: "var(--black)",
|
|
138
|
+
opacity: j,
|
|
139
|
+
position: "absolute",
|
|
140
|
+
...L()
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
), G = ({ text: n }) => /* @__PURE__ */ d("div", { id: l.div, className: l.div, children: [
|
|
144
|
+
/* @__PURE__ */ t("div", { id: f.content, style: S(), children: /* @__PURE__ */ t(y, {}) }),
|
|
145
|
+
/* @__PURE__ */ t(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
id: f.text,
|
|
149
|
+
className: l.text,
|
|
150
|
+
style: {
|
|
151
|
+
...S(),
|
|
152
|
+
paddingTop: "var(--spacing-12)",
|
|
153
|
+
color: "var(--blanco)",
|
|
154
|
+
fontFamily: "var(--font-family)",
|
|
155
|
+
fontSize: "var(--font-size-base)"
|
|
156
|
+
},
|
|
157
|
+
children: n
|
|
158
|
+
}
|
|
159
|
+
)
|
|
160
|
+
] }), H = (n) => /* @__PURE__ */ d(
|
|
161
|
+
"div",
|
|
162
|
+
{
|
|
163
|
+
id: l.main,
|
|
164
|
+
className: l.main,
|
|
165
|
+
style: {
|
|
166
|
+
position: "fixed",
|
|
167
|
+
display: "flex",
|
|
168
|
+
justifyContent: "center",
|
|
169
|
+
alignItems: "center",
|
|
170
|
+
top: 0,
|
|
171
|
+
left: 0,
|
|
172
|
+
zIndex: W,
|
|
173
|
+
...L()
|
|
174
|
+
},
|
|
175
|
+
children: [
|
|
176
|
+
/* @__PURE__ */ t(q, {}),
|
|
177
|
+
/* @__PURE__ */ t(G, { ...n })
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
), en = ({
|
|
181
|
+
text: n = M,
|
|
182
|
+
variant: e = U,
|
|
183
|
+
size: a = "md"
|
|
184
|
+
}) => e === "inline" ? /* @__PURE__ */ t(Y, { text: n, size: a }) : /* @__PURE__ */ t(H, { text: n }), X = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b6f8c' d='M4.5 6L8 9.5L11.5 6L12.5 7L8 11.5L3.5 7z'/%3E%3C/svg%3E")`, $ = "-- Seleccione una opción --", J = "form_input is-borer w-input", K = {
|
|
185
|
+
appearance: "none",
|
|
186
|
+
paddingRight: "2.5rem",
|
|
187
|
+
backgroundImage: X,
|
|
188
|
+
backgroundRepeat: "no-repeat",
|
|
189
|
+
backgroundPosition: "right 1rem center",
|
|
190
|
+
backgroundSize: "16px"
|
|
191
|
+
}, tn = ({
|
|
192
|
+
id: n,
|
|
193
|
+
name: e,
|
|
194
|
+
value: a,
|
|
195
|
+
onChange: i,
|
|
196
|
+
options: s,
|
|
197
|
+
placeholder: o = $,
|
|
198
|
+
className: c = J,
|
|
199
|
+
dataName: u
|
|
200
|
+
}) => /* @__PURE__ */ d(
|
|
201
|
+
"select",
|
|
202
|
+
{
|
|
203
|
+
id: n,
|
|
204
|
+
name: e,
|
|
205
|
+
value: a,
|
|
206
|
+
onChange: (r) => {
|
|
207
|
+
i(r.target.value);
|
|
208
|
+
},
|
|
209
|
+
className: c,
|
|
210
|
+
"data-name": u || e,
|
|
211
|
+
style: K,
|
|
212
|
+
children: [
|
|
213
|
+
/* @__PURE__ */ t("option", { value: "", children: o }),
|
|
214
|
+
s.map((r) => /* @__PURE__ */ t("option", { value: r.value, children: r.label }, r.value))
|
|
215
|
+
]
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
export {
|
|
219
|
+
nn as B,
|
|
220
|
+
en as L,
|
|
221
|
+
tn as S
|
|
222
|
+
};
|
|
223
|
+
//# sourceMappingURL=Select-BpqrjmYB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-BpqrjmYB.js","sources":["../src/ui/components/Button/Button.tsx","../src/ui/components/Loading/Loading.tsx","../src/ui/components/Select/Select.tsx"],"sourcesContent":["import React from 'react'\r\nimport './Button.css'\r\n\r\nconst loadReactRouterLink = (): any => {\r\n try {\r\n return require('@tanstack/react-router').Link\r\n } catch {\r\n return null\r\n }\r\n}\r\n\r\nconst RouterLink = loadReactRouterLink()\r\n\r\nconst DEFAULT_VARIANT = 'primary'\r\nconst DEFAULT_SIZE = 'medium'\r\nconst BASE_BUTTON_CLASS = 'button'\r\nconst ICON_WRAPPER_CLASS = 'buttonIcon'\r\n\r\nexport type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'outline' | 'ghost' | 'white' | 'icon' | 'static'\r\nexport type ButtonSize = 'small' | 'medium' | 'large'\r\nexport type ButtonRounded = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\r\n\r\ntype BaseButtonProps = {\r\n variant?: ButtonVariant\r\n size?: ButtonSize\r\n rounded?: ButtonRounded\r\n fullWidth?: boolean\r\n loading?: boolean\r\n children: React.ReactNode\r\n icon?: React.ReactNode\r\n className?: string\r\n}\r\n\r\ntype ButtonAsButton = BaseButtonProps &\r\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps> & {\r\n href?: never\r\n to?: never\r\n }\r\n\r\ntype ButtonAsLink = BaseButtonProps &\r\n Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonProps> & {\r\n href: string\r\n to?: never\r\n }\r\n\r\ntype ButtonAsRouterLink = BaseButtonProps & {\r\n to: string\r\n href?: never\r\n}\r\n\r\nexport type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRouterLink\r\n\r\nconst VARIANT_CLASS_MAP: Record<ButtonVariant, string> = {\r\n primary: 'isPrimary',\r\n secondary: 'isSecondary',\r\n success: 'isSuccess',\r\n danger: 'isDanger',\r\n outline: 'isOutline',\r\n ghost: 'isGhost',\r\n white: 'isWhite',\r\n icon: 'isIcon',\r\n static: 'isStatic',\r\n}\r\n\r\nconst SIZE_CLASS_MAP: Record<ButtonSize, string> = {\r\n small: 'isSmall',\r\n medium: 'isMedium',\r\n large: 'isLarge',\r\n}\r\n\r\nconst ROUNDED_CLASS_MAP: Record<ButtonRounded, string> = {\r\n none: 'isRounded-none',\r\n sm: 'isRounded-sm',\r\n base: 'isRounded-base',\r\n md: 'isRounded-md',\r\n lg: 'isRounded-lg',\r\n xl: 'isRounded-xl',\r\n '2xl': 'isRounded-2xl',\r\n '3xl': 'isRounded-3xl',\r\n full: 'isRounded-full',\r\n}\r\n\r\nconst buildClassNames = (\r\n variant: ButtonVariant,\r\n size: ButtonSize,\r\n fullWidth: boolean,\r\n loading: boolean,\r\n rounded: ButtonRounded | undefined,\r\n className: string\r\n): string => {\r\n const classes = [\r\n BASE_BUTTON_CLASS,\r\n VARIANT_CLASS_MAP[variant],\r\n SIZE_CLASS_MAP[size],\r\n rounded && ROUNDED_CLASS_MAP[rounded],\r\n fullWidth && 'isFullWidth',\r\n loading && 'isLoading',\r\n className,\r\n ]\r\n\r\n return classes.filter(Boolean).join(' ')\r\n}\r\n\r\nconst ButtonContent: React.FC<{ icon?: React.ReactNode; children: React.ReactNode }> = ({ icon, children }) => (\r\n <>\r\n {icon && <span className={ICON_WRAPPER_CLASS}>{icon}</span>}\r\n {children}\r\n </>\r\n)\r\n\r\nconst isRouterLinkButton = (props: ButtonProps): props is ButtonAsRouterLink => {\r\n return 'to' in props && Boolean(props.to)\r\n}\r\n\r\nconst isExternalLinkButton = (props: ButtonProps): props is ButtonAsLink => {\r\n return 'href' in props && Boolean(props.href)\r\n}\r\n\r\nconst renderRouterLink = (to: string, className: string, content: React.ReactNode) => {\r\n if (!RouterLink) {\r\n if (process.env.NODE_ENV === 'development') {\r\n console.warn('Button: La prop \"to\" requiere @tanstack/react-router instalado')\r\n }\r\n return null\r\n }\r\n\r\n return (\r\n <RouterLink to={to} className={className}>\r\n {content}\r\n </RouterLink>\r\n )\r\n}\r\n\r\nconst renderExternalLink = (\r\n href: string,\r\n className: string,\r\n content: React.ReactNode,\r\n linkProps: React.AnchorHTMLAttributes<HTMLAnchorElement>\r\n) => {\r\n const { target, rel, ...restLinkProps } = linkProps\r\n return (\r\n <a href={href} className={className} target={target} rel={rel} {...restLinkProps}>\r\n {content}\r\n </a>\r\n )\r\n}\r\n\r\nconst renderButton = (\r\n className: string,\r\n content: React.ReactNode,\r\n disabled: boolean,\r\n loading: boolean,\r\n buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>\r\n) => {\r\n return (\r\n <button className={className} disabled={disabled || loading} {...buttonProps}>\r\n {content}\r\n </button>\r\n )\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = (props) => {\r\n const {\r\n variant = DEFAULT_VARIANT,\r\n size = DEFAULT_SIZE,\r\n rounded,\r\n fullWidth = false,\r\n loading = false,\r\n children,\r\n icon,\r\n className = '',\r\n ...restProps\r\n } = props\r\n\r\n const classNames = buildClassNames(variant, size, fullWidth, loading, rounded, className)\r\n const content = <ButtonContent icon={icon}>{children}</ButtonContent>\r\n\r\n if (isRouterLinkButton(props)) {\r\n return renderRouterLink(props.to, classNames, content)\r\n }\r\n\r\n if (isExternalLinkButton(props)) {\r\n return renderExternalLink(\r\n props.href,\r\n classNames,\r\n content,\r\n restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>\r\n )\r\n }\r\n\r\n const { disabled, ...buttonProps } = restProps as React.ButtonHTMLAttributes<HTMLButtonElement>\r\n return renderButton(classNames, content, disabled || false, loading, buttonProps)\r\n}\r\n","import './Loading.css'\r\n\r\nexport type LoadingVariant = 'overlay' | 'inline'\r\nexport type LoadingSize = 'sm' | 'md' | 'lg'\r\n\r\ntype BaseLoadingProps = {\r\n text?: string\r\n variant?: LoadingVariant\r\n size?: LoadingSize\r\n className?: string\r\n}\r\n\r\ntype LoadingAsOverlay = BaseLoadingProps & {\r\n variant?: 'overlay'\r\n}\r\n\r\ntype LoadingAsInline = BaseLoadingProps & {\r\n variant: 'inline'\r\n}\r\n\r\nexport type LoadingProps = LoadingAsOverlay | LoadingAsInline\r\n\r\nconst DEFAULT_TEXT = 'Espere por favor, procesando datos...'\r\nconst DEFAULT_VARIANT: LoadingVariant = 'overlay'\r\n\r\nconst CSS_CLASSES = {\r\n main: 'easy-loading-main',\r\n div: 'easy-loading-div',\r\n background: 'easy-loading-bkg',\r\n text: 'easy-loading-text',\r\n animation: 'ball-scale-multiple',\r\n} as const\r\n\r\nconst DOM_IDS = {\r\n content: 'easy-loading-content',\r\n text: 'easy-loading-text',\r\n} as const\r\n\r\nconst SPINNER_CONFIG = {\r\n ballsCount: 3,\r\n animationDelays: [0, -0.4, -0.2],\r\n} as const\r\n\r\nconst SPINNER_SIZE_MAP = {\r\n sm: { container: 'var(--spacing-10)', gap: 'var(--spacing-2)', fontSize: 'var(--font-size-sm)' },\r\n md: { container: 'var(--spacing-12)', gap: 'var(--spacing-3)', fontSize: 'var(--font-size-base)' },\r\n lg: { container: 'var(--spacing-16)', gap: 'var(--spacing-4)', fontSize: 'var(--font-size-lg)' },\r\n} as const\r\n\r\nconst OVERLAY_Z_INDEX = 9999\r\nconst OVERLAY_OPACITY = 0.5\r\n\r\nconst createCenteredAbsoluteStyle = () => ({\r\n position: 'absolute' as const,\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n textAlign: 'center' as const,\r\n})\r\n\r\nconst createFullSizeStyle = () => ({\r\n width: '100%',\r\n height: '100%',\r\n})\r\n\r\nconst SpinnerBalls = () => (\r\n <div className={CSS_CLASSES.animation}>\r\n {Array.from({ length: SPINNER_CONFIG.ballsCount }, (_, index) => (\r\n <div key={`spinner-ball-${index}`} />\r\n ))}\r\n </div>\r\n)\r\n\r\ntype SpinnerSize = { size: LoadingSize }\r\n\r\nconst InlineSpinnerContainer = ({ size }: SpinnerSize) => {\r\n const { container } = SPINNER_SIZE_MAP[size]\r\n \r\n return (\r\n <div\r\n className={CSS_CLASSES.animation}\r\n style={{ width: container, height: container }}\r\n >\r\n <SpinnerBalls />\r\n </div>\r\n )\r\n}\r\n\r\ntype InlineLoadingProps = { text?: string; size: LoadingSize }\r\n\r\nconst InlineLoading = ({ text, size }: InlineLoadingProps) => {\r\n const { gap, fontSize } = SPINNER_SIZE_MAP[size]\r\n \r\n return (\r\n <div\r\n style={{\r\n padding: 'var(--spacing-4)',\r\n textAlign: 'center',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n gap,\r\n }}\r\n >\r\n <InlineSpinnerContainer size={size} />\r\n {text && (\r\n <div\r\n style={{\r\n color: 'var(--lila)',\r\n fontSize,\r\n fontFamily: 'var(--font-family)',\r\n }}\r\n >\r\n {text}\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\ntype OverlayLoadingProps = { text: string }\r\n\r\nconst OverlayBackground = () => (\r\n <div\r\n className={CSS_CLASSES.background}\r\n style={{\r\n backgroundColor: 'var(--black)',\r\n opacity: OVERLAY_OPACITY,\r\n position: 'absolute',\r\n ...createFullSizeStyle(),\r\n }}\r\n />\r\n)\r\n\r\nconst OverlayContent = ({ text }: OverlayLoadingProps) => (\r\n <div id={CSS_CLASSES.div} className={CSS_CLASSES.div}>\r\n <div id={DOM_IDS.content} style={createCenteredAbsoluteStyle()}>\r\n <SpinnerBalls />\r\n </div>\r\n <div\r\n id={DOM_IDS.text}\r\n className={CSS_CLASSES.text}\r\n style={{\r\n ...createCenteredAbsoluteStyle(),\r\n paddingTop: 'var(--spacing-12)',\r\n color: 'var(--blanco)',\r\n fontFamily: 'var(--font-family)',\r\n fontSize: 'var(--font-size-base)',\r\n }}\r\n >\r\n {text}\r\n </div>\r\n </div>\r\n)\r\n\r\nconst OverlayLoading = (props: OverlayLoadingProps) => (\r\n <div\r\n id={CSS_CLASSES.main}\r\n className={CSS_CLASSES.main}\r\n style={{\r\n position: 'fixed',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n top: 0,\r\n left: 0,\r\n zIndex: OVERLAY_Z_INDEX,\r\n ...createFullSizeStyle(),\r\n }}\r\n >\r\n <OverlayBackground />\r\n <OverlayContent {...props} />\r\n </div>\r\n)\r\n\r\nexport const Loading = ({\r\n text = DEFAULT_TEXT,\r\n variant = DEFAULT_VARIANT,\r\n size = 'md',\r\n}: LoadingProps) => {\r\n if (variant === 'inline') {\r\n return <InlineLoading text={text} size={size} />\r\n }\r\n\r\n return <OverlayLoading text={text} />\r\n}\r\n","import { type ChangeEvent, type CSSProperties } from 'react'\r\n\r\nexport interface SelectOption {\r\n value: string\r\n label: string\r\n}\r\n\r\nexport interface SelectProps {\r\n id: string\r\n name: string\r\n value: string\r\n onChange: (value: string) => void\r\n options: SelectOption[]\r\n placeholder?: string\r\n className?: string\r\n dataName?: string\r\n}\r\n\r\nconst CHEVRON_DOWN_ICON = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b6f8c' d='M4.5 6L8 9.5L11.5 6L12.5 7L8 11.5L3.5 7z'/%3E%3C/svg%3E\")`\r\n\r\nconst DEFAULT_PLACEHOLDER = '-- Seleccione una opción --'\r\nconst DEFAULT_CLASS_NAME = 'form_input is-borer w-input'\r\n\r\nconst selectStyles: CSSProperties = {\r\n appearance: 'none',\r\n paddingRight: '2.5rem',\r\n backgroundImage: CHEVRON_DOWN_ICON,\r\n backgroundRepeat: 'no-repeat',\r\n backgroundPosition: 'right 1rem center',\r\n backgroundSize: '16px'\r\n}\r\n\r\nexport const Select = ({\r\n id,\r\n name,\r\n value,\r\n onChange,\r\n options,\r\n placeholder = DEFAULT_PLACEHOLDER,\r\n className = DEFAULT_CLASS_NAME,\r\n dataName,\r\n}: SelectProps) => {\r\n const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\r\n onChange(e.target.value)\r\n }\r\n\r\n return (\r\n <select\r\n id={id}\r\n name={name}\r\n value={value}\r\n onChange={handleChange}\r\n className={className}\r\n data-name={dataName || name}\r\n style={selectStyles}\r\n >\r\n <option value=\"\">{placeholder}</option>\r\n {options.map((option) => (\r\n <option key={option.value} value={option.value}>\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n )\r\n}\r\n"],"names":["loadReactRouterLink","RouterLink","DEFAULT_VARIANT","DEFAULT_SIZE","BASE_BUTTON_CLASS","ICON_WRAPPER_CLASS","VARIANT_CLASS_MAP","SIZE_CLASS_MAP","ROUNDED_CLASS_MAP","buildClassNames","variant","size","fullWidth","loading","rounded","className","ButtonContent","icon","children","jsxs","Fragment","jsx","isRouterLinkButton","props","isExternalLinkButton","renderRouterLink","to","content","renderExternalLink","href","linkProps","target","rel","restLinkProps","renderButton","disabled","buttonProps","Button","restProps","classNames","DEFAULT_TEXT","CSS_CLASSES","DOM_IDS","SPINNER_CONFIG","SPINNER_SIZE_MAP","OVERLAY_Z_INDEX","OVERLAY_OPACITY","createCenteredAbsoluteStyle","createFullSizeStyle","SpinnerBalls","_","index","InlineSpinnerContainer","container","InlineLoading","text","gap","fontSize","OverlayBackground","OverlayContent","OverlayLoading","Loading","CHEVRON_DOWN_ICON","DEFAULT_PLACEHOLDER","DEFAULT_CLASS_NAME","selectStyles","Select","id","name","value","onChange","options","placeholder","dataName","e","option"],"mappings":";AAGA,MAAMA,IAAsB,MAAW;AACrC,MAAI;AACF,WAAO,QAAQ,wBAAwB,EAAE;AAAA,EAC3C,QAAQ;AACN,WAAO;AAAA,EACT;AACF,GAEMC,IAAaD,EAAA,GAEbE,IAAkB,WAClBC,IAAe,UACfC,IAAoB,UACpBC,IAAqB,cAoCrBC,IAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AACV,GAEMC,IAA6C;AAAA,EACjD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAmD;AAAA,EACvD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR,GAEMC,IAAkB,CACtBC,GACAC,GACAC,GACAC,GACAC,GACAC,MAEgB;AAAA,EACdX;AAAA,EACAE,EAAkBI,CAAO;AAAA,EACzBH,EAAeI,CAAI;AAAA,EACnBG,KAAWN,EAAkBM,CAAO;AAAA,EACpCF,KAAa;AAAA,EACbC,KAAW;AAAA,EACXE;AAAA,EAGa,OAAO,OAAO,EAAE,KAAK,GAAG,GAGnCC,IAAiF,CAAC,EAAE,MAAAC,GAAM,UAAAC,EAAA,MAC9F,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,EAAAH,KAAQ,gBAAAI,EAAC,QAAA,EAAK,WAAWhB,GAAqB,UAAAY,GAAK;AAAA,EACnDC;AAAA,GACH,GAGII,IAAqB,CAACC,MACnB,QAAQA,KAAS,EAAQA,EAAM,IAGlCC,IAAuB,CAACD,MACrB,UAAUA,KAAS,EAAQA,EAAM,MAGpCE,IAAmB,CAACC,GAAYX,GAAmBY,MAClD1B,IAQH,gBAAAoB,EAACpB,GAAA,EAAW,IAAAyB,GAAQ,WAAAX,GACjB,UAAAY,GACH,KATI,QAAQ,IAAI,aAAa,iBAC3B,QAAQ,KAAK,gEAAgE,GAExE,OAULC,IAAqB,CACzBC,GACAd,GACAY,GACAG,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,KAAAC,GAAK,GAAGC,MAAkBH;AAC1C,SACE,gBAAAT,EAAC,OAAE,MAAAQ,GAAY,WAAAd,GAAsB,QAAAgB,GAAgB,KAAAC,GAAW,GAAGC,GAChE,UAAAN,EAAA,CACH;AAEJ,GAEMO,IAAe,CACnBnB,GACAY,GACAQ,GACAtB,GACAuB,MAGE,gBAAAf,EAAC,YAAO,WAAAN,GAAsB,UAAUoB,KAAYtB,GAAU,GAAGuB,GAC9D,UAAAT,EAAA,CACH,GAISU,KAAgC,CAACd,MAAU;AACtD,QAAM;AAAA,IACJ,SAAAb,IAAUR;AAAAA,IACV,MAAAS,IAAOR;AAAA,IACP,SAAAW;AAAA,IACA,WAAAF,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,UAAAK;AAAA,IACA,MAAAD;AAAA,IACA,WAAAF,IAAY;AAAA,IACZ,GAAGuB;AAAA,EAAA,IACDf,GAEEgB,IAAa9B,EAAgBC,GAASC,GAAMC,GAAWC,GAASC,GAASC,CAAS,GAClFY,IAAU,gBAAAN,EAACL,GAAA,EAAc,MAAAC,GAAa,UAAAC,EAAA,CAAS;AAErD,MAAII,EAAmBC,CAAK;AAC1B,WAAOE,EAAiBF,EAAM,IAAIgB,GAAYZ,CAAO;AAGvD,MAAIH,EAAqBD,CAAK;AAC5B,WAAOK;AAAA,MACLL,EAAM;AAAA,MACNgB;AAAA,MACAZ;AAAA,MACAW;AAAA,IAAA;AAIJ,QAAM,EAAE,UAAAH,GAAU,GAAGC,EAAA,IAAgBE;AACrC,SAAOJ,EAAaK,GAAYZ,GAASQ,KAAY,IAAOtB,GAASuB,CAAW;AAClF,GC1KMI,IAAe,yCACftC,IAAkC,WAElCuC,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,WAAW;AACb,GAEMC,IAAU;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AACR,GAEMC,IAAiB;AAAA,EACrB,YAAY;AAEd,GAEMC,IAAmB;AAAA,EACvB,IAAI,EAAE,WAAW,qBAAqB,KAAK,oBAAoB,UAAU,sBAAA;AAAA,EACzE,IAAI,EAAE,WAAW,qBAAqB,KAAK,oBAAoB,UAAU,wBAAA;AAAA,EACzE,IAAI,EAAE,WAAW,qBAAqB,KAAK,oBAAoB,UAAU,sBAAA;AAC3E,GAEMC,IAAkB,MAClBC,IAAkB,KAElBC,IAA8B,OAAO;AAAA,EACzC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW;AACb,IAEMC,IAAsB,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AACV,IAEMC,IAAe,MACnB,gBAAA5B,EAAC,OAAA,EAAI,WAAWoB,EAAY,WACzB,UAAA,MAAM,KAAK,EAAE,QAAQE,EAAe,WAAA,GAAc,CAACO,GAAGC,MACrD,gBAAA9B,EAAC,WAAS,gBAAgB8B,CAAK,EAAI,CACpC,EAAA,CACH,GAKIC,IAAyB,CAAC,EAAE,MAAAzC,QAAwB;AACxD,QAAM,EAAE,WAAA0C,EAAA,IAAcT,EAAiBjC,CAAI;AAE3C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWoB,EAAY;AAAA,MACvB,OAAO,EAAE,OAAOY,GAAW,QAAQA,EAAA;AAAA,MAEnC,4BAACJ,GAAA,CAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGpB,GAIMK,IAAgB,CAAC,EAAE,MAAAC,GAAM,MAAA5C,QAA+B;AAC5D,QAAM,EAAE,KAAA6C,GAAK,UAAAC,MAAab,EAAiBjC,CAAI;AAE/C,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,KAAAqC;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAnC,EAAC+B,KAAuB,MAAAzC,GAAY;AAAA,QACnC4C,KACC,gBAAAlC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,UAAAoC;AAAA,cACA,YAAY;AAAA,YAAA;AAAA,YAGb,UAAAF;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAIMG,IAAoB,MACxB,gBAAArC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWoB,EAAY;AAAA,IACvB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,SAASK;AAAA,MACT,UAAU;AAAA,MACV,GAAGE,EAAA;AAAA,IAAoB;AAAA,EACzB;AACF,GAGIW,IAAiB,CAAC,EAAE,MAAAJ,QACxB,gBAAApC,EAAC,OAAA,EAAI,IAAIsB,EAAY,KAAK,WAAWA,EAAY,KAC/C,UAAA;AAAA,EAAA,gBAAApB,EAAC,OAAA,EAAI,IAAIqB,EAAQ,SAAS,OAAOK,EAAA,GAC/B,UAAA,gBAAA1B,EAAC4B,GAAA,CAAA,CAAa,EAAA,CAChB;AAAA,EACA,gBAAA5B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAIqB,EAAQ;AAAA,MACZ,WAAWD,EAAY;AAAA,MACvB,OAAO;AAAA,QACL,GAAGM,EAAA;AAAA,QACH,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAGX,UAAAQ;AAAA,IAAA;AAAA,EAAA;AACH,GACF,GAGIK,IAAiB,CAACrC,MACtB,gBAAAJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAIsB,EAAY;AAAA,IAChB,WAAWA,EAAY;AAAA,IACvB,OAAO;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,QAAQI;AAAA,MACR,GAAGG,EAAA;AAAA,IAAoB;AAAA,IAGzB,UAAA;AAAA,MAAA,gBAAA3B,EAACqC,GAAA,EAAkB;AAAA,MACnB,gBAAArC,EAACsC,GAAA,EAAgB,GAAGpC,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAC7B,GAGWsC,KAAU,CAAC;AAAA,EACtB,MAAAN,IAAOf;AAAA,EACP,SAAA9B,IAAUR;AAAA,EACV,MAAAS,IAAO;AACT,MACMD,MAAY,WACP,gBAAAW,EAACiC,GAAA,EAAc,MAAAC,GAAY,MAAA5C,EAAA,CAAY,IAGzC,gBAAAU,EAACuC,KAAe,MAAAL,GAAY,GCtK/BO,IAAoB,wMAEpBC,IAAsB,+BACtBC,IAAqB,+BAErBC,IAA8B;AAAA,EAClC,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,iBAAiBH;AAAA,EACjB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,gBAAgB;AAClB,GAEaI,KAAS,CAAC;AAAA,EACrB,IAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAcT;AAAA,EACd,WAAAhD,IAAYiD;AAAA,EACZ,UAAAS;AACF,MAMI,gBAAAtD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAAgD;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UATiB,CAACK,MAAsC;AAC1D,MAAAJ,EAASI,EAAE,OAAO,KAAK;AAAA,IACzB;AAAA,IAQI,WAAA3D;AAAA,IACA,aAAW0D,KAAYL;AAAA,IACvB,OAAOH;AAAA,IAEP,UAAA;AAAA,MAAA,gBAAA5C,EAAC,UAAA,EAAO,OAAM,IAAI,UAAAmD,GAAY;AAAA,MAC7BD,EAAQ,IAAI,CAACI,MACZ,gBAAAtD,EAAC,UAAA,EAA0B,OAAOsD,EAAO,OACtC,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,IAAA;AAAA,EAAA;AAAA;"}
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { B as
|
|
2
|
-
import { tokens as
|
|
3
|
-
import { iconPlaceholder as
|
|
1
|
+
import { B as r, L as t, S as a } from "./Select-BpqrjmYB.js";
|
|
2
|
+
import { tokens as s } from "./tokens/index.js";
|
|
3
|
+
import { iconPlaceholder as f } from "./icons/index.js";
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
r as Button,
|
|
6
6
|
t as Loading,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
a as Select,
|
|
8
|
+
f as iconPlaceholder,
|
|
9
|
+
s as tokens
|
|
9
10
|
};
|
|
10
11
|
//# sourceMappingURL=index.js.map
|