omnira-ui 0.1.0

package/components/ui/GridLines/GridLines.module.css

@@ -0,0 +1,95 @@
+.lines {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 1200px;
+    padding: 0 40px;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+    z-index: 0;
+    box-sizing: border-box;
+}
+
+/* ── Vertical lines (left + right rails) ── */
+.lines span {
+    width: 1px;
+    height: 100%;
+    background: var(--color-grid-line);
+}
+
+/* ── Top horizontal line ── */
+.lines::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100vw;
+    right: -100vw;
+    height: 1px;
+    background: var(--color-grid-line);
+    mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        rgba(0, 0, 0, 0.15) 20%,
+        black 35%,
+        black 65%,
+        rgba(0, 0, 0, 0.15) 80%,
+        transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        rgba(0, 0, 0, 0.15) 20%,
+        black 35%,
+        black 65%,
+        rgba(0, 0, 0, 0.15) 80%,
+        transparent 100%
+    );
+    pointer-events: none;
+}
+
+/* ── Bottom horizontal line ── */
+.lines::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: -100vw;
+    right: -100vw;
+    height: 1px;
+    background: var(--color-grid-line);
+    mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        rgba(0, 0, 0, 0.15) 20%,
+        black 35%,
+        black 65%,
+        rgba(0, 0, 0, 0.15) 80%,
+        transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        rgba(0, 0, 0, 0.15) 20%,
+        black 35%,
+        black 65%,
+        rgba(0, 0, 0, 0.15) 80%,
+        transparent 100%
+    );
+    pointer-events: none;
+}
+
+/* ── Responsive ── */
+@media (max-width: 1023px) {
+    .lines {
+        padding: 0 32px;
+    }
+}
+
+@media (max-width: 767px) {
+    .lines {
+        padding: 0 20px;
+    }
+}

package/components/ui/GridLines/GridLines.tsx

@@ -0,0 +1,10 @@
+import styles from "./GridLines.module.css";
+
+export function GridLines() {
+    return (
+        <div className={styles.lines}>
+            <span />
+            <span />
+        </div>
+    );
+}

package/components/ui/GridLines/index.ts

@@ -0,0 +1 @@
+export { GridLines } from "./GridLines";

package/components/ui/Illustration/Illustration.module.css

@@ -0,0 +1,10 @@
+.wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.svg {
+    width: 100%;
+    height: 100%;
+}

