@mihcm/ui 0.14.1

package/src/InputOTP.native.tsx

@@ -0,0 +1,154 @@
+/**
+ * InputOTP (React Native variant).
+ *
+ * A row of individual TextInput cells for entering verification codes.
+ * Same composable API as the web variant.
+ *
+ * Wiki: docs/components/InputOTP.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useCallback,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  TextInput,
+  View,
+  Text,
+  Pressable,
+  type ViewProps,
+  type TextInputProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface InputOTPContextValue {
+  value: string;
+  maxLength: number;
+  onChange: (value: string) => void;
+  focusedIndex: number;
+  setFocusedIndex: (index: number) => void;
+}
+
+const InputOTPCtx = createContext<InputOTPContextValue | null>(null);
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export interface InputOTPProps extends ClassedViewProps {
+  maxLength: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  children: ReactNode;
+}
+
+export const InputOTP = forwardRef<View, InputOTPProps>(
+  function InputOTP({ maxLength, value = '', onChange, className, children, ...props }, ref) {
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        const sanitised = v.replace(/[^0-9a-zA-Z]/g, '').slice(0, maxLength);
+        onChange?.(sanitised);
+      },
+      [maxLength, onChange],
+    );
+
+    return (
+      <InputOTPCtx.Provider
+        value={{ value, maxLength, onChange: handleChange, focusedIndex, setFocusedIndex }}
+      >
+        <View
+          ref={ref}
+          className={cn('flex-row items-center gap-2', className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </InputOTPCtx.Provider>
+    );
+  },
+);
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export const InputOTPGroup = forwardRef<View, ClassedViewProps>(
+  function InputOTPGroup({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('flex-row items-center', className)} {...props} />
+    );
+  },
+);
+
+/* ── Slot ──────────────────────────────────────────────────────────── */
+
+export interface InputOTPSlotProps extends ClassedViewProps {
+  index: number;
+}
+
+export const InputOTPSlot = forwardRef<View, InputOTPSlotProps>(
+  function InputOTPSlot({ index, className, ...props }, ref) {
+    const ctx = useContext(InputOTPCtx);
+    if (!ctx) throw new Error('InputOTPSlot must be used within <InputOTP>.');
+
+    const char = ctx.value[index] ?? '';
+    const isActive = ctx.focusedIndex === index;
+    const inputRef = useRef<TextInput>(null);
+
+    return (
+      <Pressable
+        onPress={() => {
+          inputRef.current?.focus();
+          ctx.setFocusedIndex(index);
+        }}
+      >
+        <View
+          ref={ref}
+          className={cn(
+            'h-12 w-12 items-center justify-center border border-border rounded-lg',
+            isActive && 'border-primary',
+            className,
+          )}
+          {...props}
+        >
+          <Text className="text-lg text-foreground">{char}</Text>
+          {/* Hidden input for keyboard interaction */}
+          <TextInput
+            ref={inputRef}
+            className="absolute h-0 w-0 opacity-0"
+            maxLength={1}
+            keyboardType="number-pad"
+            value={char}
+            onChangeText={(text) => {
+              const newValue = ctx.value.slice(0, index) + text + ctx.value.slice(index + 1);
+              ctx.onChange(newValue);
+              if (text && index < ctx.maxLength - 1) {
+                ctx.setFocusedIndex(index + 1);
+              }
+            }}
+            onFocus={() => ctx.setFocusedIndex(index)}
+            onBlur={() => ctx.setFocusedIndex(-1)}
+          />
+        </View>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Separator ────────────────────────────────────────────────────── */
+
+export const InputOTPSeparator = forwardRef<View, ClassedViewProps>(
+  function InputOTPSeparator({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('px-1', className)} {...props}>
+        <Text className="text-muted-foreground">—</Text>
+      </View>
+    );
+  },
+);

package/src/InputOTP.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+/**
+ * InputOTP (web variant — React DOM).
+ *
+ * One-time password / verification code input powered by `input-otp`.
+ *
+ *   <InputOTP maxLength={6} value={value} onChange={setValue}>
+ *     <InputOTPGroup>
+ *       <InputOTPSlot index={0} />
+ *       <InputOTPSlot index={1} />
+ *       <InputOTPSlot index={2} />
+ *     </InputOTPGroup>
+ *     <InputOTPSeparator />
+ *     <InputOTPGroup>
+ *       <InputOTPSlot index={3} />
+ *       <InputOTPSlot index={4} />
+ *       <InputOTPSlot index={5} />
+ *     </InputOTPGroup>
+ *   </InputOTP>
+ *
+ * Wiki: docs/components/InputOTP.md
+ */
+import {
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { cn } from './internal/cn.js';
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export const InputOTP = forwardRef<
+  ElementRef<typeof OTPInput>,
+  ComponentPropsWithoutRef<typeof OTPInput>
+>(function InputOTP({ className, containerClassName, ...props }, ref) {
+  return (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn(
+        'flex items-center gap-2 has-[:disabled]:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export const InputOTPGroup = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<'div'>
+>(function InputOTPGroup({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+});
+
+/* ── Slot ──────────────────────────────────────────────────────────── */
+
+export interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {
+  index: number;
+}
+
+export const InputOTPSlot = forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  function InputOTPSlot({ index, className, ...props }, ref) {
+    const inputOTPContext = useContext(OTPInputContext);
+    const slot = inputOTPContext.slots[index];
+
+    if (!slot) return null;
+
+    const { char, hasFakeCaret, isActive } = slot;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex h-10 w-10 items-center justify-center',
+          'border-y border-r border-border text-body-sm',
+          'transition-all duration-150',
+          'first:rounded-l-lg first:border-l last:rounded-r-lg',
+          isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+          className,
+        )}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/* ── Separator ────────────────────────────────────────────────────── */
+
+export const InputOTPSeparator = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<'div'>
+>(function InputOTPSeparator({ ...props }, ref) {
+  return (
+    <div ref={ref} role="separator" {...props}>
+      <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2} className="h-4 w-4 text-muted-foreground">
+        <path strokeLinecap="round" d="M5 8h6" />
+      </svg>
+    </div>
+  );
+});

package/src/Label.native.tsx

@@ -0,0 +1,55 @@
+/**
+ * Label (React Native variant).
+ *
+ * Renders RN `<Text>` with `accessibilityRole="text"`. `htmlFor` is
+ * preserved on the type surface for prop parity but has no effect on
+ * native — pair Inputs with `accessibilityLabel` directly.
+ *
+ * Wiki: docs/components/Label.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, type TextProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const labelVariants = cva('text-sm font-medium leading-none', {
+  variants: {
+    tone: {
+      default: 'text-foreground',
+      muted: 'text-muted-foreground',
+      destructive: 'text-destructive',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+});
+
+type LabelVariantProps = VariantProps<typeof labelVariants>;
+
+export interface LabelProps
+  extends Omit<TextProps, 'style'>,
+    LabelVariantProps {
+  /** Ignored on native; kept for prop parity with the web variant. */
+  htmlFor?: string;
+  required?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Label = forwardRef<Text, LabelProps>(function Label(
+  { className, tone, required, children, htmlFor: _htmlFor, ...props },
+  ref,
+) {
+  return (
+    <Text
+      ref={ref}
+      accessibilityRole="text"
+      className={cn(labelVariants({ tone }), className)}
+      {...props}
+    >
+      {children}
+      {required ? ' *' : null}
+    </Text>
+  );
+});

package/src/Label.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+/**
+ * Label (web variant — React DOM).
+ *
+ * Renders a `<label>` element. Pair with `Input`/`Switch`/`Checkbox`
+ * via the `htmlFor` prop so the click target is large and screen
+ * readers announce the field name correctly.
+ *
+ * Universal contract: same prop API on web and native; `htmlFor`
+ * exists on both (on native it's preserved for prop parity but
+ * ignored — RN uses `accessibilityLabel` on the input itself).
+ *
+ * Wiki: docs/components/Label.md
+ */
+import { forwardRef, type LabelHTMLAttributes } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const labelVariants = cva(
+  'text-body-sm font-semibold leading-none ' +
+    'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+  {
+    variants: {
+      tone: {
+        default: 'text-foreground',
+        muted: 'text-muted-foreground',
+        destructive: 'text-destructive',
+      },
+    },
+    defaultVariants: {
+      tone: 'default',
+    },
+  },
+);
+
+type LabelVariantProps = VariantProps<typeof labelVariants>;
+
+export interface LabelProps
+  extends LabelHTMLAttributes<HTMLLabelElement>,
+    LabelVariantProps {
+  /** Optional asterisk suffix for required-field visual cue. Not a substitute for `aria-required`. */
+  required?: boolean;
+}
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { className, tone, required, children, ...props },
+  ref,
+) {
+  return (
+    <label ref={ref} className={cn(labelVariants({ tone }), className)} {...props}>
+      {children}
+      {required && (
+        <span aria-hidden className="ml-0.5 text-destructive">
+          *
+        </span>
+      )}
+    </label>
+  );
+});

package/src/Link.native.tsx

@@ -0,0 +1,89 @@
+/**
+ * Link (React Native variant).
+ *
+ * Same prop API as web where practical. `href` is accepted for parity; native
+ * apps should provide `onPress` navigation through the host router.
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Linking, Pressable, Text, type PressableProps, View } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+const linkContainerVariants = cva('flex-row items-center gap-1 rounded-sm', {
+  variants: {
+    variant: {
+      inline: '',
+      accent: '',
+      muted: '',
+      foreground: '',
+      nav: '',
+      standalone: '',
+      button: 'rounded-md border border-border bg-background px-3 py-2',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'inline',
+    size: 'md',
+  },
+});
+
+export const linkVariants = cva('font-medium', {
+  variants: {
+    variant: {
+      inline: 'text-primary',
+      accent: 'text-accent',
+      muted: 'text-muted-foreground',
+      foreground: 'text-foreground',
+      nav: 'text-muted-foreground',
+      standalone: 'text-primary',
+      button: 'text-primary',
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    variant: 'inline',
+    size: 'md',
+  },
+});
+
+export interface LinkProps
+  extends Omit<PressableProps, 'children'>,
+    VariantProps<typeof linkVariants> {
+  href?: string;
+  external?: boolean;
+  showExternalIndicator?: boolean;
+  className?: string;
+  textClassName?: string;
+  children: ReactNode;
+}
+
+export const Link = forwardRef<View, LinkProps>(function Link(
+  { className, textClassName, variant, size, href, disabled, onPress, showExternalIndicator = false, children, ...props },
+  ref,
+) {
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="link"
+      accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled}
+      onPress={onPress ?? (href ? () => void Linking.openURL(href) : undefined)}
+      className={cn(linkContainerVariants({ variant, size }), disabled && 'opacity-50', className)}
+      {...props}
+    >
+      <Text className={cn(linkVariants({ variant, size }), textClassName)}>
+        {children}
+        {showExternalIndicator ? ' ↗' : ''}
+      </Text>
+    </Pressable>
+  );
+});

package/src/Link.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+/**
+ * Link (web variant).
+ *
+ * Semantic anchor primitive for navigation and inline references. Use Button
+ * for side effects; use Link for real href navigation.
+ *
+ * Wiki: docs/components/Link.md
+ */
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const linkVariants = cva(
+  'inline-flex items-center gap-1 rounded-sm font-medium underline-offset-4 transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        inline: 'text-primary hover:text-primary/80 hover:underline',
+        accent: 'text-accent hover:text-accent/80 hover:underline',
+        muted: 'text-muted-foreground hover:text-foreground hover:underline',
+        foreground: 'text-foreground hover:text-primary hover:underline',
+        nav: 'text-muted-foreground no-underline hover:text-foreground data-[active=true]:text-primary',
+        standalone: 'text-primary no-underline hover:text-primary/80 hover:underline',
+        button:
+          'rounded-md border border-border bg-background px-3 py-2 text-body-sm text-foreground shadow-mi-card hover:bg-muted',
+      },
+      size: {
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'inline',
+      size: 'md',
+    },
+  },
+);
+
+export interface LinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  external?: boolean;
+  showExternalIndicator?: boolean;
+  children: ReactNode;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  {
+    className,
+    variant,
+    size,
+    external,
+    showExternalIndicator = external,
+    target,
+    rel,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const linkTarget = external ? (target ?? '_blank') : target;
+  const opensNewContext = linkTarget === '_blank';
+  const linkRel = external || opensNewContext ? mergeRel(rel, 'noopener noreferrer') : rel;
+
+  return (
+    <a
+      ref={ref}
+      target={linkTarget}
+      rel={linkRel}
+      className={cn(linkVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+      {showExternalIndicator ? <span aria-hidden="true">↗</span> : null}
+    </a>
+  );
+});
+
+function mergeRel(current: string | undefined, required: string): string {
+  return Array.from(new Set([...(current?.split(/\s+/) ?? []), ...required.split(/\s+/)].filter(Boolean))).join(' ');
+}

package/src/Logo.native.tsx

@@ -0,0 +1,114 @@
+import { forwardRef } from 'react';
+import { Image, Text, View, type DimensionValue, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export type LogoVariant = 'primary' | 'white' | 'black' | 'current';
+export type LogoSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export type LogoBrand =
+  | 'mihcm'
+  | 'mihcm-lite'
+  | 'mia-one'
+  | 'smart-assist'
+  | 'syntra'
+  | 'smart-assist-icon'
+  | 'syntra-icon'
+  | 'mihcm-favicon';
+export type LogoAssetVariant = 'primary' | 'secondary' | 'white' | 'black';
+
+export interface LogoProps extends ViewProps {
+  variant?: LogoVariant;
+  size?: LogoSize;
+  brand?: LogoBrand;
+  assetVariant?: LogoAssetVariant;
+  assetBasePath?: string;
+  src?: string;
+  alt?: string;
+  className?: string;
+}
+
+const sizeHeights: Record<LogoSize, number> = {
+  sm: 20,
+  md: 24,
+  lg: 32,
+  xl: 56,
+  xxl: 80,
+  xxxl: 112,
+};
+
+const logoAspectRatio: Record<LogoBrand | 'inline', number> = {
+  inline: 35 / 23,
+  mihcm: 128 / 86,
+  'mihcm-lite': 128 / 88,
+  'mia-one': 128 / 87,
+  'smart-assist': 292 / 50,
+  syntra: 259 / 64,
+  'smart-assist-icon': 128 / 99,
+  'syntra-icon': 128 / 127,
+  'mihcm-favicon': 176 / 118,
+};
+
+const textClasses: Record<LogoVariant, string> = {
+  primary: 'text-primary',
+  white: 'text-primary-foreground',
+  black: 'text-foreground',
+  current: 'text-current',
+};
+
+export function getLogoAssetPath(
+  brand: LogoBrand,
+  assetVariant: LogoAssetVariant = 'primary',
+  assetBasePath = '/brand/logos',
+) {
+  const base = assetBasePath.replace(/\/$/, '');
+  return `${base}/${brand}-${assetVariant}.svg`;
+}
+
+export function getLogoSizeStyle(brand: LogoBrand | undefined, size: LogoSize) {
+  const height = sizeHeights[size];
+  const ratio = logoAspectRatio[brand ?? 'inline'];
+
+  return {
+    height,
+    width: Math.round(height * ratio * 1000) / 1000,
+  } satisfies { height: DimensionValue; width: DimensionValue };
+}
+
+export const Logo = forwardRef<View, LogoProps>(function Logo(
+  {
+    className,
+    variant = 'primary',
+    size = 'md',
+    brand,
+    assetVariant = 'primary',
+    assetBasePath,
+    src,
+    alt = 'MiHCM',
+    style,
+    ...props
+  },
+  ref,
+) {
+  const resolvedSrc = src ?? (brand ? getLogoAssetPath(brand, assetVariant, assetBasePath) : undefined);
+
+  return (
+    <View
+      ref={ref}
+      accessibilityRole={alt ? 'image' : 'none'}
+      accessibilityLabel={alt || undefined}
+      className={cn('shrink-0 items-center justify-center', className)}
+      style={[getLogoSizeStyle(brand, size), style]}
+      {...props}
+    >
+      {resolvedSrc ? (
+        <Image
+          source={{ uri: resolvedSrc }}
+          accessibilityLabel={alt || undefined}
+          className="size-full"
+          resizeMode="contain"
+        />
+      ) : (
+        <Text className={cn('text-lg font-bold leading-none', textClasses[variant])}>mi</Text>
+      )}
+    </View>
+  );
+});