commonux2
Version:
A collection of styled components for use in ABB projects, designed for React and Next.js. It features TypeScript support, integrates Lucide icons, and is built on Radix primitives with Tailwind CSS.
59 lines (58 loc) • 2.9 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import { Spinner } from "../spinner";
import clsx from "clsx";
import { cn } from "../../lib/utils";
const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
variants: {
variant: {
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
default: "bg-black text-white",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
text: "bg-white text-black",
},
size: {
default: "h-8 rounded p-2",
sm: "h-9 rounded px-3",
lg: "h-11 rounded px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "primary",
size: "default",
},
});
function getSpinnerColor(variant) {
return clsx({
"text-white": variant == "primary" || variant == "destructive" || variant == "default",
"text-black": variant == "ghost" || variant == "outline" || variant == "secondary",
"text-primary": variant == "link",
});
}
const Button = React.forwardRef((_a, ref) => {
var { className, variant = "primary", size, isLoading, children, asChild = false } = _a, props = __rest(_a, ["className", "variant", "size", "isLoading", "children", "asChild"]);
const isDisabled = isLoading || props.disabled;
const Comp = asChild ? Slot : "button";
return (React.createElement(Comp, Object.assign({ className: cn(buttonVariants({ variant, size, className })), ref: ref, disabled: isDisabled }, props),
children,
isLoading && (React.createElement(Spinner, { size: "sm", className: cn("ml-2", getSpinnerColor(variant)) }))));
});
Button.displayName = "Button";
export { Button, buttonVariants };