@mihcm/ui 0.14.1

package/src/ContextMenu.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+/**
+ * ContextMenu (web variant — React DOM).
+ *
+ * Right-click context menu powered by Radix. Shares visual styling with
+ * DropdownMenu for consistency.
+ *
+ *   <ContextMenu>
+ *     <ContextMenuTrigger>
+ *       <div className="border p-8">Right-click here</div>
+ *     </ContextMenuTrigger>
+ *     <ContextMenuContent>
+ *       <ContextMenuItem onSelect={() => {}}>Edit</ContextMenuItem>
+ *       <ContextMenuSeparator />
+ *       <ContextMenuItem variant="destructive" onSelect={() => {}}>Delete</ContextMenuItem>
+ *     </ContextMenuContent>
+ *   </ContextMenu>
+ *
+ * Wiki: docs/components/ContextMenu.md
+ */
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Root + Trigger ──────────────────────────────────────────────── */
+
+export const ContextMenu = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+/* ── Content ─────────────────────────────────────────────────────── */
+
+export const ContextMenuContent = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(function ContextMenuContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-lg p-1',
+          'border border-border bg-card text-card-foreground shadow-md',
+          'animate-dropdown-in',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
+
+/* ── Item ────────────────────────────────────────────────────────── */
+
+const contextMenuItemVariants = cva(
+  'relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-body-sm outline-none ' +
+    'transition-colors duration-150 ' +
+    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'focus:bg-muted focus:text-foreground',
+        destructive: 'text-destructive focus:bg-destructive/10',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface ContextMenuItemProps
+  extends ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    VariantProps<typeof contextMenuItemVariants> {
+  inset?: boolean;
+}
+
+export const ContextMenuItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(function ContextMenuItem({ className, variant, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      className={cn(contextMenuItemVariants({ variant }), inset && 'pl-8', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── CheckboxItem ────────────────────────────────────────────────── */
+
+export const ContextMenuCheckboxItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(function ContextMenuCheckboxItem({ className, children, checked = false, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-body-sm outline-none',
+        'transition-colors duration-150',
+        'focus:bg-muted focus:text-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2.5} className="h-3.5 w-3.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5L6.5 11.5L12.5 5.5" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
+
+/* ── RadioItem ───────────────────────────────────────────────────── */
+
+export const ContextMenuRadioItem = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-body-sm outline-none',
+        'transition-colors duration-150',
+        'focus:bg-muted focus:text-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <span className="h-2 w-2 rounded-full bg-foreground" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
+
+/* ── Label ────────────────────────────────────────────────────────── */
+
+export const ContextMenuLabel = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(function ContextMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', inset && 'pl-8', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── Separator ───────────────────────────────────────────────────── */
+
+export const ContextMenuSeparator = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(function ContextMenuSeparator({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── SubTrigger ──────────────────────────────────────────────────── */
+
+export const ContextMenuSubTrigger = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-body-sm outline-none',
+        'focus:bg-muted focus:text-foreground',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2} className="ml-auto h-4 w-4">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 4l4 4-4 4" />
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});
+
+/* ── SubContent ──────────────────────────────────────────────────── */
+
+export const ContextMenuSubContent = forwardRef<
+  ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(function ContextMenuSubContent({ className, ...props }, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-lg p-1',
+          'border border-border bg-card text-card-foreground shadow-md',
+          'animate-dropdown-in',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
+
+/* ── Shortcut ────────────────────────────────────────────────────── */
+
+export function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn('ml-auto pl-4 text-xs tracking-widest text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}

package/src/DataTable.native.tsx

@@ -0,0 +1,70 @@
+/**
+ * DataTable (React Native variant — stub).
+ *
+ * TanStack Table is a web-only library. This stub renders a basic
+ * ScrollView list as a placeholder so the universal import contract
+ * is satisfied.
+ *
+ * Wiki: docs/components/DataTable.md
+ */
+import { forwardRef } from 'react';
+import { ScrollView, View, Text, type ViewProps } from 'react-native';
+import { createColumnHelper, type ColumnDef, type Row, type RowSelectionState } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+
+export { createColumnHelper };
+export type { ColumnDef, Row, RowSelectionState };
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  sortable?: boolean;
+  paginated?: boolean;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  selectable?: boolean;
+  columnVisibility?: boolean;
+  expandable?: boolean;
+  getRowCanExpand?: (row: Row<TData>) => boolean;
+  renderSubComponent?: (props: { row: Row<TData> }) => ReactNode;
+  onRowSelectionChange?: (selection: RowSelectionState) => void;
+  className?: string;
+  emptyMessage?: string;
+}
+
+export function DataTable<TData, TValue>({
+  data,
+  className,
+  emptyMessage = 'No results.',
+}: DataTableProps<TData, TValue>) {
+  return (
+    <ScrollView className={cn('border border-border rounded-lg', className)}>
+      {data.length === 0 ? (
+        <View className="p-8 items-center">
+          <Text className="text-sm text-muted-foreground">{emptyMessage}</Text>
+        </View>
+      ) : (
+        data.map((row, i) => (
+          <View
+            key={i}
+            className={cn(
+              'border-b border-border px-3 py-2',
+              i === data.length - 1 && 'border-b-0',
+            )}
+          >
+            <Text className="text-sm text-foreground">
+              {JSON.stringify(row)}
+            </Text>
+          </View>
+        ))
+      )}
+    </ScrollView>
+  );
+}
+
+export function DataTableColumnHeader({ title }: { title: string; column?: unknown; className?: string }) {
+  return <Text className="text-sm font-medium text-muted-foreground">{title}</Text>;
+}