@mihcm/ui 0.14.1

package/src/Command.native.tsx

@@ -0,0 +1,71 @@
+/**
+ * Command (React Native variant).
+ *
+ * Stub for API parity. On native, command palette patterns
+ * are typically implemented as a modal with a search input
+ * and a FlatList. This provides the type surface.
+ *
+ * Wiki: docs/components/Command.md
+ */
+import type { ReactNode } from 'react';
+import { View, TextInput, Text, type ViewProps, type TextInputProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface CommandProps extends ViewProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function Command({ className, children, ...props }: CommandProps) {
+  return <View className={cn(className)} {...props}>{children}</View>;
+}
+
+export interface CommandDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function CommandDialog({ children }: CommandDialogProps) {
+  return <>{children}</>;
+}
+
+export interface CommandInputProps extends TextInputProps {
+  className?: string;
+}
+
+export function CommandInput({ className, ...props }: CommandInputProps) {
+  return <TextInput className={cn(className)} {...props} />;
+}
+
+export function CommandList({ className, children, ...props }: CommandProps) {
+  return <View className={cn(className)} {...props}>{children}</View>;
+}
+
+export function CommandEmpty({ className, children, ...props }: CommandProps) {
+  return (
+    <View className={cn(className)} {...props}>
+      {typeof children === 'string' ? <Text>{children}</Text> : children}
+    </View>
+  );
+}
+
+export function CommandGroup({ className, children, ...props }: CommandProps & { heading?: string }) {
+  return <View className={cn(className)} {...props}>{children}</View>;
+}
+
+export function CommandItem({ className, children, ...props }: CommandProps) {
+  return <View className={cn(className)} {...props}>{children}</View>;
+}
+
+export interface CommandSeparatorProps extends ViewProps {
+  className?: string;
+}
+
+export function CommandSeparator({ className, ...props }: CommandSeparatorProps) {
+  return <View className={cn('h-px bg-border', className)} {...props} />;
+}
+
+export function CommandShortcut({ children, className }: { children: ReactNode; className?: string }) {
+  return <Text className={cn(className)}>{children}</Text>;
+}

package/src/Command.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+/**
+ * Command (web variant — React DOM).
+ *
+ * ⌘K-style command palette powered by cmdk. Composable API with
+ * search input, item groups, and keyboard navigation.
+ *
+ *   <Command>
+ *     <CommandInput placeholder="Search…" />
+ *     <CommandList>
+ *       <CommandEmpty>No results.</CommandEmpty>
+ *       <CommandGroup heading="Pages">
+ *         <CommandItem>Dashboard</CommandItem>
+ *         <CommandItem>Settings</CommandItem>
+ *       </CommandGroup>
+ *     </CommandList>
+ *   </Command>
+ *
+ * For a dialog-mounted command palette, wrap in CommandDialog:
+ *
+ *   <CommandDialog open={open} onOpenChange={setOpen}>
+ *     <CommandInput … />
+ *     <CommandList>…</CommandList>
+ *   </CommandDialog>
+ *
+ * Wiki: docs/components/Command.md
+ */
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Dialog, DialogContent } from './Dialog.js';
+import { cn } from './internal/cn.js';
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export const Command = forwardRef<
+  ElementRef<typeof CommandPrimitive>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(function Command({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive
+      ref={ref}
+      className={cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-xl bg-card text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Dialog wrapper ─────────────────────────────────────────────────── */
+
+export interface CommandDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function CommandDialog({ open, onOpenChange, children }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/* ── Input ──────────────────────────────────────────────────────────── */
+
+export const CommandInput = forwardRef<
+  ElementRef<typeof CommandPrimitive.Input>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(function CommandInput({ className, ...props }, ref) {
+  return (
+    <div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        className="mr-2 h-4 w-4 shrink-0 opacity-50"
+        aria-hidden
+      >
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.3-4.3" />
+      </svg>
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none',
+          'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+
+/* ── List ───────────────────────────────────────────────────────────── */
+
+export const CommandList = forwardRef<
+  ElementRef<typeof CommandPrimitive.List>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(function CommandList({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.List
+      ref={ref}
+      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── Empty ──────────────────────────────────────────────────────────── */
+
+export const CommandEmpty = forwardRef<
+  ElementRef<typeof CommandPrimitive.Empty>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(function CommandEmpty(props, ref) {
+  return (
+    <CommandPrimitive.Empty
+      ref={ref}
+      className="py-6 text-center text-sm text-muted-foreground"
+      {...props}
+    />
+  );
+});
+
+/* ── Group ──────────────────────────────────────────────────────────── */
+
+export const CommandGroup = forwardRef<
+  ElementRef<typeof CommandPrimitive.Group>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(function CommandGroup({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Group
+      ref={ref}
+      className={cn(
+        'overflow-hidden p-1 text-foreground',
+        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5',
+        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        '[&_[cmdk-group-heading]]:text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Separator ──────────────────────────────────────────────────────── */
+
+export const CommandSeparator = forwardRef<
+  ElementRef<typeof CommandPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(function CommandSeparator({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── Item ───────────────────────────────────────────────────────────── */
+
+export const CommandItem = forwardRef<
+  ElementRef<typeof CommandPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(function CommandItem({ className, ...props }, ref) {
+  return (
+    <CommandPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none',
+        'data-[selected=true]:bg-muted data-[selected=true]:text-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+        '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Shortcut ──────────────────────────────────────────────────────── */
+
+export function CommandShortcut({
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}

package/src/ContextMenu.native.tsx

@@ -0,0 +1,313 @@
+/**
+ * ContextMenu (React Native variant).
+ *
+ * Uses Modal for the overlay and Pressable for items.
+ * Long-press on the trigger opens the menu.
+ * Same sub-component API as the web variant.
+ *
+ * Wiki: docs/components/ContextMenu.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface ContextMenuContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const ContextMenuCtx = createContext<ContextMenuContextValue | null>(null);
+
+function useCtx() {
+  const ctx = useContext(ContextMenuCtx);
+  if (!ctx) throw new Error('ContextMenu sub-components must be used within <ContextMenu>.');
+  return ctx;
+}
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export interface ContextMenuProps {
+  children: ReactNode;
+}
+
+export function ContextMenu({ children }: ContextMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <ContextMenuCtx.Provider value={{ open: isOpen, setOpen: setIsOpen }}>
+      {children}
+    </ContextMenuCtx.Provider>
+  );
+}
+
+/* ── Trigger (long-press) ─────────────────────────────────────────── */
+
+export interface ContextMenuTriggerProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const ContextMenuTrigger = forwardRef<View, ContextMenuTriggerProps>(
+  function ContextMenuTrigger({ className, children, ...props }, ref) {
+    const ctx = useCtx();
+
+    return (
+      <Pressable
+        ref={ref as never}
+        onLongPress={() => ctx.setOpen(true)}
+        delayLongPress={500}
+        className={cn(className)}
+        {...props}
+      >
+        {children}
+      </Pressable>
+    );
+  },
+);
+
+/* ── Content (Modal overlay) ──────────────────────────────────────── */
+
+export interface ContextMenuContentProps extends ClassedViewProps {}
+
+export const ContextMenuContent = forwardRef<View, ContextMenuContentProps>(
+  function ContextMenuContent({ className, children, ...props }, ref) {
+    const ctx = useCtx();
+
+    return (
+      <Modal
+        visible={ctx.open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => ctx.setOpen(false)}
+        statusBarTranslucent
+      >
+        <Pressable
+          onPress={() => ctx.setOpen(false)}
+          className="flex-1 items-center justify-center bg-black/40"
+          accessibilityRole="none"
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              ref={ref}
+              accessibilityRole="menu"
+              className={cn(
+                'min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg',
+                className,
+              )}
+              {...props}
+            >
+              {children}
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+const contextMenuItemVariants = cva(
+  'flex-row items-center rounded-lg px-3 py-3',
+  {
+    variants: {
+      variant: {
+        default: '',
+        destructive: '',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface ContextMenuItemProps
+  extends ClassedViewProps,
+    VariantProps<typeof contextMenuItemVariants> {
+  disabled?: boolean;
+  onSelect?: () => void;
+  inset?: boolean;
+  children: ReactNode;
+}
+
+export const ContextMenuItem = forwardRef<View, ContextMenuItemProps>(
+  function ContextMenuItem({ className, variant, disabled, onSelect, inset, children, ...props }, ref) {
+    const ctx = useCtx();
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="menuitem"
+        accessibilityState={{ disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => {
+          if (!disabled) {
+            onSelect?.();
+            ctx.setOpen(false);
+          }
+        }}
+        className={cn(
+          contextMenuItemVariants({ variant }),
+          disabled && 'opacity-50',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      >
+        <Text
+          className={cn(
+            'flex-1 text-sm',
+            variant === 'destructive' ? 'text-destructive' : 'text-foreground',
+          )}
+          numberOfLines={1}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── CheckboxItem ─────────────────────────────────────────────────── */
+
+export interface ContextMenuCheckboxItemProps extends ClassedViewProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export const ContextMenuCheckboxItem = forwardRef<View, ContextMenuCheckboxItemProps>(
+  function ContextMenuCheckboxItem({ className, checked, onCheckedChange, disabled, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: !!checked, disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => onCheckedChange?.(!checked)}
+        className={cn('flex-row items-center rounded-lg px-3 py-3 pl-8', disabled && 'opacity-50', className)}
+        {...props}
+      >
+        {checked && (
+          <Text className="absolute left-2 text-foreground">✓</Text>
+        )}
+        <Text className="flex-1 text-sm text-foreground" numberOfLines={1}>{children}</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── RadioItem ────────────────────────────────────────────────────── */
+
+export interface ContextMenuRadioItemProps extends ClassedViewProps {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export const ContextMenuRadioItem = forwardRef<View, ContextMenuRadioItemProps>(
+  function ContextMenuRadioItem({ className, disabled, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="radio"
+        accessibilityState={{ disabled: !!disabled }}
+        disabled={disabled}
+        className={cn('flex-row items-center rounded-lg px-3 py-3 pl-8', disabled && 'opacity-50', className)}
+        {...props}
+      >
+        <Text className="flex-1 text-sm text-foreground" numberOfLines={1}>{children}</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Group + RadioGroup ───────────────────────────────────────────── */
+
+export const ContextMenuGroup = forwardRef<View, ClassedViewProps>(
+  function ContextMenuGroup({ className, ...props }, ref) {
+    return <View ref={ref} className={cn('py-1', className)} {...props} />;
+  },
+);
+
+export const ContextMenuSub = ({ children }: { children: ReactNode }) => <>{children}</>;
+export const ContextMenuRadioGroup = ({ children }: { children: ReactNode }) => <>{children}</>;
+
+/* ── Label ────────────────────────────────────────────────────────── */
+
+export interface ContextMenuLabelProps extends ClassedViewProps {
+  inset?: boolean;
+  children: ReactNode;
+}
+
+export const ContextMenuLabel = forwardRef<View, ContextMenuLabelProps>(
+  function ContextMenuLabel({ className, inset, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('px-3 py-1.5', inset && 'pl-8', className)} {...props}>
+        <Text className="text-xs font-semibold text-muted-foreground">{children}</Text>
+      </View>
+    );
+  },
+);
+
+/* ── Separator ────────────────────────────────────────────────────── */
+
+export const ContextMenuSeparator = forwardRef<View, ClassedViewProps>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('my-1 h-px bg-border', className)} {...props} />
+    );
+  },
+);
+
+/* ── SubTrigger + SubContent (passthrough on native) ─────────────── */
+
+export const ContextMenuSubTrigger = forwardRef<View, ClassedViewProps & { inset?: boolean; children: ReactNode }>(
+  function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('flex-row items-center rounded-lg px-3 py-3', inset && 'pl-8', className)} {...props}>
+        <Text className="flex-1 text-sm text-foreground">{children}</Text>
+        <Text className="text-xs text-muted-foreground">›</Text>
+      </View>
+    );
+  },
+);
+
+export const ContextMenuSubContent = forwardRef<View, ClassedViewProps>(
+  function ContextMenuSubContent({ className, ...props }, ref) {
+    return <View ref={ref} className={cn(className)} {...props} />;
+  },
+);
+
+/* ── Shortcut ─────────────────────────────────────────────────────── */
+
+export interface ContextMenuShortcutProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const ContextMenuShortcut = forwardRef<View, ContextMenuShortcutProps>(
+  function ContextMenuShortcut({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('ml-auto pl-4', className)} {...props}>
+        <Text className="text-xs tracking-widest text-muted-foreground">{children}</Text>
+      </View>
+    );
+  },
+);