@mihcm/ui 0.14.1

package/src/Tag.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+/**
+ * Tag (web variant — React DOM).
+ *
+ * Label chip with optional remove action. Like Badge but interactive —
+ * can be removed via the X button.
+ *
+ * Wiki: docs/components/Tag.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-full ' +
+    'font-medium leading-none border border-transparent transition-colors duration-150',
+  {
+    variants: {
+      variant: {
+        default: 'bg-brand-neutral-66 text-secondary-foreground',
+        primary: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
+        accent: 'bg-accent-50 text-accent-600 dark:bg-accent-950 dark:text-accent-300',
+        destructive: 'bg-red-100 text-destructive',
+        success: 'bg-green-100 text-success',
+        warning: 'bg-yellow-100 text-warning',
+      },
+      size: {
+        sm: 'text-xs px-1.5 py-0.5',
+        md: 'text-xs px-2 py-0.5',
+        lg: 'text-sm px-2.5 py-1',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+type TagVariantProps = VariantProps<typeof tagVariants>;
+
+export interface TagProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    TagVariantProps {
+  /** When provided, renders a remove (x) button. */
+  onRemove?: () => void;
+  /** Convenience alias — when true, renders the remove button (fires no-op if onRemove is missing). */
+  removable?: boolean;
+}
+
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  { className, variant, size, onRemove, removable, children, ...props },
+  ref,
+) {
+  const showRemove = onRemove !== undefined || removable === true;
+  const handleRemove = onRemove ?? (() => {});
+
+  return (
+    <span
+      ref={ref}
+      className={cn(tagVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); handleRemove(); }}
+          aria-label="Remove"
+          className={cn(
+            'rounded-full opacity-60 hover:opacity-100 transition-opacity',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            size === 'sm' ? 'p-px' : 'p-0.5',
+          )}
+        >
+          <svg
+            aria-hidden
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            className={cn(
+              size === 'lg' ? 'h-3 w-3' : 'h-2.5 w-2.5',
+            )}
+          >
+            <path strokeLinecap="round" d="M4 12L12 4M4 4l8 8" />
+          </svg>
+        </button>
+      )}
+    </span>
+  );
+});

package/src/Text.native.tsx

