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.
83 lines (82 loc) • 6.01 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 * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { buttonVariants } from "../button";
import { cva } from "class-variance-authority";
import { CheckCircle2Icon, CircleAlertIcon, CircleXIcon, InfoIcon, X, } from "lucide-react";
import { cn } from "../../lib/utils";
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(AlertDialogPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
});
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const alertDialogVariants = cva("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md border-t-[6px] border-t-neutral-900 pt-4", {
variants: {
variant: {
error: "border-t-red-600",
info: "border-t-primary",
warn: "border-t-orange-500",
success: "border-t-green-500",
},
},
});
const AlertDialogContent = React.forwardRef((_a, ref) => {
var { className, variant, children } = _a, props = __rest(_a, ["className", "variant", "children"]);
return (React.createElement(AlertDialogPortal, null,
React.createElement(AlertDialogOverlay, null),
React.createElement(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn(alertDialogVariants({ variant, className })) }, props),
React.createElement("div", { className: "flex items-start gap-3" },
variant == "info" && (React.createElement(InfoIcon, { className: "hidden w-10 h-10 text-white fill-primary sm:flex" })),
variant == "warn" && (React.createElement(CircleAlertIcon, { className: "hidden w-10 h-10 text-white fill-orange-500 sm:flex" })),
variant == "success" && (React.createElement(CheckCircle2Icon, { className: "hidden w-10 h-10 text-white fill-green-500 sm:flex" })),
variant == "error" && (React.createElement(CircleXIcon, { className: "hidden w-10 h-10 text-white fill-destructive sm:flex" })),
React.createElement(AlertDialogCancel, { className: cn("absolute right-3 border-none top-2 !hover:bg-red-500", "hover:bg-white") },
React.createElement(X, { className: "w-4 h-4", strokeWidth: 3 })),
React.createElement("div", { className: "w-full pt-1" }, children)))));
});
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = (_a) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
};
AlertDialogHeader.displayName = "AlertDialogHeader";
const AlertDialogFooter = (_a) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 mt-6", className) }, props)));
};
AlertDialogFooter.displayName = "AlertDialogFooter";
const AlertDialogTitle = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: cn("text-lg font-semibold", className) }, props)));
});
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm", className) }, props)));
});
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants(), className) }, props)));
});
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ variant: "ghost" }), "mt-2 sm:mt-0", className) }, props)));
});
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };