@mihcm/ui 0.14.1

package/src/CheckboxGrid.native.tsx

@@ -0,0 +1,160 @@
+/**
+ * CheckboxGrid (React Native variant).
+ *
+ * Mobile-first redesign of the web grid. Renders a single-column
+ * FlatList with touch-friendly checkbox rows instead of the
+ * multi-column grid. Retains filter, select-all, clear, and
+ * selected-count summary. View tabs are omitted for simplicity.
+ *
+ * Wiki: docs/components/CheckboxGrid.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 CheckboxGridSelection = Record<string, boolean>;
+export type CheckboxGridView = 'all' | 'selected' | 'unselected';
+
+export interface CheckboxGridProps extends Omit<ViewProps, 'style'> {
+  items: readonly string[];
+  selected: CheckboxGridSelection;
+  onSelectedChange: (next: CheckboxGridSelection) => void;
+  columns?: 1 | 2 | 3;
+  searchPlaceholder?: string;
+  maxHeight?: number;
+  className?: string;
+}
+
+export const CheckboxGrid = forwardRef<View, CheckboxGridProps>(
+  function CheckboxGrid(
+    {
+      className,
+      items,
+      selected,
+      onSelectedChange,
+      columns: _columns,
+      searchPlaceholder = 'Filter items…',
+      maxHeight = 300,
+      ...props
+    },
+    ref,
+  ) {
+    const [search, setSearch] = useState('');
+
+    const onCount = useMemo(
+      () => items.reduce((acc, i) => (selected[i] ? acc + 1 : acc), 0),
+      [items, selected],
+    );
+    const offCount = items.length - onCount;
+
+    const filtered = useMemo(() => {
+      if (!search) return items;
+      const q = search.toLowerCase();
+      return items.filter((i) => i.toLowerCase().includes(q));
+    }, [items, search]);
+
+    const toggle = (item: string) => {
+      const next = { ...selected };
+      if (next[item]) delete next[item];
+      else next[item] = true;
+      onSelectedChange(next);
+    };
+
+    const selectAll = () => {
+      const next: CheckboxGridSelection = { ...selected };
+      for (const i of items) next[i] = true;
+      onSelectedChange(next);
+    };
+
+    const clearAll = () => onSelectedChange({});
+
+    return (
+      <View
+        ref={ref}
+        className={cn('rounded-lg border border-border bg-card overflow-hidden', className)}
+        {...props}
+      >
+        {/* Summary bar */}
+        <View className="flex-row items-center justify-between border-b border-border bg-muted/40 px-3 py-2">
+          <Text className="text-xs text-foreground">
+            <Text className="font-bold">{onCount}</Text> selected
+            <Text className="text-muted-foreground"> / {offCount} remaining</Text>
+          </Text>
+          <View className="flex-row gap-2">
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Select all"
+              onPress={selectAll}
+              className="rounded border border-border bg-card px-2 py-1"
+            >
+              <Text className="text-xs font-medium text-muted-foreground">Select All</Text>
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Clear selection"
+              onPress={clearAll}
+              className="rounded border border-border bg-card px-2 py-1"
+            >
+              <Text className="text-xs font-medium text-muted-foreground">Clear</Text>
+            </Pressable>
+          </View>
+        </View>
+
+        {/* Filter */}
+        <View className="border-b border-border px-3 py-2">
+          <TextInput
+            value={search}
+            onChangeText={setSearch}
+            placeholder={searchPlaceholder}
+            accessibilityLabel="Filter items"
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+            placeholderTextColor="#9ca3af"
+          />
+        </View>
+
+        {/* Item list */}
+        <FlatList
+          data={filtered as string[]}
+          keyExtractor={(item) => item}
+          style={{ maxHeight }}
+          ListEmptyComponent={
+            <View className="items-center py-6">
+              <Text className="text-xs text-muted-foreground">No items match your filter</Text>
+            </View>
+          }
+          renderItem={({ item }) => {
+            const on = !!selected[item];
+            return (
+              <Pressable
+                accessibilityRole="checkbox"
+                accessibilityState={{ checked: on }}
+                onPress={() => toggle(item)}
+                className={cn(
+                  'flex-row items-center gap-3 px-3 py-3 border-b border-border/50',
+                  on ? 'bg-primary/5' : 'bg-card',
+                )}
+              >
+                <View
+                  className={cn(
+                    'h-5 w-5 items-center justify-center rounded',
+                    on
+                      ? 'border-2 border-primary bg-primary'
+                      : 'border-2 border-muted-foreground bg-background',
+                  )}
+                >
+                  {on && <Text className="text-xs text-primary-foreground">{'✓'}</Text>}
+                </View>
+                <Text
+                  className={cn('text-sm flex-1', on ? 'text-foreground' : 'text-muted-foreground')}
+                  numberOfLines={1}
+                >
+                  {item}
+                </Text>
+              </Pressable>
+            );
+          }}
+        />
+      </View>
+    );
+  },
+);

