sanitas-ui-design-system 1.1.0 → 1.1.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.
- package/dist/Button-DZGHhKoc.js +73 -0
- package/dist/Button-DZGHhKoc.js.map +1 -0
- package/dist/assets/Button.css +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/ui/components/Button/Button.d.ts +3 -1
- package/dist/ui/components/Button/Button.d.ts.map +1 -1
- package/dist/ui/index.js +1 -1
- package/package.json +1 -1
- package/dist/Button-3zP54AO8.js +0 -60
- package/dist/Button-3zP54AO8.js.map +0 -1
|
@@ -0,0 +1,73 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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":";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,IAAgC,CAACd,MAAU;AACtD,QAAM;AAAA,IACJ,SAAAb,IAAUR;AAAA,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;"}
|
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{font-family:var(--font-family);font-weight:var(--font-weight-medium);border:2px solid transparent;border-radius:var(--radius-3xl);cursor:pointer;transition:
|
|
1
|
+
.button{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);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);text-decoration:none;outline:none}.button:focus-visible{outline:2px solid var(--celeste);outline-offset:2px}.button:disabled{opacity:.5;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:#002f871a}.isGhost:active:not(:disabled){background-color:#002f8726}.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:#002f870d}.isStatic{background-color:var(--celeste);color:var(--blanco);border:2px solid var(--celeste);cursor:pointer}.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:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid var(--blanco);border-radius:50%;border-top-color:transparent;animation:button-spin .6s linear infinite}@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)}
|
package/dist/index.js
CHANGED