omnira-ui 0.1.0

package/components/ui/PinInput/PinInput.module.css

@@ -0,0 +1,104 @@
+/* ── Root ── */
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: fit-content;
+}
+
+/* ── Label ── */
+.label {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Description ── */
+.description {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── Group ── */
+.group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* ── Separator ── */
+.separator {
+    color: var(--color-text-tertiary);
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.separator_sm {
+    font-size: 14px;
+    width: 12px;
+}
+
+.separator_md {
+    font-size: 16px;
+    width: 14px;
+}
+
+.separator_lg {
+    font-size: 18px;
+    width: 16px;
+}
+
+/* ── Slot ── */
+.slot {
+    text-align: center;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-standard);
+    font-family: inherit;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    transition: all 0.2s;
+    outline: none;
+    caret-color: var(--color-lime);
+}
+
+.slot:focus {
+    border-color: var(--color-border-lime-strong);
+    background: var(--color-bg-elevated);
+    box-shadow: 0 0 0 3px var(--color-bg-lime-subtle);
+}
+
+.slot::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 0.4;
+}
+
+/* ── Slot sizes ── */
+.slot_sm {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+}
+
+.slot_md {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+}
+
+.slot_lg {
+    width: 60px;
+    height: 60px;
+    font-size: 22px;
+}
+
+/* ── Disabled ── */
+.slotDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/components/ui/PinInput/PinInput.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import {
+    createContext,
+    useContext,
+    useRef,
+    useState,
+    useCallback,
+    forwardRef,
+} from "react";
+import { cn } from "@/lib/cn";
+import styles from "./PinInput.module.css";
+
+/* ── Context ── */
+interface PinCtx {
+    size: "sm" | "md" | "lg";
+    disabled: boolean;
+    values: string[];
+    setValue: (index: number, value: string) => void;
+    focusSlot: (index: number) => void;
+    registerSlot: (index: number, el: HTMLInputElement | null) => void;
+    maxLength: number;
+}
+
+const Ctx = createContext<PinCtx>({
+    size: "md",
+    disabled: false,
+    values: [],
+    setValue: () => {},
+    focusSlot: () => {},
+    registerSlot: () => {},
+    maxLength: 6,
+});
+
+/* ── Root ── */
+interface PinInputRootProps {
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    onComplete?: (code: string) => void;
+}
+
+function PinInputRoot({
+    size = "md",
+    disabled = false,
+    children,
+    className,
+    onComplete,
+}: PinInputRootProps) {
+    const [values, setValues] = useState<string[]>([]);
+    const slotsRef = useRef<Map<number, HTMLInputElement>>(new Map());
+    const maxLengthRef = useRef(6);
+
+    const registerSlot = useCallback((index: number, el: HTMLInputElement | null) => {
+        if (el) slotsRef.current.set(index, el);
+        else slotsRef.current.delete(index);
+    }, []);
+
+    const focusSlot = useCallback((index: number) => {
+        const el = slotsRef.current.get(index);
+        if (el) {
+            el.focus();
+            el.select();
+        }
+    }, []);
+
+    const setValue = useCallback(
+        (index: number, value: string) => {
+            setValues((prev) => {
+                const next = [...prev];
+                next[index] = value;
+                const code = next.join("");
+                if (code.length === maxLengthRef.current && onComplete) {
+                    setTimeout(() => onComplete(code), 0);
+                }
+                return next;
+            });
+        },
+        [onComplete],
+    );
+
+    return (
+        <Ctx.Provider
+            value={{
+                size,
+                disabled,
+                values,
+                setValue,
+                focusSlot,
+                registerSlot,
+                maxLength: maxLengthRef.current,
+            }}
+        >
+            <div className={cn(styles.root, className)}>{children}</div>
+        </Ctx.Provider>
+    );
+}
+
+/* ── Label ── */
+function Label({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <label className={cn(styles.label, className)}>{children}</label>;
+}
+
+/* ── Description ── */
+function Description({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <span className={cn(styles.description, className)}>{children}</span>;
+}
+
+/* ── Group ── */
+interface GroupProps {
+    children: React.ReactNode;
+    maxLength?: number;
+    className?: string;
+}
+
+function Group({ children, maxLength = 6, className }: GroupProps) {
+    const ctx = useContext(Ctx);
+    (ctx as { maxLength: number }).maxLength = maxLength;
+    return <div className={cn(styles.group, className)}>{children}</div>;
+}
+
+/* ── Separator ── */
+function Separator({ className }: { className?: string }) {
+    const { size } = useContext(Ctx);
+    return (
+        <span
+            className={cn(styles.separator, styles[`separator_${size}`], className)}
+            aria-hidden
+        >
+            –
+        </span>
+    );
+}
+
+/* ── Slot ── */
+interface SlotProps {
+    index: number;
+    className?: string;
+}
+
+const Slot = forwardRef<HTMLInputElement, SlotProps>(({ index, className }, _ref) => {
+    const { size, disabled, values, setValue, focusSlot, registerSlot } = useContext(Ctx);
+
+    const handleRef = useCallback(
+        (el: HTMLInputElement | null) => {
+            registerSlot(index, el);
+        },
+        [index, registerSlot],
+    );
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const raw = e.target.value.replace(/\D/g, "");
+        const char = raw.slice(-1);
+        setValue(index, char);
+        if (char) focusSlot(index + 1);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Backspace") {
+            if (!values[index]) {
+                focusSlot(index - 1);
+            } else {
+                setValue(index, "");
+            }
+        } else if (e.key === "ArrowLeft") {
+            focusSlot(index - 1);
+        } else if (e.key === "ArrowRight") {
+            focusSlot(index + 1);
+        }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
+        for (let i = 0; i < pasted.length; i++) {
+            setValue(index + i, pasted[i]);
+        }
+        focusSlot(index + pasted.length - 1);
+    };
+
+    return (
+        <input
+            ref={handleRef}
+            type="text"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            maxLength={1}
+            value={values[index] || ""}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onFocus={(e) => e.target.select()}
+            disabled={disabled}
+            className={cn(styles.slot, styles[`slot_${size}`], disabled && styles.slotDisabled, className)}
+            aria-label={`Digit ${index + 1}`}
+        />
+    );
+});
+
+Slot.displayName = "PinInput.Slot";
+
+/* ── Compound export ── */
+export const PinInput = Object.assign(PinInputRoot, {
+    Label,
+    Description,
+    Group,
+    Separator,
+    Slot,
+});

package/components/ui/PinInput/index.ts

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

package/components/ui/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,180 @@
+/* ══════════════════════════════════════
+   Linear Progress Bar
+   ══════════════════════════════════════ */
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+}
+
+.wrapper_right {
+    flex-direction: column;
+}
+
+.label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    margin-bottom: 2px;
+}
+
+/* ── Bar row ── */
+.barRow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+/* ── Track ── */
+.track {
+    flex: 1;
+    min-width: 0;
+    border-radius: 999px;
+    background: var(--color-border-medium);
+    overflow: hidden;
+    position: relative;
+}
+
+.track_sm { height: 6px; }
+.track_md { height: 10px; }
+.track_lg { height: 14px; }
+
+/* ── Fill ── */
+.fill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.4s ease;
+}
+
+.fill_lime { background: var(--color-lime); stroke: var(--color-lime); }
+.fill_blue { background: #3b82f6; stroke: #3b82f6; }
+.fill_red { background: #ef4444; stroke: #ef4444; }
+.fill_orange { background: #f59e0b; stroke: #f59e0b; }
+
+/* ── Text positions ── */
+.textRight {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    min-width: 36px;
+    text-align: right;
+}
+
+.textBottom {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    text-align: right;
+}
+
+/* ── Floating bubble ── */
+.floatingWrap {
+    position: relative;
+    width: 100%;
+    height: 28px;
+}
+
+.floatingBubble {
+    position: absolute;
+    transform: translateX(-50%);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    border-radius: var(--radius-sm);
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    top: 0;
+}
+
+.floatingBubble::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -5px;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--color-border-standard);
+}
+
+.floatingBubbleBottom {
+    top: auto;
+    bottom: 0;
+}
+
+.floatingBubbleBottom::after {
+    bottom: auto;
+    top: -5px;
+    border-top: none;
+    border-bottom: 5px solid var(--color-border-standard);
+}
+
+/* ══════════════════════════════════════
+   Circle Progress Bar
+   ══════════════════════════════════════ */
+
+.circleWrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.circleTrack {
+    stroke: var(--color-border-medium);
+}
+
+.circleFill {
+    transition: stroke-dashoffset 0.5s ease;
+}
+
+.circleText {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1px;
+}
+
+.circlePct {
+    font-weight: 700;
+    color: var(--color-text-primary);
+    font-family: var(--font-display);
+    line-height: 1;
+}
+
+.circleLabel {
+    color: var(--color-text-tertiary);
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+/* ══════════════════════════════════════
+   Half Circle Progress Bar
+   ══════════════════════════════════════ */
+
+.halfWrap {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.halfText {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1px;
+}

package/components/ui/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import styles from "./ProgressBar.module.css";
+
+/* ── Linear Progress Bar ── */
+export interface ProgressBarProps {
+    min?: number;
+    max?: number;
+    value: number;
+    label?: string;
+    /** Where to display the percentage text */
+    textPosition?: "right" | "bottom" | "top-floating" | "bottom-floating" | "none";
+    size?: "sm" | "md" | "lg";
+    color?: "lime" | "blue" | "red" | "orange";
+    className?: string;
+}
+
+export function ProgressBar({
+    min = 0,
+    max = 100,
+    value,
+    label,
+    textPosition = "right",
+    size = "md",
+    color = "lime",
+    className,
+}: ProgressBarProps) {
+    const pct = Math.round(((value - min) / (max - min)) * 100);
+    const clampedPct = Math.max(0, Math.min(100, pct));
+
+    return (
+        <div className={cn(styles.wrapper, styles[`wrapper_${textPosition}`], className)}>
+            {label && <span className={styles.label}>{label}</span>}
+
+            {textPosition === "top-floating" && (
+                <div className={styles.floatingWrap}>
+                    <div className={styles.floatingBubble} style={{ left: `${clampedPct}%` }}>
+                        {clampedPct}%
+                    </div>
+                </div>
+            )}
+
+            <div className={styles.barRow}>
+                <div
+                    className={cn(styles.track, styles[`track_${size}`])}
+                    role="progressbar"
+                    aria-valuenow={value}
+                    aria-valuemin={min}
+                    aria-valuemax={max}
+                >
+                    <div
+                        className={cn(styles.fill, styles[`fill_${color}`])}
+                        style={{ width: `${clampedPct}%` }}
+                    />
+                </div>
+                {textPosition === "right" && (
+                    <span className={styles.textRight}>{clampedPct}%</span>
+                )}
+            </div>
+
+            {textPosition === "bottom" && (
+                <span className={styles.textBottom}>{clampedPct}%</span>
+            )}
+
+            {textPosition === "bottom-floating" && (
+                <div className={styles.floatingWrap}>
+                    <div className={cn(styles.floatingBubble, styles.floatingBubbleBottom)} style={{ left: `${clampedPct}%` }}>
+                        {clampedPct}%
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/* ── Circle Progress Bar ── */
+export interface ProgressBarCircleProps {
+    min?: number;
+    max?: number;
+    value: number;
+    label?: string;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    color?: "lime" | "blue" | "red" | "orange";
+    className?: string;
+}
+
+const circleSizes: Record<string, { dim: number; stroke: number; fontSize: number }> = {
+    xxs: { dim: 48, stroke: 4, fontSize: 11 },
+    xs: { dim: 64, stroke: 5, fontSize: 13 },
+    sm: { dim: 96, stroke: 6, fontSize: 16 },
+    md: { dim: 128, stroke: 8, fontSize: 20 },
+    lg: { dim: 160, stroke: 10, fontSize: 24 },
+};
+
+export function ProgressBarCircle({
+    min = 0,
+    max = 100,
+    value,
+    label,
+    size = "sm",
+    color = "lime",
+    className,
+}: ProgressBarCircleProps) {
+    const pct = Math.round(((value - min) / (max - min)) * 100);
+    const clampedPct = Math.max(0, Math.min(100, pct));
+    const cfg = circleSizes[size];
+    const r = (cfg.dim - cfg.stroke) / 2;
+    const circ = 2 * Math.PI * r;
+    const offset = circ - (clampedPct / 100) * circ;
+
+    return (
+        <div className={cn(styles.circleWrap, className)} style={{ width: cfg.dim, height: cfg.dim }}>
+            <svg width={cfg.dim} height={cfg.dim} viewBox={`0 0 ${cfg.dim} ${cfg.dim}`}>
+                <circle
+                    cx={cfg.dim / 2}
+                    cy={cfg.dim / 2}
+                    r={r}
+                    fill="none"
+                    className={styles.circleTrack}
+                    strokeWidth={cfg.stroke}
+                    strokeLinecap="round"
+                />
+                <circle
+                    cx={cfg.dim / 2}
+                    cy={cfg.dim / 2}
+                    r={r}
+                    fill="none"
+                    className={cn(styles.circleFill, styles[`fill_${color}`])}
+                    strokeWidth={cfg.stroke}
+                    strokeDasharray={circ}
+                    strokeDashoffset={offset}
+                    strokeLinecap="round"
+                    transform={`rotate(-90 ${cfg.dim / 2} ${cfg.dim / 2})`}
+                />
+            </svg>
+            <div className={styles.circleText} style={{ fontSize: cfg.fontSize }}>
+                <span className={styles.circlePct}>{clampedPct}%</span>
+                {label && <span className={styles.circleLabel} style={{ fontSize: Math.max(9, cfg.fontSize - 4) }}>{label}</span>}
+            </div>
+        </div>
+    );
+}
+
+/* ── Half Circle Progress Bar ── */
+export interface ProgressBarHalfCircleProps {
+    min?: number;
+    max?: number;
+    value: number;
+    label?: string;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    color?: "lime" | "blue" | "red" | "orange";
+    className?: string;
+}
+
+const halfSizes: Record<string, { w: number; h: number; stroke: number; fontSize: number }> = {
+    xxs: { w: 64, h: 36, stroke: 4, fontSize: 11 },
+    xs: { w: 88, h: 48, stroke: 5, fontSize: 13 },
+    sm: { w: 128, h: 68, stroke: 6, fontSize: 16 },
+    md: { w: 168, h: 88, stroke: 8, fontSize: 20 },
+    lg: { w: 208, h: 108, stroke: 10, fontSize: 24 },
+};
+
+export function ProgressBarHalfCircle({
+    min = 0,
+    max = 100,
+    value,
+    label,
+    size = "sm",
+    color = "lime",
+    className,
+}: ProgressBarHalfCircleProps) {
+    const pct = Math.round(((value - min) / (max - min)) * 100);
+    const clampedPct = Math.max(0, Math.min(100, pct));
+    const cfg = halfSizes[size];
+    const r = (cfg.w - cfg.stroke) / 2;
+    const halfCirc = Math.PI * r;
+    const offset = halfCirc - (clampedPct / 100) * halfCirc;
+
+    return (
+        <div className={cn(styles.halfWrap, className)} style={{ width: cfg.w, height: cfg.h }}>
+            <svg width={cfg.w} height={cfg.h} viewBox={`0 0 ${cfg.w} ${cfg.h}`} overflow="visible">
+                <path
+                    d={`M ${cfg.stroke / 2} ${cfg.h} A ${r} ${r} 0 0 1 ${cfg.w - cfg.stroke / 2} ${cfg.h}`}
+                    fill="none"
+                    className={styles.circleTrack}
+                    strokeWidth={cfg.stroke}
+                    strokeLinecap="round"
+                />
+                <path
+                    d={`M ${cfg.stroke / 2} ${cfg.h} A ${r} ${r} 0 0 1 ${cfg.w - cfg.stroke / 2} ${cfg.h}`}
+                    fill="none"
+                    className={cn(styles.circleFill, styles[`fill_${color}`])}
+                    strokeWidth={cfg.stroke}
+                    strokeDasharray={halfCirc}
+                    strokeDashoffset={offset}
+                    strokeLinecap="round"
+                />
+            </svg>
+            <div className={styles.halfText} style={{ bottom: 0 }}>
+                <span className={styles.circlePct} style={{ fontSize: cfg.fontSize }}>{clampedPct}%</span>
+                {label && <span className={styles.circleLabel} style={{ fontSize: Math.max(9, cfg.fontSize - 4) }}>{label}</span>}
+            </div>
+        </div>
+    );
+}

package/components/ui/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar, ProgressBarCircle, ProgressBarHalfCircle } from "./ProgressBar";
+export type { ProgressBarProps, ProgressBarCircleProps, ProgressBarHalfCircleProps } from "./ProgressBar";