@mihcm/ui 0.14.1

package/src/Banner.native.tsx

@@ -0,0 +1,77 @@
+/**
+ * Banner (React Native variant).
+ *
+ * Full-width message strip. Rendered as `<View>` + `<Text>`.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Banner.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const bannerVariants = cva('w-full flex-row items-center gap-3 px-4 py-3', {
+  variants: {
+    tone: {
+      info: 'bg-primary/10',
+      accent: 'bg-accent/10',
+      warning: 'bg-warning/10',
+      error: 'bg-destructive/10',
+      announcement: 'bg-secondary',
+    },
+  },
+  defaultVariants: { tone: 'info' },
+});
+
+const TONE_TEXT: Record<NonNullable<VariantProps<typeof bannerVariants>['tone']>, string> = {
+  info: 'text-primary',
+  accent: 'text-accent-600',
+  warning: 'text-warning',
+  error: 'text-destructive',
+  announcement: 'text-foreground',
+};
+
+export interface BannerProps
+  extends Omit<ViewProps, 'style'>,
+    VariantProps<typeof bannerVariants> {
+  className?: string;
+  children?: ReactNode;
+  onDismiss?: () => void;
+  dismissible?: boolean;
+  icon?: ReactNode;
+  showIcon?: boolean;
+}
+
+export const Banner = forwardRef<View, BannerProps>(function Banner(
+  { className, tone = 'info', onDismiss, dismissible, icon, showIcon = true, children, ...props },
+  ref,
+) {
+  const showDismiss = onDismiss !== undefined || dismissible === true;
+  const handleDismiss = onDismiss ?? (() => {});
+  const textTone = TONE_TEXT[tone ?? 'info'];
+
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="summary"
+      className={cn(bannerVariants({ tone }), className)}
+      {...props}
+    >
+      {showIcon && icon && <View className="mr-1 flex-shrink-0">{icon}</View>}
+      <View className="flex-1">
+        <Text className={cn('text-sm', textTone)}>{children}</Text>
+      </View>
+      {showDismiss && (
+        <Pressable
+          onPress={handleDismiss}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          className="ml-auto flex-shrink-0 p-0.5 opacity-60"
+        >
+          <Text className={textTone}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+});

package/src/Banner.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * Banner (web variant — React DOM).
+ *
+ * Full-width message strip at the top of a page or section.
+ * Optionally dismissible via the X button.
+ *
+ * Wiki: docs/components/Banner.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const bannerVariants = cva(
+  'relative w-full flex items-center gap-3 px-4 py-3 text-sm',
+  {
+    variants: {
+      tone: {
+        info: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
+        accent: 'bg-accent-50 text-accent-700 dark:bg-accent-950 dark:text-accent-300',
+        warning: 'bg-yellow-100 text-warning',
+        error: 'bg-red-100 text-destructive',
+        announcement: 'bg-brand-neutral-66 text-foreground',
+      },
+    },
+    defaultVariants: {
+      tone: 'info',
+    },
+  },
+);
+
+type BannerVariantProps = VariantProps<typeof bannerVariants>;
+
+const ICON_PATHS: Record<NonNullable<BannerVariantProps['tone']>, string> = {
+  info: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+  accent: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+  warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
+  error: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
+  announcement: 'M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z',
+};
+
+export interface BannerProps
+  extends HTMLAttributes<HTMLDivElement>,
+    BannerVariantProps {
+  /** When provided, renders a dismiss (x) button. */
+  onDismiss?: () => void;
+  /** Convenience boolean — when true, renders the dismiss button. */
+  dismissible?: boolean;
+  /** Optional icon override. Defaults to a tone-appropriate glyph. */
+  icon?: ReactNode;
+  /** Set to false to hide the default icon entirely. */
+  showIcon?: boolean;
+}
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
+  { className, tone, onDismiss, dismissible, icon, showIcon = true, children, ...props },
+  ref,
+) {
+  const showDismiss = onDismiss !== undefined || dismissible === true;
+  const handleDismiss = onDismiss ?? (() => {});
+  const resolvedTone = tone ?? 'info';
+
+  return (
+    <div
+      ref={ref}
+      role="status"
+      className={cn(bannerVariants({ tone }), className)}
+      {...props}
+    >
+      {showIcon && (
+        <span className="flex-shrink-0 [&>svg]:h-4 [&>svg]:w-4">
+          {icon ?? (
+            <svg aria-hidden viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
+              <path d={ICON_PATHS[resolvedTone]} />
+            </svg>
+          )}
+        </span>
+      )}
+      <div className="flex-1">{children}</div>
+      {showDismiss && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); handleDismiss(); }}
+          aria-label="Dismiss"
+          className="ml-auto flex-shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <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="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+});

