omnira-ui 0.1.0

package/components/ui/Avatar/Avatar.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Avatar.module.css";
+
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    shape?: "circle" | "rounded";
+    status?: "online" | "offline" | "away" | "busy";
+    className?: string;
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+    (
+        {
+            src,
+            alt = "",
+            fallback,
+            size = "md",
+            shape = "circle",
+            status,
+            className,
+        },
+        ref,
+    ) => {
+        const [imgError, setImgError] = useState(false);
+
+        const initials = fallback
+            ? fallback
+            : alt
+                ? alt
+                      .split(" ")
+                      .map((w) => w[0])
+                      .join("")
+                      .slice(0, 2)
+                      .toUpperCase()
+                : "?";
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    styles.avatar,
+                    styles[`avatar_${size}`],
+                    styles[`avatar_${shape}`],
+                    className,
+                )}
+            >
+                {src && !imgError ? (
+                    <img
+                        src={src}
+                        alt={alt}
+                        className={styles.img}
+                        onError={() => setImgError(true)}
+                    />
+                ) : (
+                    <span className={styles.fallback}>{initials}</span>
+                )}
+                {status && (
+                    <span
+                        className={cn(
+                            styles.status,
+                            styles[`status_${status}`],
+                            styles[`statusPos_${size}`],
+                        )}
+                    />
+                )}
+            </div>
+        );
+    },
+);
+
+Avatar.displayName = "Avatar";
+
+/* ── Avatar Group ── */
+export interface AvatarGroupProps {
+    children: React.ReactNode;
+    max?: number;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    className?: string;
+}
+
+export function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps) {
+    const items = Array.isArray(children) ? children : [children];
+    const visible = max ? items.slice(0, max) : items;
+    const remaining = max ? items.length - max : 0;
+
+    return (
+        <div className={cn(styles.group, className)}>
+            {visible}
+            {remaining > 0 && (
+                <div className={cn(styles.avatar, styles[`avatar_${size}`], styles.avatar_circle, styles.overflow)}>
+                    <span className={styles.fallback}>+{remaining}</span>
+                </div>
+            )}
+        </div>
+    );
+}

package/components/ui/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from "./Avatar";
+export type { AvatarProps, AvatarGroupProps } from "./Avatar";

package/components/ui/Badge/Badge.module.css

@@ -0,0 +1,120 @@
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: inherit;
+    white-space: nowrap;
+    transition: all 0.2s;
+}
+
+/* Variants */
+.section {
+    padding: 6px 16px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-hover);
+    border: 1.5px solid var(--color-border-medium);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-tertiary);
+}
+
+.accent {
+    padding: 6px 18px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-lime);
+    background: var(--color-bg-lime-medium);
+    border: 1px solid var(--color-border-lime-medium);
+}
+
+.success {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-success);
+    background: var(--color-success-bg);
+    border: 1px solid var(--color-success-border);
+}
+
+.error {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-error);
+    background: var(--color-error-bg);
+    border: 1px solid var(--color-error-border);
+}
+
+.warning {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-warning);
+    background: var(--color-warning-bg);
+    border: 1px solid var(--color-warning-border);
+}
+
+.info {
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-info);
+    background: var(--color-info-bg);
+    border: 1px solid var(--color-info-border);
+}
+
+/* Sizes */
+.sm {
+    font-size: 10px;
+    padding: 2px 8px;
+}
+
+.md {
+    font-size: 12px;
+}
+
+.lg {
+    font-size: 14px;
+    padding: 8px 20px;
+}
+
+/* Dot */
+.dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.section .dot {
+    background: var(--color-text-tertiary);
+}
+
+.accent .dot {
+    background: var(--color-lime);
+}
+
+.success .dot {
+    background: var(--color-success);
+}
+
+.error .dot {
+    background: var(--color-error);
+}
+
+.warning .dot {
+    background: var(--color-warning);
+}
+
+.info .dot {
+    background: var(--color-info);
+}

