@mihcm/ui 0.14.1

package/src/Collapsible.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+/**
+ * Collapsible (web variant — React DOM).
+ *
+ * Simple expand/collapse panel powered by Radix Collapsible.
+ * Unlike Accordion, Collapsible is a single open/close toggle
+ * with no item/group semantics.
+ *
+ *   <Collapsible>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="ghost">Toggle</Button>
+ *     </CollapsibleTrigger>
+ *     <CollapsibleContent>
+ *       <p>Hidden content</p>
+ *     </CollapsibleContent>
+ *   </Collapsible>
+ *
+ * Wiki: docs/components/Collapsible.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { cn } from './internal/cn.js';
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface CollapsibleTriggerProps
+  extends ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger> {
+  variant?: 'plain' | 'ghost' | 'outline' | 'soft';
+  size?: 'auto' | 'sm' | 'md' | 'lg' | 'icon';
+  justify?: 'start' | 'center' | 'between';
+  fullWidth?: boolean;
+  rotateIcon?: boolean;
+}
+
+export interface CollapsibleContentProps
+  extends ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> {
+  duration?: 'fast' | 'normal' | 'slow';
+  animation?: 'height' | 'fade' | 'none';
+  variant?: 'plain' | 'panel' | 'card' | 'inset';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+interface CollapsibleOptionsContextValue {
+  triggerVariant?: CollapsibleTriggerProps['variant'] | undefined;
+  triggerSize?: CollapsibleTriggerProps['size'] | undefined;
+  triggerJustify?: CollapsibleTriggerProps['justify'] | undefined;
+  triggerFullWidth?: boolean | undefined;
+  triggerRotateIcon?: boolean | undefined;
+  contentDuration?: CollapsibleContentProps['duration'] | undefined;
+  contentAnimation?: CollapsibleContentProps['animation'] | undefined;
+  contentVariant?: CollapsibleContentProps['variant'] | undefined;
+  contentPadding?: CollapsibleContentProps['padding'] | undefined;
+}
+
+export interface CollapsibleProps
+  extends ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>,
+    CollapsibleOptionsContextValue {}
+
+const CollapsibleOptionsContext = createContext<CollapsibleOptionsContextValue>({});
+
+export const Collapsible = forwardRef<
+  ElementRef<typeof CollapsiblePrimitive.Root>,
+  CollapsibleProps
+>(function Collapsible(
+  {
+    triggerVariant,
+    triggerSize,
+    triggerJustify,
+    triggerFullWidth,
+    triggerRotateIcon,
+    contentDuration,
+    contentAnimation,
+    contentVariant,
+    contentPadding,
+    children,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <CollapsibleOptionsContext.Provider
+      value={{
+        triggerVariant,
+        triggerSize,
+        triggerJustify,
+        triggerFullWidth,
+        triggerRotateIcon,
+        contentDuration,
+        contentAnimation,
+        contentVariant,
+        contentPadding,
+      }}
+    >
+      <CollapsiblePrimitive.Root ref={ref} {...props}>
+        {children}
+      </CollapsiblePrimitive.Root>
+    </CollapsibleOptionsContext.Provider>
+  );
+});
+
+/* ── Trigger ────────────────────────────────────────────────────────── */
+
+const triggerVariantClasses: Record<NonNullable<CollapsibleTriggerProps['variant']>, string> = {
+  plain: '',
+  ghost: 'rounded-md text-foreground hover:bg-muted hover:text-foreground',
+  outline: 'rounded-md border border-border bg-background text-foreground shadow-mi-card hover:bg-muted/50',
+  soft: 'rounded-md bg-muted/60 text-foreground hover:bg-muted',
+};
+
+const triggerSizeClasses: Record<NonNullable<CollapsibleTriggerProps['size']>, string> = {
+  auto: '',
+  sm: 'h-8 px-2.5 text-xs',
+  md: 'h-9 px-3 text-sm',
+  lg: 'h-10 px-4 text-sm',
+  icon: 'size-9 p-0',
+};
+
+const triggerJustifyClasses: Record<NonNullable<CollapsibleTriggerProps['justify']>, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  between: 'justify-between',
+};
+
+export const CollapsibleTrigger = forwardRef<
+  ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
+  CollapsibleTriggerProps
+>(function CollapsibleTrigger(
+  {
+    className,
+    variant,
+    size,
+    justify,
+    fullWidth,
+    rotateIcon,
+    ...props
+  },
+  ref,
+) {
+  const options = useContext(CollapsibleOptionsContext);
+  const resolvedVariant = variant ?? options.triggerVariant ?? 'plain';
+  const resolvedSize = size ?? options.triggerSize ?? 'auto';
+  const resolvedJustify = justify ?? options.triggerJustify ?? 'center';
+  const resolvedFullWidth = fullWidth || options.triggerFullWidth || false;
+  const resolvedRotateIcon = rotateIcon ?? options.triggerRotateIcon ?? true;
+
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      ref={ref}
+      className={cn(
+        'inline-flex shrink-0 items-center gap-2 whitespace-nowrap',
+        'transition-colors duration-200',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        '[&>svg]:shrink-0',
+        resolvedRotateIcon && [
+          '[&>svg]:transition-transform [&>svg]:duration-300 [&>svg]:ease-[cubic-bezier(0.16,1,0.3,1)]',
+          'data-[state=open]:[&>svg:last-child]:rotate-180',
+        ],
+        triggerVariantClasses[resolvedVariant],
+        triggerSizeClasses[resolvedSize],
+        triggerJustifyClasses[resolvedJustify],
+        resolvedFullWidth && 'w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Content ────────────────────────────────────────────────────────── */
+
+const collapsibleDurationClasses: Record<NonNullable<CollapsibleContentProps['duration']>, string> = {
+  fast: 'duration-300',
+  normal: 'duration-500',
+  slow: 'duration-700',
+};
+
+const contentVariantClasses: Record<NonNullable<CollapsibleContentProps['variant']>, string> = {
+  plain: '',
+  panel: 'rounded-md border border-border bg-background shadow-mi-card',
+  card: 'rounded-lg border border-border bg-card shadow-mi-card',
+  inset: 'rounded-md bg-muted/50',
+};
+
+const contentPaddingClasses: Record<NonNullable<CollapsibleContentProps['padding']>, string> = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-5',
+};
+
+export const CollapsibleContent = forwardRef<
+  ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  CollapsibleContentProps
+>(function CollapsibleContent(
+  {
+    className,
+    duration,
+    animation,
+    variant,
+    padding,
+    ...props
+  },
+  ref,
+) {
+  const options = useContext(CollapsibleOptionsContext);
+  const resolvedDuration = duration ?? options.contentDuration ?? 'normal';
+  const resolvedAnimation = animation ?? options.contentAnimation ?? 'height';
+  const resolvedVariant = variant ?? options.contentVariant ?? 'plain';
+  const resolvedPadding = padding ?? options.contentPadding ?? 'none';
+
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn(
+        'overflow-hidden motion-reduce:transition-none motion-reduce:animate-none',
+        collapsibleDurationClasses[resolvedDuration],
+        resolvedAnimation === 'height' && [
+          'transition-all ease-[cubic-bezier(0.16,1,0.3,1)]',
+          'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+        ],
+        resolvedAnimation === 'fade' && [
+          'transition-opacity ease-[cubic-bezier(0.16,1,0.3,1)]',
+          'data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
+        ],
+        resolvedAnimation === 'none' && 'transition-none',
+        contentVariantClasses[resolvedVariant],
+        contentPaddingClasses[resolvedPadding],
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/Combobox.native.tsx

@@ -0,0 +1,171 @@
+/**
+ * Combobox (React Native variant).
+ *
+ * An autocomplete/search input using Modal + FlatList.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Combobox.md
+ */
+import { forwardRef, useState, useCallback } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Types ─────────────────────────────────────────────────────────── */
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps extends ClassedViewProps {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+}
+
+/* ── Component ────────────────────────────────────────────────────── */
+
+export const Combobox = forwardRef<View, ComboboxProps>(
+  function Combobox(
+    {
+      options,
+      value,
+      onValueChange,
+      placeholder = 'Select…',
+      searchPlaceholder = 'Search…',
+      emptyText = 'No results found.',
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+
+    const selectedLabel = options.find((o) => o.value === value)?.label;
+
+    const filtered = query
+      ? options.filter((o) =>
+          o.label.toLowerCase().includes(query.toLowerCase()),
+        )
+      : options;
+
+    const handleSelect = useCallback(
+      (optionValue: string) => {
+        onValueChange?.(optionValue === value ? '' : optionValue);
+        setOpen(false);
+        setQuery('');
+      },
+      [onValueChange, value],
+    );
+
+    return (
+      <View ref={ref} className={cn(className)} {...props}>
+        {/* Trigger */}
+        <Pressable
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          accessibilityRole="combobox"
+          accessibilityState={{ expanded: open, disabled: !!disabled }}
+          className={cn(
+            'h-12 flex-row items-center justify-between rounded-lg border border-border bg-card px-3',
+            disabled && 'opacity-50',
+          )}
+        >
+          <Text
+            className={cn(
+              'flex-1 text-sm',
+              selectedLabel ? 'text-foreground' : 'text-muted-foreground',
+            )}
+            numberOfLines={1}
+          >
+            {selectedLabel ?? placeholder}
+          </Text>
+          <Text className="text-xs text-muted-foreground">▾</Text>
+        </Pressable>
+
+        {/* Modal dropdown */}
+        <Modal
+          visible={open}
+          transparent
+          animationType="fade"
+          onRequestClose={() => setOpen(false)}
+          statusBarTranslucent
+        >
+          <Pressable
+            onPress={() => setOpen(false)}
+            className="flex-1 items-center justify-center bg-black/40"
+            accessibilityRole="none"
+          >
+            <Pressable onPress={(e) => e.stopPropagation()}>
+              <View className="w-80 max-h-96 rounded-xl border border-border bg-card shadow-lg">
+                {/* Search */}
+                <View className="flex-row items-center border-b border-border px-3">
+                  <TextInput
+                    placeholder={searchPlaceholder}
+                    placeholderTextColor="#888"
+                    value={query}
+                    onChangeText={setQuery}
+                    className="flex-1 py-3 text-sm text-foreground"
+                    autoFocus
+                  />
+                </View>
+
+                {/* List */}
+                {filtered.length === 0 ? (
+                  <View className="items-center py-8">
+                    <Text className="text-sm text-muted-foreground">{emptyText}</Text>
+                  </View>
+                ) : (
+                  <FlatList
+                    data={filtered}
+                    keyExtractor={(item) => item.value}
+                    className="p-1"
+                    renderItem={({ item }) => (
+                      <Pressable
+                        disabled={item.disabled}
+                        onPress={() => handleSelect(item.value)}
+                        className={cn(
+                          'flex-row items-center rounded-lg px-3 py-3',
+                          item.disabled && 'opacity-50',
+                        )}
+                      >
+                        <Text
+                          className={cn(
+                            'mr-2 text-sm',
+                            value === item.value ? 'text-primary' : 'opacity-0',
+                          )}
+                        >
+                          ✓
+                        </Text>
+                        <Text className="flex-1 text-sm text-foreground" numberOfLines={1}>
+                          {item.label}
+                        </Text>
+                      </Pressable>
+                    )}
+                  />
+                )}
+              </View>
+            </Pressable>
+          </Pressable>
+        </Modal>
+      </View>
+    );
+  },
+);

package/src/Combobox.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+/**
+ * Combobox (web variant — React DOM).
+ *
+ * An autocomplete/search input that combines a text field with a
+ * filterable dropdown list. Built on Popover + Command (cmdk).
+ *
+ *   <Combobox
+ *     options={[
+ *       { value: 'react', label: 'React' },
+ *       { value: 'vue', label: 'Vue' },
+ *     ]}
+ *     value={value}
+ *     onValueChange={setValue}
+ *     placeholder="Select framework…"
+ *   />
+ *
+ * Wiki: docs/components/Combobox.md
+ */
+import { forwardRef, useState, useCallback, useId, useRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+/* ── Types ─────────────────────────────────────────────────────────── */
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** List of selectable options. */
+  options: ComboboxOption[];
+  /** Currently selected value. */
+  value?: string;
+  /** Called when the selection changes. */
+  onValueChange?: (value: string) => void;
+  /** Placeholder text shown when nothing is selected. */
+  placeholder?: string;
+  /** Placeholder text for the search input. */
+  searchPlaceholder?: string;
+  /** Text shown when no options match the search query. */
+  emptyText?: string;
+  /** Whether the combobox is disabled. */
+  disabled?: boolean;
+}
+
+/* ── Component ────────────────────────────────────────────────────── */
+
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(function Combobox(
+  {
+    options,
+    value,
+    onValueChange,
+    placeholder = 'Select…',
+    searchPlaceholder = 'Search…',
+    emptyText = 'No results found.',
+    disabled,
+    className,
+    'aria-label': ariaLabel,
+    ...props
+  },
+  ref,
+) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const listboxId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const selectedLabel = options.find((o) => o.value === value)?.label;
+
+  const filtered = query
+    ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  const enabledFiltered = filtered.filter((o) => !o.disabled);
+
+  const handleSelect = useCallback(
+    (optionValue: string) => {
+      onValueChange?.(optionValue === value ? '' : optionValue);
+      setOpen(false);
+      setQuery('');
+      setActiveIndex(-1);
+      // Restore focus to trigger
+      triggerRef.current?.focus();
+    },
+    [onValueChange, value],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setActiveIndex(-1);
+        triggerRef.current?.focus();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          setActiveIndex(0);
+        } else {
+          setActiveIndex((prev) => {
+            const next = prev + 1;
+            return next >= enabledFiltered.length ? 0 : next;
+          });
+        }
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (open) {
+          setActiveIndex((prev) => {
+            const next = prev - 1;
+            return next < 0 ? enabledFiltered.length - 1 : next;
+          });
+        }
+      } else if (e.key === 'Enter' && open && activeIndex >= 0) {
+        e.preventDefault();
+        const option = enabledFiltered[activeIndex];
+        if (option) handleSelect(option.value);
+      } else if (e.key === 'Home' && open) {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === 'End' && open) {
+        e.preventDefault();
+        setActiveIndex(enabledFiltered.length - 1);
+      }
+    },
+    [open, activeIndex, enabledFiltered, handleSelect],
+  );
+
+  return (
+    <div ref={ref} className={cn('relative', className)} {...props}>
+      {/* Trigger button */}
+      <button
+        ref={triggerRef}
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-label={ariaLabel}
+        aria-controls={open ? listboxId : undefined}
+        aria-activedescendant={
+          open && activeIndex >= 0
+            ? `${listboxId}-option-${enabledFiltered[activeIndex]?.value}`
+            : undefined
+        }
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex h-10 w-full items-center justify-between rounded-lg border border-border bg-card px-3.5 py-2 text-body-sm shadow-mi-input',
+          'ring-offset-background',
+          'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          !selectedLabel && 'text-muted-foreground',
+        )}
+      >
+        <span className="truncate">{selectedLabel ?? placeholder}</span>
+        <svg
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          className="ml-2 h-4 w-4 shrink-0 opacity-50"
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6l4 4 4-4" />
+        </svg>
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <div
+          className={cn(
+            'absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-lg',
+            'border border-border bg-card shadow-mi-input',
+            'animate-dropdown-in',
+          )}
+        >
+          {/* Search input */}
+          <div className="flex items-center border-b border-border px-3">
+            <svg
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 h-4 w-4 shrink-0 opacity-50"
+              aria-hidden="true"
+            >
+              <circle cx="7" cy="7" r="4.5" />
+              <path strokeLinecap="round" d="M10.5 10.5L14 14" />
+            </svg>
+            <input
+              type="text"
+              role="searchbox"
+              aria-autocomplete="list"
+              aria-controls={listboxId}
+              placeholder={searchPlaceholder}
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value);
+                setActiveIndex(-1);
+              }}
+              onKeyDown={handleKeyDown}
+              className={cn(
+                'flex h-9 w-full bg-transparent py-2 text-body-sm outline-none',
+                'placeholder:text-muted-foreground',
+              )}
+              autoFocus
+            />
+          </div>
+
+          {/* Options list */}
+          <div className="max-h-60 overflow-y-auto p-1" role="listbox" id={listboxId}>
+            {filtered.length === 0 ? (
+              <div className="px-2 py-6 text-center text-sm text-muted-foreground">{emptyText}</div>
+            ) : (
+              filtered.map((option) => {
+                const isActive =
+                  !option.disabled && enabledFiltered[activeIndex]?.value === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    id={`${listboxId}-option-${option.value}`}
+                    type="button"
+                    role="option"
+                    aria-selected={value === option.value}
+                    disabled={option.disabled}
+                    onClick={() => handleSelect(option.value)}
+                    className={cn(
+                      'relative flex w-full cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-body-sm outline-none',
+                      'transition-colors duration-150',
+                      'hover:bg-muted focus:bg-muted',
+                      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                      option.disabled && 'pointer-events-none opacity-50',
+                      isActive && 'bg-muted',
+                    )}
+                  >
+                    <svg
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth={2.5}
+                      aria-hidden="true"
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        value === option.value ? 'opacity-100' : 'opacity-0',
+                      )}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M3.5 8.5L6.5 11.5L12.5 5.5"
+                      />
+                    </svg>
+                    {option.label}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Click outside to close */}
+      {open && (
+        <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} role="presentation" />
+      )}
+    </div>
+  );
+});