@mihcm/ui 0.14.1

package/src/Breadcrumb.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+/**
+ * Breadcrumb (web variant — React DOM).
+ *
+ * Composable navigation breadcrumb trail. Six pieces compose:
+ *
+ *   <Breadcrumb>
+ *     <BreadcrumbList>
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>Current</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * Sets `aria-label="Breadcrumb"` on the `<nav>` and `aria-current="page"`
+ * on the active item so assistive tech conveys position in the hierarchy.
+ *
+ * Wiki: docs/components/Breadcrumb.md
+ */
+import { forwardRef, type HTMLAttributes, type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+
+type BreadcrumbTone = 'muted' | 'foreground' | 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+const breadcrumbToneClasses: Record<BreadcrumbTone, string> = {
+  muted: 'text-muted-foreground hover:text-foreground',
+  foreground: 'text-foreground hover:text-foreground/80',
+  primary: 'text-primary hover:text-primary/80',
+  accent: 'text-accent hover:text-accent/80',
+  success: 'text-success hover:text-success/80',
+  warning: 'text-warning hover:text-warning/80',
+  danger: 'text-destructive hover:text-destructive/80',
+};
+
+/* ------------------------------------------------------------------ */
+/*  Breadcrumb (root <nav>)                                           */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  /** Override the default "Breadcrumb" aria-label. */
+  'aria-label'?: string;
+}
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
+  { className, 'aria-label': ariaLabel = 'Breadcrumb', ...props },
+  ref,
+) {
+  return (
+    <nav
+      ref={ref}
+      aria-label={ariaLabel}
+      className={cn(className)}
+      {...props}
+    />
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbList (<ol>)                                             */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbListProps extends HTMLAttributes<HTMLOListElement> {}
+
+export const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  function BreadcrumbList({ className, ...props }, ref) {
+    return (
+      <ol
+        ref={ref}
+        className={cn(
+          'flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground',
+          className,
+        )}
+        style={{ listStyleType: 'none', paddingInlineStart: 0 }}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbItem (<li>)                                             */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {}
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  function BreadcrumbItem({ className, ...props }, ref) {
+    return (
+      <li
+        ref={ref}
+        className={cn('inline-flex items-center gap-1.5', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbLink (<a>)                                              */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+export const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  function BreadcrumbLink({ className, ...props }, ref) {
+    return (
+      <a
+        ref={ref}
+        className={cn('transition-colors duration-150 hover:text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+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<HTMLAnchorElement, BreadcrumbHomeLinkProps>(
+  function BreadcrumbHomeLink({ className, colorClassName, label = 'Home', tone = 'accent', children, ...props }, ref) {
+    return (
+      <BreadcrumbLink
+        ref={ref}
+        aria-label={label}
+        className={cn('inline-flex items-center', breadcrumbToneClasses[tone], colorClassName, className)}
+        {...props}
+      >
+        {children ?? (
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="h-4 w-4"
+          >
+            <path d="m3 10.5 9-7 9 7" />
+            <path d="M5 10v10h14V10" />
+            <path d="M9 20v-6h6v6" />
+          </svg>
+        )}
+      </BreadcrumbLink>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbPage (<span aria-current="page">)                       */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbPageProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
+  function BreadcrumbPage({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        aria-current="page"
+        className={cn('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<HTMLSpanElement, 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 HTMLAttributes<HTMLLIElement> {
+  /** Custom separator element. Defaults to a chevron-right SVG. */
+  children?: ReactNode;
+}
+
+export const BreadcrumbSeparator = forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(
+  function BreadcrumbSeparator({ className, children, ...props }, ref) {
+    return (
+      <li
+        ref={ref}
+        role="presentation"
+        aria-hidden="true"
+        className={cn('[&>svg]:h-3.5 [&>svg]:w-3.5', className)}
+        {...props}
+      >
+        {children ?? (
+          <svg
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="h-3.5 w-3.5 text-muted-foreground"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        )}
+      </li>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  BreadcrumbEllipsis                                                */
+/* ------------------------------------------------------------------ */
+
+export interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(
+  function BreadcrumbEllipsis({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        role="presentation"
+        aria-hidden="true"
+        className={cn('flex h-6 w-6 items-center justify-center', className)}
+        {...props}
+      >
+        &#x2026;
+        <span className="sr-only">More</span>
+      </span>
+    );
+  },
+);

package/src/Button.native.tsx

@@ -0,0 +1,123 @@
+/**
+ * Button (React Native variant).
+ *
+ * Selected by the `react-native` export condition in package.json.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Button.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { ActivityIndicator, Pressable, type PressableProps, View } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const buttonVariants = cva(
+  'flex-row items-center justify-center',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        accent: 'bg-accent',
+        destructive: 'bg-destructive',
+        outline: 'border border-input bg-background',
+        secondary: 'bg-secondary',
+        ghost: 'bg-transparent',
+        link: 'bg-transparent',
+      },
+      size: {
+        sm: 'h-8 px-3',
+        md: 'h-10 px-4',
+        lg: 'h-11 px-6',
+        xl: 'h-12 px-7',
+        xxl: 'h-14 px-8',
+        icon: 'h-11 w-11',
+      },
+      shape: {
+        rounded: 'rounded-md',
+        hard: 'rounded-none',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      shape: 'rounded',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends Omit<PressableProps, 'children'>,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
+  fullWidth?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const Button = forwardRef<View, ButtonProps>(function Button(
+  {
+    className,
+    variant,
+    size,
+    shape,
+    isLoading,
+    fullWidth,
+    disabled,
+    leadingIcon,
+    trailingIcon,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const inactive = disabled || isLoading;
+  return (
+    <Pressable
+      ref={ref as never}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!inactive, busy: !!isLoading }}
+      disabled={inactive}
+      className={cn(
+        buttonVariants({ variant, size, shape }),
+        fullWidth && 'w-full',
+        inactive && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {isLoading ? <ActivityIndicator size="small" color="currentColor" /> : leadingIcon}
+      {children}
+      {!isLoading && trailingIcon}
+    </Pressable>
+  );
+});
+
+type IconButtonLabel =
+  | { 'aria-label': string; accessibilityLabel?: string }
+  | { 'aria-label'?: string; accessibilityLabel: string };
+
+export type IconButtonProps = Omit<
+  ButtonProps,
+  'children' | 'leadingIcon' | 'trailingIcon' | 'size'
+> &
+  IconButtonLabel & {
+    children: ReactNode;
+  };
+
+export const IconButton = forwardRef<View, IconButtonProps>(function IconButton(
+  { children, accessibilityLabel, 'aria-label': ariaLabel, ...props },
+  ref,
+) {
+  return (
+    <Button
+      ref={ref}
+      size="icon"
+      accessibilityLabel={accessibilityLabel ?? ariaLabel}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/Button.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+/**
+ * Button (web variant — React DOM).
+ *
+ * Native variant lives at `Button.native.tsx`; bundlers pick it via the
+ * `react-native` export condition in package.json.
+ *
+ * Universal contract:
+ *  - Same prop API on both platforms.
+ *  - Variants & sizes from `buttonVariants` (cva).
+ *  - className accepted and forwarded.
+ *  - forwardRef.
+ *  - WCAG 2.1 AA: focus-visible ring, disabled state, 44px min height on `lg`.
+ *
+ * Wiki: docs/components/Button.md
+ */
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 ' +
+    'transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
+    'disabled:pointer-events-none disabled:opacity-50 ' +
+    'select-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground font-semibold hover:bg-primary-600 active:bg-primary-700 ' +
+          'dark:hover:bg-primary/80 dark:active:bg-primary/70',
+        accent:
+          'bg-accent text-accent-foreground font-semibold hover:bg-accent-600 active:bg-accent-700',
+        destructive:
+          'bg-destructive text-destructive-foreground font-semibold hover:opacity-90 active:opacity-80',
+        outline:
+          'border border-border bg-background font-medium text-secondary-foreground ' +
+          'hover:bg-muted active:bg-brand-neutral-66',
+        secondary:
+          'border border-secondary bg-background font-medium text-brand-neutral-371 ' +
+          'hover:bg-muted active:bg-brand-neutral-66',
+        ghost: 'font-medium text-foreground hover:bg-muted active:bg-brand-neutral-66',
+        link: 'font-medium text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-8 px-3 text-xs',
+        md: 'h-10 px-4 text-body-sm',
+        lg: 'h-11 px-5 text-sm',
+        xl: 'h-12 px-6 text-base',
+        xxl: 'h-14 px-8 text-base',
+        icon: 'size-11',
+      },
+      shape: {
+        rounded: 'rounded-md',
+        hard: 'rounded-none',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      shape: 'rounded',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
+  fullWidth?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+}
+
+function Spinner() {
+  return (
+    <svg
+      aria-hidden
+      className="h-4 w-4 animate-spin"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2.5}
+    >
+      <circle cx="12" cy="12" r="10" className="opacity-25" />
+      <path d="M4 12a8 8 0 018-8" className="opacity-75" />
+    </svg>
+  );
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    className,
+    variant,
+    size,
+    shape,
+    isLoading,
+    fullWidth,
+    disabled,
+    type = 'button',
+    leadingIcon,
+    trailingIcon,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const inactive = disabled || isLoading;
+  return (
+    <button
+      ref={ref}
+      type={type}
+      aria-busy={isLoading || undefined}
+      disabled={inactive}
+      className={cn(buttonVariants({ variant, size, shape }), fullWidth && 'w-full', className)}
+      {...props}
+    >
+      {isLoading ? <Spinner /> : leadingIcon}
+      {children}
+      {!isLoading && trailingIcon}
+    </button>
+  );
+});
+
+type IconButtonLabel =
+  | { 'aria-label': string; accessibilityLabel?: string }
+  | { 'aria-label'?: string; accessibilityLabel: string };
+
+export type IconButtonProps = Omit<
+  ButtonProps,
+  'children' | 'leadingIcon' | 'trailingIcon' | 'size'
+> &
+  IconButtonLabel & {
+    children: ReactNode;
+  };
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { children, accessibilityLabel, 'aria-label': ariaLabel, ...props },
+  ref,
+) {
+  return (
+    <Button
+      ref={ref}
+      size="icon"
+      aria-label={ariaLabel ?? accessibilityLabel}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/Calendar.native.tsx

@@ -0,0 +1,28 @@
+/**
+ * Calendar (React Native variant).
+ *
+ * Stub for API parity. On native, use @react-native-community/datetimepicker
+ * or a dedicated RN calendar library. This provides the type surface.
+ *
+ * Wiki: docs/components/Calendar.md
+ */
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface CalendarProps extends ViewProps {
+  mode?: 'single' | 'range' | 'multiple';
+  selected?: Date | { from?: Date; to?: Date } | Date[];
+  onSelect?: (date: unknown) => void;
+  showOutsideDays?: boolean;
+  className?: string;
+}
+
+export function Calendar({ className, ...props }: CalendarProps) {
+  return (
+    <View className={cn('rounded-md border border-border bg-card p-4', className)} {...props}>
+      <Text className="text-xs text-muted-foreground">
+        Calendar (native: use platform picker)
+      </Text>
+    </View>
+  );
+}