sanitas-ui-design-system 1.1.2 → 1.1.4
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/Loading-CH95_MB_.js +189 -0
- package/dist/Loading-CH95_MB_.js.map +1 -0
- package/dist/assets/Loading.css +1 -0
- package/dist/index.js +6 -5
- package/dist/styles/index.css +1 -1
- package/dist/ui/components/Loading/Loading.d.ts +18 -0
- package/dist/ui/components/Loading/Loading.d.ts.map +1 -0
- package/dist/ui/components/Loading/index.d.ts +3 -0
- package/dist/ui/components/Loading/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 -5
- package/dist/Button-DZGHhKoc.js +0 -73
- package/dist/Button-DZGHhKoc.js.map +0 -1
- package/dist/assets/Button.css +0 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export type LoadingVariant = 'overlay' | 'inline';
|
|
2
|
+
export type LoadingSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
type BaseLoadingProps = {
|
|
4
|
+
text?: string;
|
|
5
|
+
variant?: LoadingVariant;
|
|
6
|
+
size?: LoadingSize;
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
type LoadingAsOverlay = BaseLoadingProps & {
|
|
10
|
+
variant?: 'overlay';
|
|
11
|
+
};
|
|
12
|
+
type LoadingAsInline = BaseLoadingProps & {
|
|
13
|
+
variant: 'inline';
|
|
14
|
+
};
|
|
15
|
+
export type LoadingProps = LoadingAsOverlay | LoadingAsInline;
|
|
16
|
+
export declare const Loading: ({ text, variant, size, }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=Loading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/Loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAA;AACjD,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5C,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,gBAAgB,GAAG,gBAAgB,GAAG;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,eAAe,GAAG,gBAAgB,GAAG;IACxC,OAAO,EAAE,QAAQ,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAA;AA2J7D,eAAO,MAAM,OAAO,GAAI,0BAIrB,YAAY,4CAMd,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/Loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/ui/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sanitas-ui-design-system",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Design System compartido para los microfrontends de Sanitas",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
-
"repository": {
|
|
10
|
-
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/proyectosti_keralty/sanitas-ui.git"
|
|
12
|
-
},
|
|
13
9
|
"publishConfig": {
|
|
14
10
|
"registry": "https://registry.npmjs.org",
|
|
15
11
|
"access": "public"
|
package/dist/Button-DZGHhKoc.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx as i, jsxs as h, Fragment as A } from "react/jsx-runtime";
|
|
2
|
-
const f = () => {
|
|
3
|
-
try {
|
|
4
|
-
return require("@tanstack/react-router").Link;
|
|
5
|
-
} catch {
|
|
6
|
-
return null;
|
|
7
|
-
}
|
|
8
|
-
}, d = f(), _ = "primary", B = "medium", g = "button", x = "buttonIcon", E = {
|
|
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
|
-
}, N = {
|
|
19
|
-
small: "isSmall",
|
|
20
|
-
medium: "isMedium",
|
|
21
|
-
large: "isLarge"
|
|
22
|
-
}, b = {
|
|
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
|
-
}, k = (n, e, t, o, s, r) => [
|
|
33
|
-
g,
|
|
34
|
-
E[n],
|
|
35
|
-
N[e],
|
|
36
|
-
s && b[s],
|
|
37
|
-
t && "isFullWidth",
|
|
38
|
-
o && "isLoading",
|
|
39
|
-
r
|
|
40
|
-
].filter(Boolean).join(" "), P = ({ icon: n, children: e }) => /* @__PURE__ */ h(A, { children: [
|
|
41
|
-
n && /* @__PURE__ */ i("span", { className: x, children: n }),
|
|
42
|
-
e
|
|
43
|
-
] }), C = (n) => "to" in n && !!n.to, I = (n) => "href" in n && !!n.href, y = (n, e, t) => d ? /* @__PURE__ */ i(d, { to: n, className: e, children: t }) : (process.env.NODE_ENV === "development" && console.warn('Button: La prop "to" requiere @tanstack/react-router instalado'), null), D = (n, e, t, o) => {
|
|
44
|
-
const { target: s, rel: r, ...l } = o;
|
|
45
|
-
return /* @__PURE__ */ i("a", { href: n, className: e, target: s, rel: r, ...l, children: t });
|
|
46
|
-
}, T = (n, e, t, o, s) => /* @__PURE__ */ i("button", { className: n, disabled: t || o, ...s, children: e }), F = (n) => {
|
|
47
|
-
const {
|
|
48
|
-
variant: e = _,
|
|
49
|
-
size: t = B,
|
|
50
|
-
rounded: o,
|
|
51
|
-
fullWidth: s = !1,
|
|
52
|
-
loading: r = !1,
|
|
53
|
-
children: l,
|
|
54
|
-
icon: m,
|
|
55
|
-
className: R = "",
|
|
56
|
-
...u
|
|
57
|
-
} = n, a = k(e, t, s, r, o, R), c = /* @__PURE__ */ i(P, { icon: m, children: l });
|
|
58
|
-
if (C(n))
|
|
59
|
-
return y(n.to, a, c);
|
|
60
|
-
if (I(n))
|
|
61
|
-
return D(
|
|
62
|
-
n.href,
|
|
63
|
-
a,
|
|
64
|
-
c,
|
|
65
|
-
u
|
|
66
|
-
);
|
|
67
|
-
const { disabled: L, ...S } = u;
|
|
68
|
-
return T(a, c, L || !1, r, S);
|
|
69
|
-
};
|
|
70
|
-
export {
|
|
71
|
-
F as B
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=Button-DZGHhKoc.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button-DZGHhKoc.js","sources":["../src/ui/components/Button/Button.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"],"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"],"mappings":"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"}
|
package/dist/assets/Button.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.button{--btn-overlay-hover: .1;--btn-overlay-active: .15;--btn-disabled-opacity: .5;--btn-spinner-size: 1em;font-family:var(--font-family);font-weight:var(--font-weight-medium);border:2px solid transparent;border-radius:var(--radius-3xl);cursor:pointer;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);text-decoration:none;outline:none;position:relative;will-change:background-color,color,border-color}.button:focus-visible{outline:2px solid var(--celeste);outline-offset:2px}.button:disabled{opacity:var(--btn-disabled-opacity);cursor:not-allowed;pointer-events:none}.isPrimary{background-color:var(--azul);color:var(--blanco);border:2px solid var(--azul)}.isPrimary:hover:not(:disabled){background-color:var(--blanco);color:var(--azul)}.isPrimary:active:not(:disabled){background-color:var(--gray-lighter)}.isSecondary{background-color:var(--celeste);color:var(--blanco);border:2px solid var(--celeste)}.isSecondary:hover:not(:disabled){background-color:var(--blanco);color:var(--celeste)}.isSecondary:active:not(:disabled){background-color:var(--gray-lighter)}.isSuccess{background-color:var(--verde);color:var(--blanco);border:2px solid var(--verde)}.isSuccess:hover:not(:disabled){background-color:var(--blanco);color:var(--verde)}.isSuccess:active:not(:disabled){background-color:var(--gray-lighter)}.isDanger{background-color:var(--rojo);color:var(--blanco);border:2px solid var(--rojo)}.isDanger:hover:not(:disabled){background-color:var(--blanco);color:var(--rojo)}.isDanger:active:not(:disabled){background-color:var(--gray-lighter)}.isOutline{background-color:transparent;color:var(--azul);border:2px solid var(--azul)}.isOutline:hover:not(:disabled){background-color:var(--azul);color:var(--blanco)}.isOutline:active:not(:disabled){background-color:var(--hover-btn);border-color:var(--hover-btn)}.isGhost{background-color:transparent;color:var(--azul)}.isGhost:hover:not(:disabled){background-color:rgba(0,47,135,var(--btn-overlay-hover))}.isGhost:active:not(:disabled){background-color:rgba(0,47,135,var(--btn-overlay-active))}.isWhite{background-color:var(--blanco);color:var(--azul);border:2px solid var(--blanco)}.isWhite:hover:not(:disabled){background-color:var(--gray-light);box-shadow:var(--shadow-md)}.isWhite:active:not(:disabled){background-color:var(--gray-lighter);box-shadow:var(--shadow-sm)}.isIcon{background-color:transparent;color:var(--azul);padding:var(--spacing-2);min-height:auto;display:inline-flex;align-items:center;gap:var(--spacing-2)}.isIcon:hover:not(:disabled){background-color:rgba(0,47,135,calc(var(--btn-overlay-hover) / 2))}.isStatic{padding:var(--spacing-0) var(--spacing-8);background-color:var(--celeste);color:var(--blanco);border:2px solid var(--celeste);cursor:pointer;min-height:40px}.isStatic:hover:not(:disabled){background-color:var(--blanco);color:var(--celeste)}.isStatic:active:not(:disabled){background-color:var(--gray-lighter)}.isSmall{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);min-height:32px}.isMedium{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-base);min-height:40px}.isLarge{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg);min-height:48px}.isFullWidth{width:100%}.isLoading{position:relative;color:transparent;pointer-events:none}.isLoading:after{content:"";position:absolute;width:var(--btn-spinner-size);height:var(--btn-spinner-size);top:50%;left:50%;margin-left:calc(var(--btn-spinner-size) / -2);margin-top:calc(var(--btn-spinner-size) / -2);border:2px solid currentColor;border-radius:50%;border-top-color:transparent;animation:button-spin .6s linear infinite;will-change:transform}@keyframes button-spin{to{transform:rotate(360deg)}}.buttonIcon{display:inline-flex;align-items:center;justify-content:center}.isRounded-none{border-radius:var(--radius-none)}.isRounded-sm{border-radius:var(--radius-sm)}.isRounded-base{border-radius:var(--radius-base)}.isRounded-md{border-radius:var(--radius-md)}.isRounded-lg{border-radius:var(--radius-lg)}.isRounded-xl{border-radius:var(--radius-xl)}.isRounded-2xl{border-radius:var(--radius-2xl)}.isRounded-3xl{border-radius:var(--radius-3xl)}.isRounded-full{border-radius:var(--radius-full)}@media screen and (max-width:479px){.isStatic{display:none}}
|