@nordcom/nordstar-button
Version:
82 lines (81 loc) • 12.6 kB
JavaScript
import { cn, forwardRef } from "@nordcom/nordstar-system";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/button.tsx
var variants = cva(cn("flex w-fit select-none appearance-none items-center justify-center gap-3 rounded-sm border-2 border-solid px-4 py-2 text-center font-bold text-sm no-underline outline-none transition-[color,background-color,border-color,filter,transform,box-shadow] duration-200 ease-out-soft focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"), {
compoundVariants: [
{
class: "text-primary hover:bg-primary hover:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground active:brightness-75",
color: "primary",
variant: "outline"
},
{
class: "text-secondary hover:bg-secondary hover:text-secondary-foreground focus-visible:bg-secondary focus-visible:text-secondary-foreground active:brightness-75",
color: "secondary",
variant: "outline"
},
{
class: "text-foreground hover:bg-foreground hover:text-background focus-visible:bg-foreground focus-visible:text-background active:brightness-75",
color: "foreground",
variant: "outline"
}
],
defaultVariants: {
color: "primary",
variant: "solid"
},
variants: {
color: {
foreground: "border-foreground bg-foreground text-background",
primary: "border-primary bg-primary text-primary-foreground",
secondary: "border-secondary bg-secondary text-secondary-foreground"
},
variant: {
outline: "bg-transparent active:translate-y-0",
solid: "shadow-raised hover:-translate-y-px hover:shadow-floating hover:brightness-50 focus-visible:brightness-50 active:translate-y-0 active:shadow-raised active:brightness-75"
}
}
});
/**
* `<Button/>`, a generalized button element.
*
* @param {object} props - `<Button/>` props.
* @param {As} [props.as] - The element to render the component as.
* @param {'outline' | 'solid'} [props.variant='solid'] - The variant.
* @param {NordstarColor} [props.color='primary'] - The color scheme.
* @returns {React.ReactNode} The `<Button/>` component.
*
* @example
* ```tsx
* <Button>Button</Button>
* ```
*/
var Button = forwardRef(({ variant = "solid", color = "primary", icon = null, as: Tag = "button", disabled, className, type, children, contentClassName, iconClassName, ...props }, ref) => {
return /* @__PURE__ */ jsxs(Tag, {
...props,
...typeof disabled !== "undefined" && {
"aria-disabled": disabled,
...Tag === "button" ? { disabled } : { tabIndex: disabled ? -1 : void 0 }
},
className: cn(variants({
variant,
color: color === "default" ? "foreground" : color
}), !disabled && "cursor-pointer", disabled && "pointer-events-none cursor-not-allowed brightness-50", className),
"data-color": color,
"data-variant": variant,
draggable: false,
ref,
...Tag === "button" ? { type: type || "button" } : {},
children: [icon ? /* @__PURE__ */ jsx("div", {
className: cn("contents *:block *:aspect-square *:w-4 *:stroke-1 *:font-inherit *:text-[length:inherit] *:text-inherit", iconClassName),
children: icon
}) : null, /* @__PURE__ */ jsx("div", {
className: cn("block text-center font-heading font-inherit text-inherit uppercase", contentClassName),
children
})]
});
});
var button_default = Object.assign(Button, { displayName: "Nordstar.Button" });
//#endregion
export { button_default as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uL3NyYy9idXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQXMsIE5vcmRzdGFyQ29sb3IgfSBmcm9tICdAbm9yZGNvbS9ub3Jkc3Rhci1zeXN0ZW0nO1xuaW1wb3J0IHsgY24sIGZvcndhcmRSZWYgfSBmcm9tICdAbm9yZGNvbS9ub3Jkc3Rhci1zeXN0ZW0nO1xuaW1wb3J0IHR5cGUgeyBWYXJpYW50UHJvcHMgfSBmcm9tICdjbGFzcy12YXJpYW5jZS1hdXRob3JpdHknO1xuaW1wb3J0IHsgY3ZhIH0gZnJvbSAnY2xhc3MtdmFyaWFuY2UtYXV0aG9yaXR5JztcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5jb25zdCB2YXJpYW50cyA9IGN2YShcbiAgICBjbihcbiAgICAgICAgJ2ZsZXggdy1maXQgc2VsZWN0LW5vbmUgYXBwZWFyYW5jZS1ub25lIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMyByb3VuZGVkLXNtIGJvcmRlci0yIGJvcmRlci1zb2xpZCBweC00IHB5LTIgdGV4dC1jZW50ZXIgZm9udC1ib2xkIHRleHQtc20gbm8tdW5kZXJsaW5lIG91dGxpbmUtbm9uZSB0cmFuc2l0aW9uLVtjb2xvcixiYWNrZ3JvdW5kLWNvbG9yLGJvcmRlci1jb2xvcixmaWx0ZXIsdHJhbnNmb3JtLGJveC1zaGFkb3ddIGR1cmF0aW9uLTIwMCBlYXNlLW91dC1zb2Z0IGZvY3VzLXZpc2libGU6cmluZy0yIGZvY3VzLXZpc2libGU6cmluZy1mb3JlZ3JvdW5kIGZvY3VzLXZpc2libGU6cmluZy1vZmZzZXQtMiBmb2N1cy12aXNpYmxlOnJpbmctb2Zmc2V0LWJhY2tncm91bmQnLFxuICAgICksXG4gICAge1xuICAgICAgICBjb21wb3VuZFZhcmlhbnRzOiBbXG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgY2xhc3M6ICd0ZXh0LXByaW1hcnkgaG92ZXI6YmctcHJpbWFyeSBob3Zlcjp0ZXh0LXByaW1hcnktZm9yZWdyb3VuZCBmb2N1cy12aXNpYmxlOmJnLXByaW1hcnkgZm9jdXMtdmlzaWJsZTp0ZXh0LXByaW1hcnktZm9yZWdyb3VuZCBhY3RpdmU6YnJpZ2h0bmVzcy03NScsXG4gICAgICAgICAgICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgICAgICAgICAgICB2YXJpYW50OiAnb3V0bGluZScsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgIGNsYXNzOiAndGV4dC1zZWNvbmRhcnkgaG92ZXI6Ymctc2Vjb25kYXJ5IGhvdmVyOnRleHQtc2Vjb25kYXJ5LWZvcmVncm91bmQgZm9jdXMtdmlzaWJsZTpiZy1zZWNvbmRhcnkgZm9jdXMtdmlzaWJsZTp0ZXh0LXNlY29uZGFyeS1mb3JlZ3JvdW5kIGFjdGl2ZTpicmlnaHRuZXNzLTc1JyxcbiAgICAgICAgICAgICAgICBjb2xvcjogJ3NlY29uZGFyeScsXG4gICAgICAgICAgICAgICAgdmFyaWFudDogJ291dGxpbmUnLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBjbGFzczogJ3RleHQtZm9yZWdyb3VuZCBob3ZlcjpiZy1mb3JlZ3JvdW5kIGhvdmVyOnRleHQtYmFja2dyb3VuZCBmb2N1cy12aXNpYmxlOmJnLWZvcmVncm91bmQgZm9jdXMtdmlzaWJsZTp0ZXh0LWJhY2tncm91bmQgYWN0aXZlOmJyaWdodG5lc3MtNzUnLFxuICAgICAgICAgICAgICAgIGNvbG9yOiAnZm9yZWdyb3VuZCcsXG4gICAgICAgICAgICAgICAgdmFyaWFudDogJ291dGxpbmUnLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgXSxcbiAgICAgICAgZGVmYXVsdFZhcmlhbnRzOiB7XG4gICAgICAgICAgICBjb2xvcjogJ3ByaW1hcnknLFxuICAgICAgICAgICAgdmFyaWFudDogJ3NvbGlkJyxcbiAgICAgICAgfSxcbiAgICAgICAgdmFyaWFudHM6IHtcbiAgICAgICAgICAgIGNvbG9yOiB7XG4gICAgICAgICAgICAgICAgZm9yZWdyb3VuZDogJ2JvcmRlci1mb3JlZ3JvdW5kIGJnLWZvcmVncm91bmQgdGV4dC1iYWNrZ3JvdW5kJyxcbiAgICAgICAgICAgICAgICBwcmltYXJ5OiAnYm9yZGVyLXByaW1hcnkgYmctcHJpbWFyeSB0ZXh0LXByaW1hcnktZm9yZWdyb3VuZCcsXG4gICAgICAgICAgICAgICAgc2Vjb25kYXJ5OiAnYm9yZGVyLXNlY29uZGFyeSBiZy1zZWNvbmRhcnkgdGV4dC1zZWNvbmRhcnktZm9yZWdyb3VuZCcsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgdmFyaWFudDoge1xuICAgICAgICAgICAgICAgIG91dGxpbmU6ICdiZy10cmFuc3BhcmVudCBhY3RpdmU6dHJhbnNsYXRlLXktMCcsXG4gICAgICAgICAgICAgICAgc29saWQ6ICdzaGFkb3ctcmFpc2VkIGhvdmVyOi10cmFuc2xhdGUteS1weCBob3ZlcjpzaGFkb3ctZmxvYXRpbmcgaG92ZXI6YnJpZ2h0bmVzcy01MCBmb2N1cy12aXNpYmxlOmJyaWdodG5lc3MtNTAgYWN0aXZlOnRyYW5zbGF0ZS15LTAgYWN0aXZlOnNoYWRvdy1yYWlzZWQgYWN0aXZlOmJyaWdodG5lc3MtNzUnLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICB9LFxuKTtcblxudHlwZSBCdXR0b25CYXNlUHJvcHMgPSB7XG4gICAgYXM/OiBBcztcblxuICAgIHZhcmlhbnQ/OiAnb3V0bGluZScgfCAnc29saWQnO1xuICAgIGNvbG9yPzogTm9yZHN0YXJDb2xvcjtcbiAgICBpY29uPzogUmVhY3ROb2RlO1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcblxuICAgIGNvbnRlbnRDbGFzc05hbWU/OiBzdHJpbmc7XG59ICYgT21pdDxWYXJpYW50UHJvcHM8dHlwZW9mIHZhcmlhbnRzPiwgJ2NvbG9yJz47XG5cbnR5cGUgQnV0dG9uSWNvblByb3BzID0ge1xuICAgIGljb246IFJlYWN0Tm9kZTtcbiAgICBpY29uQ2xhc3NOYW1lPzogc3RyaW5nO1xufTtcbnR5cGUgQnV0dG9uTm9JY29uUHJvcHMgPSB7XG4gICAgaWNvbj86IHVuZGVmaW5lZDtcbiAgICBpY29uQ2xhc3NOYW1lPzogbmV2ZXI7XG59O1xuXG5leHBvcnQgdHlwZSBCdXR0b25Qcm9wcyA9IEJ1dHRvbkJhc2VQcm9wcyAmIChCdXR0b25JY29uUHJvcHMgfCBCdXR0b25Ob0ljb25Qcm9wcyk7XG5cbi8qKlxuICogYDxCdXR0b24vPmAsIGEgZ2VuZXJhbGl6ZWQgYnV0dG9uIGVsZW1lbnQuXG4gKlxuICogQHBhcmFtIHtvYmplY3R9IHByb3BzIC0gYDxCdXR0b24vPmAgcHJvcHMuXG4gKiBAcGFyYW0ge0FzfSBbcHJvcHMuYXNdIC0gVGhlIGVsZW1lbnQgdG8gcmVuZGVyIHRoZSBjb21wb25lbnQgYXMuXG4gKiBAcGFyYW0geydvdXRsaW5lJyB8ICdzb2xpZCd9IFtwcm9wcy52YXJpYW50PSdzb2xpZCddIC0gVGhlIHZhcmlhbnQuXG4gKiBAcGFyYW0ge05vcmRzdGFyQ29sb3J9IFtwcm9wcy5jb2xvcj0ncHJpbWFyeSddIC0gVGhlIGNvbG9yIHNjaGVtZS5cbiAqIEByZXR1cm5zIHtSZWFjdC5SZWFjdE5vZGV9IFRoZSBgPEJ1dHRvbi8+YCBjb21wb25lbnQuXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYHRzeFxuICogPEJ1dHRvbj5CdXR0b248L0J1dHRvbj5cbiAqIGBgYFxuICovXG5jb25zdCBCdXR0b24gPSBmb3J3YXJkUmVmPCdidXR0b24nLCBCdXR0b25Qcm9wcz4oXG4gICAgKFxuICAgICAgICB7XG4gICAgICAgICAgICB2YXJpYW50ID0gJ3NvbGlkJyxcbiAgICAgICAgICAgIGNvbG9yID0gJ3ByaW1hcnknLFxuICAgICAgICAgICAgaWNvbiA9IG51bGwsXG4gICAgICAgICAgICBhczogVGFnID0gJ2J1dHRvbicsXG4gICAgICAgICAgICBkaXNhYmxlZCxcbiAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgIHR5cGUsXG4gICAgICAgICAgICBjaGlsZHJlbixcblxuICAgICAgICAgICAgY29udGVudENsYXNzTmFtZSxcbiAgICAgICAgICAgIGljb25DbGFzc05hbWUsXG4gICAgICAgICAgICAuLi5wcm9wc1xuICAgICAgICB9LFxuICAgICAgICByZWYsXG4gICAgKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8VGFnXG4gICAgICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgICAgIHsuLi4odHlwZW9mIGRpc2FibGVkICE9PSAndW5kZWZpbmVkJyAmJiB7XG4gICAgICAgICAgICAgICAgICAgICdhcmlhLWRpc2FibGVkJzogZGlzYWJsZWQsXG4gICAgICAgICAgICAgICAgICAgIC8vIGBkaXNhYmxlZGAgaXMgb25seSB2YWxpZCBvbiBmb3JtLWFzc29jaWF0ZWQgZWxlbWVudHMuIEZvciBhbnkgb3RoZXJcbiAgICAgICAgICAgICAgICAgICAgLy8gcG9seW1vcnBoaWMgYGFzYCAoZS5nLiBgYWAsIGBkaXZgKSByZWZsZWN0IHRoZSBzdGF0ZSB2aWEgYGFyaWEtZGlzYWJsZWRgXG4gICAgICAgICAgICAgICAgICAgIC8vIGFuZCBkcm9wIHRoZSBlbGVtZW50IG91dCBvZiB0aGUgdGFiIG9yZGVyIHNvIGl0IGlzIHRydWx5IGluZXJ0LlxuICAgICAgICAgICAgICAgICAgICAuLi4oVGFnID09PSAnYnV0dG9uJyA/IHsgZGlzYWJsZWQgfSA6IHsgdGFiSW5kZXg6IGRpc2FibGVkID8gLTEgOiB1bmRlZmluZWQgfSksXG4gICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudHMoe1xuICAgICAgICAgICAgICAgICAgICAgICAgdmFyaWFudCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbG9yOiBjb2xvciA9PT0gJ2RlZmF1bHQnID8gJ2ZvcmVncm91bmQnIDogY29sb3IsXG4gICAgICAgICAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgICAgICAgICAhZGlzYWJsZWQgJiYgJ2N1cnNvci1wb2ludGVyJyxcbiAgICAgICAgICAgICAgICAgICAgZGlzYWJsZWQgJiYgJ3BvaW50ZXItZXZlbnRzLW5vbmUgY3Vyc29yLW5vdC1hbGxvd2VkIGJyaWdodG5lc3MtNTAnLFxuICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICBkYXRhLWNvbG9yPXtjb2xvcn1cbiAgICAgICAgICAgICAgICBkYXRhLXZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICAgICAgZHJhZ2dhYmxlPXtmYWxzZX1cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICB7Li4uKFRhZyA9PT0gJ2J1dHRvbicgPyB7IHR5cGU6IHR5cGUgfHwgJ2J1dHRvbicgfSA6IHt9KX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7aWNvbiA/IChcbiAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAnY29udGVudHMgKjpibG9jayAqOmFzcGVjdC1zcXVhcmUgKjp3LTQgKjpzdHJva2UtMSAqOmZvbnQtaW5oZXJpdCAqOnRleHQtW2xlbmd0aDppbmhlcml0XSAqOnRleHQtaW5oZXJpdCcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaWNvbkNsYXNzTmFtZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgICAgICAgICAnYmxvY2sgdGV4dC1jZW50ZXIgZm9udC1oZWFkaW5nIGZvbnQtaW5oZXJpdCB0ZXh0LWluaGVyaXQgdXBwZXJjYXNlJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRlbnRDbGFzc05hbWUsXG4gICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L1RhZz5cbiAgICAgICAgKTtcbiAgICB9LFxuKTtcblxuZXhwb3J0IGRlZmF1bHQgT2JqZWN0LmFzc2lnbihCdXR0b24sIHtcbiAgICBkaXNwbGF5TmFtZTogJ05vcmRzdGFyLkJ1dHRvbicsXG59KTtcbiJdLCJtYXBwaW5ncyI6Ijs7OztBQU1BLElBQU0sV0FBVyxJQUNiLEdBQ0kseVlBQ0osR0FDQTtDQUNJLGtCQUFrQjtFQUNkO0dBQ0ksT0FBTztHQUNQLE9BQU87R0FDUCxTQUFTO0VBQ2I7RUFDQTtHQUNJLE9BQU87R0FDUCxPQUFPO0dBQ1AsU0FBUztFQUNiO0VBQ0E7R0FDSSxPQUFPO0dBQ1AsT0FBTztHQUNQLFNBQVM7RUFDYjtDQUNKO0NBQ0EsaUJBQWlCO0VBQ2IsT0FBTztFQUNQLFNBQVM7Q0FDYjtDQUNBLFVBQVU7RUFDTixPQUFPO0dBQ0gsWUFBWTtHQUNaLFNBQVM7R0FDVCxXQUFXO0VBQ2Y7RUFDQSxTQUFTO0dBQ0wsU0FBUztHQUNULE9BQU87RUFDWDtDQUNKO0FBQ0osQ0FDSjs7Ozs7Ozs7Ozs7Ozs7O0FBc0NBLElBQU0sU0FBUyxZQUVQLEVBQ0ksVUFBVSxTQUNWLFFBQVEsV0FDUixPQUFPLE1BQ1AsSUFBSSxNQUFNLFVBQ1YsVUFDQSxXQUNBLE1BQ0EsVUFFQSxrQkFDQSxlQUNBLEdBQUcsU0FFUCxRQUNDO0NBQ0QsT0FDSSxxQkFBQyxLQUFEO0VBQ0ksR0FBSTtFQUNKLEdBQUssT0FBTyxhQUFhLGVBQWU7R0FDcEMsaUJBQWlCO0dBSWpCLEdBQUksUUFBUSxXQUFXLEVBQUUsU0FBUyxJQUFJLEVBQUUsVUFBVSxXQUFXLEtBQUssS0FBQSxFQUFVO0VBQ2hGO0VBQ0EsV0FBVyxHQUNQLFNBQVM7R0FDTDtHQUNBLE9BQU8sVUFBVSxZQUFZLGVBQWU7RUFDaEQsQ0FBQyxHQUNELENBQUMsWUFBWSxrQkFDYixZQUFZLHdEQUNaLFNBQ0o7RUFDQSxjQUFZO0VBQ1osZ0JBQWM7RUFDZCxXQUFXO0VBQ047RUFDTCxHQUFLLFFBQVEsV0FBVyxFQUFFLE1BQU0sUUFBUSxTQUFTLElBQUksQ0FBQztZQXRCMUQsQ0F3QkssT0FDRyxvQkFBQyxPQUFEO0dBQ0ksV0FBVyxHQUNQLDJHQUNBLGFBQ0o7YUFFQztFQUNBLENBQUEsSUFDTCxNQUNKLG9CQUFDLE9BQUQ7R0FDSSxXQUFXLEdBQ1Asc0VBQ0EsZ0JBQ0o7R0FFQztFQUNBLENBQUEsQ0FDSjs7QUFFYixDQUNKO0FBRUEsSUFBQSxpQkFBZSxPQUFPLE9BQU8sUUFBUSxFQUNqQyxhQUFhLGtCQUNqQixDQUFDIn0=