@mihcm/ui 0.14.1 → 0.15.1

package/dist/StatCard.js

@@ -3,18 +3,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 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.
+ * Seven layout variants for product KPI surfaces:
+ *
+ *   - `default`      — Centered icon tile + big number + label (original layout)
+ *   - `inline`       — Icon left, value + label stacked right (compact rows)
+ *   - `delta`        — Value + ↑/↓ percentage in a semantic tone
+ *   - `trend`        — Value + delta + inline SparkChart trend (Stripe / Tremor)
+ *   - `progress`     — Value + thin progress bar (current / max goal)
+ *   - `distribution` — Value + segmented CategoryBar breakdown
+ *   - `hero`         — Single huge number, no chrome (marketing / summary callouts)
+ *
+ * All variants share `value`, `label`, optional `icon`, and the 6-tone palette.
+ * Variant-specific props (`delta`, `sparkline`, `max`, `segments`) are typed
+ * via a discriminated union so consumers can't mix prop sets by mistake.
  *
  * Wiki: docs/components/StatCard.md
  */
 import { forwardRef } from 'react';
-import { cva } 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');
+import { Text } from './Text.js';
+import { CategoryBar } from './CategoryBar.js';
+import { SparkChart } from './SparkChart.js';
+/* ── Tone tokens ──────────────────────────────────────────────────── */
 const TILE_TONE = {
     primary: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
     accent: 'bg-accent-50 text-accent',
@@ -31,7 +41,99 @@ const VALUE_TONE = {
     danger: 'text-destructive',
     neutral: 'text-foreground',
 };
-export const StatCard = forwardRef(function StatCard({ className, value, label, icon, tone = 'primary', ...props }, ref) {
-    return (_jsxs("div", { ref: ref, className: cn(statCardVariants(), className), ...props, children: [icon ? (_jsx("div", { className: cn('mx-auto mb-2 grid h-9 w-9 place-items-center rounded-card', TILE_TONE[tone]), children: _jsx("span", { className: "grid size-4.5 place-items-center [&_svg]:size-full", children: icon }) })) : null, _jsx(Text, { size: "stat", weight: "bold", className: cn('block', VALUE_TONE[tone]), children: value }), _jsx(Text, { size: "label", tone: "muted", className: "mt-0.5 block", children: label })] }));
+const SEGMENT_TONE = {
+    primary: 'bg-primary',
+    accent: 'bg-accent',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    danger: 'bg-destructive',
+    neutral: 'bg-muted-foreground',
+};
+function deltaToneClass(delta) {
+    if (delta.direction === 'flat')
+        return 'text-muted-foreground';
+    const positiveIsGood = delta.positiveIsGood ?? true;
+    const isGood = (delta.direction === 'up') === positiveIsGood;
+    return isGood ? 'text-success' : 'text-destructive';
+}
+function deltaDisplay(delta) {
+    if (delta.formatted)
+        return delta.formatted;
+    const sign = delta.direction === 'up' ? '+' : delta.direction === 'down' ? '-' : '±';
+    return `${sign}${Math.abs(delta.value)}%`;
+}
+function DeltaIndicator({ delta }) {
+    const Arrow = delta.direction === 'up' ? UpArrow : delta.direction === 'down' ? DownArrow : null;
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-0.5 text-xs font-medium tabular-nums', deltaToneClass(delta)), children: [Arrow ? _jsx(Arrow, {}) : null, deltaDisplay(delta)] }));
+}
+function UpArrow() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { d: "M6 10V2M3 5l3-3 3 3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DownArrow() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { d: "M6 2v8M3 7l3 3 3-3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/* ── Shared shell ─────────────────────────────────────────────────── */
+const cardShell = 'rounded-card border border-secondary bg-card';
+/* ── Component dispatch ───────────────────────────────────────────── */
+export const StatCard = forwardRef(function StatCard(props, ref) {
+    switch (props.variant) {
+        case 'inline':
+            return _jsx(InlineCard, { ref: ref, ...props });
+        case 'delta':
+            return _jsx(DeltaCard, { ref: ref, ...props });
+        case 'trend':
+            return _jsx(TrendCard, { ref: ref, ...props });
+        case 'progress':
+            return _jsx(ProgressCard, { ref: ref, ...props });
+        case 'distribution':
+            return _jsx(DistributionCard, { ref: ref, ...props });
+        case 'hero':
+            return _jsx(HeroCard, { ref: ref, ...props });
+        case 'default':
+        case undefined:
+        default:
+            return _jsx(DefaultCard, { ref: ref, ...props });
+    }
+});
+/* ── 1. Default — centered icon tile ──────────────────────────────── */
+const DefaultCard = forwardRef(function DefaultCard({ className, value, label, icon, tone = 'primary', variant: _v, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'px-3 py-4 text-center', className), ...rest, children: [icon ? (_jsx("div", { className: cn('mx-auto mb-2 grid h-9 w-9 place-items-center rounded-card', TILE_TONE[tone]), children: _jsx("span", { className: "grid size-4.5 place-items-center [&_svg]:size-full", children: icon }) })) : null, _jsx(Text, { as: "div", size: "stat", weight: "bold", className: cn(VALUE_TONE[tone]), children: value }), _jsx(Text, { as: "div", size: "label", tone: "muted", className: "mt-0.5", children: label })] }));
+});
+/* ── 2. Inline — horizontal icon + stacked value/label ────────────── */
+const InlineCard = forwardRef(function InlineCard({ className, value, label, icon, tone = 'primary', variant: _v, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'flex items-center gap-3 px-4 py-3', className), ...rest, children: [icon ? (_jsx("div", { className: cn('grid size-10 shrink-0 place-items-center rounded-card', TILE_TONE[tone]), children: _jsx("span", { className: "grid size-5 place-items-center [&_svg]:size-full", children: icon }) })) : null, _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(Text, { as: "div", size: "stat-sm", weight: "bold", className: cn('truncate', VALUE_TONE[tone]), children: value }), _jsx(Text, { as: "div", size: "label", tone: "muted", className: "truncate", children: label })] })] }));
+});
+/* ── 3. Delta — value + ↑/↓ percentage ────────────────────────────── */
+const DeltaCard = forwardRef(function DeltaCard({ className, value, label, tone = 'neutral', delta, variant: _v, icon: _i, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'px-4 py-3', className), ...rest, children: [_jsx(Text, { as: "div", size: "label", tone: "muted", className: "uppercase tracking-wider", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [_jsx(Text, { as: "span", size: "stat", weight: "bold", className: cn('tabular-nums leading-tight', VALUE_TONE[tone]), children: value }), _jsx(DeltaIndicator, { delta: delta })] })] }));
+});
+/* ── 4. Trend — value + delta + SparkChart ────────────────────────── */
+const SPARK_TONE_FOR = {
+    primary: 'primary',
+    accent: 'accent',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+};
+const TrendCard = forwardRef(function TrendCard({ className, value, label, tone = 'primary', delta, sparkline, sparklineTone, variant: _v, icon: _i, ...rest }, ref) {
+    const resolvedSparkTone = sparklineTone ?? SPARK_TONE_FOR[tone] ?? 'primary';
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'flex items-center gap-4 px-4 py-3', className), ...rest, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Text, { as: "div", size: "label", tone: "muted", className: "uppercase tracking-wider", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [_jsx(Text, { as: "span", size: "stat", weight: "bold", className: cn('tabular-nums leading-tight', VALUE_TONE[tone]), children: value }), delta ? _jsx(DeltaIndicator, { delta: delta }) : null] })] }), _jsx(SparkChart, { data: sparkline, tone: resolvedSparkTone, showArea: true, width: 96, height: 40, className: "shrink-0", "aria-hidden": "true" })] }));
+});
+/* ── 5. Progress — value of max + thin bar ────────────────────────── */
+const ProgressCard = forwardRef(function ProgressCard({ className, value, label, tone = 'primary', max, valueLabel, variant: _v, icon: _i, ...rest }, ref) {
+    const numericValue = typeof value === 'number' ? value : Number(value) || 0;
+    const pct = max > 0 ? Math.max(0, Math.min(100, (numericValue / max) * 100)) : 0;
+    const display = valueLabel ?? `${value} / ${max}`;
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'space-y-2.5 px-4 py-3', className), ...rest, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx(Text, { as: "div", size: "label", tone: "muted", className: "uppercase tracking-wider", children: label }), _jsxs(Text, { as: "span", size: "label", tone: "muted", className: "tabular-nums", children: [Math.round(pct), "%"] })] }), _jsx(Text, { as: "div", size: "stat", weight: "bold", className: cn('tabular-nums leading-tight', VALUE_TONE[tone]), children: display }), _jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": numericValue, "aria-label": typeof label === 'string' ? label : undefined, className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn('h-full rounded-full transition-[width] duration-500', SEGMENT_TONE[tone]), style: { width: `${pct}%` } }) })] }));
+});
+/* ── 6. Distribution — value + segmented CategoryBar ──────────────── */
+const DistributionCard = forwardRef(function DistributionCard({ className, value, label, tone = 'primary', segments, variant: _v, icon: _i, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'space-y-3 px-4 py-3', className), ...rest, children: [_jsxs("div", { children: [_jsx(Text, { as: "div", size: "label", tone: "muted", className: "uppercase tracking-wider", children: label }), _jsx(Text, { as: "div", size: "stat", weight: "bold", className: cn('mt-1 tabular-nums leading-tight', VALUE_TONE[tone]), children: value })] }), _jsx(CategoryBar, { data: segments, legendPosition: "bottom" })] }));
+});
+/* ── 7. Hero — single huge number ─────────────────────────────────── */
+const HeroCard = forwardRef(function HeroCard({ className, value, label, tone = 'primary', variant: _v, icon: _i, ...rest }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn(cardShell, 'px-6 py-8 text-center', className), ...rest, children: [_jsx(Text, { as: "div", size: "5xl", weight: "bold", className: cn('tabular-nums leading-none', VALUE_TONE[tone]), children: value }), _jsx(Text, { as: "div", size: "sm", tone: "muted", className: "mt-2 uppercase tracking-wider", children: label })] }));
 });
