@mihcm/ui 0.14.1

package/src/DatePicker.native.tsx

@@ -0,0 +1,46 @@
+/**
+ * DatePicker (React Native variant).
+ *
+ * Stub for API parity. On native, compose the platform date picker behind
+ * this same prop shape when native date picking is required.
+ *
+ * Wiki: docs/components/DatePicker.md
+ */
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface DatePickerProps extends ViewProps {
+  selected?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholderText?: string;
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  triggerWidth?: 'auto' | 'full';
+  triggerIcon?: unknown;
+}
+
+export function DatePicker({
+  className,
+  triggerClassName,
+  triggerWidth = 'full',
+  placeholderText = 'Pick a date',
+  disabled,
+  ...props
+}: DatePickerProps) {
+  return (
+    <Pressable
+      disabled={disabled}
+      className={cn(
+        'h-10 flex-row items-center rounded-lg border border-border bg-card px-3.5 shadow-mi-input',
+        triggerWidth === 'full' && 'w-full',
+        disabled && 'opacity-50',
+        triggerClassName,
+        className,
+      )}
+      {...props}
+    >
+      <Text className="text-sm text-muted-foreground">{placeholderText}</Text>
+    </Pressable>
+  );
+}

package/src/DatePicker.tsx

@@ -0,0 +1,357 @@
+'use client';
+
+/**
+ * DatePicker (web variant).
+ *
+ * Unified DayPicker v10-backed picker for single dates, ranges, date-time,
+ * and time-only selection. Calendar and DatePicker now share one calendar
+ * engine instead of mixing multiple date picker libraries.
+ *
+ * Wiki: docs/components/DatePicker.md
+ */
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { type DateRange, type Matcher } from '@daypicker/react';
+import { format, setHours, setMinutes } from 'date-fns';
+import { Calendar, type CalendarProps } from './Calendar.js';
+import { Button } from './Button.js';
+import { Popover, PopoverContent, PopoverTrigger } from './Popover.js';
+import { cn } from './internal/cn.js';
+
+type DatePickerBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> & {
+  placeholderText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  isClearable?: boolean;
+  triggerIcon?: ReactNode | undefined;
+  triggerClassName?: string | undefined;
+  triggerVariant?: 'field' | 'icon';
+  triggerWidth?: 'auto' | 'full';
+  align?: 'start' | 'center' | 'end';
+  dateFormat?: string;
+  showTimeSelect?: boolean;
+  showTimeSelectOnly?: boolean;
+  timeLabel?: string;
+  timeFormat?: string;
+  timeIntervals?: number;
+  showWeekNumbers?: boolean;
+  monthsShown?: number;
+  showIcon?: boolean;
+  renderCustomHeader?: (props: {
+    headerDate: Date;
+    changeYear: (year: number) => void;
+    changeMonth: (month: number) => void;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+  }) => ReactNode;
+  dayClassName?: (day: number, date: Date) => string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDays?: Matcher | Matcher[];
+  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disabled'>;
+  closeOnRangeComplete?: boolean;
+};
+
+export type DatePickerProps =
+  | (DatePickerBaseProps & {
+      selectsRange?: false;
+      selected?: Date | null;
+      onChange?: (date: Date | null) => void;
+      startDate?: never;
+      endDate?: never;
+    })
+  | (DatePickerBaseProps & {
+      selectsRange: true;
+      selected?: never;
+      startDate?: Date | null;
+      endDate?: Date | null;
+      onChange?: (date: [Date | null, Date | null]) => void;
+    });
+
+const CalendarIcon = () => (
+  <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="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
+  </svg>
+);
+
+const ClearIcon = () => (
+  <svg aria-hidden viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth={2} className="h-4 w-4">
+    <path strokeLinecap="round" d="M6 6l8 8M14 6l-8 8" />
+  </svg>
+);
+
+function mergeTime(date: Date, source?: Date | null) {
+  if (!source) return date;
+  return setMinutes(setHours(date, source.getHours()), source.getMinutes());
+}
+
+function dateDisplay(date: Date | null | undefined, dateFormat: string, includeTime: boolean, timeFormat: string) {
+  if (!date) return '';
+  const hasTimeToken = /[hHkKmsa]/.test(dateFormat);
+  return format(date, includeTime && !hasTimeToken ? `${dateFormat} ${timeFormat}` : dateFormat);
+}
+
+function TimeInput({
+  value,
+  onChange,
+  label,
+}: {
+  value: Date | null | undefined;
+  onChange: (date: Date) => void;
+  label: string;
+}) {
+  const text = value ? format(value, 'HH:mm') : '';
+
+  return (
+    <label className="grid min-w-0 gap-1.5 text-xs font-medium text-muted-foreground">
+      <span>{label}</span>
+      <input
+        type="time"
+        value={text}
+        onChange={(event) => {
+          const [hours, minutes] = event.target.value.split(':').map(Number);
+          const base = value ?? new Date();
+          onChange(setMinutes(setHours(base, hours ?? 0), minutes ?? 0));
+        }}
+        className={cn(
+          'h-10 min-w-[8rem] rounded-lg border border-border bg-card px-3 text-sm text-foreground shadow-mi-input outline-none',
+          'transition-[border-color,box-shadow] duration-200',
+          'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/25',
+        )}
+      />
+    </label>
+  );
+}
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(
+  props,
+  ref,
+) {
+  const {
+    className,
+    placeholderText = 'Pick a date',
+    disabled,
+    readOnly,
+    isClearable,
+    triggerIcon,
+    triggerClassName,
+    triggerVariant = 'field',
+    triggerWidth = 'auto',
+    align = 'start',
+    dateFormat = 'MMM d, yyyy',
+    showTimeSelect = false,
+    showTimeSelectOnly = false,
+    timeLabel = 'Time',
+    timeFormat = 'p',
+    timeIntervals: _timeIntervals,
+    showWeekNumbers = false,
+    monthsShown,
+    showIcon = true,
+    renderCustomHeader: _renderCustomHeader,
+    dayClassName: _dayClassName,
+    minDate,
+    maxDate,
+    disabledDays,
+    calendarProps,
+    closeOnRangeComplete = false,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const selectsRange = props.selectsRange === true;
+  const singleValue = selectsRange ? null : props.selected ?? null;
+  const rangeValue: DateRange | undefined = selectsRange
+    ? { from: props.startDate ?? undefined, to: props.endDate ?? undefined }
+    : undefined;
+
+  const disabledMatchers = useMemo(() => {
+    const matchers: Matcher[] = [];
+    if (disabledDays) matchers.push(...(Array.isArray(disabledDays) ? disabledDays : [disabledDays]));
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : undefined;
+  }, [disabledDays, maxDate, minDate]);
+
+  const resolvedCalendarProps = useMemo(
+    () => ({
+      captionLayout: calendarProps?.captionLayout ?? 'dropdown',
+      startMonth: calendarProps?.startMonth ?? minDate ?? new Date(1900, 0),
+      endMonth: calendarProps?.endMonth ?? maxDate ?? new Date(2100, 11),
+      ...calendarProps,
+    }),
+    [calendarProps, maxDate, minDate],
+  );
+
+  const iconNode = showIcon === false ? null : triggerIcon !== undefined ? triggerIcon : <CalendarIcon />;
+  const label = selectsRange
+    ? [dateDisplay(props.startDate, dateFormat, showTimeSelect, timeFormat), dateDisplay(props.endDate, dateFormat, showTimeSelect, timeFormat)]
+        .filter(Boolean)
+        .join(' - ')
+    : dateDisplay(
+        singleValue,
+        showTimeSelectOnly ? timeFormat : dateFormat,
+        showTimeSelect,
+        timeFormat,
+      );
+  const hasValue = Boolean(label);
+
+  function clearValue() {
+    if (selectsRange) props.onChange?.([null, null]);
+    else props.onChange?.(null);
+  }
+
+  function renderCalendar() {
+    if (showTimeSelectOnly) {
+      return (
+        <div className="p-3">
+          <TimeInput
+            value={singleValue}
+            label={timeLabel}
+            onChange={(date) => {
+              if (!selectsRange) props.onChange?.(date);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (selectsRange) {
+      return (
+        <>
+          <Calendar
+            mode="range"
+            selected={rangeValue}
+            onSelect={(range) => {
+              props.onChange?.([range?.from ?? null, range?.to ?? null]);
+              if (closeOnRangeComplete && range?.from && range?.to && !showTimeSelect) setOpen(false);
+            }}
+            disabled={disabledMatchers}
+            numberOfMonths={resolvedCalendarProps.numberOfMonths ?? monthsShown ?? 1}
+            showWeekNumber={resolvedCalendarProps.showWeekNumber ?? showWeekNumbers}
+            {...resolvedCalendarProps}
+          />
+          {showTimeSelect ? (
+            <div className="grid gap-3 border-t border-border bg-muted/30 p-3 sm:grid-cols-2">
+              <TimeInput
+                value={props.startDate}
+                label="Start"
+                onChange={(date) => props.onChange?.([date, props.endDate ?? null])}
+              />
+              <TimeInput
+                value={props.endDate}
+                label="End"
+                onChange={(date) => props.onChange?.([props.startDate ?? null, date])}
+              />
+            </div>
+          ) : null}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Calendar
+          mode="single"
+          selected={singleValue ?? undefined}
+          onSelect={(date) => {
+            props.onChange?.(date ? mergeTime(date, singleValue) : null);
+            if (date && !showTimeSelect) setOpen(false);
+          }}
+          disabled={disabledMatchers}
+          numberOfMonths={resolvedCalendarProps.numberOfMonths ?? monthsShown ?? 1}
+          showWeekNumber={resolvedCalendarProps.showWeekNumber ?? showWeekNumbers}
+          {...resolvedCalendarProps}
+        />
+        {showTimeSelect ? (
+          <div className="border-t border-border bg-muted/30 p-3">
+            <TimeInput
+              value={singleValue}
+              label={timeLabel}
+              onChange={(date) => props.onChange?.(date)}
+            />
+          </div>
+        ) : null}
+      </>
+    );
+  }
+
+  return (
+    <div ref={ref} className={cn(triggerWidth === 'full' ? 'w-full' : 'w-fit max-w-full', className)}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => !readOnly && !disabled && setOpen(nextOpen)}
+        align={align}
+        {...(triggerWidth === 'full' ? { className: 'w-full' } : {})}
+      >
+        <PopoverTrigger>
+          <button
+            type="button"
+            aria-label={triggerVariant === 'icon' ? label || placeholderText : undefined}
+            disabled={disabled}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            data-clearable={isClearable && hasValue ? 'true' : 'false'}
+            className={cn(
+              'mihcm-date-picker-trigger flex h-10 min-w-0 items-center rounded-lg border border-border bg-card text-left text-body-sm text-foreground shadow-mi-input',
+              'ring-offset-background transition-colors duration-150',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              disabled && 'cursor-not-allowed opacity-50',
+              triggerVariant === 'icon'
+                ? 'size-10 justify-center'
+                : triggerWidth === 'full'
+                  ? 'w-full'
+                  : 'w-fit min-w-[14rem] max-w-full',
+              triggerClassName,
+            )}
+          >
+            {triggerVariant === 'icon' ? (
+              <span className="flex size-full items-center justify-center text-muted-foreground">
+                {iconNode ?? <CalendarIcon />}
+              </span>
+            ) : iconNode ? (
+              <span className="flex h-full w-11 shrink-0 items-center justify-center border-r border-border text-muted-foreground">
+                {iconNode}
+              </span>
+            ) : null}
+            {triggerVariant === 'field' ? (
+              <span className={cn('min-w-0 flex-1 truncate px-3', !hasValue && 'text-muted-foreground')}>
+                {label || placeholderText}
+              </span>
+            ) : null}
+            {triggerVariant === 'field' && isClearable && hasValue ? (
+              <span
+                role="button"
+                tabIndex={-1}
+                aria-label="Clear date"
+                className="mr-2 inline-flex size-7 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  clearValue();
+                }}
+              >
+                <ClearIcon />
+              </span>
+            ) : null}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align={align}
+          size="auto"
+          className={cn(
+            'w-max max-w-[calc(100vw-2rem)] overflow-x-auto overflow-y-hidden p-0 animate-none',
+            align === 'end' && 'origin-top-right',
+            align === 'center' && 'origin-top',
+          )}
+        >
+          {renderCalendar()}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});

package/src/Dialog.native.tsx

@@ -0,0 +1,181 @@
+/**
+ * Dialog (React Native variant).
+ *
+ * Uses RN `<Modal>` as the overlay. Same composable API as web:
+ *
+ *   <Dialog open={open} onOpenChange={setOpen}>
+ *     <DialogContent>
+ *       <DialogHeader>
+ *         <DialogTitle>Edit profile</DialogTitle>
+ *         <DialogDescription>Make changes…</DialogDescription>
+ *       </DialogHeader>
+ *       <DialogBody>…</DialogBody>
+ *       <DialogFooter>…</DialogFooter>
+ *     </DialogContent>
+ *   </Dialog>
+ *
+ * Wiki: docs/components/Dialog.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+  type TextProps,
+  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 };
+type ClassedTextProps = Omit<TextProps, 'style'> & { className?: string };
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+      statusBarTranslucent
+    >
+      <Pressable
+        onPress={() => onOpenChange(false)}
+        className="flex-1 items-center justify-center bg-black/50"
+        accessibilityRole="none"
+      >
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+export const dialogContentVariants = cva(
+  'rounded-xl border border-border bg-card',
+  {
+    variants: {
+      size: {
+        sm: 'w-80',
+        md: 'w-96',
+        lg: 'w-[480px]',
+        xl: 'w-[600px]',
+        full: 'w-full',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+export interface DialogContentProps
+  extends ClassedViewProps,
+    VariantProps<typeof dialogContentVariants> {}
+
+export const DialogContent = forwardRef<View, DialogContentProps>(
+  function DialogContent({ className, size, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn(dialogContentVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Close button ───────────────────────────────────────────────────── */
+
+export interface DialogCloseProps extends ClassedViewProps {
+  onClose?: () => void;
+}
+
+export const DialogClose = forwardRef<View, DialogCloseProps>(
+  function DialogClose({ className, onClose, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        className={cn('absolute right-4 top-4 p-1 opacity-60', className)}
+        {...props}
+      >
+        <Text className="text-foreground text-base">✕</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Layout helpers ─────────────────────────────────────────────────── */
+
+export const DialogHeader = forwardRef<View, ClassedViewProps>(
+  function DialogHeader({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('gap-1.5 p-6 pb-0', className)} {...props} />
+    );
+  },
+);
+
+export const DialogBody = forwardRef<ScrollView, ClassedViewProps>(
+  function DialogBody({ className, children, ...props }, ref) {
+    return (
+      <ScrollView
+        ref={ref as never}
+        className={cn('p-6', className)}
+        {...props}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+export const DialogFooter = forwardRef<View, ClassedViewProps>(
+  function DialogFooter({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center justify-end gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogTitle = forwardRef<Text, ClassedTextProps>(
+  function DialogTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="header"
+        className={cn('text-lg font-semibold leading-tight text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogDescription = forwardRef<Text, ClassedTextProps>(
+  function DialogDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);