omnira-ui 0.1.0

package/components/ui/Browser/Browser.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Browser.module.css";
+
+export interface BrowserProps {
+    address?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const Browser = forwardRef<HTMLDivElement, BrowserProps>(
+    ({ address = "example.com", children, className }, ref) => {
+        return (
+            <div ref={ref} className={cn(styles.browser, className)}>
+                {/* Chrome bar */}
+                <div className={styles.chrome}>
+                    <div className={styles.trafficLights}>
+                        <span className={cn(styles.dot, styles.dotRed)} />
+                        <span className={cn(styles.dot, styles.dotYellow)} />
+                        <span className={cn(styles.dot, styles.dotGreen)} />
+                    </div>
+
+                    <div className={styles.nav}>
+                        <button className={styles.navBtn} aria-label="Back">
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3L5 7L9 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                        </button>
+                        <button className={styles.navBtn} aria-label="Forward">
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3L9 7L5 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                        </button>
+                        <button className={styles.navBtn} aria-label="Reload">
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7A4.5 4.5 0 1 1 4 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><path d="M2 8.5L4 10.5L6 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                        </button>
+                    </div>
+
+                    <div className={styles.addressBar}>
+                        <span className={styles.addressText}>{address}</span>
+                        <button className={styles.copyBtn} aria-label="Copy URL">
+                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="4" y="4" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.2"/><path d="M8 4V2.5A1.5 1.5 0 0 0 6.5 1H2.5A1.5 1.5 0 0 0 1 2.5V6.5A1.5 1.5 0 0 0 2.5 8H4" stroke="currentColor" strokeWidth="1.2"/></svg>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Content area */}
+                <div className={styles.content}>
+                    {children}
+                </div>
+            </div>
+        );
+    },
+);
+
+Browser.displayName = "Browser";

package/components/ui/Browser/index.ts

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

package/components/ui/Button/Button.module.css

@@ -0,0 +1,188 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: none;
+    outline: none;
+    white-space: nowrap;
+    position: relative;
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* --- Variants --- */
+
+/* Primary: solid lime background */
+.primary {
+    color: var(--color-lime-text);
+    background: var(--color-lime);
+    border-radius: var(--radius-full);
+    font-weight: 700;
+}
+
+.primary:hover:not(:disabled) {
+    background: var(--color-lime-hover);
+    box-shadow: var(--shadow-btn-primary);
+}
+
+/* Secondary: bordered with subtle background */
+.secondary {
+    color: var(--color-text-secondary);
+    background: var(--color-bg-card);
+    border: 1.5px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card-light);
+    backdrop-filter: var(--blur-standard);
+    border-radius: var(--radius-full);
+    font-weight: 600;
+}
+
+.secondary:hover:not(:disabled) {
+    color: var(--color-text-primary);
+    background: var(--color-bg-elevated);
+    border-color: var(--color-border-medium);
+}
+
+/* Tertiary: text only, no background, no border */
+.tertiary {
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: 1.5px solid transparent;
+    border-radius: var(--radius-full);
+    font-weight: 600;
+}
+
+.tertiary:hover:not(:disabled) {
+    color: var(--color-text-primary);
+    background: var(--color-bg-hover);
+}
+
+/* Ghost: outlined */
+.ghost {
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: 1.5px solid var(--color-border-medium);
+    border-radius: var(--radius-full);
+    font-weight: 600;
+}
+
+.ghost:hover:not(:disabled) {
+    border-color: var(--color-border-strong);
+    color: var(--color-text-primary);
+}
+
+/* Accent: lime tinted */
+.accent {
+    color: var(--color-lime);
+    background: var(--color-bg-lime-strong);
+    border: 1px solid var(--color-border-lime-medium);
+    border-radius: var(--radius-full);
+    font-weight: 600;
+}
+
+.accent:hover:not(:disabled) {
+    background: rgba(210, 254, 23, 0.2);
+    box-shadow: 0 4px 12px rgba(210, 254, 23, 0.15);
+}
+
+/* --- Sizes --- */
+.sm {
+    height: 36px;
+    padding: 0 16px;
+    font-size: 13px;
+}
+
+.md {
+    height: 44px;
+    padding: 0 24px;
+    font-size: 14px;
+}
+
+.lg {
+    height: 52px;
+    padding: 0 32px;
+    font-size: 16px;
+}
+
+.xl {
+    height: 60px;
+    padding: 0 40px;
+    font-size: 18px;
+}
+
+/* --- Full width --- */
+.fullWidth {
+    width: 100%;
+}
+
+/* --- Icon wrapper --- */
+.iconWrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.label {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* --- Icon only --- */
+.iconOnly {
+    padding: 0;
+}
+
+.iconOnly.sm {
+    width: 36px;
+}
+
+.iconOnly.md {
+    width: 44px;
+}
+
+.iconOnly.lg {
+    width: 52px;
+}
+
+.iconOnly.xl {
+    width: 60px;
+}
+
+/* --- Loading state --- */
+.loading {
+    pointer-events: none;
+}
+
+.spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    flex-shrink: 0;
+}
+
+.sm .spinner {
+    width: 14px;
+    height: 14px;
+}
+
+.lg .spinner,
+.xl .spinner {
+    width: 18px;
+    height: 18px;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/components/ui/Button/Button.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Button.module.css";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "accent";
+    size?: "sm" | "md" | "lg" | "xl";
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "leading" | "trailing";
+    iconOnly?: boolean;
+    isLoading?: boolean;
+    showTextWhileLoading?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            variant = "primary",
+            size = "md",
+            fullWidth,
+            icon,
+            iconPosition = "leading",
+            iconOnly,
+            isLoading,
+            showTextWhileLoading,
+            disabled,
+            className,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const isDisabled = disabled || isLoading;
+
+        return (
+            <button
+                ref={ref}
+                className={cn(
+                    styles.button,
+                    styles[variant],
+                    styles[size],
+                    fullWidth ? styles.fullWidth : undefined,
+                    iconOnly ? styles.iconOnly : undefined,
+                    isLoading ? styles.loading : undefined,
+                    className
+                )}
+                disabled={isDisabled}
+                {...props}
+            >
+                {isLoading && (
+                    <span className={styles.spinner} />
+                )}
+                {isLoading && !showTextWhileLoading ? null : (
+                    <>
+                        {icon && iconPosition === "leading" && !iconOnly && (
+                            <span className={styles.iconWrapper}>{icon}</span>
+                        )}
+                        {iconOnly ? (
+                            <span className={styles.iconWrapper}>{icon}</span>
+                        ) : (
+                            <span className={styles.label}>{children}</span>
+                        )}
+                        {icon && iconPosition === "trailing" && !iconOnly && (
+                            <span className={styles.iconWrapper}>{icon}</span>
+                        )}
+                    </>
+                )}
+            </button>
+        );
+    }
+);
+
+Button.displayName = "Button";

