lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
86 lines • 4.94 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertDescription = exports.AlertTitle = exports.Alert = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils");
const lucide_react_1 = require("lucide-react");
const alertVariants = {
variant: {
default: "bg-white dark:bg-black text-foreground",
destructive: " border-gray-400 dark:border-gray-700/50 text-red-500 [&>svg]:text-destructive",
success: "border-green-500/50 text-green-700 dark:text-green-500 [&>svg]:text-green-500",
warning: "border-yellow-500/50 text-yellow-700 dark:text-yellow-500 [&>svg]:text-yellow-500",
info: "border-[color-mix(in_srgb,var(--primarylw)_50%,transparent)] text-blue-700 dark:text-primarylw [&>svg]:text-primarylw",
},
size: {
default: "p-4",
sm: "p-3 text-sm",
lg: "p-6 text-base"
}
};
const Alert = React.forwardRef(({ className, variant = "default", size = "default", dismissible = false, onDismiss, withIcon = false, icon, children, ...props }, ref) => {
// Icon mapping based on variant
const variantIcons = {
default: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }),
destructive: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }),
success: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-4 w-4" }),
warning: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "h-4 w-4" }),
info: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" })
};
const handleDismiss = () => {
if (onDismiss) {
onDismiss();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: "alert", className: (0, utils_1.cn)("relative w-full rounded-lg border", withIcon && "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", withIcon && "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]", alertVariants.variant[variant], alertVariants.size[size], className), ...props, children: [withIcon && (icon || variantIcons[variant]), children, dismissible && ((0, jsx_runtime_1.jsx)("button", { className: "absolute top-4 right-4 rounded-full p-1 \r\n text-foreground/70 opacity-70 \r\n transition-opacity hover:opacity-100 \r\n focus:outline-none focus:ring-2 focus:ring-ring \r\n focus:ring-offset-2", onClick: handleDismiss, "aria-label": "Dismiss alert", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) }))] }));
});
exports.Alert = Alert;
Alert.displayName = "Alert";
const AlertTitle = React.forwardRef(({ className, size = "default", ...props }, ref) => {
const sizeClasses = {
sm: "text-sm",
default: "text-base",
lg: "text-lg"
};
return ((0, jsx_runtime_1.jsx)("h5", { ref: ref, className: (0, utils_1.cn)("mb-1 font-medium leading-none tracking-tight", sizeClasses[size], className), ...props }));
});
exports.AlertTitle = AlertTitle;
AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef(({ className, intensity = "default", ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("text-sm [&_p]:leading-relaxed", intensity === "muted" ? "text-muted-foreground" : "", className), ...props })));
exports.AlertDescription = AlertDescription;
AlertDescription.displayName = "AlertDescription";
//# sourceMappingURL=alert.js.map