@mihcm/ui 0.14.1

package/src/HoverCard.native.tsx

@@ -0,0 +1,63 @@
+/**
+ * HoverCard (React Native variant).
+ *
+ * Hover is not a native concept. This stub renders children directly
+ * and ignores the hover card trigger/content pattern for API parity.
+ *
+ * Wiki: docs/components/HoverCard.md
+ */
+import type { ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+export interface HoverCardProps {
+  children: ReactNode;
+  openDelay?: number;
+  closeDelay?: number;
+  timing?: 'instant' | 'fast' | 'normal' | 'slow';
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function HoverCard({ children }: HoverCardProps) {
+  return <>{children}</>;
+}
+
+export interface HoverCardTriggerProps {
+  children: ReactNode;
+  asChild?: boolean;
+}
+
+export function HoverCardTrigger({ children }: HoverCardTriggerProps) {
+  return <>{children}</>;
+}
+
+export interface HoverCardContentProps extends ViewProps {
+  className?: string;
+  children: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  variant?: 'default' | 'soft' | 'outline' | 'elevated' | 'plain';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  maxHeight?: 'none' | 'sm' | 'md' | 'lg';
+  animation?: 'scale' | 'fade' | 'none';
+  scrollable?: boolean;
+  portal?: boolean;
+  showArrow?: boolean;
+  arrowClassName?: string;
+}
+
+export function HoverCardContent(_props: HoverCardContentProps) {
+  // HoverCard content is not rendered on native — hover is not available.
+  return null;
+}
+
+export function HoverCardPortal({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+export function HoverCardArrow() {
+  return null;
+}
+
+export type HoverCardPortalProps = { children: ReactNode };
+export type HoverCardArrowProps = Record<string, unknown>;

package/src/HoverCard.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+/**
+ * HoverCard (web variant — React DOM).
+ *
+ * Preview card that appears on hover. Powered by Radix HoverCard.
+ * Ideal for user profile previews, link previews, or detail tooltips.
+ *
+ *   <HoverCard>
+ *     <HoverCardTrigger asChild>
+ *       <a href="/profile">@yashi</a>
+ *     </HoverCardTrigger>
+ *     <HoverCardContent>
+ *       <p>Yashi EL — Design Engineer</p>
+ *     </HoverCardContent>
+ *   </HoverCard>
+ *
+ * Wiki: docs/components/HoverCard.md
+ */
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface HoverCardProps extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root> {
+  timing?: 'instant' | 'fast' | 'normal' | 'slow';
+}
+
+const hoverCardTiming: Record<NonNullable<HoverCardProps['timing']>, { openDelay: number; closeDelay: number }> = {
+  instant: { openDelay: 0, closeDelay: 0 },
+  fast: { openDelay: 150, closeDelay: 100 },
+  normal: { openDelay: 500, closeDelay: 200 },
+  slow: { openDelay: 800, closeDelay: 300 },
+};
+
+export function HoverCard({
+  timing = 'normal',
+  openDelay,
+  closeDelay,
+  ...props
+}: HoverCardProps) {
+  const delays = hoverCardTiming[timing];
+
+  return (
+    <HoverCardPrimitive.Root
+      openDelay={openDelay ?? delays.openDelay}
+      closeDelay={closeDelay ?? delays.closeDelay}
+      {...props}
+    />
+  );
+}
+
+/* ── Trigger ────────────────────────────────────────────────────────── */
+
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+/* ── Content ────────────────────────────────────────────────────────── */
+
+const hoverCardContentVariants = cva(
+  'z-50 overflow-hidden border outline-none',
+  {
+    variants: {
+      size: {
+        sm: 'w-56',
+        md: 'w-64',
+        lg: 'w-80',
+        xl: 'w-96',
+        auto: 'w-auto',
+      },
+      variant: {
+        default: 'rounded-xl border-border bg-card text-card-foreground shadow-mi-card',
+        soft: 'rounded-xl border-border bg-muted text-foreground shadow-mi-card',
+        outline: 'rounded-xl border-border bg-background text-foreground shadow-mi-card',
+        elevated: 'rounded-xl border-border bg-card text-card-foreground shadow-lg',
+        plain: 'border-transparent bg-transparent text-foreground shadow-none',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-3',
+        md: 'p-4',
+        lg: 'p-5',
+      },
+      maxHeight: {
+        none: '',
+        sm: 'max-h-48',
+        md: 'max-h-64',
+        lg: 'max-h-80',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+      padding: 'md',
+      maxHeight: 'none',
+    },
+  },
+);
+
+export interface HoverCardContentProps
+  extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>,
+    VariantProps<typeof hoverCardContentVariants> {
+  animation?: 'scale' | 'fade' | 'none';
+  scrollable?: boolean;
+  portal?: boolean;
+  portalContainer?: HTMLElement | null;
+  showArrow?: boolean;
+  arrowClassName?: string;
+}
+
+export const HoverCardContent = forwardRef<
+  ElementRef<typeof HoverCardPrimitive.Content>,
+  HoverCardContentProps
+>(function HoverCardContent(
+  {
+    className,
+    align = 'center',
+    sideOffset = 8,
+    collisionPadding = 12,
+    size = 'md',
+    variant = 'default',
+    padding = 'md',
+    maxHeight = 'none',
+    animation = 'scale',
+    scrollable = false,
+    portal = false,
+    portalContainer,
+    showArrow = false,
+    arrowClassName,
+    children,
+    ...contentProps
+  },
+  ref,
+) {
+  const content = (
+    <HoverCardPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      collisionPadding={collisionPadding}
+      className={cn(
+        hoverCardContentVariants({ size, variant, padding, maxHeight }),
+        scrollable && 'overflow-y-auto',
+        animation !== 'none' && 'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        animation === 'scale' && [
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        ],
+        animation === 'fade' && 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...contentProps}
+    >
+      {children}
+      {showArrow ? (
+        <HoverCardPrimitive.Arrow
+          className={cn('fill-card stroke-border', variant === 'soft' && 'fill-muted', arrowClassName)}
+          width={12}
+          height={6}
+        />
+      ) : null}
+    </HoverCardPrimitive.Content>
+  );
+
+  if (!portal) return content;
+
+  return (
+    <HoverCardPrimitive.Portal container={portalContainer ?? undefined}>
+      {content}
+    </HoverCardPrimitive.Portal>
+  );
+});
+
+export const HoverCardPortal = HoverCardPrimitive.Portal;
+export const HoverCardArrow = HoverCardPrimitive.Arrow;
+export type HoverCardTriggerProps = ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
+export type HoverCardPortalProps = ComponentPropsWithoutRef<typeof HoverCardPrimitive.Portal>;
+export type HoverCardArrowProps = ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;

package/src/IconSidebar.native.tsx

@@ -0,0 +1,94 @@
+/**
+ * MainSidebar (React Native variant).
+ *
+ * Mobile-first redesign: renders as a horizontal bottom tab bar
+ * instead of a vertical rail. Uses a horizontal ScrollView for
+ * overflow when items exceed screen width. Active item gets a
+ * highlighted background; inactive items are dimmed.
+ *
+ * `IconSidebar` remains as a compatibility alias.
+ *
+ * Wiki: docs/components/IconSidebar.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, ScrollView, Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface MainSidebarItem {
+  key: string;
+  icon: ReactNode;
+  label: string;
+  href?: string;
+  description?: string;
+  badge?: ReactNode;
+  disabled?: boolean;
+  children?: MainSidebarItem[];
+  panel?: ReactNode;
+}
+
+export interface MainSidebarProps extends Omit<ViewProps, 'style' | 'children'> {
+  items: MainSidebarItem[];
+  activeKey?: string;
+  onItemSelect?: (key: string, item: MainSidebarItem) => void;
+  header?: ReactNode;
+  footer?: ReactNode;
+  side?: 'left' | 'right';
+  mobile?: boolean;
+  className?: string;
+}
+
+export type IconSidebarItem = MainSidebarItem;
+export type IconSidebarProps = MainSidebarProps;
+
+export const MainSidebar = forwardRef<View, MainSidebarProps>(function MainSidebar(
+  { className, items, activeKey, onItemSelect, header, footer, side: _side, mobile: _mobile, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="toolbar"
+      accessibilityLabel="Main navigation"
+      className={cn('flex-row items-center bg-primary border-t border-primary/80', className)}
+      {...props}
+    >
+      {header ? <View className="px-1">{header}</View> : null}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName="flex-row items-center"
+        className="flex-1"
+      >
+        {items.map((item) => {
+          const isActive = item.key === activeKey;
+          return (
+            <Pressable
+              key={item.key}
+              accessibilityRole="button"
+              accessibilityLabel={item.label}
+              accessibilityState={{ selected: isActive, disabled: item.disabled }}
+              disabled={item.disabled}
+              onPress={() => onItemSelect?.(item.key, item)}
+              className={cn(
+                'items-center justify-center px-4 py-3 min-w-14',
+                isActive ? 'bg-accent' : 'opacity-70',
+                item.disabled && 'opacity-40',
+              )}
+            >
+              <View className="h-6 w-6 items-center justify-center">{item.icon}</View>
+              <Text
+                className="text-caption mt-1 text-primary-foreground text-center"
+                numberOfLines={1}
+              >
+                {item.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+      {footer ? <View className="px-1">{footer}</View> : null}
+    </View>
+  );
+});
+
+export const IconSidebar = MainSidebar;