omnira-ui 0.1.0

package/components/ui/QRCode/QRCode.module.css

@@ -0,0 +1,13 @@
+.wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    border: 1px solid var(--color-border-standard);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.svg {
+    display: block;
+}

package/components/ui/QRCode/QRCode.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useMemo, forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./QRCode.module.css";
+
+export interface QRCodeProps {
+    value: string;
+    size?: "sm" | "md" | "lg";
+    color?: string;
+    bgColor?: string;
+    className?: string;
+}
+
+const sizePx: Record<string, number> = {
+    sm: 128,
+    md: 200,
+    lg: 280,
+};
+
+export const QRCode = forwardRef<HTMLDivElement, QRCodeProps>(
+    (
+        {
+            value,
+            size = "md",
+            color,
+            bgColor,
+            className,
+        },
+        ref,
+    ) => {
+        const dim = sizePx[size];
+        const matrix = useMemo(() => generateQR(value), [value]);
+        const cellSize = dim / matrix.length;
+
+        return (
+            <div
+                ref={ref}
+                className={cn(styles.wrap, className)}
+                style={{ width: dim, height: dim }}
+            >
+                <svg
+                    width={dim}
+                    height={dim}
+                    viewBox={`0 0 ${dim} ${dim}`}
+                    className={styles.svg}
+                >
+                    <rect
+                        width={dim}
+                        height={dim}
+                        fill={bgColor || "var(--color-bg-card)"}
+                        rx="8"
+                    />
+                    {matrix.map((row, y) =>
+                        row.map((cell, x) =>
+                            cell ? (
+                                <rect
+                                    key={`${y}-${x}`}
+                                    x={x * cellSize}
+                                    y={y * cellSize}
+                                    width={cellSize}
+                                    height={cellSize}
+                                    rx={cellSize * 0.15}
+                                    fill={color || "var(--color-text-primary)"}
+                                />
+                            ) : null,
+                        ),
+                    )}
+                </svg>
+            </div>
+        );
+    },
+);
+
+QRCode.displayName = "QRCode";
+
+/**
+ * Minimal QR-like pattern generator.
+ * This creates a deterministic grid pattern based on the input string.
+ * For production use, integrate a proper QR encoding library.
+ */
+function generateQR(value: string): boolean[][] {
+    const size = 25;
+    const matrix: boolean[][] = Array.from({ length: size }, () =>
+        Array(size).fill(false),
+    );
+
+    // Finder patterns (top-left, top-right, bottom-left)
+    const drawFinder = (ox: number, oy: number) => {
+        for (let y = 0; y < 7; y++) {
+            for (let x = 0; x < 7; x++) {
+                const isOuter = y === 0 || y === 6 || x === 0 || x === 6;
+                const isInner = x >= 2 && x <= 4 && y >= 2 && y <= 4;
+                if (isOuter || isInner) matrix[oy + y][ox + x] = true;
+            }
+        }
+    };
+
+    drawFinder(0, 0);
+    drawFinder(size - 7, 0);
+    drawFinder(0, size - 7);
+
+    // Timing patterns
+    for (let i = 8; i < size - 8; i++) {
+        matrix[6][i] = i % 2 === 0;
+        matrix[i][6] = i % 2 === 0;
+    }
+
+    // Data area — hash-based fill
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0;
+    }
+
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            if (matrix[y][x]) continue;
+            // Skip finder + margin zones
+            if ((x < 8 && y < 8) || (x >= size - 8 && y < 8) || (x < 8 && y >= size - 8)) continue;
+            if (x === 6 || y === 6) continue;
+
+            const seed = (hash ^ (x * 31 + y * 37 + x * y * 13)) >>> 0;
+            matrix[y][x] = seed % 3 !== 0;
+        }
+    }
+
+    return matrix;
+}

package/components/ui/QRCode/index.ts

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

package/components/ui/RadioButton/RadioButton.module.css

