omnira-ui 0.4.1 → 0.5.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";

package/components/ui/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,134 @@
+/* ============================================
+   Breadcrumbs — Glassmorphism Styles
+   ============================================ */
+
+/* ── Base ── */
+
+.nav {
+    display: flex;
+    align-items: center;
+}
+
+/* ── List ── */
+
+.list {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+/* ── Item ── */
+
+.item {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+/* ── Separator ── */
+
+.separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-tertiary);
+    padding: 0 6px;
+    user-select: none;
+    font-size: 13px;
+}
+
+.separatorLine {
+    width: 1px;
+    height: 14px;
+    background: var(--color-border-medium);
+    transform: rotate(15deg);
+    margin: 0 8px;
+}
+
+/* ── Link ── */
+
+.link {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    text-decoration: none;
+    transition: color 0.15s;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.link:hover {
+    color: var(--color-text-primary);
+}
+
+/* ── Current (last item) ── */
+
+.current {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+}
+
+/* ── Button variant ── */
+
+.btnLink {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    text-decoration: none;
+    padding: 4px 10px;
+    border-radius: var(--radius-md);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+
+.btnLink:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text-primary);
+}
+
+.btnCurrent {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    padding: 4px 10px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-elevated);
+    white-space: nowrap;
+}
+
+/* ── Ellipsis ── */
+
+.ellipsis {
+    font-family: var(--font-body);
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+    padding: 0 2px;
+    user-select: none;
+}
+
+/* ── Home Icon ── */
+
+.homeIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-tertiary);
+    transition: color 0.15s;
+}
+
+.homeIcon:hover {
+    color: var(--color-text-primary);
+}

package/components/ui/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React from "react";
+import { Home2, ArrowRight2 } from "iconsax-react";
+import { cn } from "@/lib/cn";
+import s from "./Breadcrumbs.module.css";
+
+/* ══════════════════════════════════════════════
+   Types
+   ══════════════════════════════════════════════ */
+
+export type BreadcrumbVariant = "text" | "textLine" | "button";
+
+export interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** URL to navigate to. Omit for the current (last) item. */
+    href?: string;
+    /** Custom icon element */
+    icon?: React.ReactNode;
+}
+
+export interface BreadcrumbsProps {
+    /** Array of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Visual variant */
+    variant?: BreadcrumbVariant;
+    /** Show a home icon as the first item */
+    showHome?: boolean;
+    /** Home URL */
+    homeHref?: string;
+    /** Max items to show before collapsing with ellipsis. 0 = no collapse. */
+    maxItems?: number;
+    /** Custom separator element */
+    separator?: React.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/* ══════════════════════════════════════════════
+   Breadcrumbs
+   ══════════════════════════════════════════════ */
+
+export function Breadcrumbs({
+    items,
+    variant = "text",
+    showHome = false,
+    homeHref = "/",
+    maxItems = 0,
+    separator,
+    className,
+}: BreadcrumbsProps) {
+    const isButton = variant === "button";
+    const isLine = variant === "textLine";
+
+    /* Collapse items if maxItems is set */
+    let displayItems = items;
+    let collapsed = false;
+    if (maxItems > 0 && items.length > maxItems) {
+        const first = items.slice(0, 1);
+        const last = items.slice(-(maxItems - 1));
+        displayItems = [...first, { label: "…" }, ...last];
+        collapsed = true;
+    }
+
+    const renderSeparator = (key: string) => {
+        if (separator) {
+            return <span key={key} className={s.separator}>{separator}</span>;
+        }
+        if (isLine) {
+            return <span key={key} className={s.separatorLine} />;
+        }
+        return (
+            <span key={key} className={s.separator}>
+                <ArrowRight2 size={14} variant="Linear" color="currentColor" />
+            </span>
+        );
+    };
+
+    const renderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
+        /* Ellipsis */
+        if (item.label === "…" && collapsed) {
+            return <span className={s.ellipsis}>…</span>;
+        }
+
+        /* Current (last) item */
+        if (isLast) {
+            return (
+                <span className={isButton ? s.btnCurrent : s.current} aria-current="page">
+                    {item.icon}
+                    {item.label}
+                </span>
+            );
+        }
+
+        /* Link item */
+        if (item.href) {
+            return (
+                <a href={item.href} className={isButton ? s.btnLink : s.link}>
+                    {item.icon}
+                    {item.label}
+                </a>
+            );
+        }
+
+        return (
+            <span className={isButton ? s.btnLink : s.link}>
+                {item.icon}
+                {item.label}
+            </span>
+        );
+    };
+
+    return (
+        <nav className={cn(s.nav, className)} aria-label="Breadcrumb">
+            <ol className={s.list}>
+                {showHome && (
+                    <>
+                        <li className={s.item}>
+                            <a href={homeHref} className={cn(isButton ? s.btnLink : s.link, s.homeIcon)} aria-label="Home">
+                                <Home2 size={16} variant="Bulk" color="currentColor" />
+                            </a>
+                        </li>
+                        {renderSeparator("home-sep")}
+                    </>
+                )}
+                {displayItems.map((item, i) => {
+                    const isLast = i === displayItems.length - 1;
+                    return (
+                        <React.Fragment key={i}>
+                            <li className={s.item}>{renderItem(item, i, isLast)}</li>
+                            {!isLast && renderSeparator(`sep-${i}`)}
+                        </React.Fragment>
+                    );
+                })}
+            </ol>
+        </nav>
+    );
+}

package/components/ui/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbVariant } from "./Breadcrumbs";