omnira-ui 0.1.0

package/components/ui/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,382 @@
+/* ── Shared ── */
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+}
+
+.cardGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 12px;
+    width: 100%;
+}
+
+/* ── Shared radio circle ── */
+.radioCircle {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border-standard);
+    background: var(--color-bg-input);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.radioCircleSelected {
+    border-color: var(--color-lime);
+}
+
+.radioDot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-lime);
+}
+
+/* ── Shared text ── */
+.itemTitle {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    line-height: 1.3;
+}
+
+.itemSecondary {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    line-height: 1.4;
+}
+
+.itemDesc {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+    margin: 0;
+    text-align: left;
+}
+
+.itemPrice {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-left: auto;
+}
+
+/* ── Icon ── */
+.icon {
+    width: 20px;
+    height: 20px;
+}
+
+.iconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+}
+
+/* ── IconSimple variant ── */
+.iconSimpleItem {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.iconSimpleItem:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.iconSimpleItemSelected {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.iconSimpleTop {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    width: 100%;
+}
+
+.iconSimpleLeft {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.iconSimpleText {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.badgeWrap {
+    margin-top: 4px;
+}
+
+/* ── Checkbox variant ── */
+.checkboxItem {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.checkboxItem:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.checkboxItemSelected {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.checkboxTop {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+}
+
+.checkboxBox {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-standard);
+    background: var(--color-bg-input);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    margin-top: 1px;
+}
+
+.checkboxBoxSelected {
+    background: var(--color-lime);
+    border-color: var(--color-lime);
+    color: var(--color-bg-primary);
+}
+
+.checkIcon {
+    width: 12px;
+    height: 12px;
+}
+
+.checkboxText {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+}
+
+.checkboxTitleRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+/* ── Payment variant ── */
+.paymentItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.paymentItem:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.paymentItemSelected {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.paymentLeft {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.paymentLogo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.paymentText {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+/* ── Avatar variant ── */
+.avatarItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.avatarItem:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.avatarItemSelected {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.avatarLeft {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.avatarImg {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.avatarText {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.avatarNameRow {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.avatarUsername {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+/* ── IconCard variant ── */
+.iconCardItem {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border-standard);
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+}
+
+.iconCardItem:hover {
+    border-color: var(--color-border-lime-strong);
+}
+
+.iconCardItemSelected {
+    border-color: var(--color-lime);
+    background: var(--color-bg-lime-subtle);
+}
+
+.iconCardHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.iconCardIconWrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border-subtle);
+    color: var(--color-text-secondary);
+}
+
+.iconCardBody {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.iconCardPrice {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.priceValue {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    line-height: 1;
+    font-family: var(--font-display);
+}
+
+.iconCardBadge {
+    margin-top: 4px;
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    background: var(--color-bg-lime-medium);
+    color: var(--color-lime);
+    border: 1px solid var(--color-border-lime-strong);
+}

package/components/ui/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./RadioGroup.module.css";
+
+/* ── Shared types ── */
+interface BaseItem {
+    value: string;
+    title: string;
+    description?: string;
+}
+
+interface PlanItem extends BaseItem {
+    secondaryTitle?: string;
+    price?: string;
+    badge?: React.ReactNode;
+    icon?: React.ComponentType<{ className?: string }>;
+}
+
+interface PaymentItem extends BaseItem {
+    logo?: React.ReactNode;
+}
+
+interface AvatarItem {
+    id: string;
+    name: string;
+    username: string;
+    title: string;
+    avatarUrl: string;
+}
+
+/* ── Shared hook ── */
+function useRadioGroup(defaultValue?: string) {
+    const [value, setValue] = useState(defaultValue ?? "");
+    return { value, onChange: setValue };
+}
+
+/* ── IconSimple ── */
+interface IconSimpleProps {
+    items: PlanItem[];
+    defaultValue?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+
+function IconSimple({ items, defaultValue, className, ...props }: IconSimpleProps) {
+    const { value, onChange } = useRadioGroup(defaultValue);
+
+    return (
+        <div role="radiogroup" aria-label={props["aria-label"]} className={cn(styles.list, className)}>
+            {items.map((item) => {
+                const selected = value === item.value;
+                const Icon = item.icon;
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => onChange(item.value)}
+                        className={cn(styles.iconSimpleItem, selected && styles.iconSimpleItemSelected)}
+                    >
+                        <div className={styles.iconSimpleTop}>
+                            <div className={styles.iconSimpleLeft}>
+                                {Icon && (
+                                    <span className={styles.iconWrap}>
+                                        <Icon className={styles.icon} />
+                                    </span>
+                                )}
+                                <div className={styles.iconSimpleText}>
+                                    <span className={styles.itemTitle}>{item.title}</span>
+                                    {item.secondaryTitle && (
+                                        <span className={styles.itemSecondary}>{item.secondaryTitle}</span>
+                                    )}
+                                </div>
+                            </div>
+                            <span className={cn(styles.radioCircle, selected && styles.radioCircleSelected)}>
+                                {selected && <span className={styles.radioDot} />}
+                            </span>
+                        </div>
+                        {item.description && (
+                            <p className={styles.itemDesc}>{item.description}</p>
+                        )}
+                        {item.badge && <div className={styles.badgeWrap}>{item.badge}</div>}
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ── Checkbox variant ── */
+interface CheckboxProps {
+    items: PlanItem[];
+    defaultValue?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+
+function CheckboxVariant({ items, defaultValue, className, ...props }: CheckboxProps) {
+    const { value, onChange } = useRadioGroup(defaultValue);
+
+    return (
+        <div role="radiogroup" aria-label={props["aria-label"]} className={cn(styles.list, className)}>
+            {items.map((item) => {
+                const selected = value === item.value;
+                const Icon = item.icon;
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => onChange(item.value)}
+                        className={cn(styles.checkboxItem, selected && styles.checkboxItemSelected)}
+                    >
+                        <div className={styles.checkboxTop}>
+                            <span className={cn(styles.checkboxBox, selected && styles.checkboxBoxSelected)}>
+                                {selected && (
+                                    <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>
+                                )}
+                            </span>
+                            <div className={styles.checkboxText}>
+                                <div className={styles.checkboxTitleRow}>
+                                    <span className={styles.itemTitle}>{item.title}</span>
+                                    {item.price && <span className={styles.itemPrice}>{item.price}/mo</span>}
+                                </div>
+                                {item.description && (
+                                    <p className={styles.itemDesc}>{item.description}</p>
+                                )}
+                            </div>
+                        </div>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ── PaymentIcon ── */
+interface PaymentIconProps {
+    items: PaymentItem[];
+    defaultValue?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+
+function PaymentIcon({ items, defaultValue, className, ...props }: PaymentIconProps) {
+    const { value, onChange } = useRadioGroup(defaultValue ?? items[0]?.value);
+
+    return (
+        <div role="radiogroup" aria-label={props["aria-label"]} className={cn(styles.list, className)}>
+            {items.map((item) => {
+                const selected = value === item.value;
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => onChange(item.value)}
+                        className={cn(styles.paymentItem, selected && styles.paymentItemSelected)}
+                    >
+                        <div className={styles.paymentLeft}>
+                            {item.logo && <span className={styles.paymentLogo}>{item.logo}</span>}
+                            <div className={styles.paymentText}>
+                                <span className={styles.itemTitle}>{item.title}</span>
+                                {item.description && <span className={styles.itemSecondary}>{item.description}</span>}
+                            </div>
+                        </div>
+                        <span className={cn(styles.radioCircle, selected && styles.radioCircleSelected)}>
+                            {selected && <span className={styles.radioDot} />}
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ── Avatar ── */
+interface AvatarProps {
+    items: AvatarItem[];
+    defaultValue?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+
+function AvatarVariant({ items, defaultValue, className, ...props }: AvatarProps) {
+    const { value, onChange } = useRadioGroup(defaultValue);
+
+    return (
+        <div role="radiogroup" aria-label={props["aria-label"]} className={cn(styles.list, className)}>
+            {items.map((item) => {
+                const selected = value === item.id;
+                return (
+                    <button
+                        key={item.id}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => onChange(item.id)}
+                        className={cn(styles.avatarItem, selected && styles.avatarItemSelected)}
+                    >
+                        <div className={styles.avatarLeft}>
+                            <img src={item.avatarUrl} alt={item.name} className={styles.avatarImg} />
+                            <div className={styles.avatarText}>
+                                <div className={styles.avatarNameRow}>
+                                    <span className={styles.itemTitle}>{item.name}</span>
+                                    <span className={styles.avatarUsername}>{item.username}</span>
+                                </div>
+                                <span className={styles.itemSecondary}>{item.title}</span>
+                            </div>
+                        </div>
+                        <span className={cn(styles.radioCircle, selected && styles.radioCircleSelected)}>
+                            {selected && <span className={styles.radioDot} />}
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ── IconCard ── */
+interface IconCardProps {
+    items: PlanItem[];
+    defaultValue?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+
+function IconCard({ items, defaultValue, className, ...props }: IconCardProps) {
+    const { value, onChange } = useRadioGroup(defaultValue);
+
+    return (
+        <div role="radiogroup" aria-label={props["aria-label"]} className={cn(styles.cardGrid, className)}>
+            {items.map((item) => {
+                const selected = value === item.value;
+                const Icon = item.icon;
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => onChange(item.value)}
+                        className={cn(styles.iconCardItem, selected && styles.iconCardItemSelected)}
+                    >
+                        <div className={styles.iconCardHeader}>
+                            {Icon && (
+                                <span className={styles.iconCardIconWrap}>
+                                    <Icon className={styles.icon} />
+                                </span>
+                            )}
+                            <span className={cn(styles.radioCircle, selected && styles.radioCircleSelected)}>
+                                {selected && <span className={styles.radioDot} />}
+                            </span>
+                        </div>
+                        <div className={styles.iconCardBody}>
+                            <span className={styles.itemTitle}>{item.title}</span>
+                            {item.price && (
+                                <div className={styles.iconCardPrice}>
+                                    <span className={styles.priceValue}>{item.price}</span>
+                                    {item.secondaryTitle && <span className={styles.itemSecondary}>{item.secondaryTitle}</span>}
+                                </div>
+                            )}
+                            {item.description && <p className={styles.itemDesc}>{item.description}</p>}
+                        </div>
+                        {item.badge && (
+                            <div className={styles.iconCardBadge}>
+                                <span className={styles.badge}>{typeof item.badge === "string" ? item.badge : item.badge}</span>
+                            </div>
+                        )}
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ── Compound export ── */
+export const RadioGroups = {
+    IconSimple,
+    Checkbox: CheckboxVariant,
+    PaymentIcon,
+    Avatar: AvatarVariant,
+    IconCard,
+};

package/components/ui/RadioGroup/index.ts

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