@mihcm/ui 0.14.1

package/src/RadioCardGroup.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+/**
+ * RadioCardGroup (web variant).
+ *
+ * Card-style single selection built on top of RadioGroup semantics.
+ *
+ * Wiki: docs/components/RadioCardGroup.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+import { RadioGroup } from './RadioGroup.js';
+
+export interface RadioCardOption {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface RadioCardGroupProps
+  extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'children'> {
+  options: RadioCardOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  columns?: 1 | 2 | 3 | 4;
+  tone?: 'primary' | 'accent';
+  disabled?: boolean;
+}
+
+const COLUMN_CLASS: Record<NonNullable<RadioCardGroupProps['columns']>, string> = {
+  1: 'grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-2 lg:grid-cols-3',
+  4: 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export const RadioCardGroup = forwardRef<HTMLFieldSetElement, RadioCardGroupProps>(
+  function RadioCardGroup(
+    {
+      options,
+      value,
+      onValueChange,
+      orientation = 'vertical',
+      columns = 2,
+      tone = 'primary',
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <RadioGroup
+        ref={ref}
+        value={value}
+        onValueChange={onValueChange}
+        orientation={orientation}
+        tone={tone}
+        disabled={Boolean(disabled)}
+        className={cn('grid gap-3', orientation === 'horizontal' ? COLUMN_CLASS[columns] : 'grid-cols-1', className)}
+        {...props}
+      >
+        {options.map((option) => {
+          const checked = option.value === value;
+          const inactive = disabled || option.disabled;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="radio"
+              aria-checked={checked}
+              disabled={inactive}
+              onClick={() => onValueChange(option.value)}
+              className={cn(
+                'flex min-h-24 w-full items-start gap-3 rounded-xl border border-border bg-card p-4 text-left shadow-mi-card transition-[border-color,box-shadow,background-color] duration-200',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                checked && (tone === 'accent' ? 'border-accent bg-accent/5' : 'border-primary bg-primary/5'),
+                inactive && 'cursor-not-allowed opacity-60',
+              )}
+            >
+              {option.icon ? <span className="shrink-0 text-muted-foreground">{option.icon}</span> : null}
+              <span className="min-w-0 space-y-1">
+                <span className="block font-semibold text-foreground">{option.title}</span>
+                {option.description ? (
+                  <span className="block text-sm text-muted-foreground">{option.description}</span>
+                ) : null}
+              </span>
+            </button>
+          );
+        })}
+      </RadioGroup>
+    );
+  },
+);

package/src/RadioGroup.native.tsx

@@ -0,0 +1,153 @@
+/**
+ * RadioGroup (React Native variant).
+ *
+ * Pressable items with circular indicators. `accessibilityRole="radiogroup"`
+ * on the container, `accessibilityRole="radio"` + `accessibilityState`
+ * on each item.
+ *
+ * Wiki: docs/components/RadioGroup.md
+ */
+import { forwardRef, createContext, useContext, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                           */
+/* ------------------------------------------------------------------ */
+
+interface RadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) throw new Error('RadioGroupItem must be used within a RadioGroup');
+  return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/*  RadioGroup                                                        */
+/* ------------------------------------------------------------------ */
+
+export interface RadioGroupProps extends Omit<ViewProps, 'children'> {
+  value: string;
+  onValueChange: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children: ReactNode;
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupProps>(
+  function RadioGroup(
+    {
+      value,
+      onValueChange,
+      orientation = 'vertical',
+      disabled = false,
+      size = 'md',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <RadioGroupContext.Provider
+        value={{ value, onValueChange, disabled, size }}
+      >
+        <View
+          ref={ref}
+          accessibilityRole="radiogroup"
+          className={cn(
+            'flex',
+            orientation === 'horizontal'
+              ? 'flex-row gap-4'
+              : 'flex-col gap-2',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </View>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  RadioGroupItem                                                    */
+/* ------------------------------------------------------------------ */
+
+export const radioGroupItemVariants = cva(
+  'items-center justify-center rounded-full border border-input bg-background',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-6 w-6',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+const INDICATOR = {
+  sm: 'h-2 w-2 rounded-full bg-primary',
+  md: 'h-2.5 w-2.5 rounded-full bg-primary',
+  lg: 'h-3 w-3 rounded-full bg-primary',
+} as const;
+
+export interface RadioGroupItemProps
+  extends VariantProps<typeof radioGroupItemVariants> {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
+  function RadioGroupItem(
+    { value, disabled: itemDisabled, className, children },
+    ref,
+  ) {
+    const group = useRadioGroup();
+    const sz = group.size;
+    const isChecked = group.value === value;
+    const isDisabled = group.disabled || !!itemDisabled;
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={() => {
+          if (!isChecked) group.onValueChange(value);
+        }}
+        className={cn('flex-row items-center gap-2', isDisabled && 'opacity-50')}
+      >
+        <View
+          className={cn(
+            radioGroupItemVariants({ size: sz }),
+            isChecked && 'border-primary',
+            className,
+          )}
+        >
+          {isChecked ? <View className={INDICATOR[sz]} /> : null}
+        </View>
+        {children ? (
+          <Text className="text-foreground text-sm">{children}</Text>
+        ) : null}
+      </Pressable>
+    );
+  },
+);

package/src/RadioGroup.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+/**
+ * RadioGroup (web variant — React DOM).
+ *
+ * A `<fieldset>` containing `<button role="radio">` items with
+ * `aria-checked`. Controlled via `value` / `onValueChange`. Items
+ * share group state through React Context.
+ *
+ * Wiki: docs/components/RadioGroup.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                           */
+/* ------------------------------------------------------------------ */
+
+export type RadioGroupTone = 'primary' | 'accent';
+
+const TONE_BORDER: Record<RadioGroupTone, string> = {
+  primary: 'border-primary',
+  accent: 'border-accent',
+};
+
+const TONE_FILL: Record<RadioGroupTone, string> = {
+  primary: 'text-primary',
+  accent: 'text-accent',
+};
+
+interface RadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+  tone: RadioGroupTone;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext);
+  if (!ctx) throw new Error('RadioGroupItem must be used within a RadioGroup');
+  return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/*  RadioGroup                                                        */
+/* ------------------------------------------------------------------ */
+
+export interface RadioGroupProps
+  extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+  value: string;
+  onValueChange: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  /** Colour tone for the selected indicator. Defaults to `primary`. */
+  tone?: RadioGroupTone;
+  className?: string;
+  children: ReactNode;
+}
+
+export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+  function RadioGroup(
+    {
+      value,
+      onValueChange,
+      orientation = 'vertical',
+      disabled = false,
+      size = 'md',
+      tone = 'primary',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <RadioGroupContext.Provider
+        value={{ value, onValueChange, disabled, size, tone }}
+      >
+        <fieldset
+          ref={ref}
+          role="radiogroup"
+          aria-orientation={orientation}
+          disabled={disabled}
+          className={cn(
+            'flex',
+            orientation === 'horizontal'
+              ? 'flex-row gap-4'
+              : 'flex-col gap-2',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </fieldset>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  RadioGroupItem                                                    */
+/* ------------------------------------------------------------------ */
+
+export const radioGroupItemVariants = cva(
+  'peer inline-flex shrink-0 items-center justify-center rounded-full ' +
+    'border-2 border-brand-neutral-179 bg-background ' +
+    'transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-3.5 w-3.5',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+const INDICATOR_SIZE = {
+  sm: 'h-1.5 w-1.5',
+  md: 'h-2 w-2',
+  lg: 'h-2.5 w-2.5',
+} as const;
+
+export interface RadioGroupItemProps
+  extends Omit<
+      HTMLAttributes<HTMLButtonElement>,
+      'onChange' | 'type' | 'role'
+    >,
+    VariantProps<typeof radioGroupItemVariants> {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  function RadioGroupItem(
+    { value, disabled: itemDisabled, className, children, ...props },
+    ref,
+  ) {
+    const group = useRadioGroup();
+    const sz = group.size;
+    const tone = group.tone;
+    const isChecked = group.value === value;
+    const isDisabled = group.disabled || !!itemDisabled;
+
+    return (
+      <label
+        className={cn(
+          'flex items-center gap-2',
+          isDisabled && 'cursor-not-allowed opacity-50',
+        )}
+      >
+        <button
+          ref={ref}
+          type="button"
+          role="radio"
+          aria-checked={isChecked}
+          disabled={isDisabled}
+          onClick={() => {
+            if (!isChecked) group.onValueChange(value);
+          }}
+          className={cn(
+            radioGroupItemVariants({ size: sz }),
+            isChecked && TONE_BORDER[tone],
+            className,
+          )}
+          {...props}
+        >
+          {isChecked ? (
+            <svg
+              aria-hidden
+              viewBox="0 0 16 16"
+              className={INDICATOR_SIZE[sz]}
+            >
+              <circle cx="8" cy="8" r="8" fill="currentColor" className={TONE_FILL[tone]} />
+            </svg>
+          ) : null}
+        </button>
+        {children ? (
+          <span className="text-sm text-foreground">{children}</span>
+        ) : null}
+      </label>
+    );
+  },
+);

package/src/Resizable.native.tsx

@@ -0,0 +1,76 @@
+/**
+ * Resizable (React Native variant).
+ *
+ * Simple vertical/horizontal split layout. On native, panels are
+ * statically sized — drag-to-resize is not supported (use a dedicated
+ * gesture library if needed).
+ *
+ * Wiki: docs/components/Resizable.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── PanelGroup ───────────────────────────────────────────────────── */
+
+export interface ResizablePanelGroupProps extends ClassedViewProps {
+  direction: 'horizontal' | 'vertical';
+  children: ReactNode;
+}
+
+export const ResizablePanelGroup = forwardRef<View, ResizablePanelGroupProps>(
+  function ResizablePanelGroup({ direction, className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          direction === 'horizontal' ? 'flex-row' : 'flex-col',
+          'flex-1',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Panel ─────────────────────────────────────────────────────────── */
+
+export interface ResizablePanelProps extends ClassedViewProps {
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  children: ReactNode;
+}
+
+export const ResizablePanel = forwardRef<View, ResizablePanelProps>(
+  function ResizablePanel({ className, defaultSize, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Handle ────────────────────────────────────────────────────────── */
+
+export interface ResizableHandleProps extends ClassedViewProps {
+  withHandle?: boolean;
+}
+
+export const ResizableHandle = forwardRef<View, ResizableHandleProps>(
+  function ResizableHandle({ withHandle, className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('bg-border', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Resizable.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+/**
+ * Resizable (web variant — React DOM).
+ *
+ * Resizable panel layout powered by `react-resizable-panels`.
+ *
+ *   <ResizablePanelGroup direction="horizontal">
+ *     <ResizablePanel defaultSize={50}>
+ *       <div className="p-4">Left</div>
+ *     </ResizablePanel>
+ *     <ResizableHandle />
+ *     <ResizablePanel defaultSize={50}>
+ *       <div className="p-4">Right</div>
+ *     </ResizablePanel>
+ *   </ResizablePanelGroup>
+ *
+ * Wiki: docs/components/Resizable.md
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import {
+  Group as PanelGroup,
+  Panel,
+  Separator as PanelResizeHandle,
+} from 'react-resizable-panels';
+import { cn } from './internal/cn.js';
+
+/* ── PanelGroup ───────────────────────────────────────────────────── */
+
+export interface ResizablePanelGroupProps extends HTMLAttributes<HTMLDivElement> {
+  direction: 'horizontal' | 'vertical';
+  children: ReactNode;
+  autoSaveId?: string;
+}
+
+export function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps) {
+  return (
+    <PanelGroup
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* ── Panel ─────────────────────────────────────────────────────────── */
+
+export const ResizablePanel = Panel;
+
+/* ── Handle ────────────────────────────────────────────────────────── */
+
+export interface ResizableHandleProps extends HTMLAttributes<HTMLDivElement> {
+  withHandle?: boolean;
+  disabled?: boolean;
+}
+
+export function ResizableHandle({ withHandle, className, disabled, ...props }: ResizableHandleProps) {
+  return (
+    <PanelResizeHandle
+      disabled={disabled}
+      className={cn(
+        'relative flex w-px items-center justify-center bg-border',
+        'after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+        'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full',
+        'data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1',
+        'data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2',
+        'data-[panel-group-direction=vertical]:after:translate-x-0',
+        className,
+      )}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border">
+          <svg aria-hidden="true" viewBox="0 0 6 10" fill="none" className="h-2.5 w-2.5">
+            <path
+              d="M1 0v10M5 0v10"
+              stroke="currentColor"
+              strokeWidth={1}
+              className="text-muted-foreground"
+            />
+          </svg>
+        </div>
+      )}
+    </PanelResizeHandle>
+  );
+}