package/components/ui/Illustration/Illustration.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Illustration.module.css";
+
+export interface IllustrationProps {
+    type?: "cloud" | "empty" | "error" | "success" | "search" | "lock";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+const sizeDims: Record<string, number> = {
+    sm: 120,
+    md: 200,
+    lg: 280,
+};
+
+export const Illustration = forwardRef<HTMLDivElement, IllustrationProps>(
+    ({ type = "cloud", size = "md", className }, ref) => {
+        const dim = sizeDims[size];
+
+        return (
+            <div
+                ref={ref}
+                className={cn(styles.wrap, className)}
+                style={{ width: dim, height: dim }}
+            >
+                <svg
+                    width={dim}
+                    height={dim}
+                    viewBox="0 0 200 200"
+                    fill="none"
+                    className={styles.svg}
+                >
+                    {illustrationPaths[type]}
+                </svg>
+            </div>
+        );
+    },
+);
+
+Illustration.displayName = "Illustration";
+
+const illustrationPaths: Record<string, React.ReactNode> = {
+    cloud: (
+        <>
+            <circle cx="100" cy="130" r="50" className="illustrationBg" fill="var(--color-bg-elevated)" />
+            <path d="M60 120C60 98 78 80 100 80C118 80 133 92 137 108C137 108 155 110 155 128C155 142 144 150 132 150H68C56 150 48 140 48 130C48 120 56 112 66 112" className="illustrationStroke" stroke="var(--color-lime)" strokeWidth="4" strokeLinecap="round" fill="none" />
+            <path d="M90 125L100 115L110 125" stroke="var(--color-lime)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+            <line x1="100" y1="115" x2="100" y2="140" stroke="var(--color-lime)" strokeWidth="3" strokeLinecap="round" />
+        </>
+    ),
+    empty: (
+        <>
+            <circle cx="100" cy="110" r="60" fill="var(--color-bg-elevated)" />
+            <rect x="70" y="75" width="60" height="70" rx="6" stroke="var(--color-text-tertiary)" strokeWidth="3" fill="none" />
+            <line x1="82" y1="95" x2="118" y2="95" stroke="var(--color-text-tertiary)" strokeWidth="2.5" strokeLinecap="round" />
+            <line x1="82" y1="105" x2="110" y2="105" stroke="var(--color-text-tertiary)" strokeWidth="2.5" strokeLinecap="round" />
+            <line x1="82" y1="115" x2="100" y2="115" stroke="var(--color-text-tertiary)" strokeWidth="2.5" strokeLinecap="round" />
+            <circle cx="100" cy="160" r="4" fill="var(--color-text-tertiary)" opacity="0.4" />
+            <circle cx="115" cy="165" r="2.5" fill="var(--color-text-tertiary)" opacity="0.3" />
+            <circle cx="85" cy="163" r="3" fill="var(--color-text-tertiary)" opacity="0.25" />
+        </>
+    ),
+    error: (
+        <>
+            <circle cx="100" cy="110" r="60" fill="var(--color-bg-elevated)" />
+            <circle cx="100" cy="105" r="35" stroke="#ef4444" strokeWidth="4" fill="none" />
+            <line x1="100" y1="88" x2="100" y2="108" stroke="#ef4444" strokeWidth="4" strokeLinecap="round" />
+            <circle cx="100" cy="118" r="2.5" fill="#ef4444" />
+        </>
+    ),
+    success: (
+        <>
+            <circle cx="100" cy="110" r="60" fill="var(--color-bg-elevated)" />
+            <circle cx="100" cy="105" r="35" stroke="var(--color-lime)" strokeWidth="4" fill="none" />
+            <path d="M85 105L95 115L115 95" stroke="var(--color-lime)" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+        </>
+    ),
+    search: (
+        <>
+            <circle cx="100" cy="110" r="60" fill="var(--color-bg-elevated)" />
+            <circle cx="95" cy="100" r="25" stroke="var(--color-text-tertiary)" strokeWidth="4" fill="none" />
+            <line x1="113" y1="118" x2="128" y2="133" stroke="var(--color-text-tertiary)" strokeWidth="4" strokeLinecap="round" />
+        </>
+    ),
+    lock: (
+        <>
+            <circle cx="100" cy="110" r="60" fill="var(--color-bg-elevated)" />
+            <rect x="80" y="100" width="40" height="32" rx="4" stroke="var(--color-text-tertiary)" strokeWidth="3.5" fill="none" />
+            <path d="M88 100V92C88 85 93 80 100 80C107 80 112 85 112 92V100" stroke="var(--color-text-tertiary)" strokeWidth="3.5" strokeLinecap="round" fill="none" />
+            <circle cx="100" cy="114" r="3" fill="var(--color-text-tertiary)" />
+        </>
+    ),
+};

package/components/ui/Illustration/index.ts

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

package/components/ui/Input/Input.module.css

@@ -0,0 +1,217 @@
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+}
+
+/* ── Label ── */
+.label {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-tertiary);
+}
+
+.required {
+    color: var(--color-error);
+    margin-left: 2px;
+}
+
+/* ── Input Container ── */
+.inputContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    transition: all 0.25s;
+}
+
+.inputContainer:focus-within {
+    border-color: var(--color-border-lime-strong);
+    background: var(--color-bg-elevated);
+}
+
+.containerError {
+    border-color: var(--color-error-border);
+}
+
+.containerError:focus-within {
+    border-color: var(--color-error);
+}
+
+.containerDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Sizes (on container) ── */
+.sm {
+    height: 36px;
+}
+
+.sm .input {
+    font-size: 13px;
+}
+
+.md {
+    height: 44px;
+}
+
+.md .input {
+    font-size: 14px;
+}
+
+.lg {
+    height: 52px;
+}
+
+.lg .input {
+    font-size: 16px;
+}
+
+/* ── Input ── */
+.input {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    padding: 0 14px;
+    background: transparent;
+    border: none;
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    outline: none;
+    min-width: 0;
+}
+
+.input::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 0.5;
+}
+
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover,
+.input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-input) inset;
+    -webkit-text-fill-color: var(--color-text-primary);
+    caret-color: var(--color-text-primary);
+    transition: background-color 5000s ease-in-out 0s;
+}
+
+.input:disabled {
+    cursor: not-allowed;
+}
+
+/* ── Leading / Trailing addons ── */
+.hasLeadingAddon {
+    padding-left: 0;
+}
+
+.hasTrailingAddon {
+    padding-right: 0;
+}
+
+.hasLeadingIcon {
+    padding-left: 32px;
+}
+
+.hasTrailingIcon {
+    padding-right: 32px;
+}
+
+/* ── Icons ── */
+.leadingIcon {
+    position: absolute;
+    left: 12px;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    color: var(--color-text-tertiary);
+    z-index: 1;
+}
+
+.trailingIcon {
+    position: absolute;
+    right: 12px;
+    display: flex;
+    align-items: center;
+    color: var(--color-text-tertiary);
+    z-index: 1;
+}
+
+/* ── Leading Dropdown ── */
+.leadingDropdown {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 4px 0 10px;
+    border-right: 1px solid var(--color-border-subtle);
+    flex-shrink: 0;
+}
+
+/* ── Trailing Dropdown ── */
+.trailingDropdown {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 10px 0 4px;
+    border-left: 1px solid var(--color-border-subtle);
+    flex-shrink: 0;
+}
+
+/* ── Leading Text ── */
+.leadingText {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 0 0 14px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    white-space: nowrap;
+    flex-shrink: 0;
+    user-select: none;
+}
+
+/* ── Trailing Button ── */
+.trailingButton {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.trailingButton > button,
+.trailingButton > a {
+    height: 100%;
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    border: none;
+    border-left: 1px solid var(--color-border-subtle);
+    padding: 0 16px;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+}
+
+/* ── Helper / Error ── */
+.errorText {
+    font-size: 12px;
+    color: var(--color-error);
+}
+
+.helperText {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}

package/components/ui/Input/Input.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Input.module.css";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    hint?: string;
+    inputSize?: "sm" | "md" | "lg";
+    required?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    leadingDropdown?: React.ReactNode;
+    trailingDropdown?: React.ReactNode;
+    leadingText?: string;
+    trailingButton?: React.ReactNode;
+    wrapperClassName?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+    (
+        {
+            label,
+            error,
+            helperText,
+            hint,
+            inputSize = "md",
+            required = false,
+            leadingIcon,
+            trailingIcon,
+            leadingDropdown,
+            trailingDropdown,
+            leadingText,
+            trailingButton,
+            wrapperClassName,
+            className,
+            disabled,
+            ...props
+        },
+        ref,
+    ) => {
+        const hasLeadingAddon = !!(leadingIcon || leadingDropdown || leadingText);
+        const hasTrailingAddon = !!(trailingIcon || trailingDropdown || trailingButton);
+
+        return (
+            <div className={cn(styles.wrapper, wrapperClassName)}>
+                {label && (
+                    <label className={styles.label}>
+                        {label}
+                        {required && <span className={styles.required}>*</span>}
+                    </label>
+                )}
+                <div
+                    className={cn(
+                        styles.inputContainer,
+                        styles[inputSize],
+                        error && styles.containerError,
+                        disabled && styles.containerDisabled,
+                    )}
+                >
+                    {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}
+                    {leadingDropdown && <span className={styles.leadingDropdown}>{leadingDropdown}</span>}
+                    {leadingText && <span className={styles.leadingText}>{leadingText}</span>}
+                    <input
+                        ref={ref}
+                        className={cn(
+                            styles.input,
+                            hasLeadingAddon ? styles.hasLeadingAddon : undefined,
+                            hasTrailingAddon ? styles.hasTrailingAddon : undefined,
+                            leadingIcon ? styles.hasLeadingIcon : undefined,
+                            trailingIcon ? styles.hasTrailingIcon : undefined,
+                            className,
+                        )}
+                        disabled={disabled}
+                        {...props}
+                    />
+                    {trailingIcon && <span className={styles.trailingIcon}>{trailingIcon}</span>}
+                    {trailingDropdown && <span className={styles.trailingDropdown}>{trailingDropdown}</span>}
+                    {trailingButton && <span className={styles.trailingButton}>{trailingButton}</span>}
+                </div>
+                {error && <span className={styles.errorText}>{error}</span>}
+                {(hint || helperText) && !error && (
+                    <span className={styles.helperText}>{hint || helperText}</span>
+                )}
+            </div>
+        );
+    },
+);
+
+Input.displayName = "Input";