package/components/ui/Badge/Badge.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/cn";
+import styles from "./Badge.module.css";
+
+export interface BadgeProps {
+    variant?: "section" | "accent" | "success" | "error" | "warning" | "info";
+    size?: "sm" | "md" | "lg";
+    dot?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function Badge({
+    variant = "section",
+    size = "md",
+    dot = false,
+    children,
+    className,
+}: BadgeProps) {
+    return (
+        <span className={cn(styles.badge, styles[variant], styles[size], className)}>
+            {dot && <span className={styles.dot} />}
+            {children}
+        </span>
+    );
+}

package/components/ui/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";

package/components/ui/BadgeGroup/BadgeGroup.module.css

@@ -0,0 +1,214 @@
+/* --- Base BadgeGroup --- */
+.badgeGroup {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: var(--radius-full);
+    font-family: inherit;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.clickable:hover {
+    opacity: 0.85;
+}
+
+/* --- Sizes --- */
+.size-sm {
+    padding: 4px 10px 4px 4px;
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.size-md {
+    padding: 4px 12px 4px 4px;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.size-lg {
+    padding: 4px 14px 4px 4px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* --- Message text --- */
+.message {
+    font-weight: 500;
+    color: inherit;
+}
+
+/* --- Addon badge (inner pill) --- */
+.addon {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 10px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.addonIcon {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+}
+
+/* --- Theme: Modern (solid inner badge) --- */
+.addon-modern {
+    font-weight: 600;
+}
+
+/* --- Theme: Light (lighter inner badge) --- */
+.addon-light {
+    font-weight: 500;
+}
+
+/* ═══════════════════════════════════════════
+   COLOR VARIANTS — Outer container
+   ═══════════════════════════════════════════ */
+
+/* Gray */
+.color-gray.theme-modern {
+    background: var(--color-bg-hover);
+    border: 1px solid var(--color-border-standard);
+    color: var(--color-text-secondary);
+}
+
+.color-gray.theme-light {
+    background: var(--color-bg-hover);
+    border: 1px solid var(--color-border-standard);
+    color: var(--color-text-secondary);
+}
+
+/* Brand */
+.color-brand.theme-modern {
+    background: var(--color-bg-lime-medium);
+    border: 1px solid var(--color-border-lime-medium);
+    color: var(--color-lime);
+}
+
+.color-brand.theme-light {
+    background: var(--color-bg-lime-medium);
+    border: 1px solid var(--color-border-lime-medium);
+    color: var(--color-lime);
+}
+
+/* Error */
+.color-error.theme-modern {
+    background: var(--color-error-bg);
+    border: 1px solid var(--color-error-border);
+    color: var(--color-error);
+}
+
+.color-error.theme-light {
+    background: var(--color-error-bg);
+    border: 1px solid var(--color-error-border);
+    color: var(--color-error);
+}
+
+/* Warning */
+.color-warning.theme-modern {
+    background: var(--color-warning-bg);
+    border: 1px solid var(--color-warning-border);
+    color: var(--color-warning);
+}
+
+.color-warning.theme-light {
+    background: var(--color-warning-bg);
+    border: 1px solid var(--color-warning-border);
+    color: var(--color-warning);
+}
+
+/* Success */
+.color-success.theme-modern {
+    background: var(--color-success-bg);
+    border: 1px solid var(--color-success-border);
+    color: var(--color-success);
+}
+
+.color-success.theme-light {
+    background: var(--color-success-bg);
+    border: 1px solid var(--color-success-border);
+    color: var(--color-success);
+}
+
+/* ═══════════════════════════════════════════
+   COLOR VARIANTS — Inner addon badge
+   ═══════════════════════════════════════════ */
+
+/* Gray — Modern: solid dark badge */
+.addon-gray.addon-modern {
+    background: var(--color-bg-elevated);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-medium);
+}
+
+/* Gray — Light: subtle badge */
+.addon-gray.addon-light {
+    background: var(--color-bg-card);
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-standard);
+}
+
+/* Brand — Modern: solid lime badge */
+.addon-brand.addon-modern {
+    background: var(--color-lime);
+    color: var(--color-lime-text);
+    border: 1px solid transparent;
+}
+
+/* Brand — Light: subtle lime badge */
+.addon-brand.addon-light {
+    background: var(--color-bg-lime-medium);
+    color: var(--color-lime);
+    border: 1px solid var(--color-border-lime-medium);
+}
+
+/* Error — Modern: solid red badge */
+.addon-error.addon-modern {
+    background: var(--color-error);
+    color: #fff;
+    border: 1px solid transparent;
+}
+
+/* Error — Light: subtle red badge */
+.addon-error.addon-light {
+    background: var(--color-error-bg);
+    color: var(--color-error);
+    border: 1px solid var(--color-error-border);
+}
+
+/* Warning — Modern: solid amber badge */
+.addon-warning.addon-modern {
+    background: var(--color-warning);
+    color: #1a1a1a;
+    border: 1px solid transparent;
+}
+
+/* Warning — Light: subtle amber badge */
+.addon-warning.addon-light {
+    background: var(--color-warning-bg);
+    color: var(--color-warning);
+    border: 1px solid var(--color-warning-border);
+}
+
+/* Success — Modern: solid green badge */
+.addon-success.addon-modern {
+    background: var(--color-success);
+    color: #fff;
+    border: 1px solid transparent;
+}
+
+/* Success — Light: subtle green badge */
+.addon-success.addon-light {
+    background: var(--color-success-bg);
+    color: var(--color-success);
+    border: 1px solid var(--color-success-border);
+}

package/components/ui/BadgeGroup/BadgeGroup.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import { ArrowRight2 } from "iconsax-react";
+import styles from "./BadgeGroup.module.css";
+
+export type BadgeGroupColor = "gray" | "brand" | "error" | "warning" | "success";
+export type BadgeGroupTheme = "modern" | "light";
+export type BadgeGroupAlign = "leading" | "trailing";
+export type BadgeGroupSize = "sm" | "md" | "lg";
+
+export interface BadgeGroupProps {
+    children: React.ReactNode;
+    addonText: string;
+    color?: BadgeGroupColor;
+    theme?: BadgeGroupTheme;
+    align?: BadgeGroupAlign;
+    size?: BadgeGroupSize;
+    icon?: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+
+export const BadgeGroup = forwardRef<HTMLDivElement, BadgeGroupProps>(
+    (
+        {
+            children,
+            addonText,
+            color = "gray",
+            theme = "modern",
+            align = "leading",
+            size = "md",
+            icon,
+            className,
+            onClick,
+        },
+        ref
+    ) => {
+        const addonBadge = (
+            <span className={cn(styles.addon, styles[`addon-${color}`], styles[`addon-${theme}`])}>
+                {icon && <span className={styles.addonIcon}>{icon}</span>}
+                {addonText}
+            </span>
+        );
+
+        const messageText = (
+            <span className={styles.message}>{children}</span>
+        );
+
+        const arrow = (
+            <ArrowRight2 size={size === "sm" ? 12 : size === "md" ? 14 : 16} color="currentColor" variant="Bold" />
+        );
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    styles.badgeGroup,
+                    styles[`color-${color}`],
+                    styles[`theme-${theme}`],
+                    styles[`size-${size}`],
+                    onClick && styles.clickable,
+                    className
+                )}
+                onClick={onClick}
+                role={onClick ? "button" : undefined}
+                tabIndex={onClick ? 0 : undefined}
+            >
+                {align === "leading" ? (
+                    <>
+                        {addonBadge}
+                        {messageText}
+                        {arrow}
+                    </>
+                ) : (
+                    <>
+                        {messageText}
+                        {addonBadge}
+                        {arrow}
+                    </>
+                )}
+            </div>
+        );
+    }
+);
+
+BadgeGroup.displayName = "BadgeGroup";

package/components/ui/BadgeGroup/index.ts

@@ -0,0 +1,2 @@
+export { BadgeGroup } from "./BadgeGroup";
+export type { BadgeGroupProps, BadgeGroupColor, BadgeGroupTheme, BadgeGroupAlign, BadgeGroupSize } from "./BadgeGroup";

package/components/ui/Browser/Browser.module.css

@@ -0,0 +1,105 @@
+.browser {
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--color-border-standard);
+    background: var(--color-bg-card);
+    overflow: hidden;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+}
+
+/* ── Chrome bar ── */
+.chrome {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-bg-elevated);
+}
+
+.trafficLights {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.dotRed { background: #ff5f57; }
+.dotYellow { background: #febc2e; }
+.dotGreen { background: #28c840; }
+
+.nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.navBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: none;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: color 0.15s, background 0.15s;
+}
+
+.navBtn:hover {
+    color: var(--color-text-secondary);
+    background: var(--color-bg-hover);
+}
+
+/* ── Address bar ── */
+.addressBar {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-subtle);
+}
+
+.addressText {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.copyBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color 0.15s;
+}
+
+.copyBtn:hover {
+    color: var(--color-text-primary);
+}
+
+/* ── Content ── */
+.content {
+    min-height: 120px;
+    padding: 24px;
+}