package/src/CheckboxGrid.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+/**
+ * CheckboxGrid (web variant — React DOM).
+ *
+ * Multi-select grid extracted from the MiHCM Security prototype's
+ * `checkboxGrid()` helper. Composite of:
+ *   ─ summary row (selected count + view tabs: All / Selected /
+ *     Unselected + Select All / Clear buttons)
+ *   ─ filter search input
+ *   ─ scrollable responsive grid of checkbox rows (1/2/3 cols by
+ *     breakpoint).
+ *
+ * Controlled — `items` is the full list, `selected` is the current
+ * `Record<string, boolean>` state (only `true` entries count as
+ * selected), and `onSelectedChange` is fired with the next state.
+ *
+ * Web only — the data density and click-target metrics target
+ * desktop. For a native equivalent build a list-based picker.
+ *
+ * Wiki: docs/components/CheckboxGrid.md
+ */
+import { forwardRef, useMemo, useState, type HTMLAttributes, type ReactNode } from 'react';
+import { SearchField } from './SearchField.js';
+import { cn } from './internal/cn.js';
+
+export type CheckboxGridSelection = Record<string, boolean>;
+export type CheckboxGridView = 'all' | 'selected' | 'unselected';
+
+export interface CheckboxGridProps extends HTMLAttributes<HTMLDivElement> {
+  /** All available items. */
+  items: readonly string[];
+  /** Current selection. Items not present default to `false`. */
+  selected: CheckboxGridSelection;
+  /** Fired with the next selection. */
+  onSelectedChange: (next: CheckboxGridSelection) => void;
+  /** Column count at the widest breakpoint. 1, 2, or 3. Defaults to `3`. */
+  columns?: 1 | 2 | 3;
+  /** Grid behavior. `auto` fills available width with responsive item cards. */
+  layout?: 'fixed' | 'auto' | 'list';
+  /** Density of each option row. */
+  density?: 'compact' | 'comfortable';
+  /** Hide summary tabs and bulk actions for simple forms. */
+  showToolbar?: boolean;
+  /** Placeholder for the filter input. */
+  searchPlaceholder?: string;
+  /** Maximum scrollable height in px. Defaults to `240`. */
+  maxHeight?: number;
+  /** Custom empty state. */
+  emptyState?: ReactNode;
+  /** Per-item class hook. */
+  getItemClassName?: ((item: string, checked: boolean) => string | undefined) | undefined;
+}
+
+const CheckIcon = () => (
+  <svg
+    aria-hidden
+    className="h-2.5 w-2.5"
+    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 CheckboxGrid = forwardRef<HTMLDivElement, CheckboxGridProps>(
+  function CheckboxGrid(
+    {
+      className,
+      items,
+      selected,
+      onSelectedChange,
+      columns = 3,
+      layout = 'fixed',
+      density = 'comfortable',
+      showToolbar = true,
+      searchPlaceholder = 'Filter items…',
+      maxHeight = 240,
+      emptyState,
+      getItemClassName,
+      ...props
+    },
+    ref,
+  ) {
+    const [search, setSearch] = useState('');
+    const [view, setView] = useState<CheckboxGridView>('all');
+
+    const onCount = useMemo(
+      () => items.reduce((acc, i) => (selected[i] ? acc + 1 : acc), 0),
+      [items, selected],
+    );
+    const offCount = items.length - onCount;
+
+    const filtered = useMemo(() => {
+      let list: readonly string[] = items;
+      if (search) {
+        const q = search.toLowerCase();
+        list = list.filter((i) => i.toLowerCase().includes(q));
+      }
+      if (view === 'selected') list = list.filter((i) => selected[i]);
+      else if (view === 'unselected') list = list.filter((i) => !selected[i]);
+      return list;
+    }, [items, selected, search, view]);
+
+    const toggle = (item: string) => {
+      const next = { ...selected };
+      if (next[item]) delete next[item];
+      else next[item] = true;
+      onSelectedChange(next);
+    };
+
+    const selectAll = () => {
+      const next: CheckboxGridSelection = { ...selected };
+      for (const i of items) next[i] = true;
+      onSelectedChange(next);
+    };
+
+    const clearAll = () => onSelectedChange({});
+
+    const gridCols =
+      columns === 1
+        ? 'grid-cols-1'
+        : columns === 2
+          ? 'grid-cols-1 sm:grid-cols-2'
+          : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+
+    const VIEW_TABS: { id: CheckboxGridView; label: string }[] = [
+      { id: 'all', label: `All (${items.length})` },
+      { id: 'selected', label: `Selected (${onCount})` },
+      { id: 'unselected', label: `Unselected (${offCount})` },
+    ];
+
+    return (
+      <div
+        ref={ref}
+        className={cn('overflow-hidden rounded-card border border-secondary bg-card', className)}
+        {...props}
+      >
+        {/* Summary bar */}
+        {showToolbar ? (
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-secondary bg-muted/40 px-3 py-2">
+          <div className="text-xs text-foreground">
+            <b>{onCount}</b> selected
+            <span className="mx-1 text-muted-foreground">·</span>
+            <span className="text-muted-foreground">{offCount} remaining</span>
+          </div>
+          <div className="flex overflow-hidden rounded-md border border-secondary" role="tablist" aria-label="View">
+            {VIEW_TABS.map((tab) => {
+              const active = tab.id === view;
+              return (
+                <button
+                  key={tab.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={active}
+                  onClick={() => setView(tab.id)}
+                  className={cn(
+                    'px-2.5 py-1 text-label transition-colors duration-150',
+                    active ? 'bg-card font-semibold text-foreground' : 'text-muted-foreground hover:text-foreground',
+                  )}
+                >
+                  {tab.label}
+                </button>
+              );
+            })}
+          </div>
+          <div className="flex gap-1">
+            <button
+              type="button"
+              onClick={selectAll}
+              className="rounded border border-secondary bg-card px-2 py-0.5 text-caption font-medium text-muted-foreground hover:border-brand-neutral-179 hover:text-foreground"
+            >
+              Select All
+            </button>
+            <button
+              type="button"
+              onClick={clearAll}
+              className="rounded border border-secondary bg-card px-2 py-0.5 text-caption font-medium text-muted-foreground hover:border-brand-neutral-179 hover:text-foreground"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+        ) : null}
+
+        {/* Search */}
+        <div className="border-b border-secondary px-3 py-2">
+          <SearchField
+            value={search}
+            onValueChange={setSearch}
+            size="sm"
+            placeholder={searchPlaceholder}
+            aria-label="Filter items"
+          />
+        </div>
+
+        {/* Item grid */}
+        <div className="overflow-y-auto p-1" style={{ maxHeight }}>
+          {filtered.length === 0 ? (
+            <div className="px-4 py-6 text-center text-xs text-muted-foreground">
+              {emptyState ?? 'No items match your filter'}
+            </div>
+          ) : (
+            <div
+              className={cn(
+                'grid gap-1',
+                layout === 'fixed' && gridCols,
+                layout === 'list' && 'grid-cols-1',
+              )}
+              style={
+                layout === 'auto'
+                  ? { gridTemplateColumns: 'repeat(auto-fit, minmax(min(14rem, 100%), 1fr))' }
+                  : undefined
+              }
+            >
+              {filtered.map((item) => {
+                const on = !!selected[item];
+                return (
+                  <button
+                    key={item}
+                    type="button"
+                    role="checkbox"
+                    aria-checked={on}
+                    onClick={() => toggle(item)}
+                    className={cn(
+                      'flex items-center gap-2 rounded-md bg-card px-2.5 py-2 text-left',
+                      density === 'compact' ? 'min-h-8 py-1.5' : 'min-h-10 py-2',
+                      'border transition-colors duration-150',
+                      on ? 'border-brand-neutral-179' : 'border-secondary hover:border-brand-neutral-179',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                      getItemClassName?.(item, on),
+                    )}
+                  >
+                    <span
+                      aria-hidden
+                      className={cn(
+                        'grid h-4 w-4 shrink-0 place-items-center rounded',
+                        on ? 'border-2 border-primary bg-primary text-primary-foreground' : 'border-2 border-brand-neutral-179 bg-background',
+                      )}
+                    >
+                      {on ? <CheckIcon /> : null}
+                    </span>
+                    <span
+                      className={cn(
+                        'truncate text-xs',
+                        on ? 'text-foreground' : 'text-muted-foreground',
+                      )}
+                    >
+                      {item}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/Collapsible.native.tsx

@@ -0,0 +1,240 @@
+/**
+ * Collapsible (React Native variant).
+ *
+ * Simple expand/collapse using Animated height. For API parity
+ * with the web Collapsible.
+ *
+ * Wiki: docs/components/Collapsible.md
+ */
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export interface CollapsibleProps extends ViewProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  triggerVariant?: CollapsibleTriggerProps['variant'];
+  triggerSize?: CollapsibleTriggerProps['size'];
+  triggerJustify?: CollapsibleTriggerProps['justify'];
+  triggerFullWidth?: boolean;
+  triggerRotateIcon?: boolean;
+  contentDuration?: CollapsibleContentProps['duration'];
+  contentAnimation?: CollapsibleContentProps['animation'];
+  contentVariant?: CollapsibleContentProps['variant'];
+  contentPadding?: CollapsibleContentProps['padding'];
+  className?: string;
+  children: ReactNode;
+}
+
+export function Collapsible({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  disabled = false,
+  triggerVariant,
+  triggerSize,
+  triggerJustify,
+  triggerFullWidth,
+  triggerRotateIcon,
+  contentDuration,
+  contentAnimation,
+  contentVariant,
+  contentPadding,
+  children,
+  ...props
+}: CollapsibleProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen ?? internalOpen;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <CollapsibleContext.Provider
+      value={{
+        open: isOpen,
+        toggle,
+        disabled,
+        triggerVariant,
+        triggerSize,
+        triggerJustify,
+        triggerFullWidth,
+        triggerRotateIcon,
+        contentDuration,
+        contentAnimation,
+        contentVariant,
+        contentPadding,
+      }}
+    >
+      <View {...props}>{children}</View>
+    </CollapsibleContext.Provider>
+  );
+}
+
+/* ── Context ────────────────────────────────────────────────────────── */
+
+import { createContext, useContext } from 'react';
+
+interface CollapsibleContextValue {
+  open: boolean;
+  toggle: () => void;
+  disabled: boolean;
+  triggerVariant?: CollapsibleTriggerProps['variant'] | undefined;
+  triggerSize?: CollapsibleTriggerProps['size'] | undefined;
+  triggerJustify?: CollapsibleTriggerProps['justify'] | undefined;
+  triggerFullWidth?: boolean | undefined;
+  triggerRotateIcon?: boolean | undefined;
+  contentDuration?: CollapsibleContentProps['duration'] | undefined;
+  contentAnimation?: CollapsibleContentProps['animation'] | undefined;
+  contentVariant?: CollapsibleContentProps['variant'] | undefined;
+  contentPadding?: CollapsibleContentProps['padding'] | undefined;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue>({
+  open: false,
+  toggle: () => {},
+  disabled: false,
+});
+
+/* ── Trigger ────────────────────────────────────────────────────────── */
+
+const triggerVariants = cva('flex-row shrink-0 items-center gap-2', {
+  variants: {
+    variant: {
+      plain: '',
+      ghost: 'rounded-md',
+      outline: 'rounded-md border border-border bg-background',
+      soft: 'rounded-md bg-muted',
+    },
+    size: {
+      auto: '',
+      sm: 'min-h-8 px-2.5',
+      md: 'min-h-9 px-3',
+      lg: 'min-h-10 px-4',
+      icon: 'h-9 w-9 items-center justify-center',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      between: 'justify-between',
+    },
+  },
+  defaultVariants: {
+    variant: 'plain',
+    size: 'auto',
+    justify: 'center',
+  },
+});
+
+export interface CollapsibleTriggerProps
+  extends Omit<PressableProps, 'children'>,
+    VariantProps<typeof triggerVariants> {
+  children: ReactNode;
+  asChild?: boolean;
+  fullWidth?: boolean;
+  rotateIcon?: boolean;
+  className?: string;
+}
+
+export function CollapsibleTrigger({
+  children,
+  className,
+  variant,
+  size,
+  justify,
+  fullWidth,
+  disabled,
+  ...props
+}: CollapsibleTriggerProps) {
+  const {
+    open,
+    toggle,
+    disabled: rootDisabled,
+    triggerVariant,
+    triggerSize,
+    triggerJustify,
+    triggerFullWidth,
+  } = useContext(CollapsibleContext);
+  const isDisabled = disabled || rootDisabled;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open, disabled: !!isDisabled }}
+      disabled={isDisabled}
+      onPress={toggle}
+      className={cn(
+        triggerVariants({
+          variant: variant ?? triggerVariant,
+          size: size ?? triggerSize,
+          justify: justify ?? triggerJustify,
+        }),
+        (fullWidth || triggerFullWidth) && 'w-full',
+        isDisabled && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+/* ── Content ────────────────────────────────────────────────────────── */
+
+export interface CollapsibleContentProps extends ViewProps {
+  className?: string;
+  children: ReactNode;
+  duration?: 'fast' | 'normal' | 'slow';
+  animation?: 'height' | 'fade' | 'none';
+  variant?: 'plain' | 'panel' | 'card' | 'inset';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const contentVariants = cva('', {
+  variants: {
+    variant: {
+      plain: '',
+      panel: 'rounded-md border border-border bg-background',
+      card: 'rounded-lg border border-border bg-card',
+      inset: 'rounded-md bg-muted',
+    },
+    padding: {
+      none: '',
+      sm: 'p-3',
+      md: 'p-4',
+      lg: 'p-5',
+    },
+  },
+  defaultVariants: {
+    variant: 'plain',
+    padding: 'none',
+  },
+});
+
+export function CollapsibleContent({
+  children,
+  className,
+  variant,
+  padding,
+  ...props
+}: CollapsibleContentProps) {
+  const { open, contentVariant, contentPadding } = useContext(CollapsibleContext);
+  if (!open) return null;
+  return (
+    <View
+      className={cn(
+        contentVariants({ variant: variant ?? contentVariant, padding: padding ?? contentPadding }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}