@mihcm/ui 0.14.1

package/src/TransferList.native.tsx

@@ -0,0 +1,180 @@
+/**
+ * TransferList (React Native variant).
+ *
+ * Mobile-first redesign of the web dual-pane shuttle. Renders two
+ * vertically stacked sections (Available / Assigned) each with a
+ * filter input and FlatList. Items toggle between sections via tap.
+ * Bulk move buttons sit between the two sections.
+ *
+ * Wiki: docs/components/TransferList.md
+ */
+import { forwardRef, useMemo, useState } from 'react';
+import { FlatList, Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export type TransferListAssignment = Record<string, boolean>;
+
+export interface TransferListProps extends Omit<ViewProps, 'style'> {
+  items: readonly string[];
+  assigned: TransferListAssignment;
+  onAssignedChange: (next: TransferListAssignment) => void;
+  leftLabel?: string;
+  rightLabel?: string;
+  filterPlaceholder?: string;
+  maxHeight?: number;
+  className?: string;
+}
+
+export const TransferList = forwardRef<View, TransferListProps>(
+  function TransferList(
+    {
+      className,
+      items,
+      assigned,
+      onAssignedChange,
+      leftLabel = 'Available',
+      rightLabel = 'Assigned',
+      filterPlaceholder = 'Filter…',
+      maxHeight = 200,
+      ...props
+    },
+    ref,
+  ) {
+    const [leftFilter, setLeftFilter] = useState('');
+    const [rightFilter, setRightFilter] = useState('');
+
+    const { leftItems, rightItems } = useMemo(() => {
+      const left: string[] = [];
+      const right: string[] = [];
+      for (const it of items) {
+        if (assigned[it]) right.push(it);
+        else left.push(it);
+      }
+      return { leftItems: left, rightItems: right };
+    }, [items, assigned]);
+
+    const filterList = (list: readonly string[], q: string) => {
+      if (!q) return list;
+      const needle = q.toLowerCase();
+      return list.filter((i) => i.toLowerCase().includes(needle));
+    };
+
+    const filteredLeft = filterList(leftItems, leftFilter);
+    const filteredRight = filterList(rightItems, rightFilter);
+
+    const toggleItem = (item: string) => {
+      const next = { ...assigned };
+      if (next[item]) delete next[item];
+      else next[item] = true;
+      onAssignedChange(next);
+    };
+
+    const moveAllRight = () => {
+      const next: TransferListAssignment = { ...assigned };
+      for (const it of items) next[it] = true;
+      onAssignedChange(next);
+    };
+
+    const moveAllLeft = () => onAssignedChange({});
+
+    const renderPane = (
+      label: string,
+      total: number,
+      filtered: readonly string[],
+      filterValue: string,
+      onFilterChange: (v: string) => void,
+      isAssigned: boolean,
+    ) => (
+      <View className="rounded-lg border border-border bg-card overflow-hidden">
+        <View className="border-b border-border bg-muted/40 px-3 py-2">
+          <Text className="text-sm font-semibold text-foreground">{label}</Text>
+          <Text className="text-xs text-muted-foreground">
+            {total} {total === 1 ? 'item' : 'items'}
+          </Text>
+        </View>
+        <View className="border-b border-border px-3 py-2">
+          <TextInput
+            value={filterValue}
+            onChangeText={onFilterChange}
+            placeholder={filterPlaceholder}
+            accessibilityLabel={`Filter ${label}`}
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+            placeholderTextColor="#9ca3af"
+          />
+        </View>
+        <FlatList
+          data={filtered as string[]}
+          keyExtractor={(item) => item}
+          style={{ maxHeight }}
+          ListEmptyComponent={
+            <View className="items-center py-4">
+              <Text className="text-xs text-muted-foreground">
+                {total === 0 ? (isAssigned ? 'None assigned' : 'No items') : 'No matches'}
+              </Text>
+            </View>
+          }
+          renderItem={({ item }) => (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={isAssigned ? `Remove ${item}` : `Assign ${item}`}
+              onPress={() => toggleItem(item)}
+              className="flex-row items-center gap-3 border-b border-border/50 px-3 py-3"
+            >
+              <View
+                className={cn(
+                  'h-5 w-5 items-center justify-center rounded-full',
+                  isAssigned
+                    ? 'bg-primary'
+                    : 'border-2 border-muted-foreground bg-background',
+                )}
+              >
+                {isAssigned && (
+                  <Text className="text-xs text-primary-foreground">{'✓'}</Text>
+                )}
+              </View>
+              <Text className="text-sm text-foreground flex-1" numberOfLines={1}>
+                {item}
+              </Text>
+            </Pressable>
+          )}
+        />
+      </View>
+    );
+
+    return (
+      <View ref={ref} className={cn('gap-3', className)} {...props}>
+        {renderPane(leftLabel, leftItems.length, filteredLeft, leftFilter, setLeftFilter, false)}
+
+        {/* Bulk move buttons */}
+        <View className="flex-row items-center justify-center gap-3">
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Move all to assigned"
+            disabled={leftItems.length === 0}
+            onPress={moveAllRight}
+            className={cn(
+              'rounded border border-border bg-card px-4 py-2',
+              leftItems.length === 0 && 'opacity-40',
+            )}
+          >
+            <Text className="text-xs font-medium text-foreground">Assign All ↓</Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Remove all from assigned"
+            disabled={rightItems.length === 0}
+            onPress={moveAllLeft}
+            className={cn(
+              'rounded border border-border bg-card px-4 py-2',
+              rightItems.length === 0 && 'opacity-40',
+            )}
+          >
+            <Text className="text-xs font-medium text-foreground">Remove All ↑</Text>
+          </Pressable>
+        </View>
+
+        {renderPane(rightLabel, rightItems.length, filteredRight, rightFilter, setRightFilter, true)}
+      </View>
+    );
+  },
+);

package/src/TransferList.tsx

@@ -0,0 +1,297 @@
+'use client';
+
+/**
+ * TransferList (web variant — React DOM).
+ *
+ * Dual-pane shuttle extracted from the MiHCM Security prototype's
+ * `renderTransferList()` helper. Left pane = unassigned, right pane =
+ * assigned. Each side has its own filter input and multi-select.
+ * Center column has four buttons: move-selected-right, move-all-right,
+ * move-selected-left, move-all-left.
+ *
+ * Controlled — `items` is the universe, `assigned` is the right-side
+ * state (a `Record<string, boolean>`), `onAssignedChange` fires with
+ * the next state. Per-side selection is tracked internally; consumers
+ * don't need to wire that.
+ *
+ * Web only — the layout is desktop-density. Native equivalents
+ * typically use a single scrollable list with toggle pills.
+ *
+ * Wiki: docs/components/TransferList.md
+ */
+import { forwardRef, useMemo, useState, type HTMLAttributes, type ReactNode } from 'react';
+import { SearchField } from './SearchField.js';
+import { cn } from './internal/cn.js';
+
+export type TransferListAssignment = Record<string, boolean>;
+export type TransferListSide = 'left' | 'right';
+
+export interface TransferListProps extends HTMLAttributes<HTMLDivElement> {
+  /** Universe of items. */
+  items: readonly string[];
+  /** Items in the right (assigned) pane. */
+  assigned: TransferListAssignment;
+  /** Fired with the next assignment. */
+  onAssignedChange: (next: TransferListAssignment) => void;
+  /** Label for the left pane. Defaults to "Available". */
+  leftLabel?: string;
+  /** Label for the right pane. Defaults to "Assigned". */
+  rightLabel?: string;
+  /** Filter input placeholder. Defaults to "Filter…". */
+  filterPlaceholder?: string;
+  /** Maximum scrollable height per pane in px. Defaults to `220`. */
+  maxHeight?: number;
+  /** Responsive layout mode. */
+  layout?: 'responsive' | 'horizontal' | 'vertical';
+  /** Position of move controls. */
+  actionsPlacement?: 'between' | 'top' | 'bottom';
+  /** Custom item renderer. */
+  renderItem?: ((item: string, meta: { side: TransferListSide; selected: boolean }) => ReactNode) | undefined;
+  /** Disable move-all controls. */
+  allowMoveAll?: boolean;
+}
+
+const CheckIcon = () => (
+  <svg
+    aria-hidden
+    className="h-2 w-2"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={3}
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);
+
+export const TransferList = forwardRef<HTMLDivElement, TransferListProps>(
+  function TransferList(
+    {
+      className,
+      items,
+      assigned,
+      onAssignedChange,
+      leftLabel = 'Available',
+      rightLabel = 'Assigned',
+      filterPlaceholder = 'Filter…',
+      maxHeight = 220,
+      layout = 'responsive',
+      actionsPlacement = 'between',
+      renderItem,
+      allowMoveAll = true,
+      ...props
+    },
+    ref,
+  ) {
+    const [leftFilter, setLeftFilter] = useState('');
+    const [rightFilter, setRightFilter] = useState('');
+    const [leftSel, setLeftSel] = useState<Record<string, boolean>>({});
+    const [rightSel, setRightSel] = useState<Record<string, boolean>>({});
+
+    const { leftItems, rightItems } = useMemo(() => {
+      const left: string[] = [];
+      const right: string[] = [];
+      for (const it of items) {
+        if (assigned[it]) right.push(it);
+        else left.push(it);
+      }
+      return { leftItems: left, rightItems: right };
+    }, [items, assigned]);
+
+    const filterList = (list: readonly string[], q: string) => {
+      if (!q) return list;
+      const needle = q.toLowerCase();
+      return list.filter((i) => i.toLowerCase().includes(needle));
+    };
+
+    const filteredLeft = filterList(leftItems, leftFilter);
+    const filteredRight = filterList(rightItems, rightFilter);
+
+    const leftChecked = leftItems.filter((i) => leftSel[i]).length;
+    const rightChecked = rightItems.filter((i) => rightSel[i]).length;
+
+    const toggleSel = (side: TransferListSide, item: string) => {
+      const setSel = side === 'left' ? setLeftSel : setRightSel;
+      setSel((prev) => {
+        const next = { ...prev };
+        if (next[item]) delete next[item];
+        else next[item] = true;
+        return next;
+      });
+    };
+
+    const move = (direction: 'right' | 'allRight' | 'left' | 'allLeft') => {
+      const next: TransferListAssignment = { ...assigned };
+      if (direction === 'right') {
+        for (const item of leftItems) {
+          if (leftSel[item]) next[item] = true;
+        }
+        setLeftSel({});
+      } else if (direction === 'allRight') {
+        for (const item of items) next[item] = true;
+        setLeftSel({});
+      } else if (direction === 'left') {
+        for (const item of rightItems) {
+          if (rightSel[item]) delete next[item];
+        }
+        setRightSel({});
+      } else {
+        for (const item of items) delete next[item];
+        setRightSel({});
+      }
+      onAssignedChange(next);
+    };
+
+    const renderPane = (
+      side: TransferListSide,
+      label: string,
+      total: number,
+      filtered: readonly string[],
+      filterValue: string,
+      onFilterChange: (v: string) => void,
+      sel: Record<string, boolean>,
+    ) => (
+      <div className="flex-1 overflow-hidden rounded-lg border border-secondary bg-card">
+        <div className="border-b border-secondary bg-muted/40 px-3 py-2">
+          <div className="text-xs font-semibold text-foreground">{label}</div>
+          <div className="text-label text-muted-foreground">
+            {side === 'left'
+              ? `Showing ${filtered.length} of ${total}`
+              : `${total} ${total === 1 ? 'item' : 'items'}`}
+          </div>
+        </div>
+        <div className="border-b border-secondary px-2 py-1.5">
+          <SearchField
+            value={filterValue}
+            onValueChange={onFilterChange}
+            size="sm"
+            placeholder={filterPlaceholder}
+            aria-label={`Filter ${label}`}
+          />
+        </div>
+        <ul
+          role="listbox"
+          aria-label={label}
+          aria-multiselectable
+          className="list-none p-0 m-0 overflow-y-auto"
+          style={{ maxHeight, listStyleType: 'none', paddingInlineStart: 0 }}
+        >
+          {filtered.length === 0 ? (
+            <li className="px-3 py-4 text-center text-label text-muted-foreground">
+              {total === 0 ? (side === 'right' ? 'None assigned' : 'No items') : 'No matches'}
+            </li>
+          ) : (
+            filtered.map((item) => {
+              const checked = !!sel[item];
+              return (
+                <li key={item}>
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={checked}
+                    onClick={() => toggleSel(side, item)}
+                    className="flex w-full items-center gap-2 border-b border-secondary/50 px-3 py-1.5 text-left text-xs text-foreground hover:bg-muted/40"
+                  >
+                    <span
+                      aria-hidden
+                      className={cn(
+                        'grid h-3.5 w-3.5 shrink-0 place-items-center rounded-sm',
+                        checked
+                          ? 'border-[1.5px] border-primary bg-primary text-primary-foreground'
+                          : 'border-[1.5px] border-brand-neutral-179 bg-background',
+                      )}
+                    >
+                      {checked ? <CheckIcon /> : null}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate">
+                      {renderItem ? renderItem(item, { side, selected: checked }) : item}
+                    </span>
+                  </button>
+                </li>
+              );
+            })
+          )}
+        </ul>
+      </div>
+    );
+
+    const moveBtn = (
+      label: string,
+      glyph: string,
+      enabled: boolean,
+      onClick: () => void,
+    ) => (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={!enabled}
+        aria-label={label}
+        title={label}
+        className={cn(
+          'grid h-7 w-8 place-items-center rounded border border-secondary bg-card text-sm transition-colors duration-150',
+          enabled ? 'text-primary hover:bg-primary-50 dark:hover:bg-primary/10' : 'text-muted-foreground/60 cursor-not-allowed',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        )}
+      >
+        {glyph}
+      </button>
+    );
+
+    const moveControlsOrientation =
+      layout === 'horizontal' ? 'flex-col' : layout === 'vertical' ? 'flex-row' : 'flex-row md:flex-col';
+
+    const glyphs = layout === 'vertical'
+      ? { right: '↓', allRight: '↓↓', left: '↑', allLeft: '↑↑' }
+      : { right: '›', allRight: '»', left: '‹', allLeft: '«' };
+
+    const moveControls = (
+      <div
+        className={cn(
+          'flex items-center justify-center gap-1.5 px-1',
+          moveControlsOrientation,
+        )}
+      >
+        {moveBtn('Move selected right', glyphs.right, leftChecked > 0, () => move('right'))}
+        {allowMoveAll ? moveBtn('Move all right', glyphs.allRight, leftItems.length > 0, () => move('allRight')) : null}
+        {moveBtn('Move selected left', glyphs.left, rightChecked > 0, () => move('left'))}
+        {allowMoveAll ? moveBtn('Move all left', glyphs.allLeft, rightItems.length > 0, () => move('allLeft')) : null}
+      </div>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex gap-2',
+          layout === 'responsive' && 'flex-col md:flex-row md:items-stretch',
+          layout === 'horizontal' && 'flex-row items-stretch',
+          layout === 'vertical' && 'flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {actionsPlacement === 'top' ? moveControls : null}
+        {renderPane(
+          'left',
+          leftLabel,
+          leftItems.length,
+          filteredLeft,
+          leftFilter,
+          setLeftFilter,
+          leftSel,
+        )}
+        {actionsPlacement === 'between' ? moveControls : null}
+        {renderPane(
+          'right',
+          rightLabel,
+          rightItems.length,
+          filteredRight,
+          rightFilter,
+          setRightFilter,
+          rightSel,
+        )}
+        {actionsPlacement === 'bottom' ? moveControls : null}
+      </div>
+    );
+  },
+);

package/src/globals.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />