@mihcm/ui 0.14.1

package/src/NavigationMenu.native.tsx

@@ -0,0 +1,136 @@
+/**
+ * NavigationMenu (React Native variant).
+ *
+ * Renders a horizontal scrollable row of navigation links.
+ * Sub-menus open as modal overlays on native.
+ *
+ * Wiki: docs/components/NavigationMenu.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+  type ViewProps,
+  type TextProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenu = forwardRef<View, ClassedViewProps>(
+  function NavigationMenu({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('flex-row', className)} {...props} />
+    );
+  },
+);
+
+/* ── List ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenuList = forwardRef<ScrollView, ClassedViewProps>(
+  function NavigationMenuList({ className, children, ...props }, ref) {
+    return (
+      <ScrollView
+        ref={ref as never}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName={cn('flex-row items-center gap-1', className)}
+        {...props}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenuItem = forwardRef<View, ClassedViewProps>(
+  function NavigationMenuItem({ className, ...props }, ref) {
+    return <View ref={ref} className={cn(className)} {...props} />;
+  },
+);
+
+/* ── Trigger ──────────────────────────────────────────────────────── */
+
+export interface NavigationMenuTriggerProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const NavigationMenuTrigger = forwardRef<View, NavigationMenuTriggerProps>(
+  function NavigationMenuTrigger({ className, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        className={cn(
+          'flex-row items-center rounded-lg px-4 py-2',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-medium text-foreground">{children}</Text>
+        <Text className="ml-1 text-xs text-muted-foreground">▾</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Content ──────────────────────────────────────────────────────── */
+
+export const NavigationMenuContent = forwardRef<View, ClassedViewProps>(
+  function NavigationMenuContent({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'rounded-lg border border-border bg-card p-2 shadow-lg',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Link ──────────────────────────────────────────────────────────── */
+
+export interface NavigationMenuLinkProps extends ClassedViewProps {
+  href?: string;
+  onPress?: () => void;
+  children: ReactNode;
+}
+
+export const NavigationMenuLink = forwardRef<View, NavigationMenuLinkProps>(
+  function NavigationMenuLink({ className, onPress, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        onPress={onPress}
+        className={cn('rounded-lg px-4 py-2', className)}
+        {...props}
+      >
+        <Text className="text-sm text-foreground">{children}</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Viewport + Indicator (no-op on native) ───────────────────────── */
+
+export const NavigationMenuViewport = forwardRef<View, ClassedViewProps>(
+  function NavigationMenuViewport(props, ref) {
+    return <View ref={ref} {...props} />;
+  },
+);
+
+export const NavigationMenuIndicator = forwardRef<View, ClassedViewProps>(
+  function NavigationMenuIndicator(props, ref) {
+    return <View ref={ref} {...props} />;
+  },
+);
+
+export const navigationMenuTriggerStyle = () => 'flex-row items-center rounded-lg px-4 py-2';

package/src/NavigationMenu.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+/**
+ * NavigationMenu (web variant — React DOM).
+ *
+ * A top-level site navigation bar powered by Radix.
+ *
+ *   <NavigationMenu>
+ *     <NavigationMenuList>
+ *       <NavigationMenuItem>
+ *         <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *         <NavigationMenuContent>
+ *           <NavigationMenuLink href="/widgets">Widgets</NavigationMenuLink>
+ *         </NavigationMenuContent>
+ *       </NavigationMenuItem>
+ *       <NavigationMenuItem>
+ *         <NavigationMenuLink href="/about">About</NavigationMenuLink>
+ *       </NavigationMenuItem>
+ *     </NavigationMenuList>
+ *   </NavigationMenu>
+ *
+ * Wiki: docs/components/NavigationMenu.md
+ */
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenu = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(function NavigationMenu({ className, children, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Root
+      ref={ref}
+      className={cn(
+        'relative z-10 flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuViewport />
+    </NavigationMenuPrimitive.Root>
+  );
+});
+
+/* ── List ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenuList = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.List>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(function NavigationMenuList({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.List
+      ref={ref}
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+/* ── Trigger ──────────────────────────────────────────────────────── */
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-lg bg-transparent px-4 py-2 text-body-sm font-medium ' +
+    'transition-colors ' +
+    'hover:bg-muted hover:text-foreground ' +
+    'focus:bg-muted focus:text-foreground focus:outline-none ' +
+    'disabled:pointer-events-none disabled:opacity-50 ' +
+    'data-[state=open]:bg-muted/50 data-[active]:bg-muted/50',
+);
+
+export { navigationMenuTriggerStyle };
+
+export const NavigationMenuTrigger = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      ref={ref}
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <svg
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        className="relative top-px ml-1 h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180"
+        aria-hidden
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4 6l4 4 4-4" />
+      </svg>
+    </NavigationMenuPrimitive.Trigger>
+  );
+});
+
+/* ── Content ──────────────────────────────────────────────────────── */
+
+export const NavigationMenuContent = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(function NavigationMenuContent({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out',
+        'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out',
+        'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',
+        'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',
+        'md:absolute md:w-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── Link ──────────────────────────────────────────────────────────── */
+
+export const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+/* ── Viewport ─────────────────────────────────────────────────────── */
+
+export const NavigationMenuViewport = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(function NavigationMenuViewport({ className, ...props }, ref) {
+  return (
+    <div className={cn('absolute left-0 top-full flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        ref={ref}
+        className={cn(
+          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)]',
+          'w-full overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90',
+          'md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+
+/* ── Indicator ────────────────────────────────────────────────────── */
+
+export const NavigationMenuIndicator = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(function NavigationMenuIndicator({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      ref={ref}
+      className={cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out',
+        'data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+});

package/src/NotificationBadge.native.tsx

@@ -0,0 +1,80 @@
+/**
+ * NotificationBadge (React Native variant).
+ *
+ * Counter dot overlay. Same prop API as the web variant — wrap the
+ * host element in a `<View>` with relative positioning; the badge
+ * absolutely-positions in the chosen corner.
+ *
+ * Wiki: docs/components/NotificationBadge.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const notificationBadgeVariants = cva(
+  'absolute items-center justify-center rounded-full',
+  {
+    variants: {
+      tone: {
+        danger: 'bg-destructive',
+        warning: 'bg-warning',
+        accent: 'bg-accent',
+        primary: 'bg-primary',
+      },
+      placement: {
+        'top-right': '-top-1 -right-1',
+        'top-left': '-top-1 -left-1',
+        'bottom-right': '-bottom-1 -right-1',
+        'bottom-left': '-bottom-1 -left-1',
+      },
+    },
+    defaultVariants: { tone: 'danger', placement: 'top-right' },
+  },
+);
+
+export interface NotificationBadgeProps
+  extends Omit<ViewProps, 'style'>,
+    VariantProps<typeof notificationBadgeVariants> {
+  className?: string;
+  count?: number;
+  max?: number;
+  dot?: boolean;
+  children?: ReactNode;
+}
+
+export const NotificationBadge = forwardRef<View, NotificationBadgeProps>(
+  function NotificationBadge(
+    { className, tone, placement, count = 0, max = 99, dot = false, children, ...props },
+    ref,
+  ) {
+    if (!count && !children && !dot) return null;
+    if (dot) {
+      return (
+        <View
+          ref={ref}
+          className={cn(
+            notificationBadgeVariants({ tone, placement }),
+            'h-2 w-2',
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
+    const label = children ?? (count > max ? `${max}+` : String(count));
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          notificationBadgeVariants({ tone, placement }),
+          'h-4 min-w-4 px-1',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-caption font-medium leading-none text-primary-foreground">{label}</Text>
+      </View>
+    );
+  },
+);

package/src/NotificationBadge.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+/**
+ * NotificationBadge (web variant — React DOM).
+ *
+ * Tiny counter dot that overlays a parent (the bell icon in the
+ * MiHCM Security prototype's TopBar). Render inside any
+ * `position: relative` container; the badge absolutely-positions
+ * itself in the top-right.
+ *
+ * Extracted from the prototype:
+ *   <div class="relative">
+ *     <img src="img/bell.svg" />
+ *     <span class="absolute -top-2 -right-2.5 w-4 h-4 bg-mi-red
+ *                  rounded-full text-xs text-white ...">5</span>
+ *   </div>
+ *
+ * Wiki: docs/components/NotificationBadge.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const notificationBadgeVariants = cva(
+  'absolute grid place-items-center rounded-full text-label font-semibold leading-none text-primary-foreground',
+  {
+    variants: {
+      tone: {
+        danger: 'bg-destructive',
+        warning: 'bg-warning',
+        accent: 'bg-accent',
+        primary: 'bg-primary',
+      },
+      placement: {
+        'top-right': '-top-1 -right-1',
+        'top-left': '-top-1 -left-1',
+        'bottom-right': '-bottom-1 -right-1',
+        'bottom-left': '-bottom-1 -left-1',
+      },
+    },
+    defaultVariants: { tone: 'danger', placement: 'top-right' },
+  },
+);
+
+export interface NotificationBadgeProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof notificationBadgeVariants> {
+  /** Numeric count. `0` and `undefined` hide the badge. Values over `max` show `${max}+`. */
+  count?: number;
+  /** Cap value. Defaults to 99. */
+  max?: number;
+  /** When `true` and `count > 0`, render a tiny dot without text. Default `false`. */
+  dot?: boolean;
+}
+
+export const NotificationBadge = forwardRef<HTMLSpanElement, NotificationBadgeProps>(
+  function NotificationBadge(
+    { className, tone, placement, count = 0, max = 99, dot = false, children, ...props },
+    ref,
+  ) {
+    if (!count && !children && !dot) return null;
+    if (dot) {
+      return (
+        <span
+          ref={ref}
+          aria-hidden
+          className={cn(
+            notificationBadgeVariants({ tone, placement }),
+            'h-2 w-2',
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
+    const label = children ?? (count > max ? `${max}+` : String(count));
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          notificationBadgeVariants({ tone, placement }),
+          'h-4 min-w-4 px-1',
+          className,
+        )}
+        {...props}
+      >
+        {label}
+      </span>
+    );
+  },
+);

package/src/PageShell.native.tsx

@@ -0,0 +1,43 @@
+/**
+ * PageShell (React Native variant).
+ *
+ * Mobile-first redesign: simple vertical stack with topBar at top
+ * and children filling the remaining space. The sidebar prop is
+ * accepted but ignored (mobile sidebar should be a drawer managed
+ * by the host app). The titleBar renders inline above content
+ * without sticky behaviour.
+ *
+ * Wiki: docs/components/PageShell.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { ScrollView, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface PageShellProps extends Omit<ViewProps, 'style'> {
+  topBar?: ReactNode;
+  sidebar?: ReactNode;
+  titleBar?: ReactNode;
+  className?: string;
+}
+
+export const PageShell = forwardRef<View, PageShellProps>(function PageShell(
+  { className, topBar, sidebar: _sidebar, titleBar, children, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn('flex-1 bg-background', className)}
+      {...props}
+    >
+      {topBar}
+      {titleBar}
+      <ScrollView
+        className="flex-1 bg-muted"
+        contentContainerClassName="p-3"
+      >
+        {children}
+      </ScrollView>
+    </View>
+  );
+});

package/src/PageShell.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+/**
+ * PageShell (web variant — React DOM).
+ *
+ * Outer 3-region scaffold that mirrors the MiHCM Security prototype:
+ *   TopBar (full-width, above everything)
+ *   ├── Sidebar (vertical rail on desktop, bottom menu on mobile)
+ *   └── Main column
+ *       ├── TitleBar (sticky)
+ *       └── Content (scrollable)
+ *
+ * The shell only handles layout — pass any `topBar`, `sidebar`,
+ * `titleBar`, and `children` you want. The main column scrolls
+ * internally so the top/title bars stay fixed.
+ *
+ * Wiki: docs/components/PageShell.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+
+export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
+  topBar?: ReactNode;
+  sidebar?: ReactNode;
+  titleBar?: ReactNode;
+}
+
+export const PageShell = forwardRef<HTMLDivElement, PageShellProps>(function PageShell(
+  { className, topBar, sidebar, titleBar, children, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex h-screen flex-col overflow-hidden bg-background', className)}
+      {...props}
+    >
+      {topBar}
+      <div className="relative flex flex-1 overflow-hidden">
+        {sidebar}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {titleBar}
+          <div className="flex-1 overflow-y-auto bg-muted p-4 pb-24 md:p-6 lg:px-12 lg:py-8">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});