@mihcm/ui 0.14.1

package/src/SearchField.native.tsx

@@ -0,0 +1,104 @@
+/**
+ * SearchField (React Native variant).
+ *
+ * Same prop API as the web variant. Built on RN primitives directly
+ * (not on `Input`) so TypeScript can pick the right `View`/`TextInput`
+ * types without depending on the platform's export condition at
+ * type-check time.
+ *
+ * The icon and clear glyph are rendered as plain unicode characters
+ * inside `<Text>` to keep the package zero-dep — consumers wanting
+ * vector icons can pass their own via `trailingSlot`.
+ *
+ * Wiki: docs/components/SearchField.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  type TextInputProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type SearchFieldSize = 'sm' | 'md' | 'lg';
+
+const HEIGHT: Record<SearchFieldSize, string> = {
+  sm: 'h-9',
+  md: 'h-10',
+  lg: 'h-12',
+};
+
+const SearchGlyph = ({ small }: { small?: boolean }) => (
+  <Text className={cn('text-muted-foreground', small ? 'text-xs' : 'text-sm')}>
+    {'\u{1F50D}'}
+  </Text>
+);
+
+const ClearGlyph = () => (
+  <Text className="text-muted-foreground text-xs">{'✕'}</Text>
+);
+
+export interface SearchFieldProps
+  extends Omit<TextInputProps, 'value' | 'onChangeText' | 'style'> {
+  value: string;
+  onValueChange: (value: string) => void;
+  size?: SearchFieldSize;
+  placeholder?: string;
+  className?: string;
+  trailingSlot?: ReactNode;
+  noClear?: boolean;
+  /** Accessible label for the clear button. */
+  clearLabel?: string;
+}
+
+export const SearchField = forwardRef<TextInput, SearchFieldProps>(function SearchField(
+  {
+    value,
+    onValueChange,
+    size = 'md',
+    placeholder = 'Search…',
+    className,
+    trailingSlot,
+    noClear = false,
+    clearLabel = 'Clear search',
+    accessibilityLabel,
+    ...props
+  },
+  ref,
+) {
+  const showClear = !noClear && value.length > 0;
+
+  return (
+    <View
+      className={cn(
+        'flex-row items-center gap-2 rounded-lg border border-border bg-card px-3.5 shadow-mi-input',
+        HEIGHT[size],
+        className,
+      )}
+    >
+      <SearchGlyph small={size === 'sm'} />
+      <TextInput
+        ref={ref}
+        value={value}
+        onChangeText={onValueChange}
+        placeholder={placeholder}
+        accessibilityLabel={accessibilityLabel ?? placeholder}
+        className="flex-1 text-foreground"
+        {...props}
+      />
+      {showClear ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={clearLabel}
+          onPress={() => onValueChange('')}
+          className="h-5 w-5 items-center justify-center rounded"
+        >
+          <ClearGlyph />
+        </Pressable>
+      ) : null}
+      {trailingSlot ? <View>{trailingSlot}</View> : null}
+    </View>
+  );
+});