@@ -0,0 +1,95 @@
+/**
+ * Text (React Native variant). Same prop API as the web variant.
+ * Wiki: docs/components/Text.md
+ */
+import { forwardRef } from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export type TextElement =
+  | 'span'
+  | 'p'
+  | 'div'
+  | 'strong'
+  | 'em'
+  | 'small'
+  | 'label'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6';
+
+export const textVariants = cva('text-foreground', {
+  variants: {
+    size: {
+      /* Standard Tailwind scale */
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      /* Semantic aliases mapped to Tailwind default steps */
+      caption: 'text-caption',       /* text-xs */
+      label: 'text-label',            /* text-sm */
+      'body-sm': 'text-body-sm',      /* text-sm */
+      body: 'text-body',              /* text-base */
+      title: 'text-title',            /* text-2xl */
+      stat: 'text-stat',              /* text-2xl */
+      'stat-sm': 'text-stat-sm',      /* text-xl */
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    tone: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+      destructive: 'text-destructive',
+      success: 'text-success',
+      warning: 'text-warning',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    weight: 'normal',
+    tone: 'default',
+  },
+});
+
+export interface TextProps
+  extends RNTextProps,
+    VariantProps<typeof textVariants> {
+  /**
+   * Kept for web/native API parity. Native always renders RN Text; heading
+   * elements map to `accessibilityRole="header"` unless explicitly set.
+   */
+  as?: TextElement;
+  className?: string;
+}
+
+function isHeadingElement(as?: TextElement): boolean {
+  return as === 'h1' || as === 'h2' || as === 'h3' || as === 'h4' || as === 'h5' || as === 'h6';
+}
+
+export const Text = forwardRef<RNText, TextProps>(function Text(
+  { as, accessibilityRole, className, size, weight, tone, ...props },
+  ref,
+) {
+  return (
+    <RNText
+      ref={ref}
+      accessibilityRole={accessibilityRole ?? (isHeadingElement(as) ? 'header' : undefined)}
+      className={cn(textVariants({ size, weight, tone }), className)}
+      {...props}
+    />
+  );
+});

package/src/Text.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+/**
+ * Text (web variant).
+ *
+ * Native variant lives at `Text.native.tsx`.
+ *
+ * Variants align with our type scale (xs..5xl) and weight tokens.
+ *
+ * Wiki: docs/components/Text.md
+ */
+import { createElement, forwardRef, type HTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export type TextElement =
+  | 'span'
+  | 'p'
+  | 'div'
+  | 'strong'
+  | 'em'
+  | 'small'
+  | 'label'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6';
+
+export const textVariants = cva('text-foreground', {
+  variants: {
+    size: {
+      /* Standard Tailwind scale */
+      xs: 'text-xs leading-snug',
+      sm: 'text-sm leading-snug',
+      base: 'text-base leading-normal',
+      lg: 'text-lg leading-normal',
+      xl: 'text-xl leading-snug',
+      '2xl': 'text-2xl leading-tight',
+      '3xl': 'text-3xl leading-tight',
+      '4xl': 'text-4xl leading-tight',
+      '5xl': 'text-5xl leading-tight',
+      /* Semantic aliases mapped to Tailwind default steps */
+      caption: 'text-caption leading-none',       /* text-xs */
+      label: 'text-label leading-none',            /* text-sm */
+      'body-sm': 'text-body-sm leading-snug',      /* text-sm */
+      body: 'text-body leading-normal',            /* text-base */
+      title: 'text-title leading-tight',           /* text-2xl */
+      stat: 'text-stat leading-none',              /* text-2xl */
+      'stat-sm': 'text-stat-sm leading-none',      /* text-xl */
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    tone: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+      destructive: 'text-destructive',
+      success: 'text-success',
+      warning: 'text-warning',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    weight: 'normal',
+    tone: 'default',
+  },
+});
+
+export interface TextProps
+  extends HTMLAttributes<HTMLElement>,
+    VariantProps<typeof textVariants> {
+  /**
+   * Semantic element to render on web. Defaults to `span` for inline text.
+   * Use `p` for paragraphs and `h1`..`h6` for document headings.
+   */
+  as?: TextElement;
+}
+
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  { as: Component = 'span', className, size, weight, tone, ...props },
+  ref,
+) {
+  return createElement(Component, {
+    ...props,
+    ref,
+    className: cn(textVariants({ size, weight, tone }), className),
+  });
+});

package/src/Textarea.native.tsx

@@ -0,0 +1,64 @@
+/**
+ * Textarea (React Native variant).
+ *
+ * Multi-line text entry — `<TextInput multiline>` inside a styled
+ * `<View>` wrapper. Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Textarea.md
+ */
+import { forwardRef } from 'react';
+import { TextInput, View, type TextInputProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const textareaVariants = cva('w-full rounded-lg border bg-card px-3 py-2 shadow-mi-input', {
+  variants: {
+    variant: {
+      default: 'border-border',
+      destructive: 'border-destructive',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type TextareaVariantProps = VariantProps<typeof textareaVariants>;
+
+export interface TextareaProps
+  extends Omit<TextInputProps, 'multiline' | 'style' | 'placeholderTextColor'>,
+    TextareaVariantProps {
+  invalid?: boolean;
+  className?: string;
+  inputClassName?: string;
+  /** Visible row count (multiplies by line-height for min-height). Default 3. */
+  rows?: number;
+}
+
+export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
+  { className, inputClassName, variant, invalid, rows = 3, editable, accessibilityState, ...props },
+  ref,
+) {
+  const isDisabled = editable === false;
+  const resolvedVariant = variant ?? (invalid ? 'destructive' : 'default');
+  return (
+    <View
+      className={cn(
+        textareaVariants({ variant: resolvedVariant }),
+        isDisabled && 'opacity-50',
+        className,
+      )}
+    >
+      <TextInput
+        ref={ref}
+        multiline
+        numberOfLines={rows}
+        editable={editable}
+        accessibilityState={{ disabled: !!isDisabled, ...accessibilityState }}
+        className={cn('text-foreground text-base', inputClassName)}
+        style={{ minHeight: rows * 20, textAlignVertical: 'top' }}
+        {...props}
+      />
+    </View>
+  );
+});

package/src/Textarea.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+/**
+ * Textarea (web variant — React DOM).
+ *
+ * Multi-line text entry. Shares the variant + size + invalid model
+ * with Input so a consumer can mix them in a form without restyling.
+ * The wrapper carries the focus ring so leading affordances (if any
+ * future variant adds them) compose cleanly.
+ *
+ * Wiki: docs/components/Textarea.md
+ */
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const textareaVariants = cva(
+  'flex w-full rounded-lg border bg-card text-foreground shadow-mi-input ' +
+    'px-3 py-2 text-body-sm ' +
+    'transition-colors duration-150 ' +
+    'placeholder:text-muted-foreground ' +
+    'focus-visible:outline-none focus-visible:border-primary ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed ' +
+    'resize-y',
+  {
+    variants: {
+      variant: {
+        default: 'border-border',
+        destructive:
+          'border-destructive text-destructive placeholder:text-destructive/70 ' +
+            'focus-visible:border-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type TextareaVariantProps = VariantProps<typeof textareaVariants>;
+
+export interface TextareaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+    TextareaVariantProps {
+  /** Drives both styling and `aria-invalid`. */
+  invalid?: boolean;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, variant, invalid, required, 'aria-invalid': ariaInvalidProp, rows = 3, ...props },
+  ref,
+) {
+  const isInvalid = ariaInvalidProp ?? invalid;
+  const resolvedVariant = variant ?? (isInvalid ? 'destructive' : 'default');
+  return (
+    <textarea
+      ref={ref}
+      rows={rows}
+      required={required}
+      aria-invalid={isInvalid || undefined}
+      aria-required={required || undefined}
+      className={cn(textareaVariants({ variant: resolvedVariant }), className)}
+      {...props}
+    />
+  );
+});

package/src/TitleBar.native.tsx

@@ -0,0 +1,46 @@
+/**
+ * TitleBar (React Native variant).
+ *
+ * Same prop API as the web variant. Drops the responsive breakpoints
+ * and uses native-sized tap padding.
+ *
+ * Wiki: docs/components/TitleBar.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface TitleBarProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  supertitle?: ReactNode;
+  title: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+}
+
+export const TitleBar = forwardRef<View, TitleBarProps>(function TitleBar(
+  { className, supertitle, title, icon, action, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        'flex-row items-center gap-4 border-b border-border bg-card px-4 py-3',
+        className,
+      )}
+      {...props}
+    >
+      {icon ? (
+        <View className="h-7 w-7 items-center justify-center">{icon}</View>
+      ) : null}
+      <View className="flex-1">
+        {supertitle ? (
+          <Text className="text-xs text-muted-foreground">{supertitle}</Text>
+        ) : null}
+        <Text className="text-lg font-bold text-foreground">{title}</Text>
+      </View>
+      {action ? <View>{action}</View> : null}
+    </View>
+  );
+});

package/src/TitleBar.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+/**
+ * TitleBar (web variant — React DOM).
+ *
+ * Sticky page heading shown under the TopBar. Extracted from the
+ * MiHCM Security prototype:
+ *   <div class="bg-white flex items-center gap-4 ... border-b">
+ *     <svg class="w-6 h-6 text-mi-txt" .../>
+ *     <div class="text-mi-txt">
+ *       <div class="text-xs">User Administration</div>
+ *       <div class="text-lg font-bold">Security & Permissions</div>
+ *     </div>
+ *   </div>
+ *
+ * Props are content-only — the consumer passes the icon as a node so
+ * any SVG (Lucide, raw `<svg>`, custom) can be used.
+ *
+ * Wiki: docs/components/TitleBar.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { Text } from './Text.js';
+import { cn } from './internal/cn.js';
+
+export interface TitleBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Smaller eyebrow text above the title. */
+  supertitle?: ReactNode;
+  /** Primary heading text. */
+  title: ReactNode;
+  /** Optional leading icon. Sized to 30 px on desktop, 24 px on mobile. */
+  icon?: ReactNode;
+  /** Optional trailing slot (actions, breadcrumbs). */
+  action?: ReactNode;
+}
+
+export const TitleBar = forwardRef<HTMLDivElement, TitleBarProps>(function TitleBar(
+  { className, supertitle, title, icon, action, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-shrink-0 items-center gap-4 border-b border-secondary bg-card px-4 py-3',
+        'md:gap-7 md:px-6 md:py-5 lg:px-10 lg:py-6',
+        className,
+      )}
+      {...props}
+    >
+      {icon ? (
+        <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center text-brand-neutral-436 md:h-7.5 md:w-7.5 [&_svg]:h-full [&_svg]:w-full">
+          {icon}
+        </div>
+      ) : null}
+      <div className="min-w-0 flex-1 leading-normal text-brand-neutral-436">
+        {supertitle ? (
+          <Text size="xs" className="block text-brand-neutral-436 md:text-sm">{supertitle}</Text>
+        ) : null}
+        <Text size="lg" weight="bold" className="block text-brand-neutral-436 md:text-title">{title}</Text>
+      </div>
+      {action ? <div className="flex-shrink-0">{action}</div> : null}
+    </div>
+  );
+});