@mihcm/ui 0.14.1

package/src/AccessLevelGroup.native.tsx

@@ -0,0 +1,103 @@
+/**
+ * AccessLevelGroup (React Native variant).
+ *
+ * Same prop API as the web variant. Uses Pressable + Text and the
+ * `accessibilityRole="radiogroup"` / `"radio"` pattern.
+ *
+ * Wiki: docs/components/AccessLevelGroup.md
+ */
+import { forwardRef } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export type AccessLevel = 'none' | 'view' | 'edit' | 'full';
+
+export interface AccessLevelOption {
+  value: AccessLevel;
+  label: string;
+  tone: 'neutral' | 'view' | 'accent' | 'primary';
+}
+
+export const ACCESS_LEVELS: readonly AccessLevelOption[] = [
+  { value: 'none', label: 'None', tone: 'neutral' },
+  { value: 'view', label: 'View', tone: 'view' },
+  { value: 'edit', label: 'Edit', tone: 'accent' },
+  { value: 'full', label: 'Full Access', tone: 'primary' },
+];
+
+const ACTIVE_BG: Record<AccessLevelOption['tone'], string> = {
+  neutral: 'bg-muted',
+  view: 'bg-primary-50 dark:bg-primary-950',
+  accent: 'bg-accent-50',
+  primary: 'bg-primary',
+};
+
+const ACTIVE_FG: Record<AccessLevelOption['tone'], string> = {
+  neutral: 'text-muted-foreground',
+  view: 'text-foreground',
+  accent: 'text-accent',
+  primary: 'text-primary-foreground',
+};
+
+export interface AccessLevelGroupProps extends Omit<ViewProps, 'style'> {
+  value: AccessLevel;
+  onValueChange: (value: AccessLevel) => void;
+  options?: readonly AccessLevelOption[];
+  disabled?: boolean;
+  className?: string;
+  accessibilityLabel?: string;
+}
+
+export const AccessLevelGroup = forwardRef<View, AccessLevelGroupProps>(
+  function AccessLevelGroup(
+    {
+      className,
+      value,
+      onValueChange,
+      options = ACCESS_LEVELS,
+      disabled = false,
+      accessibilityLabel = 'Access level',
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <View
+        ref={ref}
+        // RN doesn't have a "radiogroup" role; use "tablist" as the closest
+        // semantic and rely on individual radio roles per option.
+        accessibilityRole="tablist"
+        accessibilityLabel={accessibilityLabel}
+        className={cn('flex-row flex-wrap items-center gap-1', className)}
+        {...props}
+      >
+        {options.map((opt) => {
+          const active = opt.value === value;
+          return (
+            <Pressable
+              key={opt.value}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: active, disabled }}
+              disabled={disabled}
+              onPress={() => onValueChange(opt.value)}
+              className={cn(
+                'rounded-md border border-border bg-card px-2.5 py-1',
+                disabled && 'opacity-50',
+                active && ACTIVE_BG[opt.tone],
+              )}
+            >
+              <Text
+                className={cn(
+                  'text-label leading-none',
+                  active ? 'font-semibold ' + ACTIVE_FG[opt.tone] : 'text-muted-foreground',
+                )}
+              >
+                {opt.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  },
+);

package/src/AccessLevelGroup.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * AccessLevelGroup (web variant — React DOM).
+ *
+ * 4-state segmented button used by the MiHCM Security prototype to
+ * set per-module access: None / View / Edit / Full. Each option has
+ * its own brand color when active (navy for Full, orange for Edit,
+ * muted blue for View, neutral for None).
+ *
+ * Controlled — pass `value` + `onValueChange`. Pass `options` to
+ * override the levels, but most consumers should use the default.
+ *
+ * Renders as a `role="radiogroup"` with each level as a
+ * `role="radio"` button.
+ *
+ * Wiki: docs/components/AccessLevelGroup.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export type AccessLevel = 'none' | 'view' | 'edit' | 'full';
+
+export interface AccessLevelOption {
+  value: AccessLevel;
+  label: string;
+  /** Tone applied when this option is active. */
+  tone: 'neutral' | 'view' | 'accent' | 'primary';
+}
+
+export const ACCESS_LEVELS: readonly AccessLevelOption[] = [
+  { value: 'none', label: 'None', tone: 'neutral' },
+  { value: 'view', label: 'View', tone: 'view' },
+  { value: 'edit', label: 'Edit', tone: 'accent' },
+  { value: 'full', label: 'Full Access', tone: 'primary' },
+];
+
+const ACTIVE_CLASSES: Record<AccessLevelOption['tone'], string> = {
+  neutral: 'bg-brand-neutral-66 text-brand-neutral-371',
+  view: 'bg-primary-50 text-secondary-foreground dark:bg-primary-950',
+  accent: 'bg-accent-50 text-accent-600',
+  primary: 'bg-primary text-primary-foreground',
+};
+
+export interface AccessLevelGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value: AccessLevel;
+  onValueChange: (value: AccessLevel) => void;
+  /** Override the 4 default levels. */
+  options?: readonly AccessLevelOption[];
+  /** Disable all buttons. */
+  disabled?: boolean;
+  /** Accessible label for the group. */
+  'aria-label'?: string;
+}
+
+export const AccessLevelGroup = forwardRef<HTMLDivElement, AccessLevelGroupProps>(
+  function AccessLevelGroup(
+    {
+      className,
+      value,
+      onValueChange,
+      options = ACCESS_LEVELS,
+      disabled = false,
+      'aria-label': ariaLabel = 'Access level',
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        className={cn('inline-flex flex-wrap items-center gap-1', className)}
+        {...props}
+      >
+        {options.map((opt) => {
+          const active = opt.value === value;
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              role="radio"
+              aria-checked={active}
+              disabled={disabled}
+              onClick={() => onValueChange(opt.value)}
+              className={cn(
+                'rounded-md border border-secondary bg-background px-2.5 py-1 text-label font-medium leading-none transition-colors duration-150',
+                'text-muted-foreground hover:border-brand-neutral-179 hover:text-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+                active && 'font-semibold border-transparent ' + ACTIVE_CLASSES[opt.tone],
+              )}
+            >
+              {opt.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/Accordion.native.tsx

@@ -0,0 +1,199 @@
+/**
+ * Accordion (React Native variant).
+ *
+ * `<View>` + `<Pressable>` + `LayoutAnimation` for height.
+ * Same sub-component API as the web variant.
+ *
+ * Wiki: docs/components/Accordion.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  Pressable,
+  Text,
+  UIManager,
+  View,
+  type PressableProps,
+  type ViewProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+/* Enable LayoutAnimation on Android */
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/* ── Context ──────────────────────────────────────────────────────── */
+
+interface AccordionContextValue {
+  openValues: ReadonlySet<string>;
+  toggle: (value: string) => void;
+  duration: AccordionDuration;
+}
+
+type AccordionDuration = 'fast' | 'normal' | 'slow';
+
+const accordionDurationMs: Record<AccordionDuration, number> = {
+  fast: 300,
+  normal: 500,
+  slow: 700,
+};
+
+const AccordionCtx = createContext<AccordionContextValue | null>(null);
+
+function useAccordion() {
+  const ctx = useContext(AccordionCtx);
+  if (!ctx) throw new Error('Accordion sub-components must be used within <Accordion>');
+  return ctx;
+}
+
+const ItemValueCtx = createContext<string | null>(null);
+
+function useItemValue() {
+  const v = useContext(ItemValueCtx);
+  if (v === null) throw new Error('AccordionTrigger/Content must be used within <AccordionItem>');
+  return v;
+}
+
+/* ── Accordion (root) ─────────────────────────────────────────────── */
+
+export interface AccordionProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  type?: 'single' | 'multiple';
+  defaultValue?: string | string[];
+  duration?: AccordionDuration;
+}
+
+export const Accordion = forwardRef<View, AccordionProps>(function Accordion(
+  { type = 'single', defaultValue, duration = 'normal', className, children, ...props },
+  ref,
+) {
+  const [openValues, setOpenValues] = useState<ReadonlySet<string>>(() => {
+    if (!defaultValue) return new Set<string>();
+    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+  });
+
+  const toggle = useCallback(
+    (value: string) => {
+      LayoutAnimation.configureNext({
+        duration: accordionDurationMs[duration],
+        update: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+        },
+        delete: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.opacity,
+        },
+      });
+      setOpenValues((prev) => {
+        const next = new Set(prev);
+        if (next.has(value)) {
+          next.delete(value);
+        } else {
+          if (type === 'single') next.clear();
+          next.add(value);
+        }
+        return next;
+      });
+    },
+    [duration, type],
+  );
+
+  const ctx = useMemo(() => ({ openValues, toggle, duration }), [duration, openValues, toggle]);
+
+  return (
+    <AccordionCtx.Provider value={ctx}>
+      <View ref={ref} className={cn('w-full', className)} {...props}>
+        {children}
+      </View>
+    </AccordionCtx.Provider>
+  );
+});
+
+/* ── AccordionItem ────────────────────────────────────────────────── */
+
+export interface AccordionItemProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export const AccordionItem = forwardRef<View, AccordionItemProps>(
+  function AccordionItem({ value, className, children, ...props }, ref) {
+    return (
+      <ItemValueCtx.Provider value={value}>
+        <View ref={ref} className={cn('border-b border-border', className)} {...props}>
+          {children}
+        </View>
+      </ItemValueCtx.Provider>
+    );
+  },
+);
+
+/* ── AccordionTrigger ─────────────────────────────────────────────── */
+
+export interface AccordionTriggerProps extends Omit<PressableProps, 'style'> {
+  className?: string;
+  children: ReactNode;
+}
+
+export const AccordionTrigger = forwardRef<View, AccordionTriggerProps>(
+  function AccordionTrigger({ className, children, ...props }, ref) {
+    const { openValues, toggle } = useAccordion();
+    const value = useItemValue();
+    const isOpen = openValues.has(value);
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
+        onPress={() => toggle(value)}
+        className={cn('flex-row items-center justify-between py-4', className)}
+        {...props}
+      >
+        <Text className="flex-1 text-sm font-medium text-foreground">{children}</Text>
+        <Text
+          className={cn(
+            'text-muted-foreground text-xs ml-2',
+            isOpen && 'rotate-180',
+          )}
+        >
+          ▼
+        </Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── AccordionContent ─────────────────────────────────────────────── */
+
+export interface AccordionContentProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  children: ReactNode;
+}
+
+export const AccordionContent = forwardRef<View, AccordionContentProps>(
+  function AccordionContent({ className, children, ...props }, ref) {
+    const { openValues } = useAccordion();
+    const value = useItemValue();
+    const isOpen = openValues.has(value);
+
+    if (!isOpen) return null;
+
+    return (
+      <View ref={ref} className={cn('pb-4', className)} {...props}>
+        <Text className="text-sm text-foreground/80">{children}</Text>
+      </View>
+    );
+  },
+);

package/src/Accordion.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+/**
+ * Accordion (web variant — React DOM).
+ *
+ * Vertically stacked collapsible sections. Four sub-components:
+ *
+ *   <Accordion type="single">
+ *     <AccordionItem value="item-1">
+ *       <AccordionTrigger>Section one</AccordionTrigger>
+ *       <AccordionContent>Content here…</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ *
+ * Variants:
+ *  - `default`   — bottom-bordered items (like Stripe / Linear FAQ)
+ *  - `bordered`  — each item in a rounded card with border
+ *  - `flush`     — no borders, minimal style, tight spacing
+ *
+ * `type="single"` allows one open section; `type="multiple"` allows
+ * any number. Height animation uses the CSS grid 0fr → 1fr trick.
+ *
+ * Wiki: docs/components/Accordion.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cn } from './internal/cn.js';
+
+/* ── Types ───────────────────────────────────────────────────────── */
+
+export type AccordionVariant = 'default' | 'bordered' | 'flush';
+export type AccordionDuration = 'fast' | 'normal' | 'slow';
+
+const accordionDurationClasses: Record<AccordionDuration, string> = {
+  fast: 'duration-300',
+  normal: 'duration-500',
+  slow: 'duration-700',
+};
+
+/* ── Context ──────────────────────────────────────────────────────── */
+
+interface AccordionContextValue {
+  openValues: ReadonlySet<string>;
+  toggle: (value: string) => void;
+  variant: AccordionVariant;
+  duration: AccordionDuration;
+}
+
+const AccordionCtx = createContext<AccordionContextValue | null>(null);
+
+function useAccordion() {
+  const ctx = useContext(AccordionCtx);
+  if (!ctx) throw new Error('Accordion sub-components must be used within <Accordion>');
+  return ctx;
+}
+
+interface ItemContextValue {
+  value: string;
+  disabled: boolean;
+  triggerId: string;
+  contentId: string;
+}
+
+const ItemCtx = createContext<ItemContextValue | null>(null);
+
+function useItem() {
+  const ctx = useContext(ItemCtx);
+  if (!ctx) throw new Error('AccordionTrigger/Content must be used within <AccordionItem>');
+  return ctx;
+}
+
+/* ── Accordion (root) ─────────────────────────────────────────────── */
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /** `single` = only one open; `multiple` = any number open. */
+  type?: 'single' | 'multiple';
+  /** Visual variant. @default 'default' */
+  variant?: AccordionVariant;
+  /** Value(s) that should be open initially. */
+  defaultValue?: string | string[];
+  /** Motion speed. */
+  duration?: AccordionDuration;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+  { type = 'single', variant = 'default', defaultValue, duration = 'normal', className, children, ...props },
+  ref,
+) {
+  const [openValues, setOpenValues] = useState<ReadonlySet<string>>(() => {
+    if (!defaultValue) return new Set<string>();
+    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+  });
+
+  const toggle = useCallback(
+    (value: string) => {
+      setOpenValues((prev) => {
+        const next = new Set(prev);
+        if (next.has(value)) {
+          next.delete(value);
+        } else {
+          if (type === 'single') next.clear();
+          next.add(value);
+        }
+        return next;
+      });
+    },
+    [type],
+  );
+
+  const ctx = useMemo(
+    () => ({ openValues, toggle, variant, duration }),
+    [duration, openValues, toggle, variant],
+  );
+
+  return (
+    <AccordionCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={cn(
+          'w-full',
+          variant === 'bordered' && 'space-y-2',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AccordionCtx.Provider>
+  );
+});
+
+/* ── AccordionItem ────────────────────────────────────────────────── */
+
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Unique identifier for this item within the accordion. */
+  value: string;
+  /** When true, the trigger is disabled and the item cannot be toggled. */
+  disabled?: boolean;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  function AccordionItem({ value, disabled = false, className, children, ...props }, ref) {
+    const { variant, openValues } = useAccordion();
+    const isOpen = openValues.has(value);
+    const id = useId();
+    const triggerId = `${id}-trigger`;
+    const contentId = `${id}-content`;
+
+    return (
+      <ItemCtx.Provider value={{ value, disabled, triggerId, contentId }}>
+        <div
+          ref={ref}
+          data-disabled={disabled || undefined}
+          data-state={isOpen ? 'open' : 'closed'}
+          className={cn(
+            variant === 'default' && 'border-b border-border',
+            variant === 'bordered' &&
+              'rounded-lg border border-border bg-card transition-shadow data-[state=open]:shadow-sm',
+            variant === 'flush' && '',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </ItemCtx.Provider>
+    );
+  },
+);
+
+/* ── AccordionTrigger ─────────────────────────────────────────────── */
+
+export interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  function AccordionTrigger({ className, children, ...props }, ref) {
+    const { openValues, toggle, variant } = useAccordion();
+    const { value, disabled, triggerId, contentId } = useItem();
+    const isOpen = openValues.has(value);
+
+    return (
+      <button
+        ref={ref}
+        id={triggerId}
+        type="button"
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        disabled={disabled}
+        onClick={() => toggle(value)}
+        className={cn(
+          'flex w-full items-center justify-between text-left text-sm font-medium',
+          'transition-colors duration-150',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          variant === 'default' && 'py-4 hover:text-foreground',
+          variant === 'bordered' && 'px-4 py-3 hover:bg-muted/50 rounded-t-lg',
+          variant === 'flush' && 'py-2.5 hover:text-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {/* Chevron icon — rotates when open */}
+        <svg
+          aria-hidden
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(
+            'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
+            isOpen && 'rotate-180',
+          )}
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+    );
+  },
+);
+
+/* ── AccordionContent ─────────────────────────────────────────────── */
+
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
+  function AccordionContent({ className, children, ...props }, ref) {
+    const { openValues, variant, duration } = useAccordion();
+    const { value, triggerId, contentId } = useItem();
+    const isOpen = openValues.has(value);
+
+    return (
+      <div
+        ref={ref}
+        id={contentId}
+        role="region"
+        aria-labelledby={triggerId}
+        aria-hidden={!isOpen}
+        inert={!isOpen ? true : undefined}
+        className={cn(
+          'grid overflow-hidden transition-[grid-template-rows,opacity] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none',
+          accordionDurationClasses[duration],
+          isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          isOpen ? 'opacity-100' : 'opacity-0',
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          <div
+            className={cn(
+              'text-sm text-muted-foreground',
+              variant === 'default' && 'pb-4',
+              variant === 'bordered' && 'px-4 pb-3',
+              variant === 'flush' && 'pb-2',
+              className,
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);