package/src/SearchField.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * SearchField (web variant — React DOM).
+ *
+ * Sugar wrapper around `Input` that ships the magnifier glyph, an
+ * optional clear button, and `role="search"` for screen readers.
+ * Used in the MiHCM Security prototype's Employee Lookup bar, the
+ * filter input inside `CheckboxGrid`, and the dual `TransferList`
+ * filter inputs.
+ *
+ * Controlled-only — pass `value` + `onValueChange`. For uncontrolled
+ * use, wrap with `useState`.
+ *
+ * Wiki: docs/components/SearchField.md
+ */
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Input } from './Input.js';
+import { cn } from './internal/cn.js';
+
+export const searchFieldSizes = cva('', {
+  variants: {
+    size: { sm: '', md: '', lg: '' },
+  },
+  defaultVariants: { size: 'md' },
+});
+
+type SearchFieldSize = NonNullable<VariantProps<typeof searchFieldSizes>['size']>;
+
+const SearchIcon = ({ size }: { size: SearchFieldSize }) => (
+  <svg
+    aria-hidden
+    className={cn(size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5')}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const ClearIcon = () => (
+  <svg
+    aria-hidden
+    className="h-3.5 w-3.5"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+export interface SearchFieldProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'value' | 'defaultValue' | 'onChange' | 'type'
+  > {
+  /** Current value. */
+  value: string;
+  /** Fired when the input changes (or the clear button is pressed). */
+  onValueChange: (value: string) => void;
+  /** Input height. Defaults to `md`. */
+  size?: SearchFieldSize;
+  /** Placeholder. Defaults to `Search…`. */
+  placeholder?: string;
+  /** Wrapper className. */
+  className?: string;
+  /** Forwarded to the underlying input element. */
+  inputClassName?: string;
+  /** Optional element rendered after the clear button (e.g. shortcut hint). */
+  trailingSlot?: ReactNode;
+  /** Disable the clear button even when `value` is non-empty. */
+  noClear?: boolean;
+  /** Accessible label for the clear button. Defaults to `"Clear search"`. */
+  clearLabel?: string;
+}
+
+export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
+  function SearchField(
+    {
+      value,
+      onValueChange,
+      size = 'md',
+      placeholder = 'Search…',
+      className,
+      inputClassName,
+      trailingSlot,
+      noClear = false,
+      clearLabel = 'Clear search',
+      ...props
+    },
+    ref,
+  ) {
+    const showClear = !noClear && value.length > 0;
+    const trailing =
+      showClear || trailingSlot ? (
+        <span className="flex items-center gap-1">
+          {showClear ? (
+            <button
+              type="button"
+              aria-label={clearLabel}
+              onClick={() => onValueChange('')}
+              className="grid h-5 w-5 place-items-center rounded text-muted-foreground hover:bg-muted hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <ClearIcon />
+            </button>
+          ) : null}
+          {trailingSlot}
+        </span>
+      ) : undefined;
+
+    return (
+      <Input
+        ref={ref}
+        type="search"
+        value={value}
+        size={size}
+        placeholder={placeholder}
+        leadingIcon={<SearchIcon size={size} />}
+        trailingIcon={trailing}
+        {...(className ? { className } : {})}
+        inputClassName={cn(
+          'mihcm-search-input',
+          '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',
+          inputClassName,
+        )}
+        onChange={(e) => onValueChange(e.target.value)}
+        {...props}
+      />
+    );
+  },
+);

package/src/SectionHeader.native.tsx

@@ -0,0 +1,226 @@
+/**
+ * SectionHeader (React Native variant).
+ *
+ * Same prop API as the web variant. Renders View + Text, sized to
+ * match the prototype.
+ *
+ * Wiki: docs/components/SectionHeader.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export type SectionHeaderSpace = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionHeaderSurface =
+  | 'transparent'
+  | 'card'
+  | 'muted'
+  | 'primary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'destructive';
+export type SectionHeaderBorder = 'none' | 'top' | 'bottom' | 'y' | 'full';
+export type SectionHeaderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type SectionHeaderShadow = 'none' | 'sm' | 'md';
+type SpacingClassMap = Record<'all' | 'x' | 'y' | 't' | 'r' | 'b' | 'l', Record<SectionHeaderSpace, string>>;
+
+export interface SectionHeaderProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  padding?: SectionHeaderSpace;
+  paddingX?: SectionHeaderSpace;
+  paddingY?: SectionHeaderSpace;
+  paddingTop?: SectionHeaderSpace;
+  paddingRight?: SectionHeaderSpace;
+  paddingBottom?: SectionHeaderSpace;
+  paddingLeft?: SectionHeaderSpace;
+  margin?: SectionHeaderSpace;
+  marginX?: SectionHeaderSpace;
+  marginY?: SectionHeaderSpace;
+  marginTop?: SectionHeaderSpace;
+  marginRight?: SectionHeaderSpace;
+  marginBottom?: SectionHeaderSpace;
+  marginLeft?: SectionHeaderSpace;
+  surface?: SectionHeaderSurface;
+  border?: SectionHeaderBorder;
+  radius?: SectionHeaderRadius;
+  shadow?: SectionHeaderShadow;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  contentClassName?: string;
+  actionClassName?: string;
+}
+
+const paddingClasses = {
+  all: { none: 'p-0', xs: 'p-2', sm: 'p-3', md: 'p-4', lg: 'p-6', xl: 'p-8' },
+  x: { none: 'px-0', xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-6', xl: 'px-8' },
+  y: { none: 'py-0', xs: 'py-2', sm: 'py-3', md: 'py-4', lg: 'py-6', xl: 'py-8' },
+  t: { none: 'pt-0', xs: 'pt-2', sm: 'pt-3', md: 'pt-4', lg: 'pt-6', xl: 'pt-8' },
+  r: { none: 'pr-0', xs: 'pr-2', sm: 'pr-3', md: 'pr-4', lg: 'pr-6', xl: 'pr-8' },
+  b: { none: 'pb-0', xs: 'pb-2', sm: 'pb-3', md: 'pb-4', lg: 'pb-6', xl: 'pb-8' },
+  l: { none: 'pl-0', xs: 'pl-2', sm: 'pl-3', md: 'pl-4', lg: 'pl-6', xl: 'pl-8' },
+} as const satisfies SpacingClassMap;
+
+const marginClasses = {
+  all: { none: 'm-0', xs: 'm-2', sm: 'm-3', md: 'm-4', lg: 'm-6', xl: 'm-8' },
+  x: { none: 'mx-0', xs: 'mx-2', sm: 'mx-3', md: 'mx-4', lg: 'mx-6', xl: 'mx-8' },
+  y: { none: 'my-0', xs: 'my-2', sm: 'my-3', md: 'my-4', lg: 'my-6', xl: 'my-8' },
+  t: { none: 'mt-0', xs: 'mt-2', sm: 'mt-3', md: 'mt-4', lg: 'mt-6', xl: 'mt-8' },
+  r: { none: 'mr-0', xs: 'mr-2', sm: 'mr-3', md: 'mr-4', lg: 'mr-6', xl: 'mr-8' },
+  b: { none: 'mb-0', xs: 'mb-2', sm: 'mb-3', md: 'mb-4', lg: 'mb-6', xl: 'mb-8' },
+  l: { none: 'ml-0', xs: 'ml-2', sm: 'ml-3', md: 'ml-4', lg: 'ml-6', xl: 'ml-8' },
+} as const satisfies SpacingClassMap;
+
+const surfaceClasses: Record<SectionHeaderSurface, string> = {
+  transparent: '',
+  card: 'bg-card text-card-foreground',
+  muted: 'bg-muted text-foreground',
+  primary: 'bg-primary text-primary-foreground',
+  accent: 'bg-accent text-accent-foreground',
+  success: 'bg-success text-success-foreground',
+  warning: 'bg-warning text-warning-foreground',
+  destructive: 'bg-destructive text-destructive-foreground',
+};
+
+const borderClasses: Record<SectionHeaderBorder, string> = {
+  none: '',
+  top: 'border-t border-border',
+  bottom: 'border-b border-border',
+  y: 'border-y border-border',
+  full: 'border border-border',
+};
+
+const radiusClasses: Record<SectionHeaderRadius, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+};
+
+const shadowClasses: Record<SectionHeaderShadow, string> = {
+  none: '',
+  sm: 'shadow-sm',
+  md: 'shadow-md',
+};
+
+function spacingClasses(
+  map: SpacingClassMap,
+  all?: SectionHeaderSpace,
+  x?: SectionHeaderSpace,
+  y?: SectionHeaderSpace,
+  top?: SectionHeaderSpace,
+  right?: SectionHeaderSpace,
+  bottom?: SectionHeaderSpace,
+  left?: SectionHeaderSpace,
+) {
+  return [
+    all && map.all[all],
+    x && map.x[x],
+    y && map.y[y],
+    top && map.t[top],
+    right && map.r[right],
+    bottom && map.b[bottom],
+    left && map.l[left],
+  ];
+}
+
+function toneClasses(surface: SectionHeaderSurface) {
+  const foreground: Partial<Record<SectionHeaderSurface, { title: string; description: string }>> = {
+    primary: { title: 'text-primary-foreground', description: 'text-primary-foreground/80' },
+    accent: { title: 'text-accent-foreground', description: 'text-accent-foreground/80' },
+    success: { title: 'text-success-foreground', description: 'text-success-foreground/80' },
+    warning: { title: 'text-warning-foreground', description: 'text-warning-foreground/80' },
+    destructive: {
+      title: 'text-destructive-foreground',
+      description: 'text-destructive-foreground/80',
+    },
+  };
+  const color = foreground[surface];
+
+  return {
+    title: color?.title ?? 'text-foreground',
+    description: color?.description ?? 'text-muted-foreground',
+  };
+}
+
+export const SectionHeader = forwardRef<View, SectionHeaderProps>(function SectionHeader(
+  {
+    className,
+    title,
+    description,
+    action,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    surface = 'transparent',
+    border = 'none',
+    radius = 'none',
+    shadow = 'none',
+    titleClassName,
+    descriptionClassName,
+    contentClassName,
+    actionClassName,
+    ...props
+  },
+  ref,
+) {
+  const tones = toneClasses(surface);
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        'mt-5 mb-2 flex-row items-start justify-between gap-3',
+        surfaceClasses[surface],
+        borderClasses[border],
+        radiusClasses[radius],
+        shadowClasses[shadow],
+        spacingClasses(
+          paddingClasses,
+          padding,
+          paddingX,
+          paddingY,
+          paddingTop,
+          paddingRight,
+          paddingBottom,
+          paddingLeft,
+        ),
+        spacingClasses(
+          marginClasses,
+          margin,
+          marginX,
+          marginY,
+          marginTop,
+          marginRight,
+          marginBottom,
+          marginLeft,
+        ),
+        className,
+      )}
+      {...props}
+    >
+      <View className={cn('flex-1', contentClassName)}>
+        <Text className={cn('text-body font-semibold', tones.title, titleClassName)}>{title}</Text>
+        {description ? (
+          <Text className={cn('text-xs', tones.description, descriptionClassName)}>{description}</Text>
+        ) : null}
+      </View>
+      {action ? <View className={cn('flex-shrink-0', actionClassName)}>{action}</View> : null}
+    </View>
+  );
+});