@mihcm/ui 0.14.1 → 0.15.1

package/src/DataTable.tsx

@@ -15,7 +15,6 @@ import {
   Fragment,
   useState,
   useMemo,
-  useCallback,
   useEffect,
   useRef,
   type ReactNode,
@@ -64,268 +63,21 @@ import { Button } from './Button.js';
 import { Checkbox } from './Checkbox.js';
 import { Select, SelectTrigger, SelectContent, SelectItem } from './Select.js';
 import { cn } from './internal/cn.js';
+import {
+  ColumnFilterInput,
+  ColumnVisibilityDropdown,
+  DataTableColumnHeader,
+  getCellPinningStyles,
+  getPinningStyles,
+} from './DataTable/index.js';
+
+export { DataTableColumnHeader };
 
 /* ── Re-export for consumer convenience ───────────────────────────── */
 
 export { createColumnHelper };
 export type { ColumnDef, Row, RowSelectionState, TableVariant };
 
-/* ── DataTableColumnHeader ────────────────────────────────────────── */
-
-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>
-        <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>
-  );
-}
-
-/* ── Column visibility dropdown ───────────────────────────────────── */
-
-function ColumnVisibilityDropdown<TData>({
-  table,
-}: {
-  table: TanStackTable<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
-          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>
-  );
-}
-
-/* ── Column filter input ──────────────────────────────────────────── */
-
-function ColumnFilterInput<TData>({
-  column,
-  faceted,
-}: {
-  column: Column<TData, unknown>;
-  faceted: boolean;
-}) {
-  const columnFilterValue = column.getFilterValue();
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  /* Close faceted dropdown on outside click */
-  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]);
-
-  /* Faceted: number column → min/max range */
-  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>
-      );
-    }
-
-    /* Faceted: string column → unique values list */
-    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>
-      );
-    }
-  }
-
-  /* Default: simple text input */
-  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"
-    />
-  );
-}
-
 /* ── DataTable ────────────────────────────────────────────────────── */
 
 export interface DataTableProps<TData, TValue> {
@@ -608,41 +360,6 @@ export function DataTable<TData, TValue>({
     ? virtualRows.map((virtualRow) => regularRows[virtualRow.index]).filter((row): row is Row<TData> => Boolean(row))
     : regularRows;
 
-  /* ── Pinning style helper ──────────────────────────────────────── */
-  const getPinningStyles = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (header: Header<any, unknown>): React.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, #fff)',
-      };
-    },
-    [columnPinnable],
-  );
-
-  const getCellPinningStyles = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (cell: { column: Column<any, unknown> }): React.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, #fff)',
-      };
-    },
-    [columnPinnable],
-  );
-
   /* ── Render ─────────────────────────────────────────────────────── */
   return (
     <div className={cn('w-full space-y-4', className)}>
@@ -705,7 +422,7 @@ export function DataTable<TData, TValue>({
                       colSpan={header.colSpan}
                       style={{
                         width: resizable ? header.getSize() : (header.getSize() !== 150 ? header.getSize() : undefined),
-                        ...getPinningStyles(header),
+                        ...getPinningStyles(header, columnPinnable),
                       }}
                       className={cn(
                         'h-12 whitespace-nowrap px-3 py-2 align-middle',
@@ -786,7 +503,7 @@ export function DataTable<TData, TValue>({
                         colSpan={header.colSpan}
                         style={{
                           width: resizable ? header.getSize() : (header.getSize() !== 150 ? header.getSize() : undefined),
-                          ...getPinningStyles(header),
+                          ...getPinningStyles(header, columnPinnable),
                         }}
                         className={cn(
                           'h-12 border-t border-border px-3 py-2 align-middle',
@@ -816,7 +533,7 @@ export function DataTable<TData, TValue>({
                     className="bg-muted/30"
                   >
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} style={getCellPinningStyles(cell)}>
+                      <TableCell key={cell.id} style={getCellPinningStyles(cell, columnPinnable)}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
@@ -838,7 +555,7 @@ export function DataTable<TData, TValue>({
                     data-state={row.getIsSelected() ? 'selected' : undefined}
                   >
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} style={getCellPinningStyles(cell)}>
+                      <TableCell key={cell.id} style={getCellPinningStyles(cell, columnPinnable)}>
                         {/* Grouped cell rendering */}
                         {groupable && cell.getIsGrouped() ? (
                           <button
@@ -913,7 +630,7 @@ export function DataTable<TData, TValue>({
                     className="bg-muted/30"
                   >
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id} style={getCellPinningStyles(cell)}>
+                      <TableCell key={cell.id} style={getCellPinningStyles(cell, columnPinnable)}>
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}

package/src/Dialog.native.tsx

@@ -38,9 +38,11 @@ export interface DialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   children: ReactNode;
+  /** Tailwind classes applied to the backdrop. Mirrors the web Dialog root. */
+  className?: string;
 }
 
-export function Dialog({ open, onOpenChange, children }: DialogProps) {
+export function Dialog({ open, onOpenChange, children, className }: DialogProps) {
   return (
     <Modal
       visible={open}
@@ -51,7 +53,7 @@ export function Dialog({ open, onOpenChange, children }: DialogProps) {
     >
       <Pressable
         onPress={() => onOpenChange(false)}
-        className="flex-1 items-center justify-center bg-black/50"
+        className={cn('flex-1 items-center justify-center bg-black/50', className)}
         accessibilityRole="none"
       >
         <Pressable onPress={(e) => e.stopPropagation()}>

package/src/Form/building-blocks.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+/**
+ * Form building blocks — layout and accessibility scaffolding you compose
+ * freely around any control: FormItem, FormLabel, FormDescription, FormMessage.
+ */
+import { type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+import { Label } from '../Label.js';
+
+/* ── FormItem ─────────────────────────────────────────────────────── */
+
+export interface FormItemProps extends HTMLAttributes<HTMLDivElement> {}
+
+/** Vertical stack container for label + control + description + error. */
+export function FormItem({ className, children, ...props }: FormItemProps) {
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/* ── FormLabel ────────────────────────────────────────────────────── */
+
+export interface FormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+  htmlFor?: string;
+  required?: boolean;
+}
+
+/** Styled label with optional required asterisk. Delegates to the existing Label primitive. */
+export function FormLabel({ htmlFor, required, className, children, ...props }: FormLabelProps) {
+  return (
+    <Label
+      {...(htmlFor !== undefined && { htmlFor })}
+      {...(required !== undefined && { required })}
+      {...(className !== undefined && { className })}
+      {...props}
+    >
+      {children}
+    </Label>
+  );
+}
+
+/* ── FormDescription ──────────────────────────────────────────────── */
+
+export interface FormDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {}
+
+/** Muted helper text rendered below the control. */
+export function FormDescription({ className, children, ...props }: FormDescriptionProps) {
+  return (
+    <p className={cn('text-xs text-muted-foreground', className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+/* ── FormMessage ──────────────────────────────────────────────────── */
+
+export interface FormMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Array of error strings — only the first is displayed. */
+  errors?: string[];
+}
+
+/** Error message display with warning icon. Transitions in/out smoothly. */
+export function FormMessage({ errors, className, ...props }: FormMessageProps) {
+  const firstError = errors?.filter(Boolean)[0];
+  if (!firstError) return null;
+
+  return (
+    <p
+      role="alert"
+      className={cn(
+        'flex items-center gap-1 text-xs text-destructive',
+        'transition-all duration-150',
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-3.5 w-3.5 shrink-0"
+      >
+        <path d="M8 2L1.5 13h13L8 2z" />
+        <path d="M8 6v3" />
+        <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />
+      </svg>
+      {firstError}
+    </p>
+  );
+}