package/components/ui/Button/index.ts

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

package/components/ui/ButtonUtility/ButtonUtility.module.css

@@ -0,0 +1,154 @@
+.wrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+/* --- Base button --- */
+.utilityButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    outline: none;
+    font-family: inherit;
+    flex-shrink: 0;
+}
+
+.utilityButton:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* --- Icon wrapper --- */
+.iconWrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+}
+
+/* --- Sizes --- */
+.size-xs {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+}
+
+.size-xs .iconWrap {
+    font-size: 14px;
+}
+
+.size-sm {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+}
+
+.size-sm .iconWrap {
+    font-size: 16px;
+}
+
+.size-md {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+}
+
+.size-md .iconWrap {
+    font-size: 18px;
+}
+
+.size-lg {
+    width: 52px;
+    height: 52px;
+    border-radius: 12px;
+}
+
+.size-lg .iconWrap {
+    font-size: 20px;
+}
+
+/* --- Color: Primary --- */
+.color-primary {
+    background: var(--color-lime);
+    color: var(--color-lime-text);
+    border-color: transparent;
+}
+
+.color-primary:hover:not(:disabled) {
+    background: var(--color-lime-hover);
+    box-shadow: var(--shadow-btn-primary);
+}
+
+/* --- Color: Secondary --- */
+.color-secondary {
+    background: var(--color-bg-card);
+    color: var(--color-text-secondary);
+    border-color: var(--color-border-standard);
+    backdrop-filter: var(--blur-standard);
+}
+
+.color-secondary:hover:not(:disabled) {
+    background: var(--color-bg-elevated);
+    color: var(--color-text-primary);
+    border-color: var(--color-border-medium);
+    box-shadow: var(--shadow-card-light);
+}
+
+/* --- Color: Tertiary --- */
+.color-tertiary {
+    background: transparent;
+    color: var(--color-text-tertiary);
+    border-color: transparent;
+}
+
+.color-tertiary:hover:not(:disabled) {
+    background: var(--color-bg-hover);
+    color: var(--color-text-primary);
+}
+
+/* --- Color: Destructive --- */
+.color-destructive {
+    background: transparent;
+    color: var(--color-text-secondary);
+    border-color: var(--color-border-standard);
+}
+
+.color-destructive:hover:not(:disabled) {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.4);
+}
+
+/* --- Tooltip --- */
+.tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--color-bg-elevated);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-standard);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 50;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    animation: tooltipIn 0.15s ease-out;
+}
+
+@keyframes tooltipIn {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}