+/* ── Backward-compat re-export for any consumer pulling the cva ──── */
+export const statCardVariants = () => 'rounded-card border border-secondary bg-card py-4 px-3 text-center';
 //# sourceMappingURL=StatCard.js.map

package/dist/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../src/StatCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;GASG;AACH,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CACjC,oEAAoE,CACrE,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,sEAAsE;IAC/E,MAAM,EAAE,0BAA0B;IAClC,OAAO,EAAE,2BAA2B;IACpC,OAAO,EAAE,4BAA4B;IACrC,MAAM,EAAE,6BAA6B;IACrC,OAAO,EAAE,gCAAgC;CACjC,CAAC;AAEX,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,oCAAoC;IAC7C,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,kBAAkB;IAC1B,OAAO,EAAE,iBAAiB;CAClB,CAAC;AAiBX,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CACjF,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAC7D,GAAG;IAEH,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,EAAE,SAAS,CAAC,KAAM,KAAK,aACnE,IAAI,CAAC,CAAC,CAAC,CACN,cACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,SAAS,CAAC,IAAI,CAAC,CAChB,YAED,eAAM,SAAS,EAAC,oDAAoD,YAAE,IAAI,GAAQ,GAC9E,CACP,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,YAAG,KAAK,GAAQ,EACxF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,YAAE,KAAK,GAAQ,IACnE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../src/StatCard.tsx"],"names":[],"mappings":"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"}