@@ -0,0 +1,92 @@
+/* ── Group ── */
+.group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+/* ── Wrapper ── */
+.wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.wrapperDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Radio circle ── */
+.radio {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    padding: 0;
+}
+
+.radio:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.radioChecked {
+    background: var(--color-bg-input);
+    border-color: var(--color-lime);
+}
+
+/* Radio sizes */
+.radio_sm {
+    width: 18px;
+    height: 18px;
+}
+
+.radio_md {
+    width: 22px;
+    height: 22px;
+}
+
+/* ── Inner dot ── */
+.dot {
+    border-radius: 50%;
+    background: var(--color-lime);
+}
+
+.dot_sm {
+    width: 8px;
+    height: 8px;
+}
+
+.dot_md {
+    width: 10px;
+    height: 10px;
+}
+
+/* ── 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/RadioButton/RadioButton.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, forwardRef, useId } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./RadioButton.module.css";
+
+/* ── Group Context ── */
+interface RadioGroupCtx {
+    value: string;
+    onChange: (value: string) => void;
+    size: "sm" | "md";
+    disabled: boolean;
+}
+
+const Ctx = createContext<RadioGroupCtx | null>(null);
+
+/* ── RadioGroup ── */
+export interface RadioGroupProps {
+    children: React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+
+export function RadioGroup({
+    children,
+    defaultValue = "",
+    value: controlledValue,
+    onChange,
+    size = "sm",
+    disabled = false,
+    className,
+    ...props
+}: RadioGroupProps) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    const handleChange = useCallback(
+        (v: string) => {
+            if (!isControlled) setInternalValue(v);
+            onChange?.(v);
+        },
+        [isControlled, onChange],
+    );
+
+    return (
+        <Ctx.Provider value={{ value, onChange: handleChange, size, disabled }}>
+            <div
+                role="radiogroup"
+                aria-label={props["aria-label"]}
+                className={cn(styles.group, className)}
+            >
+                {children}
+            </div>
+        </Ctx.Provider>
+    );
+}
+
+/* ── RadioButton ── */
+export interface RadioButtonProps {
+    label?: string;
+    hint?: string;
+    value: string;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export const RadioButton = forwardRef<HTMLButtonElement, RadioButtonProps>(
+    (
+        {
+            label,
+            hint,
+            value,
+            size: sizeProp,
+            disabled: disabledProp,
+            checked: checkedProp,
+            onChange: onChangeProp,
+            className,
+        },
+        ref,
+    ) => {
+        const ctx = useContext(Ctx);
+        const size = sizeProp ?? ctx?.size ?? "sm";
+        const disabled = disabledProp ?? ctx?.disabled ?? false;
+        const checked = checkedProp ?? (ctx ? ctx.value === value : false);
+
+        const handleClick = () => {
+            if (disabled) return;
+            if (ctx) {
+                ctx.onChange(value);
+            } else {
+                onChangeProp?.(value);
+            }
+        };
+
+        return (
+            <div className={cn(styles.wrapper, disabled && styles.wrapperDisabled, className)}>
+                <button
+                    ref={ref}
+                    type="button"
+                    role="radio"
+                    aria-checked={checked}
+                    disabled={disabled}
+                    onClick={handleClick}
+                    className={cn(
+                        styles.radio,
+                        styles[`radio_${size}`],
+                        checked && styles.radioChecked,
+                    )}
+                >
+                    {checked && (
+                        <span className={cn(styles.dot, styles[`dot_${size}`])} />
+                    )}
+                </button>
+                {(label || hint) && (
+                    <div className={styles.textWrap} onClick={handleClick}>
+                        {label && <span className={styles.label}>{label}</span>}
+                        {hint && <span className={styles.hint}>{hint}</span>}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);
+
+RadioButton.displayName = "RadioButton";

package/components/ui/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { RadioButton, RadioGroup } from "./RadioButton";
+export type { RadioButtonProps, RadioGroupProps } from "./RadioButton";