@mihcm/ui 0.14.1

package/src/SparkChart.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+/**
+ * SparkChart (web variant).
+ *
+ * Small trend chart powered by D3 scales and shape generation.
+ *
+ * Wiki: docs/components/SparkChart.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { curveMonotoneX, line as d3Line, scaleLinear } from 'd3';
+import { cn } from './internal/cn.js';
+
+const LINE_TONE_CLASS = {
+  primary: 'stroke-primary',
+  accent: 'stroke-accent',
+  success: 'stroke-success',
+  warning: 'stroke-warning',
+  danger: 'stroke-destructive',
+} as const;
+
+const AREA_TONE_CLASS: Record<keyof typeof LINE_TONE_CLASS, string> = {
+  primary: 'fill-primary/10',
+  accent: 'fill-accent/10',
+  success: 'fill-success/10',
+  warning: 'fill-warning/10',
+  danger: 'fill-destructive/10',
+};
+
+const DOT_TONE_CLASS: Record<keyof typeof LINE_TONE_CLASS, string> = {
+  primary: 'stroke-primary',
+  accent: 'stroke-accent',
+  success: 'stroke-success',
+  warning: 'stroke-warning',
+  danger: 'stroke-destructive',
+};
+
+export type SparkChartTone = keyof typeof LINE_TONE_CLASS;
+
+export interface SparkChartProps extends HTMLAttributes<HTMLDivElement> {
+  data: number[];
+  width?: number;
+  height?: number;
+  tone?: SparkChartTone;
+  lineTone?: SparkChartTone;
+  areaTone?: SparkChartTone;
+  dotTone?: SparkChartTone;
+  showArea?: boolean;
+  showDots?: boolean;
+  label?: string;
+  lineClassName?: string;
+  areaClassName?: string;
+  dotClassName?: string;
+}
+
+export const SparkChart = forwardRef<HTMLDivElement, SparkChartProps>(function SparkChart(
+  {
+    data,
+    width = 160,
+    height = 48,
+    tone = 'primary',
+    lineTone,
+    areaTone = 'primary',
+    dotTone = 'primary',
+    showArea = false,
+    showDots = false,
+    label = 'Trend',
+    className,
+    lineClassName,
+    areaClassName,
+    dotClassName,
+    ...props
+  },
+  ref,
+) {
+  const values = data.length > 0 ? data : [0];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const x = scaleLinear()
+    .domain([0, Math.max(values.length - 1, 1)])
+    .range([4, width - 4]);
+  const y = scaleLinear()
+    .domain(min === max ? [min - 1, max + 1] : [min, max])
+    .range([height - 4, 4]);
+  const path =
+    d3Line<number>()
+      .x((_value, index) => x(index))
+      .y((value) => y(value))
+      .curve(curveMonotoneX)(values) ?? '';
+  const areaPath = showArea
+    ? `${path} L ${x(values.length - 1)} ${height - 4} L ${x(0)} ${height - 4} Z`
+    : '';
+
+  return (
+    <div
+      ref={ref}
+      className={cn('inline-flex', className)}
+      role="img"
+      aria-label={label}
+      {...props}
+    >
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden>
+        {showArea ? (
+          <path
+            d={areaPath}
+            className={cn(
+              'transition-colors duration-300',
+              AREA_TONE_CLASS[areaTone],
+              areaClassName,
+            )}
+          />
+        ) : null}
+        <path
+          d={path}
+          fill="none"
+          className={cn(
+            'transition-colors duration-300',
+            LINE_TONE_CLASS[lineTone ?? tone],
+            lineClassName,
+          )}
+          strokeWidth={2.5}
+          strokeLinecap="round"
+        />
+        {showDots
+          ? values.map((value, index) => (
+              <circle
+                key={index}
+                cx={x(index)}
+                cy={y(value)}
+                r={2}
+                className={cn(
+                  'fill-background transition-colors duration-300',
+                  DOT_TONE_CLASS[dotTone],
+                  dotClassName,
+                )}
+                strokeWidth={1.5}
+              />
+            ))
+          : null}
+      </svg>
+    </div>
+  );
+});

package/src/StatCard.native.tsx

@@ -0,0 +1,64 @@
+/**
+ * StatCard (React Native variant).
+ *
+ * Same prop API as the web variant. Renders View + Text.
+ *
+ * Wiki: docs/components/StatCard.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+const TILE_TONE = {
+  primary: 'bg-primary-50 dark:bg-primary-950',
+  accent: 'bg-accent-50',
+  success: 'bg-green-100',
+  warning: 'bg-yellow-100',
+  danger: 'bg-red-100',
+  neutral: 'bg-muted',
+} as const;
+
+const VALUE_TONE = {
+  primary: 'text-primary dark:text-primary-300',
+  accent: 'text-accent',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+  neutral: 'text-foreground',
+} as const;
+
+export type StatCardTone = keyof typeof TILE_TONE;
+
+export interface StatCardProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  value: ReactNode;
+  label: ReactNode;
+  icon?: ReactNode;
+  tone?: StatCardTone;
+}
+
+export const StatCard = forwardRef<View, StatCardProps>(function StatCard(
+  { className, value, label, icon, tone = 'primary', ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn('rounded-xl border border-border bg-card py-4 px-3 items-center', className)}
+      {...props}
+    >
+      {icon ? (
+        <View
+          className={cn(
+            'mb-2 h-9 w-9 items-center justify-center rounded-card',
+            TILE_TONE[tone],
+          )}
+        >
+          <View className="h-4.5 w-4.5 items-center justify-center">{icon}</View>
+        </View>
+      ) : null}
+      <Text className={cn('text-stat-sm font-bold leading-none', VALUE_TONE[tone])}>{value}</Text>
+      <Text className="mt-0.5 text-label text-muted-foreground">{label}</Text>
+    </View>
+  );
+});

package/src/StatCard.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+/**
+ * StatCard (web variant — React DOM).
+ *
+ * Centered icon tile + big number + label, used in the "Quick stats"
+ * row of the MiHCM Security prototype (Active Roles / Total Users /
+ * Modules). Four tones cover the common meanings; the icon is sized
+ * to 18 px inside a 36×36 rounded tile.
+ *
+ * Wiki: docs/components/StatCard.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Text } from './Text.js';
+import { cn } from './internal/cn.js';
+
+export const statCardVariants = cva(
+  'rounded-card border border-secondary bg-card py-4 px-3 text-center',
+);
+
+const TILE_TONE = {
+  primary: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
+  accent: 'bg-accent-50 text-accent',
+  success: 'bg-green-100 text-success',
+  warning: 'bg-yellow-100 text-warning',
+  danger: 'bg-red-100 text-destructive',
+  neutral: 'bg-muted text-muted-foreground',
+} as const;
+
+const VALUE_TONE = {
+  primary: 'text-primary dark:text-primary-300',
+  accent: 'text-accent',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+  neutral: 'text-foreground',
+} as const;
+
+export type StatCardTone = keyof typeof TILE_TONE;
+
+export interface StatCardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statCardVariants> {
+  /** Big number / metric. */
+  value: ReactNode;
+  /** Caption shown below the value. */
+  label: ReactNode;
+  /** Optional icon, sized to 18 px inside the tile. */
+  icon?: ReactNode;
+  /** Color tone. Defaults to `primary`. */
+  tone?: StatCardTone;
+}
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(function StatCard(
+  { className, value, label, icon, tone = 'primary', ...props },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn(statCardVariants(), className)} {...props}>
+      {icon ? (
+        <div
+          className={cn(
+            'mx-auto mb-2 grid h-9 w-9 place-items-center rounded-card',
+            TILE_TONE[tone],
+          )}
+        >
+          <span className="grid size-4.5 place-items-center [&_svg]:size-full">{icon}</span>
+        </div>
+      ) : null}
+      <Text size="stat" weight="bold" className={cn('block', VALUE_TONE[tone])}>{value}</Text>
+      <Text size="label" tone="muted" className="mt-0.5 block">{label}</Text>
+    </div>
+  );
+});

