@mihcm/ui 0.14.1

package/src/Calendar.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+/**
+ * Calendar (web variant — React DOM).
+ *
+ * Date picker calendar grid powered by @daypicker/react v10.
+ * Styled with design system tokens.
+ *
+ *   <Calendar mode="single" selected={date} onSelect={setDate} />
+ *   <Calendar mode="range" selected={range} onSelect={setRange} />
+ *
+ * Wiki: docs/components/Calendar.md
+ */
+import { type ComponentProps, type CSSProperties } from 'react';
+import { DayPicker, type ChevronProps, type DropdownProps } from '@daypicker/react';
+import { cn } from './internal/cn.js';
+
+export type CalendarProps = ComponentProps<typeof DayPicker>;
+
+/** Day cell — compact popup geometry with an accessible 36 px day target. */
+const CELL = 40;
+const TARGET = 36;
+const DAY_COLUMNS = 7;
+
+export function Calendar({
+  className,
+  classNames,
+  components,
+  numberOfMonths = 1,
+  style,
+  styles,
+  showOutsideDays = true,
+  showWeekNumber = false,
+  ...props
+}: CalendarProps) {
+  const gridWidth = (showWeekNumber ? DAY_COLUMNS + 1 : DAY_COLUMNS) * CELL;
+  const monthGap = 16;
+  const navLeft = numberOfMonths > 1 ? -((numberOfMonths - 1) * (gridWidth + monthGap)) : 0;
+
+  return (
+    <DayPicker
+      numberOfMonths={numberOfMonths}
+      showOutsideDays={showOutsideDays}
+      showWeekNumber={showWeekNumber}
+      className={cn('rdp-root p-3', className)}
+      style={{
+        display: 'inline-block',
+        '--rdp-day-width': `${CELL}px`,
+        '--rdp-day-height': `${CELL}px`,
+        '--rdp-day_button-width': `${TARGET}px`,
+        '--rdp-day_button-height': `${TARGET}px`,
+        '--mi-calendar-grid-width': `${gridWidth}px`,
+        '--mi-calendar-month-gap': `${monthGap}px`,
+        '--mi-calendar-nav-left': `${navLeft}px`,
+        ...style,
+      } as CSSProperties}
+      styles={{
+        ...styles,
+        month_grid: { width: gridWidth, tableLayout: 'fixed', ...styles?.month_grid },
+      }}
+      components={{
+        Dropdown: CalendarDropdown,
+        Chevron: CalendarChevron,
+        ...components,
+      }}
+      classNames={{
+        months: 'relative flex flex-col gap-[var(--mi-calendar-month-gap)] sm:flex-row',
+        /* month is relative so nav buttons can overlay the caption row */
+        month: 'relative flex flex-col gap-3',
+
+        /* ── Caption ─────────────────────────────────── */
+        month_caption: 'flex min-h-11 items-center justify-center px-10',
+        caption_label: 'rdp-caption-label text-base font-semibold text-foreground',
+        dropdowns: 'rdp-dropdowns flex items-center justify-center gap-1.5',
+        dropdown_root: cn(
+          'rdp-dropdown-root relative inline-flex h-9 min-w-[5.5rem] items-center justify-center',
+        ),
+        dropdown: cn(
+          'rdp-dropdown h-9 w-full appearance-none rounded-md border border-input bg-card px-2.5 pr-7',
+          'text-center text-sm font-semibold 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',
+        ),
+        months_dropdown: 'min-w-[6.5rem]',
+        years_dropdown: 'min-w-[5.5rem]',
+        chevron: 'rdp-chevron shrink-0 text-current',
+
+        /* ── Navigation ──────────────────────────────── */
+        nav: cn(
+          'absolute left-0 right-0 top-0 z-10 flex h-11 items-center justify-between px-0.5 pointer-events-none',
+          'sm:left-[var(--mi-calendar-nav-left)]',
+        ),
+        button_previous: cn(
+          'rdp-button_previous pointer-events-auto absolute left-0 top-1.5 z-20 inline-flex size-8 items-center justify-center rounded-full',
+          'text-foreground/70 transition-colors duration-200',
+          'hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          '[&_svg]:size-4',
+        ),
+        button_next: cn(
+          'rdp-button_next pointer-events-auto absolute right-0 top-1.5 z-20 inline-flex size-8 items-center justify-center rounded-full',
+          'text-foreground/70 transition-colors duration-200',
+          'hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          '[&_svg]:size-4',
+        ),
+
+        /* ── Grid ────────────────────────────────────── */
+        month_grid: 'rdp-month-grid border-separate border-spacing-0',
+        weekdays: '',
+        weekday: 'h-8 pb-1.5 text-center text-xs font-medium text-muted-foreground',
+        week_number_header: 'rdp-week-number-header h-8 w-10 pb-1.5 text-center text-xs font-semibold text-muted-foreground',
+        week_number: 'rdp-week-number w-10 p-0.5 text-center align-middle text-xs font-semibold text-muted-foreground',
+        week: '',
+
+        /* ── Day cell (td) ───────────────────────────── */
+        day: cn(
+          'relative size-10 p-0.5 text-center align-middle text-sm',
+          'focus-within:relative focus-within:z-20',
+        ),
+
+        /* ── Day button ──────────────────────────────── */
+        day_button: cn(
+          'inline-flex size-9 items-center justify-center rounded-full p-0',
+          'text-sm font-normal transition-colors duration-150',
+          'hover:bg-muted hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'aria-selected:opacity-100',
+        ),
+
+        /* ── Selection states ────────────────────────── */
+        range_start: 'day-range-start [&>button]:rounded-full',
+        range_end: 'day-range-end [&>button]:rounded-full',
+        selected: cn(
+          '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:shadow-sm',
+          '[&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground',
+          '[&>button:focus]:bg-primary [&>button:focus]:text-primary-foreground',
+        ),
+        today: cn(
+          'font-semibold',
+          '[&>button]:ring-1 [&>button]:ring-primary/40',
+        ),
+        outside: 'day-outside',
+        disabled: '[&>button]:cursor-not-allowed [&>button]:text-muted-foreground/20 [&>button:hover]:bg-transparent',
+        range_middle: cn(
+          '[&>button]:rounded-lg [&>button]:!bg-primary/8 [&>button]:!text-foreground [&>button]:!shadow-none',
+          'dark:[&>button]:!bg-primary/12 dark:[&>button]:!text-foreground',
+        ),
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDropdown({ options, className, ...selectProps }: DropdownProps) {
+  return (
+    <span className="rdp-dropdown-root relative inline-flex h-9 min-w-[5.5rem] items-center justify-center">
+      <select
+        {...selectProps}
+        className={cn(
+          'rdp-dropdown h-9 w-full appearance-none rounded-md border border-input bg-card px-2.5 pr-7',
+          'text-center text-sm font-semibold 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',
+          className,
+        )}
+      >
+        {options?.map(({ value, label, disabled }) => (
+          <option key={value} value={value} disabled={disabled}>
+            {label}
+          </option>
+        ))}
+      </select>
+      <CalendarChevron
+        aria-hidden={true}
+        orientation="down"
+        size={16}
+        className="pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground"
+      />
+    </span>
+  );
+}
+
+function CalendarChevron({
+  className,
+  disabled,
+  orientation = 'left',
+  size = 20,
+  style,
+  ...props
+}: ChevronProps & { 'aria-hidden'?: boolean }) {
+  const points = {
+    up: 'M6 15l6-6 6 6',
+    down: 'M6 9l6 6 6-6',
+    left: 'M15 18l-6-6 6-6',
+    right: 'M9 6l6 6-6 6',
+  }[orientation];
+
+  return (
+    <svg
+      {...props}
+      className={cn('rdp-chevron shrink-0 fill-none stroke-current stroke-2', disabled && 'opacity-35', className)}
+      style={style}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+    >
+      <path d={points} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/Card.native.tsx

@@ -0,0 +1,82 @@
+/**
+ * Card (React Native variant).
+ *
+ * Same composable pieces as the web variant. Headings render as
+ * `<Text>` with `accessibilityRole="header"` so screen readers
+ * announce them correctly.
+ *
+ * Wiki: docs/components/Card.md
+ */
+import { forwardRef } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+type ClassedTextProps = Omit<TextProps, 'style'> & { className?: string };
+
+export const Card = forwardRef<View, ClassedViewProps>(function Card(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn('rounded-lg border border-border bg-background', className)}
+      {...props}
+    />
+  );
+});
+
+export const CardHeader = forwardRef<View, ClassedViewProps>(function CardHeader(
+  { className, ...props },
+  ref,
+) {
+  return <View ref={ref} className={cn('gap-1.5 p-6', className)} {...props} />;
+});
+
+export const CardTitle = forwardRef<Text, ClassedTextProps>(function CardTitle(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <Text
+      ref={ref}
+      accessibilityRole="header"
+      className={cn('text-lg font-semibold leading-tight text-foreground', className)}
+      {...props}
+    />
+  );
+});
+
+export const CardDescription = forwardRef<Text, ClassedTextProps>(function CardDescription(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <Text
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+});
+
+export const CardContent = forwardRef<View, ClassedViewProps>(function CardContent(
+  { className, ...props },
+  ref,
+) {
+  return <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
+});
+
+export const CardFooter = forwardRef<View, ClassedViewProps>(function CardFooter(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn('flex-row items-center gap-2 p-6 pt-0', className)}
+      {...props}
+    />
+  );
+});

package/src/Card.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+/**
+ * Card (web variant — React DOM).
+ *
+ * A composable container surface. Exports six pieces that compose
+ * into the standard card pattern:
+ *
+ *   <Card>
+ *     <CardHeader>
+ *       <CardTitle>...</CardTitle>
+ *       <CardDescription>...</CardDescription>
+ *     </CardHeader>
+ *     <CardContent>...</CardContent>
+ *     <CardFooter>...</CardFooter>
+ *   </Card>
+ *
+ * Every piece is just a styled div / heading. No internal state, no
+ * special behaviour — Card is a layout primitive. Pair with `Button`
+ * and `Text` for content.
+ *
+ * Wiki: docs/components/Card.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function Card({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-xl border border-secondary bg-card text-card-foreground transition-colors duration-150',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CardHeader({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-1.5 p-6', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function CardTitle({ className, ...props }, ref) {
+    return (
+      <h3
+        ref={ref}
+        className={cn('text-lg font-semibold leading-tight tracking-tight', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function CardDescription({ className, ...props }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CardContent({ className, ...props }, ref) {
+    return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
+  },
+);
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CardFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Carousel.native.tsx

@@ -0,0 +1,224 @@
+/**
+ * Carousel (React Native variant).
+ *
+ * Horizontal paging carousel backed by FlatList.
+ * Uses `data` + `renderItem` instead of composable children
+ * (FlatList requires a data-driven pattern).
+ *
+ *   <Carousel
+ *     data={slides}
+ *     renderItem={({ item }) => <CarouselItem><Text>{item.title}</Text></CarouselItem>}
+ *   />
+ *
+ * Wiki: docs/components/Carousel.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  FlatList,
+  Pressable,
+  View,
+  useWindowDimensions,
+  type FlatListProps,
+  type ListRenderItemInfo,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+/* ── Types ────────────────────────────────────────────────────────── */
+
+/** Mirror the web CarouselApi shape for cross-platform consumers. */
+export type CarouselApi = {
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  selectedIndex: number;
+  scrollTo: (index: number) => void;
+};
+
+export type CarouselProps<T> = Omit<
+  FlatListProps<T>,
+  'horizontal' | 'pagingEnabled' | 'renderItem'
+> & {
+  orientation?: 'horizontal' | 'vertical';
+  renderItem: (info: ListRenderItemInfo<T>) => ReactNode;
+  setApi?: (api: CarouselApi) => void;
+  className?: string;
+};
+
+type CarouselContextValue = {
+  orientation: 'horizontal' | 'vertical';
+  itemWidth: number;
+  itemHeight: number;
+};
+
+/* ── Context ──────────────────────────────────────────────────────── */
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+export function useCarousel() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) throw new Error('useCarousel must be used within a <Carousel>');
+  return ctx;
+}
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+function CarouselInner<T>(
+  {
+    data,
+    renderItem,
+    orientation = 'horizontal',
+    setApi,
+    className,
+    ...props
+  }: CarouselProps<T>,
+  ref: React.Ref<FlatList<T>>,
+) {
+  const { width, height } = useWindowDimensions();
+  const flatListRef = useRef<FlatList<T>>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const dataLength = data ? (data as T[]).length : 0;
+
+  const isHorizontal = orientation === 'horizontal';
+  const itemWidth = isHorizontal ? width : width;
+  const itemHeight = isHorizontal ? height : height;
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = isHorizontal
+        ? e.nativeEvent.contentOffset.x
+        : e.nativeEvent.contentOffset.y;
+      const size = isHorizontal ? width : height;
+      const index = Math.round(offset / size);
+      setActiveIndex(index);
+    },
+    [isHorizontal, width, height],
+  );
+
+  const scrollTo = useCallback(
+    (index: number) => {
+      flatListRef.current?.scrollToIndex({ index, animated: true });
+      setActiveIndex(index);
+    },
+    [],
+  );
+
+  const scrollPrev = useCallback(() => {
+    if (activeIndex > 0) scrollTo(activeIndex - 1);
+  }, [activeIndex, scrollTo]);
+
+  const scrollNext = useCallback(() => {
+    if (activeIndex < dataLength - 1) scrollTo(activeIndex + 1);
+  }, [activeIndex, dataLength, scrollTo]);
+
+  /* Expose imperative API */
+  const canScrollPrev = activeIndex > 0;
+  const canScrollNext = activeIndex < dataLength - 1;
+
+  useEffect(() => {
+    const api: CarouselApi = {
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext,
+      selectedIndex: activeIndex,
+      scrollTo,
+    };
+    setApi?.(api);
+  }, [activeIndex, canScrollPrev, canScrollNext, scrollPrev, scrollNext, scrollTo, setApi]);
+
+  return (
+    <CarouselContext.Provider value={{ orientation, itemWidth, itemHeight }}>
+      <View
+        className={cn('relative', className)}
+        accessibilityRole="adjustable"
+        accessibilityLabel="carousel"
+      >
+        <FlatList
+          ref={(node) => {
+            (flatListRef as React.MutableRefObject<FlatList<T> | null>).current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) (ref as React.MutableRefObject<FlatList<T> | null>).current = node;
+          }}
+          data={data}
+          renderItem={renderItem as FlatListProps<T>['renderItem']}
+          horizontal={isHorizontal}
+          pagingEnabled
+          snapToAlignment="center"
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          {...props}
+        />
+      </View>
+    </CarouselContext.Provider>
+  );
+}
+
+export const Carousel = forwardRef(CarouselInner) as <T>(
+  props: CarouselProps<T> & { ref?: React.Ref<FlatList<T>> },
+) => ReturnType<typeof CarouselInner>;
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+export const CarouselItem = forwardRef<View, ClassedViewProps>(
+  function CarouselItem({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="summary"
+        accessibilityLabel="slide"
+        className={cn('flex-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Navigation buttons (thin wrappers — typically custom on native) */
+
+export const CarouselPrevious = forwardRef<View, ClassedViewProps & { onPress?: () => void }>(
+  function CarouselPrevious({ className, onPress, children, ...props }, ref) {
+    return (
+      <Pressable ref={ref} onPress={onPress} className={cn(className)} {...props}>
+        {children}
+      </Pressable>
+    );
+  },
+);
+
+export const CarouselNext = forwardRef<View, ClassedViewProps & { onPress?: () => void }>(
+  function CarouselNext({ className, onPress, children, ...props }, ref) {
+    return (
+      <Pressable ref={ref} onPress={onPress} className={cn(className)} {...props}>
+        {children}
+      </Pressable>
+    );
+  },
+);
+
+/* ── Content (no-op wrapper for API symmetry) ────────────────────── */
+
+export const CarouselContent = forwardRef<View, ClassedViewProps>(
+  function CarouselContent({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn(className)} {...props}>
+        {children}
+      </View>
+    );
+  },
+);