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.
80 lines (79 loc) • 5.59 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 ToastPrimitives from "@radix-ui/react-toast";
import { cva } from "class-variance-authority";
import { AlertTriangleIcon, CheckCircle2Icon, CircleXIcon, InfoIcon, X, } from "lucide-react";
import { cn } from "../../lib/utils";
const ToastProvider = ToastPrimitives.Provider;
const ToastViewport = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(ToastPrimitives.Viewport, Object.assign({ ref: ref, className: cn("fixed top-0 z-[100] flex max-h-fit flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-10 sm:flex-col", className) }, props)));
});
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva("group pointer-events-auto flex w-full space-x-4 p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full my-1", {
variants: {
variant: {
default: "border text-foreground",
error: "group bg-abb-status-error",
info: "group bg-primary",
warn: "group bg-abb-status-warn",
success: "group bg-abb-status-success",
},
},
defaultVariants: { variant: "default" },
});
const Toast = React.forwardRef((_a, ref) => {
var { className, variant, children } = _a, props = __rest(_a, ["className", "variant", "children"]);
return (React.createElement(ToastPrimitives.Root, Object.assign({ ref: ref, className: cn(toastVariants({ variant }), className) }, props),
React.createElement("div", { className: "flex items-center w-full gap-3" },
variant == "info" && React.createElement(InfoIcon, { className: "text-white", size: 28 }),
variant == "warn" && (React.createElement(AlertTriangleIcon, { className: "text-white", size: 28 })),
variant == "success" && (React.createElement(CheckCircle2Icon, { className: "text-abb-status-success fill-white", size: 28 })),
variant == "error" && (React.createElement(CircleXIcon, { className: "text-white fill-destructive", size: 28 })),
children)));
});
Toast.displayName = ToastPrimitives.Root.displayName;
const ToastAction = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(ToastPrimitives.Action, Object.assign({ ref: ref, className: cn("inline-flex h-6 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className) }, props)));
});
ToastAction.displayName = ToastPrimitives.Action.displayName;
const toastCloseVariants = cva("ml-auto rounded-full p-1 text-foreground/50 focus:outline-none group-hover:opacity-100 text-white hover:bg-white", {
variants: {
variant: {
default: "hover:text-foreground",
error: "hover:text-abb-status-error",
info: "hover:text-primary",
warn: "hover:text-abb-status-warn",
success: "hover:text-abb-status-success",
},
},
defaultVariants: { variant: "default" },
});
const ToastClose = React.forwardRef((_a, ref) => {
var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
return (React.createElement(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn(toastCloseVariants({ variant }), className), "toast-close": "" }, props),
React.createElement(X, { className: "w-4 h-4", strokeWidth: 3 })));
});
ToastClose.displayName = ToastPrimitives.Close.displayName;
const ToastTitle = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(ToastPrimitives.Title, Object.assign({ ref: ref, className: cn("text-md text-white font-semibold", className) }, props)));
});
ToastTitle.displayName = ToastPrimitives.Title.displayName;
const ToastDescription = React.forwardRef((_a, ref) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (React.createElement(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("text-sm opacity-90", className) }, props)));
});
ToastDescription.displayName = ToastPrimitives.Description.displayName;
export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };