omnira-ui 0.1.0

package/components/ui/Checkbox/Checkbox.module.css

@@ -0,0 +1,92 @@
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.wrapperDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Hidden native input ── */
+.hiddenInput {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* ── Box ── */
+.box {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    padding: 0;
+    color: var(--color-bg-primary);
+}
+
+.box:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.boxChecked {
+    background: var(--color-lime);
+    border-color: var(--color-lime);
+}
+
+/* Box sizes */
+.box_sm {
+    width: 18px;
+    height: 18px;
+}
+
+.box_md {
+    width: 22px;
+    height: 22px;
+}
+
+.box_lg {
+    width: 26px;
+    height: 26px;
+}
+
+/* ── Check icon ── */
+.checkIcon {
+    width: 70%;
+    height: 70%;
+}
+
+/* ── Text ── */
+.textWrap {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    cursor: pointer;
+    padding-top: 0px;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    line-height: 1.3;
+}
+
+.hint {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1.4;
+}

package/components/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { forwardRef, useState, useCallback, useId } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Checkbox.module.css";
+
+export interface CheckboxProps {
+    label?: string;
+    hint?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    (
+        {
+            label,
+            hint,
+            size = "sm",
+            disabled = false,
+            checked: controlledChecked,
+            defaultChecked = false,
+            onChange,
+            className,
+        },
+        ref,
+    ) => {
+        const id = useId();
+        const [internalChecked, setInternalChecked] = useState(defaultChecked);
+        const isControlled = controlledChecked !== undefined;
+        const checked = isControlled ? controlledChecked : internalChecked;
+
+        const handleChange = useCallback(() => {
+            if (disabled) return;
+            const next = !checked;
+            if (!isControlled) setInternalChecked(next);
+            onChange?.(next);
+        }, [checked, disabled, isControlled, onChange]);
+
+        return (
+            <div className={cn(styles.wrapper, disabled && styles.wrapperDisabled, className)}>
+                <input
+                    ref={ref}
+                    id={id}
+                    type="checkbox"
+                    checked={checked}
+                    onChange={handleChange}
+                    disabled={disabled}
+                    className={styles.hiddenInput}
+                    aria-checked={checked}
+                />
+                <button
+                    type="button"
+                    role="checkbox"
+                    aria-checked={checked}
+                    disabled={disabled}
+                    onClick={handleChange}
+                    className={cn(
+                        styles.box,
+                        styles[`box_${size}`],
+                        checked && styles.boxChecked,
+                    )}
+                >
+                    {checked && (
+                        <svg
+                            viewBox="0 0 12 12"
+                            fill="none"
+                            className={styles.checkIcon}
+                        >
+                            <path
+                                d="M2.5 6L5 8.5L9.5 3.5"
+                                stroke="currentColor"
+                                strokeWidth="1.8"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            />
+                        </svg>
+                    )}
+                </button>
+                {(label || hint) && (
+                    <label htmlFor={id} className={styles.textWrap}>
+                        {label && <span className={styles.label}>{label}</span>}
+                        {hint && <span className={styles.hint}>{hint}</span>}
+                    </label>
+                )}
+            </div>
+        );
+    },
+);
+
+Checkbox.displayName = "Checkbox";

package/components/ui/Checkbox/index.ts

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

package/components/ui/Collapse/Collapse.module.css

@@ -0,0 +1,60 @@
+.group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* ── Item ── */
+.item {
+    border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.item:first-child {
+    border-top: 1px solid var(--color-border-subtle);
+}
+
+.itemHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 18px 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.itemHeader:hover {
+    color: var(--color-text-primary);
+}
+
+.itemTitle {
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    letter-spacing: -0.01em;
+    text-align: left;
+}
+
+.itemChevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-tertiary);
+    transition: transform 0.25s ease;
+    flex-shrink: 0;
+}
+
+.itemChevronOpen {
+    transform: rotate(180deg);
+}
+
+/* ── Content ── */
+.itemContent {
+    padding: 0 4px 20px;
+    font-size: 15px;
+    line-height: 1.65;
+    color: var(--color-text-secondary);
+}

