omnira-ui 0.4.1 → 0.6.0

package/components/ui/Alert/Alert.module.css

@@ -0,0 +1,224 @@
+/* ============================================
+   Alert — Glassmorphism Styles
+   ============================================ */
+
+/* ── Base ── */
+
+.alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--color-border-subtle);
+    background: var(--color-bg-card);
+    position: relative;
+}
+
+/* ── Full Width ── */
+
+.fullWidth {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    width: 100%;
+}
+
+/* ── Icon ── */
+
+.iconWrap {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+
+/* ── Content ── */
+
+.content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.title {
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    line-height: 1.4;
+}
+
+.description {
+    font-family: var(--font-body);
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+}
+
+/* ── Actions ── */
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.actionBtn {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--radius-md);
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.actionPrimary {
+    background: var(--color-lime);
+    color: var(--color-bg-primary);
+}
+
+.actionPrimary:hover {
+    opacity: 0.9;
+}
+
+.actionSecondary {
+    background: transparent;
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-subtle);
+}
+
+.actionSecondary:hover {
+    background: var(--color-bg-hover);
+}
+
+/* ── Close Button ── */
+
+.closeBtn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    border: none;
+    background: transparent;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 0;
+    transition: all 0.15s;
+}
+
+.closeBtn:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text-primary);
+}
+
+/* ══════════════════════════════════════════════
+   Color Variants
+   ══════════════════════════════════════════════ */
+
+/* Default */
+.colorDefault {
+    border-color: var(--color-border-subtle);
+    background: var(--color-bg-card);
+}
+
+.colorDefault .iconWrap {
+    color: var(--color-text-tertiary);
+}
+
+/* Brand */
+.colorBrand {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.colorBrand .iconWrap {
+    color: var(--color-lime);
+}
+
+.colorBrand .title {
+    color: var(--color-lime);
+}
+
+.colorBrand .actionPrimary {
+    background: var(--color-lime);
+    color: var(--color-bg-primary);
+}
+
+/* Gray */
+.colorGray {
+    border-color: var(--color-border-medium);
+    background: var(--color-bg-elevated);
+}
+
+.colorGray .iconWrap {
+    color: var(--color-text-tertiary);
+}
+
+/* Error */
+.colorError {
+    border-color: var(--color-error);
+    background: var(--color-error-bg);
+}
+
+.colorError .iconWrap {
+    color: var(--color-error);
+}
+
+.colorError .title {
+    color: var(--color-error);
+}
+
+.colorError .actionPrimary {
+    background: var(--color-error);
+    color: #fff;
+}
+
+/* Warning */
+.colorWarning {
+    border-color: var(--color-warning);
+    background: var(--color-warning-bg);
+}
+
+.colorWarning .iconWrap {
+    color: var(--color-warning);
+}
+
+.colorWarning .title {
+    color: var(--color-warning);
+}
+
+.colorWarning .actionPrimary {
+    background: var(--color-warning);
+    color: var(--color-bg-primary);
+}
+
+/* Success */
+.colorSuccess {
+    border-color: var(--color-success);
+    background: var(--color-success-bg);
+}
+
+.colorSuccess .iconWrap {
+    color: var(--color-success);
+}
+
+.colorSuccess .title {
+    color: var(--color-success);
+}
+
+.colorSuccess .actionPrimary {
+    background: var(--color-success);
+    color: #fff;
+}

package/components/ui/Alert/Alert.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useState } from "react";
+import { InfoCircle, TickCircle, Danger, Warning2, CloseCircle } from "iconsax-react";
+import { cn } from "@/lib/cn";
+import s from "./Alert.module.css";
+
+/* ══════════════════════════════════════════════
+   Types
+   ══════════════════════════════════════════════ */
+
+export type AlertColor = "default" | "brand" | "gray" | "error" | "warning" | "success";
+export type AlertVariant = "floating" | "fullWidth";
+
+export interface AlertAction {
+    label: string;
+    onClick?: () => void;
+    variant?: "primary" | "secondary";
+}
+
+export interface AlertProps {
+    /** Alert title */
+    title: string;
+    /** Alert description */
+    description?: string;
+    /** Color theme */
+    color?: AlertColor;
+    /** Layout variant */
+    variant?: AlertVariant;
+    /** Custom icon element. Pass null to hide the icon. */
+    icon?: React.ReactNode | null;
+    /** Action buttons */
+    actions?: AlertAction[];
+    /** Show close button */
+    dismissible?: boolean;
+    /** Callback when dismissed */
+    onDismiss?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Children rendered after description */
+    children?: React.ReactNode;
+}
+
+/* ══════════════════════════════════════════════
+   Helpers
+   ══════════════════════════════════════════════ */
+
+function getDefaultIcon(color: AlertColor) {
+    switch (color) {
+        case "error": return <Danger size={20} variant="Bulk" color="currentColor" />;
+        case "warning": return <Warning2 size={20} variant="Bulk" color="currentColor" />;
+        case "success": return <TickCircle size={20} variant="Bulk" color="currentColor" />;
+        default: return <InfoCircle size={20} variant="Bulk" color="currentColor" />;
+    }
+}
+
+function getColorCls(color: AlertColor) {
+    switch (color) {
+        case "brand": return s.colorBrand;
+        case "gray": return s.colorGray;
+        case "error": return s.colorError;
+        case "warning": return s.colorWarning;
+        case "success": return s.colorSuccess;
+        default: return s.colorDefault;
+    }
+}
+
+/* ══════════════════════════════════════════════
+   Alert
+   ══════════════════════════════════════════════ */
+
+export function Alert({
+    title,
+    description,
+    color = "default",
+    variant = "floating",
+    icon,
+    actions,
+    dismissible = false,
+    onDismiss,
+    className,
+    children,
+}: AlertProps) {
+    const [visible, setVisible] = useState(true);
+
+    if (!visible) return null;
+
+    const handleDismiss = () => {
+        setVisible(false);
+        onDismiss?.();
+    };
+
+    const showIcon = icon !== null;
+    const iconElement = icon ?? getDefaultIcon(color);
+
+    return (
+        <div
+            className={cn(
+                s.alert,
+                variant === "fullWidth" && s.fullWidth,
+                getColorCls(color),
+                className,
+            )}
+            role="alert"
+        >
+            {showIcon && <div className={s.iconWrap}>{iconElement}</div>}
+
+            <div className={s.content}>
+                <div className={s.title}>{title}</div>
+                {description && <div className={s.description}>{description}</div>}
+                {children}
+                {actions && actions.length > 0 && (
+                    <div className={s.actions}>
+                        {actions.map((action, i) => (
+                            <button
+                                key={i}
+                                type="button"
+                                className={cn(
+                                    s.actionBtn,
+                                    action.variant === "secondary" ? s.actionSecondary : s.actionPrimary,
+                                )}
+                                onClick={action.onClick}
+                            >
+                                {action.label}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {dismissible && (
+                <button type="button" className={s.closeBtn} onClick={handleDismiss} aria-label="Dismiss">
+                    <CloseCircle size={16} variant="Linear" color="currentColor" />
+                </button>
+            )}
+        </div>
+    );
+}

package/components/ui/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from "./Alert";
+export type { AlertProps, AlertAction, AlertColor, AlertVariant } from "./Alert";