package/components/ui/ButtonUtility/ButtonUtility.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./ButtonUtility.module.css";
+
+export type UtilitySize = "xs" | "sm" | "md" | "lg";
+export type UtilityColor = "primary" | "secondary" | "tertiary" | "destructive";
+
+export interface ButtonUtilityProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: React.ReactNode;
+    size?: UtilitySize;
+    color?: UtilityColor;
+    tooltip?: string;
+}
+
+export const ButtonUtility = forwardRef<HTMLButtonElement, ButtonUtilityProps>(
+    ({ icon, size = "sm", color = "secondary", tooltip, disabled, className, ...props }, ref) => {
+        const [showTooltip, setShowTooltip] = useState(false);
+        const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+        const handleMouseEnter = () => {
+            if (!tooltip || disabled) return;
+            timeoutRef.current = setTimeout(() => setShowTooltip(true), 300);
+        };
+
+        const handleMouseLeave = () => {
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            setShowTooltip(false);
+        };
+
+        useEffect(() => {
+            return () => {
+                if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            };
+        }, []);
+
+        return (
+            <div
+                className={styles.wrapper}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <button
+                    ref={ref}
+                    className={cn(
+                        styles.utilityButton,
+                        styles[`size-${size}`],
+                        styles[`color-${color}`],
+                        className
+                    )}
+                    disabled={disabled}
+                    {...props}
+                >
+                    <span className={styles.iconWrap}>{icon}</span>
+                </button>
+                {tooltip && showTooltip && (
+                    <span className={styles.tooltip}>{tooltip}</span>
+                )}
+            </div>
+        );
+    }
+);
+
+ButtonUtility.displayName = "ButtonUtility";

package/components/ui/ButtonUtility/index.ts

@@ -0,0 +1,2 @@
+export { ButtonUtility } from "./ButtonUtility";
+export type { ButtonUtilityProps, UtilitySize, UtilityColor } from "./ButtonUtility";

package/components/ui/Card/Card.module.css

@@ -0,0 +1,80 @@
+.card {
+    position: relative;
+    border-radius: var(--radius-2xl);
+    background: var(--color-bg-card);
+    border: 1.5px solid var(--color-border-standard);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: var(--blur-standard);
+    transition: all 0.35s ease;
+    overflow: hidden;
+}
+
+.card.hoverable:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-card-hover);
+}
+
+/* Variants */
+.standard {
+    border-radius: var(--radius-2xl);
+}
+
+.light {
+    border-radius: var(--radius-xl);
+    background: rgba(248, 248, 248, 0.02);
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    box-shadow: var(--shadow-card-light);
+}
+
+.accent {
+    background: var(--color-bg-lime-subtle);
+    border-color: var(--color-border-lime-medium);
+    box-shadow: var(--shadow-card-accent);
+}
+
+.framework {
+    border-radius: 48px;
+    background: var(--gradient-framework);
+    box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.2);
+}
+
+/* Padding sizes */
+.paddingNone {
+    padding: 0;
+}
+
+.paddingSm {
+    padding: 16px;
+}
+
+.paddingMd {
+    padding: 24px;
+}
+
+.paddingLg {
+    padding: 32px;
+}
+
+.paddingXl {
+    padding: 48px;
+}
+
+/* Responsive */
+@media (max-width: 767px) {
+    .card {
+        border-radius: var(--radius-xl);
+    }
+
+    .framework {
+        border-radius: var(--radius-2xl);
+    }
+
+    .paddingLg {
+        padding: 24px;
+    }
+
+    .paddingXl {
+        padding: 32px 20px;
+    }
+}

package/components/ui/Card/Card.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Card.module.css";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "standard" | "light" | "accent" | "framework";
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    hoverable?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+    ({ variant = "standard", padding = "lg", hoverable = false, className, children, ...props }, ref) => {
+        const paddingMap: Record<string, string> = {
+            none: styles.paddingNone,
+            sm: styles.paddingSm,
+            md: styles.paddingMd,
+            lg: styles.paddingLg,
+            xl: styles.paddingXl,
+        };
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    styles.card,
+                    styles[variant],
+                    paddingMap[padding],
+                    hoverable ? styles.hoverable : undefined,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+Card.displayName = "Card";

package/components/ui/Card/index.ts

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