package/components/ui/Collapse/Collapse.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState, useCallback, createContext, useContext, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./Collapse.module.css";
+
+/* ══════════════════════════════════════
+   Collapse Group (accordion wrapper)
+   ══════════════════════════════════════ */
+interface CollapseContextValue {
+    openItems: Set<string>;
+    toggle: (id: string) => void;
+}
+
+const CollapseContext = createContext<CollapseContextValue | null>(null);
+
+export interface CollapseGroupProps {
+    children: React.ReactNode;
+    multiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+
+export const CollapseGroup = forwardRef<HTMLDivElement, CollapseGroupProps>(
+    ({ children, multiple = false, defaultOpen = [], className }, ref) => {
+        const [openItems, setOpenItems] = useState<Set<string>>(new Set(defaultOpen));
+
+        const toggle = useCallback(
+            (id: string) => {
+                setOpenItems((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(id)) {
+                        next.delete(id);
+                    } else {
+                        if (!multiple) next.clear();
+                        next.add(id);
+                    }
+                    return next;
+                });
+            },
+            [multiple],
+        );
+
+        return (
+            <CollapseContext.Provider value={{ openItems, toggle }}>
+                <div ref={ref} className={cn(styles.group, className)}>
+                    {children}
+                </div>
+            </CollapseContext.Provider>
+        );
+    },
+);
+
+CollapseGroup.displayName = "CollapseGroup";
+
+/* ══════════════════════════════════════
+   Collapse Item
+   ══════════════════════════════════════ */
+export interface CollapseItemProps {
+    id: string;
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+}
+
+export const CollapseItem = forwardRef<HTMLDivElement, CollapseItemProps>(
+    ({ id, title, children, defaultOpen = false, className }, ref) => {
+        const ctx = useContext(CollapseContext);
+
+        // Standalone mode (no group)
+        const [standaloneOpen, setStandaloneOpen] = useState(defaultOpen);
+        const isOpen = ctx ? ctx.openItems.has(id) : standaloneOpen;
+        const handleToggle = ctx ? () => ctx.toggle(id) : () => setStandaloneOpen((p) => !p);
+
+        return (
+            <div ref={ref} className={cn(styles.item, className)}>
+                <button
+                    className={styles.itemHeader}
+                    onClick={handleToggle}
+                    aria-expanded={isOpen}
+                >
+                    <span className={styles.itemTitle}>{title}</span>
+                    <span className={cn(styles.itemChevron, isOpen && styles.itemChevronOpen)}>
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                    </span>
+                </button>
+                {isOpen && (
+                    <div className={styles.itemContent}>
+                        {children}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);
+
+CollapseItem.displayName = "CollapseItem";

package/components/ui/Collapse/index.ts

@@ -0,0 +1,2 @@
+export { CollapseGroup, CollapseItem } from "./Collapse";
+export type { CollapseGroupProps, CollapseItemProps } from "./Collapse";

package/components/ui/CreditCard/CreditCard.module.css

@@ -0,0 +1,117 @@
+.card {
+    position: relative;
+    width: 380px;
+    height: 240px;
+    border-radius: var(--radius-xl);
+    padding: 28px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    font-family: var(--font-display);
+    user-select: none;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+}
+
+.pattern {
+    position: absolute;
+    inset: 0;
+    opacity: 0.06;
+    background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%),
+                       radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+/* ── Variants ── */
+.card_brand-dark {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    color: #fff;
+}
+
+.card_brand-light {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
+    color: #1a1a2e;
+}
+
+.card_gradient {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+}
+
+.card_minimal {
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    color: var(--color-text-primary);
+    box-shadow: var(--shadow-card);
+    backdrop-filter: var(--blur-standard);
+}
+
+/* ── Top row ── */
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    z-index: 1;
+}
+
+.company {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.chip {
+    flex-shrink: 0;
+}
+
+/* ── Number ── */
+.number {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    position: relative;
+    z-index: 1;
+}
+
+/* ── Bottom row ── */
+.bottom {
+    display: flex;
+    align-items: flex-end;
+    gap: 24px;
+    position: relative;
+    z-index: 1;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.fieldLabel {
+    font-size: 9px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.6;
+}
+
+.fieldValue {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+}
+
+.network {
+    margin-left: auto;
+}
+
+/* ── Light variant overrides ── */
+.card_brand-light .pattern {
+    opacity: 0.03;
+}
+
+.card_brand-light .fieldLabel {
+    opacity: 0.5;
+}

package/components/ui/CreditCard/CreditCard.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./CreditCard.module.css";
+
+export interface CreditCardProps {
+    type?: "brand-dark" | "brand-light" | "gradient" | "minimal";
+    company?: string;
+    cardNumber?: string;
+    cardHolder?: string;
+    cardExpiration?: string;
+    className?: string;
+}
+
+export const CreditCard = forwardRef<HTMLDivElement, CreditCardProps>(
+    (
+        {
+            type = "brand-dark",
+            company = "Omnira.",
+            cardNumber = "1234 1234 1234 1234",
+            cardHolder = "CARD HOLDER",
+            cardExpiration = "00/00",
+            className,
+        },
+        ref,
+    ) => {
+        const last4 = cardNumber.replace(/\s/g, "").slice(-4);
+        const masked = `**** **** **** ${last4}`;
+
+        return (
+            <div ref={ref} className={cn(styles.card, styles[`card_${type}`], className)}>
+                {/* Background pattern */}
+                <div className={styles.pattern} />
+
+                {/* Top row: company + chip */}
+                <div className={styles.top}>
+                    <span className={styles.company}>{company}</span>
+                    <ChipIcon />
+                </div>
+
+                {/* Card number */}
+                <div className={styles.number}>{masked}</div>
+
+                {/* Bottom row: holder + expiry + network */}
+                <div className={styles.bottom}>
+                    <div className={styles.field}>
+                        <span className={styles.fieldLabel}>Card Holder</span>
+                        <span className={styles.fieldValue}>{cardHolder}</span>
+                    </div>
+                    <div className={styles.field}>
+                        <span className={styles.fieldLabel}>Expires</span>
+                        <span className={styles.fieldValue}>{cardExpiration}</span>
+                    </div>
+                    <div className={styles.network}>
+                        <CardNetworkIcon />
+                    </div>
+                </div>
+            </div>
+        );
+    },
+);
+
+CreditCard.displayName = "CreditCard";
+
+/* ── Inline SVG Icons ── */
+function ChipIcon() {
+    return (
+        <svg width="36" height="28" viewBox="0 0 36 28" fill="none" className={styles.chip}>
+            <rect x="0.5" y="0.5" width="35" height="27" rx="4" fill="rgba(255,215,0,0.25)" stroke="rgba(255,215,0,0.4)" />
+            <line x1="0" y1="10" x2="36" y2="10" stroke="rgba(255,215,0,0.3)" strokeWidth="0.5" />
+            <line x1="0" y1="18" x2="36" y2="18" stroke="rgba(255,215,0,0.3)" strokeWidth="0.5" />
+            <line x1="12" y1="0" x2="12" y2="28" stroke="rgba(255,215,0,0.3)" strokeWidth="0.5" />
+            <line x1="24" y1="0" x2="24" y2="28" stroke="rgba(255,215,0,0.3)" strokeWidth="0.5" />
+        </svg>
+    );
+}
+
+function CardNetworkIcon() {
+    return (
+        <svg width="40" height="26" viewBox="0 0 40 26" fill="none">
+            <circle cx="15" cy="13" r="12" fill="rgba(255,255,255,0.25)" />
+            <circle cx="25" cy="13" r="12" fill="rgba(255,255,255,0.2)" />
+        </svg>
+    );
+}

package/components/ui/CreditCard/index.ts

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