package/src/BarList.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+/**
+ * BarList (web variant).
+ *
+ * Compact ranked values inspired by Tremor's BarList, implemented with
+ * MiHCM tokens and regular DOM semantics.
+ *
+ * Wiki: docs/components/BarList.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { motion } from 'motion/react';
+import { cn } from './internal/cn.js';
+
+export interface BarListItem {
+  name: ReactNode;
+  value: number;
+  href?: string;
+  icon?: ReactNode;
+  colorClassName?: string;
+}
+
+export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
+  data: BarListItem[];
+  valueFormatter?: (value: number) => ReactNode;
+  maxValue?: number;
+  showValues?: boolean;
+  showAnimation?: boolean;
+  barClassName?: string;
+  rowClassName?: string;
+}
+
+export const BarList = forwardRef<HTMLDivElement, BarListProps>(function BarList(
+  {
+    data,
+    valueFormatter = (value) => value.toLocaleString(),
+    maxValue,
+    showValues = true,
+    showAnimation = true,
+    className,
+    barClassName,
+    rowClassName,
+    ...props
+  },
+  ref,
+) {
+  const resolvedMax = maxValue ?? Math.max(...data.map((item) => item.value), 0);
+
+  return (
+    <div ref={ref} className={cn('space-y-3', className)} {...props}>
+      {data.map((item, index) => {
+        const percentage = resolvedMax > 0 ? Math.min(100, (item.value / resolvedMax) * 100) : 0;
+        const content = (
+          <>
+            <div className="mb-1 flex items-center justify-between gap-3 text-sm">
+              <span className="flex min-w-0 items-center gap-2 font-medium text-foreground">
+                {item.icon ? <span className="shrink-0 text-muted-foreground">{item.icon}</span> : null}
+                <span className="truncate">{item.name}</span>
+              </span>
+              {showValues ? (
+                <span className="shrink-0 tabular-nums text-muted-foreground">
+                  {valueFormatter(item.value)}
+                </span>
+              ) : null}
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-muted">
+              <motion.div
+                className={cn(
+                  'h-full rounded-full bg-primary',
+                  showAnimation && 'transition-[width,background-color] duration-500 ease-out',
+                  item.colorClassName,
+                  barClassName,
+                )}
+                initial={showAnimation ? { width: 0 } : false}
+                animate={{ width: `${percentage}%` }}
+                transition={{ duration: 0.45, ease: 'easeOut' }}
+              />
+            </div>
+          </>
+        );
+
+        if (item.href) {
+          return (
+            <a
+              key={`${item.href}-${index}`}
+              href={item.href}
+              className={cn('block rounded-lg p-2 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', rowClassName)}
+            >
+              {content}
+            </a>
+          );
+        }
+
+        return (
+          <div key={index} className={cn('rounded-lg p-2', rowClassName)}>
+            {content}
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/Breadcrumb.native.tsx

@@ -0,0 +1,238 @@
+/**
+ * Breadcrumb (React Native variant).
+ *
+ * Horizontal breadcrumb trail using View, Text, Pressable.
+ * Same composable API as the web variant; BreadcrumbLink uses
+ * `onPress` instead of `href`.
+ *
+ * Wiki: docs/components/Breadcrumb.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+  type PressableProps,
+  type ScrollViewProps,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type BreadcrumbTone = 'muted' | 'foreground' | 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+const breadcrumbToneClasses: Record<BreadcrumbTone, string> = {
+  muted: 'text-muted-foreground',
+  foreground: 'text-foreground',
+  primary: 'text-primary',
+  accent: 'text-accent',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+};
+
+/* ------------------------------------------------------------------ */
+/*  Breadcrumb (root View)                                            */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const Breadcrumb = forwardRef<View, BreadcrumbProps>(function Breadcrumb(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessible
+      accessibilityLabel="Breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbList (horizontal ScrollView)                            */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbListProps extends Omit<ScrollViewProps, 'style'> {
+  className?: string;
+}
+
+export const BreadcrumbList = forwardRef<ScrollView, BreadcrumbListProps>(
+  function BreadcrumbList({ className, ...props }, ref) {
+    return (
+      <ScrollView
+        ref={ref}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        className={cn('flex-row items-center gap-1.5', className)}
+        contentContainerClassName="items-center gap-1.5"
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbItem (View wrapper)                                     */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbItemProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const BreadcrumbItem = forwardRef<View, BreadcrumbItemProps>(
+  function BreadcrumbItem({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center gap-1.5', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbLink (Pressable)                                        */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbLinkProps extends Omit<PressableProps, 'style'> {
+  /** Web compat — ignored on native; use onPress instead. */
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  children?: ReactNode;
+}
+
+export const BreadcrumbLink = forwardRef<View, BreadcrumbLinkProps>(
+  function BreadcrumbLink({ className, textClassName, href: _href, children, ...props }, ref) {
+    return (
+      <Pressable ref={ref} className={cn(className)} {...props}>
+        <Text className={cn('text-sm text-muted-foreground', textClassName)}>{children}</Text>
+      </Pressable>
+    );
+  },
+);
+
+export interface BreadcrumbHomeLinkProps extends BreadcrumbLinkProps {
+  /** Accessible label for the home icon link. */
+  label?: string;
+  /** Semantic token tone for the home icon. */
+  tone?: BreadcrumbTone;
+  /** Tailwind token class override, e.g. `text-primary` or `text-[var(--color-brand)]`. */
+  colorClassName?: string;
+}
+
+export const BreadcrumbHomeLink = forwardRef<View, BreadcrumbHomeLinkProps>(
+  function BreadcrumbHomeLink({ colorClassName, label = 'Home', tone = 'accent', children, textClassName, ...props }, ref) {
+    return (
+      <BreadcrumbLink
+        ref={ref}
+        accessibilityLabel={label}
+        textClassName={cn(breadcrumbToneClasses[tone], colorClassName, textClassName)}
+        {...props}
+      >
+        {children ?? '⌂'}
+      </BreadcrumbLink>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbPage (current page text)                                */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbPageProps extends Omit<TextProps, 'style'> {
+  className?: string;
+}
+
+export const BreadcrumbPage = forwardRef<Text, BreadcrumbPageProps>(
+  function BreadcrumbPage({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="text"
+        accessibilityLabel="Current page"
+        className={cn('text-sm font-medium text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface BreadcrumbTonePageProps extends BreadcrumbPageProps {
+  /** Semantic token tone for the active page. */
+  tone?: BreadcrumbTone;
+  /** Tailwind token class override, e.g. `text-primary` or `text-[var(--color-brand)]`. */
+  colorClassName?: string;
+}
+
+export const BreadcrumbAccentPage = forwardRef<Text, BreadcrumbTonePageProps>(
+  function BreadcrumbAccentPage({ className, colorClassName, tone = 'accent', ...props }, ref) {
+    return (
+      <BreadcrumbPage
+        ref={ref}
+        className={cn(breadcrumbToneClasses[tone], colorClassName, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbSeparator                                               */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbSeparatorProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  /** Custom separator element. Defaults to "›" text. */
+  children?: ReactNode;
+}
+
+export const BreadcrumbSeparator = forwardRef<View, BreadcrumbSeparatorProps>(
+  function BreadcrumbSeparator({ className, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        className={cn(className)}
+        {...props}
+      >
+        {children ?? (
+          <Text className="text-sm text-muted-foreground">›</Text>
+        )}
+      </View>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbEllipsis                                                */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbEllipsisProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const BreadcrumbEllipsis = forwardRef<View, BreadcrumbEllipsisProps>(
+  function BreadcrumbEllipsis({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        className={cn('h-6 w-6 items-center justify-center', className)}
+        {...props}
+      >
+        <Text className="text-sm text-muted-foreground">…</Text>
+      </View>
+    );
+  },
+);