package/src/StatusBadge.native.tsx

@@ -0,0 +1,57 @@
+/**
+ * StatusBadge (React Native variant).
+ *
+ * Same prop API as the web variant — small chip with optional leading
+ * icon. Renders View + Text instead of span + text.
+ *
+ * Wiki: docs/components/StatusBadge.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const statusBadgeVariants = cva(
+  'flex-row items-center gap-1 rounded px-1.5 py-0.5',
+  {
+    variants: {
+      tone: {
+        success: 'bg-green-100',
+        warning: 'bg-yellow-100',
+        danger: 'bg-red-100',
+        info: 'bg-primary-50 dark:bg-primary-950',
+        neutral: 'bg-muted',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+);
+
+const TEXT_TONE: Record<NonNullable<VariantProps<typeof statusBadgeVariants>['tone']>, string> = {
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+  info: 'text-primary dark:text-primary-300',
+  neutral: 'text-muted-foreground',
+};
+
+export interface StatusBadgeProps
+  extends Omit<ViewProps, 'style'>,
+    VariantProps<typeof statusBadgeVariants> {
+  className?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export const StatusBadge = forwardRef<View, StatusBadgeProps>(function StatusBadge(
+  { className, tone = 'neutral', icon, children, ...props },
+  ref,
+) {
+  const t = tone ?? 'neutral';
+  return (
+    <View ref={ref} className={cn(statusBadgeVariants({ tone: t }), className)} {...props}>
+      {icon ? <View className="h-3 w-3 shrink-0 items-center justify-center">{icon}</View> : null}
+      <Text className={cn('text-caption font-medium leading-none', TEXT_TONE[t])}>{children}</Text>
+    </View>
+  );
+});

package/src/StatusBadge.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+/**
+ * StatusBadge (web variant — React DOM).
+ *
+ * Small inline icon + label chip used to mark something as "Module
+ * enabled" (green check) / "No module" (amber warning) etc. Extracted
+ * from the MiHCM Security prototype's `moduleStatusBadge` /
+ * `permStatusBadge` patterns. Five built-in tones cover the common
+ * meanings; consumers pass their own SVG via `icon` so the chip can
+ * carry any glyph that matches the message.
+ *
+ * Wiki: docs/components/StatusBadge.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const statusBadgeVariants = cva(
+  'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-caption font-semibold leading-none',
+  {
+    variants: {
+      tone: {
+        success: 'bg-green-100 text-success',
+        warning: 'bg-yellow-100 text-warning',
+        danger: 'bg-red-100 text-destructive',
+        info: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
+        neutral: 'bg-muted text-muted-foreground',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+);
+
+export interface StatusBadgeProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statusBadgeVariants> {
+  /** Optional leading icon. Sized to 12 px (`size-3`). */
+  icon?: ReactNode;
+}
+
+export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(function StatusBadge(
+  { className, tone, icon, children, ...props },
+  ref,
+) {
+  return (
+    <span ref={ref} className={cn(statusBadgeVariants({ tone }), className)} {...props}>
+      {icon ? <span className="inline-flex size-3 shrink-0 items-center justify-center">{icon}</span> : null}
+      {children}
+    </span>
+  );
+});