package/components/ui/Input/index.ts

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

package/components/ui/Phone/Phone.module.css

@@ -0,0 +1,104 @@
+.phone {
+    display: inline-flex;
+    justify-content: center;
+}
+
+.frame {
+    position: relative;
+    width: 280px;
+    border-radius: 40px;
+    border: 6px solid var(--color-text-primary);
+    background: var(--color-bg-secondary);
+    overflow: hidden;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
+                inset 0 0 0 2px rgba(255, 255, 255, 0.06);
+    display: flex;
+    flex-direction: column;
+}
+
+/* ── Notch / Dynamic Island ── */
+.notch {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0 0;
+    position: relative;
+    z-index: 2;
+}
+
+.notchPill {
+    width: 80px;
+    height: 22px;
+    border-radius: 20px;
+    background: var(--color-text-primary);
+}
+
+/* ── Screen ── */
+.screen {
+    flex: 1;
+    min-height: 420px;
+    background: var(--color-bg-secondary);
+    position: relative;
+}
+
+/* ── Bottom bar ── */
+.bottomBar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: rgba(128, 128, 128, 0.15);
+    backdrop-filter: blur(12px);
+}
+
+.bottomNavBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: rgba(128, 128, 128, 0.2);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    border-radius: 50%;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+
+.bottomNavBtn:hover {
+    background: rgba(128, 128, 128, 0.35);
+}
+
+.addressPill {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background: rgba(128, 128, 128, 0.2);
+    padding: 0 16px;
+}
+
+.addressText {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ── Home indicator ── */
+.homeIndicator {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0 6px;
+}
+
+.homeBar {
+    width: 100px;
+    height: 4px;
+    border-radius: 999px;
+    background: var(--color-text-tertiary);
+}

package/components/ui/Phone/Phone.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Phone.module.css";
+
+export interface PhoneProps {
+    address?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const Phone = forwardRef<HTMLDivElement, PhoneProps>(
+    ({ address, children, className }, ref) => {
+        return (
+            <div ref={ref} className={cn(styles.phone, className)}>
+                {/* Frame */}
+                <div className={styles.frame}>
+                    {/* Notch / Dynamic Island */}
+                    <div className={styles.notch}>
+                        <div className={styles.notchPill} />
+                    </div>
+
+                    {/* Screen */}
+                    <div className={styles.screen}>
+                        {children}
+                    </div>
+
+                    {/* Bottom bar with address */}
+                    {address && (
+                        <div className={styles.bottomBar}>
+                            <button className={styles.bottomNavBtn} aria-label="Back">
+                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8L10 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                            </button>
+                            <div className={styles.addressPill}>
+                                <span className={styles.addressText}>{address}</span>
+                            </div>
+                            <button className={styles.bottomNavBtn} aria-label="More">
+                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="4" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="12" cy="8" r="1.2" fill="currentColor"/></svg>
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Home indicator */}
+                    <div className={styles.homeIndicator}>
+                        <div className={styles.homeBar} />
+                    </div>
+                </div>
+            </div>
+        );
+    },
+);
+
+Phone.displayName = "Phone";

package/components/ui/Phone/index.ts

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