package/dist/TransferList.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.native.d.ts","sourceRoot":"","sources":["../src/TransferList.native.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAwC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1F,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACjE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,oGAwJxB,CAAC"}
+{"version":3,"file":"TransferList.native.d.ts","sourceRoot":"","sources":["../src/TransferList.native.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAwC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1F,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE7D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACjE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,oGAwJxB,CAAC"}

package/dist/TransferList.native.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { FlatList, Pressable, Text, TextInput, View } from 'react-native';
+import { NATIVE_PLACEHOLDER_COLOR } from '@mihcm/theme';
 import { cn } from './internal/cn.js';
 export const TransferList = forwardRef(function TransferList({ className, items, assigned, onAssignedChange, leftLabel = 'Available', rightLabel = 'Assigned', filterPlaceholder = 'Filter…', maxHeight = 200, ...props }, ref) {
     const [leftFilter, setLeftFilter] = useState('');
@@ -49,7 +50,7 @@ export const TransferList = forwardRef(function TransferList({ className, items,
         onAssignedChange(next);
     };
     const moveAllLeft = () => onAssignedChange({});
-    const renderPane = (label, total, filtered, filterValue, onFilterChange, isAssigned) => (_jsxs(View, { className: "rounded-lg border border-border bg-card overflow-hidden", children: [_jsxs(View, { className: "border-b border-border bg-muted/40 px-3 py-2", children: [_jsx(Text, { className: "text-sm font-semibold text-foreground", children: label }), _jsxs(Text, { className: "text-xs text-muted-foreground", children: [total, " ", total === 1 ? 'item' : 'items'] })] }), _jsx(View, { className: "border-b border-border px-3 py-2", children: _jsx(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" }) }), _jsx(FlatList, { data: filtered, keyExtractor: (item) => item, style: { maxHeight }, ListEmptyComponent: _jsx(View, { className: "items-center py-4", children: _jsx(Text, { className: "text-xs text-muted-foreground", children: total === 0 ? (isAssigned ? 'None assigned' : 'No items') : 'No matches' }) }), renderItem: ({ item }) => (_jsxs(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", children: [_jsx(View, { className: cn('h-5 w-5 items-center justify-center rounded-full', isAssigned
+    const renderPane = (label, total, filtered, filterValue, onFilterChange, isAssigned) => (_jsxs(View, { className: "rounded-lg border border-border bg-card overflow-hidden", children: [_jsxs(View, { className: "border-b border-border bg-muted/40 px-3 py-2", children: [_jsx(Text, { className: "text-sm font-semibold text-foreground", children: label }), _jsxs(Text, { className: "text-xs text-muted-foreground", children: [total, " ", total === 1 ? 'item' : 'items'] })] }), _jsx(View, { className: "border-b border-border px-3 py-2", children: _jsx(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: NATIVE_PLACEHOLDER_COLOR }) }), _jsx(FlatList, { data: filtered, keyExtractor: (item) => item, style: { maxHeight }, ListEmptyComponent: _jsx(View, { className: "items-center py-4", children: _jsx(Text, { className: "text-xs text-muted-foreground", children: total === 0 ? (isAssigned ? 'None assigned' : 'No items') : 'No matches' }) }), renderItem: ({ item }) => (_jsxs(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", children: [_jsx(View, { className: cn('h-5 w-5 items-center justify-center rounded-full', isAssigned
                                 ? 'bg-primary'
                                 : 'border-2 border-muted-foreground bg-background'), children: isAssigned && (_jsx(Text, { className: "text-xs text-primary-foreground", children: '✓' })) }), _jsx(Text, { className: "text-sm text-foreground flex-1", numberOfLines: 1, children: item })] })) })] }));
     return (_jsxs(View, { ref: ref, className: cn('gap-3', className), ...props, children: [renderPane(leftLabel, leftItems.length, filteredLeft, leftFilter, setLeftFilter, false), _jsxs(View, { className: "flex-row items-center justify-center gap-3", children: [_jsx(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'), children: _jsx(Text, { className: "text-xs font-medium text-foreground", children: "Assign All \u2193" }) }), _jsx(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'), children: _jsx(Text, { className: "text-xs font-medium text-foreground", children: "Remove All \u2191" }) })] }), renderPane(rightLabel, rightItems.length, filteredRight, rightFilter, setRightFilter, true)] }));

package/dist/TransferList.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.native.js","sourceRoot":"","sources":["../src/TransferList.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TransferList.native.js","sourceRoot":"","sources":["../src/TransferList.native.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mihcm/ui",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "description": "Universal primitives (Button, Input, ...) for React, Next.js, and React Native. Tailwind 4 + NativeWind v5.",
   "license": "MIT",
   "private": false,
@@ -457,7 +457,7 @@
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
-    "@mihcm/theme": "0.2.9",
+    "@mihcm/theme": "0.2.10",
     "@mihcm/tokens": "0.6.3"
   },
   "peerDependencies": {

package/src/CheckboxGrid.native.tsx

@@ -10,6 +10,7 @@
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { FlatList, Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+import { NATIVE_PLACEHOLDER_COLOR } from '@mihcm/theme';
 import { cn } from './internal/cn.js';
 
 export type CheckboxGridSelection = Record<string, boolean>;
@@ -108,7 +109,7 @@ export const CheckboxGrid = forwardRef<View, CheckboxGridProps>(
             placeholder={searchPlaceholder}
             accessibilityLabel="Filter items"
             className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-            placeholderTextColor="#9ca3af"
+            placeholderTextColor={NATIVE_PLACEHOLDER_COLOR}
           />
         </View>
 

package/src/Combobox.native.tsx

@@ -16,6 +16,7 @@ import {
   View,
   type ViewProps,
 } from 'react-native';
+import { NATIVE_PLACEHOLDER_COLOR } from '@mihcm/theme';
 import { cn } from './internal/cn.js';
 
 type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
@@ -119,7 +120,7 @@ export const Combobox = forwardRef<View, ComboboxProps>(
                 <View className="flex-row items-center border-b border-border px-3">
                   <TextInput
                     placeholder={searchPlaceholder}
-                    placeholderTextColor="#888"
+                    placeholderTextColor={NATIVE_PLACEHOLDER_COLOR}
                     value={query}
                     onChangeText={setQuery}
                     className="flex-1 py-3 text-sm text-foreground"

package/src/DataTable/column-filter.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+/**
+ * Column filter input for `@mihcm/ui/DataTable`.
+ *
+ * Three modes depending on the column's faceted metadata:
+ *   1. Faceted + number column → twin min/max inputs.
+ *   2. Faceted + string column → text input with sorted unique-values
+ *      autosuggest dropdown that closes on outside click.
+ *   3. Default → plain text filter input.
+ */
+import { useEffect, useRef, useState } from 'react';
+import type { Column } from '@tanstack/react-table';
+import { Input } from '../Input.js';
+
+interface ColumnFilterInputProps<TData> {
+  column: Column<TData, unknown>;
+  faceted: boolean;
+}
+
+export function ColumnFilterInput<TData>({
+  column,
+  faceted,
+}: ColumnFilterInputProps<TData>) {
+  const columnFilterValue = column.getFilterValue();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (faceted) {
+    const facetedMinMax = column.getFacetedMinMaxValues?.();
+    const isNumberColumn =
+      facetedMinMax !== undefined &&
+      facetedMinMax[0] !== undefined &&
+      typeof facetedMinMax[0] === 'number';
+
+    if (isNumberColumn) {
+      const [min, max] = facetedMinMax as [number, number];
+      const currentRange = (columnFilterValue as [number, number] | undefined) ?? [
+        undefined,
+        undefined,
+      ];
+      return (
+        <div className="grid min-w-[10rem] grid-cols-2 gap-1">
+          <Input
+            type="number"
+            value={currentRange[0] ?? ''}
+            onChange={(e) => {
+              const val = e.target.value ? Number(e.target.value) : undefined;
+              column.setFilterValue((old: [number, number] | undefined) => [
+                val,
+                old?.[1],
+              ]);
+            }}
+            placeholder={`Min (${min})`}
+            className="h-8 min-w-0 bg-background px-2 text-xs shadow-mi-input"
+          />
+          <Input
+            type="number"
+            value={currentRange[1] ?? ''}
+            onChange={(e) => {
+              const val = e.target.value ? Number(e.target.value) : undefined;
+              column.setFilterValue((old: [number, number] | undefined) => [
+                old?.[0],
+                val,
+              ]);
+            }}
+            placeholder={`Max (${max})`}
+            className="h-8 min-w-0 bg-background px-2 text-xs shadow-mi-input"
+          />
+        </div>
+      );
+    }
+
+    const uniqueValues = column.getFacetedUniqueValues?.();
+    if (uniqueValues && uniqueValues.size > 0) {
+      const sortedValues = Array.from(uniqueValues.keys())
+        .filter((v): v is string => typeof v === 'string')
+        .sort();
+      return (
+        <div ref={ref} className="relative">
+          <Input
+            type="text"
+            value={(columnFilterValue as string) ?? ''}
+            onChange={(e) => column.setFilterValue(e.target.value || undefined)}
+            onFocus={() => setOpen(true)}
+            placeholder="Filter..."
+            className="h-8 min-w-[8rem] bg-background px-2 text-xs shadow-mi-input"
+          />
+          {open && sortedValues.length > 0 && (
+            <div className="absolute left-0 top-full z-50 mt-1 max-h-40 min-w-full overflow-y-auto rounded-md border border-border bg-card p-1 shadow-mi-modal">
+              {sortedValues.map((val) => (
+                <button
+                  key={val}
+                  type="button"
+                  className="block w-full rounded px-2 py-1 text-left text-xs hover:bg-muted transition-colors duration-150"
+                  onClick={() => {
+                    column.setFilterValue(val);
+                    setOpen(false);
+                  }}
+                >
+                  {val}{' '}
+                  <span className="text-muted-foreground">
+                    ({uniqueValues.get(val)})
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <Input
+      type="text"
+      value={(columnFilterValue as string) ?? ''}
+      onChange={(e) => column.setFilterValue(e.target.value || undefined)}
+      placeholder="Filter..."
+      className="h-8 min-w-[8rem] bg-background px-2 text-xs shadow-mi-input"
+    />
+  );
+}

package/src/DataTable/column-header.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+/**
+ * DataTable column header with sort affordance.
+ *
+ * Renders an a11y-friendly button with twin arrow indicators when the
+ * column is sortable; falls back to a plain `<span>` for unsortable
+ * columns. Internal helper of `@mihcm/ui/DataTable`.
+ */
+import type { Column } from '@tanstack/react-table';
+import { cn } from '../internal/cn.js';
+
+interface DataTableColumnHeaderProps<TData, TValue> {
+  column: Column<TData, TValue>;
+  title: string;
+  className?: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <span className={className}>{title}</span>;
+  }
+
+  const sorted = column.getIsSorted();
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex items-center gap-1 -ml-1 px-1 py-0.5 rounded-md',
+        'hover:bg-muted transition-colors duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+      onClick={column.getToggleSortingHandler()}
+      aria-label={`Sort by ${title}`}
+    >
+      {title}
+      <span className="inline-flex flex-col" aria-hidden="true">
+        <svg
+          viewBox="0 0 8 4"
+          className={cn(
+            'h-1.5 w-2 transition-transform duration-200',
+            sorted === 'asc' ? 'text-foreground' : 'text-muted-foreground/40',
+          )}
+          fill="currentColor"
+        >
+          <path d="M4 0L8 4H0z" />
+        </svg>
+        <svg
+          viewBox="0 0 8 4"
+          className={cn(
+            'h-1.5 w-2 transition-transform duration-200',
+            sorted === 'desc' ? 'text-foreground' : 'text-muted-foreground/40',
+          )}
+          fill="currentColor"
+        >
+          <path d="M4 4L0 0h8z" />
+        </svg>
+      </span>
+    </button>
+  );
+}

package/src/DataTable/column-visibility.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+/**
+ * Column visibility toggle dropdown for `@mihcm/ui/DataTable`.
+ *
+ * Outside-click handling is local; the trigger uses the existing Button
+ * primitive and items are MiHCM Checkboxes so all theming tokens stay
+ * consistent with the rest of the data table chrome.
+ */
+import { useEffect, useRef, useState } from 'react';
+import type { Table as TanStackTable } from '@tanstack/react-table';
+import { Button } from '../Button.js';
+import { Checkbox } from '../Checkbox.js';
+
+interface ColumnVisibilityDropdownProps<TData> {
+  table: TanStackTable<TData>;
+}
+
+export function ColumnVisibilityDropdown<TData>({
+  table,
+}: ColumnVisibilityDropdownProps<TData>) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          className="h-4 w-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
+          />
+        </svg>
+        Columns
+      </Button>
+      {open && (
+        <div className="absolute right-0 top-full z-50 mt-1 min-w-[10rem] rounded-lg border border-border bg-card p-1 shadow-md">
+          {table.getAllLeafColumns().map((column) => {
+            if (column.id === 'select' || column.id === 'expand') return null;
+            return (
+              <label
+                key={column.id}
+                className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted transition-colors duration-150"
+              >
+                <Checkbox
+                  size="sm"
+                  checked={column.getIsVisible()}
+                  onCheckedChange={(v) => column.toggleVisibility(!!v)}
+                />
+                <span className="capitalize">
+                  {typeof column.columnDef.header === 'string'
+                    ? column.columnDef.header
+                    : column.id}
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/DataTable/index.ts

@@ -0,0 +1,4 @@
+export { ColumnFilterInput } from './column-filter.js';
+export { ColumnVisibilityDropdown } from './column-visibility.js';
+export { DataTableColumnHeader } from './column-header.js';
+export { getCellPinningStyles, getPinningStyles } from './pinning.js';

package/src/DataTable/pinning.ts

@@ -0,0 +1,40 @@
+/**
+ * Pinning style helpers for `@mihcm/ui/DataTable`.
+ *
+ * Returns `React.CSSProperties` for `position: sticky` left/right pinning
+ * with a card background so pinned columns occlude the scrolling body.
+ */
+import type { Column, Header } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+
+export function getPinningStyles<TData>(
+  header: Header<TData, unknown>,
+  columnPinnable: boolean,
+): CSSProperties {
+  if (!columnPinnable) return {};
+  const isPinned = header.column.getIsPinned();
+  if (!isPinned) return {};
+  return {
+    position: 'sticky',
+    left: isPinned === 'left' ? `${header.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${header.getStart('right')}px` : undefined,
+    zIndex: 1,
+    backgroundColor: 'var(--color-card)',
+  };
+}
+
+export function getCellPinningStyles<TData>(
+  cell: { column: Column<TData, unknown> },
+  columnPinnable: boolean,
+): CSSProperties {
+  if (!columnPinnable) return {};
+  const isPinned = cell.column.getIsPinned();
+  if (!isPinned) return {};
+  return {
+    position: 'sticky',
+    left: isPinned === 'left' ? `${cell.column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${cell.column.getStart('right')}px` : undefined,
+    zIndex: 1,
+    backgroundColor: 'var(--color-card)',
+  };
+}