package/src/Switch.native.tsx

@@ -0,0 +1,78 @@
+/**
+ * Switch (React Native variant).
+ *
+ * Binary on/off toggle. Renders a Pressable with the track + a
+ * positioned thumb. `accessibilityRole="switch"` +
+ * `accessibilityState.checked` so screen readers announce state.
+ *
+ * Same controlled-only prop API as the web variant.
+ *
+ * Wiki: docs/components/Switch.md
+ */
+import { forwardRef } from 'react';
+import { Pressable, View, type PressableProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const switchVariants = cva('rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-5 w-9',
+      md: 'h-6 w-11',
+      lg: 'h-7 w-12',
+    },
+  },
+  defaultVariants: { size: 'md' },
+});
+
+const THUMB_SIZE: Record<'sm' | 'md' | 'lg', { cls: string; offset: number }> = {
+  sm: { cls: 'h-4 w-4', offset: 16 },
+  md: { cls: 'h-5 w-5', offset: 20 },
+  lg: { cls: 'h-6 w-6', offset: 20 },
+};
+
+type SwitchTone = 'accent' | 'primary';
+const TONE_ON: Record<SwitchTone, string> = {
+  accent: 'bg-accent',
+  primary: 'bg-primary',
+};
+
+export interface SwitchProps
+  extends Omit<PressableProps, 'onPress' | 'children' | 'style'>,
+    VariantProps<typeof switchVariants> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  /** Defaults to `accent`. Matches the production prototype's orange toggle. */
+  tone?: SwitchTone;
+  className?: string;
+}
+
+export const Switch = forwardRef<View, SwitchProps>(function Switch(
+  { className, size = 'md', tone = 'accent', checked, onCheckedChange, disabled, ...props },
+  ref,
+) {
+  const sz = size ?? 'md';
+  const thumb = THUMB_SIZE[sz];
+  return (
+    <Pressable
+      ref={ref as never}
+      accessibilityRole="switch"
+      accessibilityState={{ checked, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={() => onCheckedChange(!checked)}
+      className={cn(
+        switchVariants({ size: sz }),
+        'justify-center px-0.5',
+        checked ? TONE_ON[tone] : 'bg-input',
+        disabled && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <View
+        className={cn('rounded-full bg-background', thumb.cls)}
+        style={{ transform: [{ translateX: checked ? thumb.offset : 0 }] }}
+      />
+    </Pressable>
+  );
+});

package/src/Switch.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+/**
+ * Switch (web variant — React DOM).
+ *
+ * Binary on/off toggle. Renders a `<button role="switch">` with
+ * `aria-checked` driven by `checked`. Controlled-only by design —
+ * pass `checked` and `onCheckedChange` from your form state. For
+ * uncontrolled use, wrap with `useState`.
+ *
+ * Pair with `Label` and link them with `id` / `htmlFor` so the label
+ * acts as a click target.
+ *
+ * Wiki: docs/components/Switch.md
+ */
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const switchVariants = cva(
+  'inline-flex shrink-0 cursor-pointer items-center rounded-full ' +
+    'border-2 border-transparent ' +
+    '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-5 w-9',
+        md: 'h-6 w-11',
+        lg: 'h-7 w-13',
+      },
+    },
+    defaultVariants: { size: 'sm' },
+  },
+);
+
+const THUMB_SIZE = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+} as const;
+
+/** Tone in the "on" state. `accent` (MiHCM orange) is the production default;
+ *  `primary` (MiHCM navy) is available for consumers who want the toggle to
+ *  read as a primary action rather than an emphasis affordance. */
+type SwitchTone = 'accent' | 'primary';
+
+const TONE_ON: Record<SwitchTone, string> = {
+  accent: 'bg-accent',
+  primary: 'bg-primary',
+};
+
+export interface SwitchProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'children'>,
+    VariantProps<typeof switchVariants> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  /** Defaults to `accent`. */
+  tone?: SwitchTone;
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  { className, size = 'md', tone = 'accent', checked, onCheckedChange, disabled, ...props },
+  ref,
+) {
+  const sz = size ?? 'md';
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        switchVariants({ size: sz }),
+        checked ? TONE_ON[tone] : 'bg-brand-neutral-179',
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none block rounded-full bg-primary-foreground shadow-switch-thumb',
+          'transition-transform duration-150',
+          THUMB_SIZE[sz],
+          checked ? 'translate-x-full' : 'translate-x-0',
+        )}
+      />
+    </button>
+  );
+});