@mihcm/ui 0.14.1

package/src/Dropzone.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * Dropzone (web variant).
+ *
+ * File drop/input primitive powered by react-dropzone. The component
+ * exposes accepted/rejected files only; it does not read file contents.
+ *
+ * Wiki: docs/components/Dropzone.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useDropzone, type Accept, type DropzoneOptions, type FileRejection } from 'react-dropzone';
+import { cn } from './internal/cn.js';
+
+export interface DropzoneProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onDrop' | 'children'>,
+    Pick<DropzoneOptions, 'maxFiles' | 'maxSize' | 'minSize' | 'multiple' | 'disabled' | 'validator'> {
+  accept?: Accept;
+  heading?: ReactNode;
+  description?: ReactNode;
+  browseLabel?: ReactNode;
+  children?: (state: {
+    isDragActive: boolean;
+    isDragAccept: boolean;
+    isDragReject: boolean;
+    acceptedFiles: File[];
+    fileRejections: FileRejection[];
+  }) => ReactNode;
+  onFilesAccepted?: (files: File[]) => void;
+  onFilesRejected?: (rejections: FileRejection[]) => void;
+}
+
+export const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(function Dropzone(
+  {
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    multiple = true,
+    disabled,
+    validator,
+    heading = 'Drop files here',
+    description = 'Drag files into this area or browse from your device.',
+    browseLabel = 'Browse files',
+    children,
+    onFilesAccepted,
+    onFilesRejected,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const dropzone = useDropzone({
+    ...(accept !== undefined ? { accept } : {}),
+    ...(maxFiles !== undefined ? { maxFiles } : {}),
+    ...(maxSize !== undefined ? { maxSize } : {}),
+    ...(minSize !== undefined ? { minSize } : {}),
+    multiple,
+    ...(disabled !== undefined ? { disabled } : {}),
+    ...(validator !== undefined ? { validator } : {}),
+    ...(onFilesAccepted !== undefined ? { onDropAccepted: onFilesAccepted } : {}),
+    ...(onFilesRejected !== undefined ? { onDropRejected: onFilesRejected } : {}),
+  });
+
+  const { getRootProps, getInputProps, acceptedFiles, fileRejections, isDragAccept, isDragActive, isDragReject } = dropzone;
+
+  return (
+    <div
+      {...getRootProps({
+        ...props,
+        ref,
+        className: cn(
+          'flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card p-6 text-center shadow-mi-card transition-colors duration-200',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          isDragActive && 'border-primary bg-primary/5',
+          isDragAccept && 'border-success bg-success/5',
+          isDragReject && 'border-destructive bg-destructive/5',
+          disabled && 'cursor-not-allowed opacity-60',
+          className,
+        ),
+      })}
+    >
+      <input {...getInputProps()} />
+      {children ? (
+        children({ isDragActive, isDragAccept, isDragReject, acceptedFiles: Array.from(acceptedFiles), fileRejections: Array.from(fileRejections) })
+      ) : (
+        <div className="space-y-1">
+          <p className="font-semibold text-foreground">{heading}</p>
+          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="pt-2 text-sm font-medium text-primary">{browseLabel}</p>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/EmptyState.native.tsx

@@ -0,0 +1,43 @@
+/**
+ * EmptyState (React Native variant).
+ *
+ * Centered placeholder for empty sections — icon, title, description,
+ * and action slot.
+ *
+ * Wiki: docs/components/EmptyState.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface EmptyStateProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export const EmptyState = forwardRef<View, EmptyStateProps>(function EmptyState(
+  { className, icon, title, description, action, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn('items-center justify-center px-6 py-12', className)}
+      {...props}
+    >
+      {icon && <View className="mb-4">{icon}</View>}
+      <Text className="text-lg font-semibold text-foreground text-center">
+        {title}
+      </Text>
+      {description && (
+        <Text className="mt-1 text-sm text-muted-foreground text-center">
+          {description}
+        </Text>
+      )}
+      {action && <View className="mt-4">{action}</View>}
+    </View>
+  );
+});

package/src/EmptyState.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+/**
+ * EmptyState (web variant — React DOM).
+ *
+ * Placeholder shown when a section has no data. Centered layout with
+ * optional icon, title, description, and action button slot.
+ *
+ * Wiki: docs/components/EmptyState.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  /** Optional icon or illustration rendered above the title. */
+  icon?: ReactNode;
+  /** Primary heading text. */
+  title: string;
+  /** Optional muted description below the title. */
+  description?: string;
+  /** Optional action slot (typically a Button). */
+  action?: ReactNode;
+}
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
+  { className, icon, title, description, action, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-col items-center justify-center px-6 py-8 text-center',
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="mb-3 text-muted-foreground [&>svg]:h-8 [&>svg]:w-8">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+      {description && (
+        <p className="mt-0.5 max-w-xs text-sm text-muted-foreground leading-snug">
+          {description}
+        </p>
+      )}
+      {action && <div className="mt-3">{action}</div>}
+    </div>
+  );
+});

package/src/Form.native.tsx

@@ -0,0 +1,94 @@
+/**
+ * Form field building blocks (React Native variant).
+ *
+ * TanStack Form works with React Native, so the building-block
+ * components (FormItem, FormLabel, FormDescription, FormMessage)
+ * render using RN primitives. The integrated fields (FormInput, etc.)
+ * are web-only for now — consumers can compose the building blocks
+ * with RN form controls directly.
+ *
+ * Wiki: docs/components/Form.md
+ */
+import { type ReactNode } from 'react';
+import { View, Text } from 'react-native';
+import { cn } from './internal/cn.js';
+
+/* Re-export useForm for consumer convenience */
+export { useForm } from '@tanstack/react-form';
+
+/* ── FormItem ─────────────────────────────────────────────────────── */
+
+export interface FormItemProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function FormItem({ className, children }: FormItemProps) {
+  return (
+    <View className={cn('flex flex-col gap-1.5', className)}>
+      {children}
+    </View>
+  );
+}
+
+/* ── FormLabel ────────────────────────────────────────────────────── */
+
+export interface FormLabelProps {
+  required?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export function FormLabel({ required, className, children }: FormLabelProps) {
+  return (
+    <Text className={cn('text-sm font-semibold text-foreground', className)}>
+      {children}
+      {required ? (
+        <Text className="ml-0.5 text-destructive"> *</Text>
+      ) : null}
+    </Text>
+  );
+}
+
+/* ── FormDescription ──────────────────────────────────────────────── */
+
+export interface FormDescriptionProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function FormDescription({ className, children }: FormDescriptionProps) {
+  return (
+    <Text className={cn('text-xs text-muted-foreground', className)}>
+      {children}
+    </Text>
+  );
+}
+
+/* ── FormMessage ──────────────────────────────────────────────────── */
+
+export interface FormMessageProps {
+  errors?: string[];
+  className?: string;
+}
+
+export function FormMessage({ errors, className }: FormMessageProps) {
+  const firstError = errors?.filter(Boolean)[0];
+  if (!firstError) return null;
+
+  return (
+    <Text
+      accessibilityRole="alert"
+      className={cn('text-xs text-destructive', className)}
+    >
+      {firstError}
+    </Text>
+  );
+}
+
+/* ── Type re-exports ──────────────────────────────────────────────── */
+
+export type {
+  FormApi,
+  FieldValidators,
+} from '@tanstack/react-form';