@undp/design-system-react
Version:
React based design system for UNDP
75 lines (74 loc) • 3.99 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./dist-DxuGUd9a.js";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/button.tsx
var i = t("cursor-pointer m-0! tracking-[0.48px] inline-flex items-center justify-center gap-2 uppercase whitespace-nowrap rounded font-bold transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
variants: {
variant: {
primary: "bg-primary text-content-reverse hover:bg-primary-hover",
secondary: "bg-secondary text-content-reverse hover:bg-secondary-hover",
tertiary: "bg-tertiary text-content-primary hover:bg-tertiary-hover",
quaternary: "bg-quaternary text-content-primary hover:bg-quaternary-hover",
link: "text-content-primary hover:text-content-secondary",
outline: "bg-transparent text-content-primary border-2 border-foreground hover:bg-surface-xs",
icon: "bg-transparent text-content-primary hover:text-content-secondary",
success: "bg-success text-content-reverse hover:bg-success-hover",
warning: "bg-warning text-content-primary hover:bg-warning-hover",
info: "bg-info text-content-reverse hover:bg-info-hover",
error: "bg-error text-content-reverse hover:bg-error-hover",
surface: "bg-surface text-content-primary hover:bg-surface-hover",
"surface-hard": "bg-surface-hard text-content-primary hover:bg-surface-hard-hover",
background: "bg-background text-content-primary hover:bg-background-soft",
"background-soft": "bg-background-soft text-content-primary hover:bg-background",
foreground: "bg-foreground text-content-reverse hover:bg-foreground-soft",
"foreground-soft": "bg-foreground-soft text-content-reverse hover:bg-foreground"
},
arrow: { true: "\n after:content-['']\n after:inline-block\n after:h-[20px]\n after:w-[13px]\n after:ml-3\n rtl:after:ml-0\n rtl:after:mr-3\n rtl:after:scale-x-[-1]\n after:bg-no-repeat\n after:bg-left\n after:transition-transform\n after:duration-200\n after:ease-in-out\n hover:after:translate-x-[70%]\n rtl:hover:after:-translate-x-[70%]\n disabled:hover:after:translate-x-0\n rtl:disabled:hover:after:translate-x-0\n group-hover:after:translate-x-[70%]\n rtl:group-hover:after:-translate-x-[70%]\n disabled:group-hover:after:translate-x-0\n rtl:disabled:group-hover:after:translate-x-0\n " },
size: {
base: "text-base leading-xs",
xs: "text-xs leading-xs",
sm: "text-sm leading-xs",
xl: "text-xl leading-xs"
},
rounded: {
base: "rounded-base",
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
xl: "rounded-xl",
"2xl": "rounded-2xl",
full: "rounded-full"
},
padding: {
base: "py-4 px-6",
sm: "px-4 py-2",
none: "py-0 px-0"
}
},
defaultVariants: {
variant: "primary",
size: "base",
padding: "base",
rounded: "base",
arrow: !0
}
});
function a({ className: t, variant: a = "primary", size: o, arrow: s = !0, rounded: c, padding: l, asChild: u = !1, ...d }) {
return /* @__PURE__ */ r(u ? n : "button", {
"data-slot": "button",
"data-variant": a,
"data-size": o,
className: e(i({
variant: a,
size: o,
rounded: c,
padding: l,
arrow: a !== "icon" && s
}), s ? a === "primary" ? "foreground-arrow" : a === "secondary" || a === "foreground" || a === "foreground-soft" || a === "success" || a === "error" || a === "info" ? "background-arrow" : a === "link" || a === "tertiary" || a === "quaternary" || a === "surface" || a === "surface-hard" || a === "outline" || a === "background" || a === "background-soft" ? "primary-arrow" : "" : "", t),
...d
});
}
//#endregion
export { a as Button, i as buttonVariants };
//# sourceMappingURL=Button.js.map